feat: create OudsBodyText, OudsLabelText, OudsHeadingText and OudsDisplayText components

NOTICE.txt

@@ -123,6 +123,7 @@ theme-orange/src/main/res/drawable/ic_orange_component_button_previous.xml
 theme-orange/src/main/res/drawable/ic_orange_component_checkbox_selected.xml
 theme-orange/src/main/res/drawable/ic_orange_component_checkbox_undetermined.xml
 theme-orange/src/main/res/drawable/ic_orange_component_chip_tick.xml
+theme-orange/src/main/res/drawable/ic_orange_component_heading_text_marker.xml
 theme-orange/src/main/res/drawable/ic_orange_component_link_external_link.xml
 theme-orange/src/main/res/drawable/ic_orange_component_link_next.xml
 theme-orange/src/main/res/drawable/ic_orange_component_link_previous.xml
@@ -205,6 +206,7 @@ theme-wireframe/src/main/res/drawable/ic_wireframe_component_button_previous.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_checkbox_selected.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_checkbox_undetermined.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_chip_tick.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_component_heading_text_marker.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_external_link.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_next.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_previous.xml

app/src/main/java/com/orange/ouds/app/ui/DialogContent.kt

@@ -19,12 +19,13 @@ import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.ui.utilities.composable.AppPreview
+import com.orange.ouds.core.component.OudsHeadingText
+import com.orange.ouds.core.component.OudsHeadingTextSize
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.theme.OudsThemeTweak
 
@@ -39,11 +40,10 @@ fun DialogContent(
             .clip(shape = RoundedCornerShape(28.dp))
             .background(OudsTheme.colorScheme.background.primary)
     ) {
-        Text(
+        OudsHeadingText(
             text = title,
-            color = OudsTheme.colorScheme.content.default,
             modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.large),
-            style = OudsTheme.typography.heading.medium
+            size = OudsHeadingTextSize.Medium
         )
         Column(modifier = Modifier.padding(contentPadding)) {
             content()

app/src/main/java/com/orange/ouds/app/ui/about/AboutMaterialComponentsScreen.kt

@@ -149,6 +149,8 @@ import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
 import com.orange.ouds.app.ui.utilities.topBarsTopPadding
+import com.orange.ouds.core.component.OudsHeadingText
+import com.orange.ouds.core.component.OudsHeadingTextSize
 import com.orange.ouds.core.theme.OudsTheme
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.launch
@@ -910,9 +912,9 @@ private fun TextFieldsSample(enabled: Boolean = true, isError: Boolean = false)
 
 @Composable
 private fun SectionColumn(title: String, horizontalPadding: Boolean = true, verticalSpacing: Boolean = true, content: @Composable () -> Unit) {
-    Text(
+    OudsHeadingText(
         text = title,
-        style = OudsTheme.typography.heading.medium,
+        size = OudsHeadingTextSize.Medium,
         modifier = Modifier
             .padding(bottom = OudsTheme.spaces.fixed.small, top = OudsTheme.spaces.fixed.extraLarge)
             .padding(horizontal = OudsTheme.grids.margin)

app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt

@@ -45,6 +45,9 @@ import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
 import com.orange.ouds.app.ui.utilities.topBarsTopPadding
+import com.orange.ouds.core.component.OudsBodyText
+import com.orange.ouds.core.component.OudsHeadingText
+import com.orange.ouds.core.component.OudsHeadingTextSize
 import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 
@@ -96,8 +99,8 @@ fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
                     modifier = Modifier.listItemHorizontalPadding(),
                     headlineContent = {
                         Column(verticalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.small)) {
-                            Text(text = stringResource(id = R.string.app_about_name_label), style = OudsTheme.typography.heading.extraLarge)
-                            Text(text = version, style = OudsTheme.typography.body.large.default)
+                            OudsHeadingText(text = stringResource(id = R.string.app_about_name_label), size = OudsHeadingTextSize.ExtraLarge)
+                            OudsBodyText(text = version)
                             if (issueNumbers != null) {
                                 val issues = buildAnnotatedString {
                                     append(pluralStringResource(R.plurals.app_about_issues_tech, issueNumbers.count()))

app/src/main/java/com/orange/ouds/app/ui/about/AboutVersionsScreen.kt

@@ -14,18 +14,11 @@ package com.orange.ouds.app.ui.about
 
 import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.WindowInsetsSides
-import androidx.compose.foundation.layout.asPaddingValues
-import androidx.compose.foundation.layout.consumeWindowInsets
-import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource

app/src/main/java/com/orange/ouds/app/ui/components/Component.kt

@@ -49,6 +49,10 @@ import com.orange.ouds.app.ui.components.tag.TagDemoScreen
 import com.orange.ouds.app.ui.components.textarea.TextAreaDemoScreen
 import com.orange.ouds.app.ui.components.textinput.TextInputDemoScreen
 import com.orange.ouds.app.ui.components.topappbar.TopAppBarDemoScreen
+import com.orange.ouds.app.ui.components.typography.BodyTextDemoScreen
+import com.orange.ouds.app.ui.components.typography.DisplayTextDemoScreen
+import com.orange.ouds.app.ui.components.typography.HeadingTextDemoScreen
+import com.orange.ouds.app.ui.components.typography.LabelTextDemoScreen
 import com.orange.ouds.app.ui.utilities.previewCompatibleClass
 
 val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }
@@ -221,6 +225,13 @@ sealed class Component(
         { TopAppBarIllustration() },
         demoScreen = { TopAppBarDemoScreen() }
     )
+
+    data object Typography : Component(
+        R.string.app_components_typography_tech,
+        R.string.app_components_typography_description_text,
+        { TypographyIllustration() },
+        listOf(Variant.BodyText, Variant.DisplayText, Variant.HeadingText, Variant.LabelText)
+    )
 }
 
 sealed class Variant(
@@ -290,4 +301,10 @@ sealed class Variant(
     data object Tag : Variant(R.string.app_components_tag_tag_tech, { TagDemoScreen() })
     data object InputTag : Variant(R.string.app_components_tag_inputTag_tech, { InputTagDemoScreen() })
 
+    // Typography
+    data object BodyText : Variant(R.string.app_components_typography_bodyText_tech, { BodyTextDemoScreen() })
+    data object DisplayText : Variant(R.string.app_components_typography_displayText_tech, { DisplayTextDemoScreen() })
+    data object HeadingText : Variant(R.string.app_components_typography_headingText_tech, { HeadingTextDemoScreen() })
+    data object LabelText : Variant(R.string.app_components_typography_labelText_tech, { LabelTextDemoScreen() })
+
 }

app/src/main/java/com/orange/ouds/app/ui/components/ComponentIllustrations.kt

@@ -55,6 +55,8 @@ import com.orange.ouds.core.component.OudsColoredBox
 import com.orange.ouds.core.component.OudsFilterChip
 import com.orange.ouds.core.component.OudsFloatingActionButton
 import com.orange.ouds.core.component.OudsFloatingActionButtonIcon
+import com.orange.ouds.core.component.OudsHeadingText
+import com.orange.ouds.core.component.OudsHeadingTextSize
 import com.orange.ouds.core.component.OudsHorizontalDivider
 import com.orange.ouds.core.component.OudsLink
 import com.orange.ouds.core.component.OudsLinkIndicator
@@ -333,6 +335,14 @@ fun TopAppBarIllustration() = ComponentIllustration {
     )
 }
 
+@Composable
+fun TypographyIllustration() = ComponentIllustration {
+    OudsHeadingText(
+        text = stringResource(id = R.string.app_components_typography_common_text_label),
+        size = OudsHeadingTextSize.Large()
+    )
+}
+
 @Composable
 private fun ComponentIllustration(content: @Composable () -> Unit) {
     // Do not take user font scale into account

app/src/main/java/com/orange/ouds/app/ui/components/typography/BodyTextDemoScreen.kt

@@ -0,0 +1,92 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.typography
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.utilities.Code
+import com.orange.ouds.app.ui.utilities.composable.AppPreview
+import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
+import com.orange.ouds.app.ui.utilities.composable.CustomizationTextInput
+import com.orange.ouds.app.ui.utilities.composable.DemoScreen
+import com.orange.ouds.core.component.OudsBodyText
+import com.orange.ouds.core.component.OudsBodyTextSize
+import com.orange.ouds.core.component.OudsTextWeight
+import com.orange.ouds.foundation.extensions.toSentenceCase
+import com.orange.ouds.theme.OudsVersion
+
+@Composable
+fun BodyTextDemoScreen() {
+    val state = rememberBodyTextDemoState()
+    DemoScreen(
+        bottomSheetContent = { BodyTextDemoBottomSheetContent(state = state) },
+        codeSnippet = { bodyTextDemoCodeSnippet(state = state) },
+        demoContent = { BodyTextDemoContent(state = state) },
+        version = OudsVersion.Component.Typography
+    )
+}
+
+@Composable
+private fun BodyTextDemoBottomSheetContent(state: BodyTextDemoState) {
+    with(state) {
+        CustomizationFilterChips(
+            applyTopPadding = false,
+            label = stringResource(R.string.app_components_typography_common_size_tech),
+            chipLabels = OudsBodyTextSize.entries.map { it.name.toSentenceCase() },
+            selectedChipIndex = OudsBodyTextSize.entries.indexOf(size),
+            onSelectionChange = { index: Int -> size = OudsBodyTextSize.entries[index] }
+        )
+        CustomizationFilterChips(
+            applyTopPadding = true,
+            label = stringResource(R.string.app_components_typography_common_weight_tech),
+            chipLabels = OudsTextWeight.entries.map { it.name.toSentenceCase() },
+            selectedChipIndex = OudsTextWeight.entries.indexOf(weight),
+            onSelectionChange = { index: Int -> weight = OudsTextWeight.entries[index] }
+        )
+        CustomizationTextInput(
+            applyTopPadding = true,
+            label = stringResource(R.string.app_components_typography_common_text_tech),
+            value = text,
+            onValueChange = { value -> text = value }
+        )
+    }
+}
+
+@Composable
+private fun BodyTextDemoContent(state: BodyTextDemoState) {
+    with(state) {
+        OudsBodyText(
+            text = text,
+            size = size,
+            weight = weight
+        )
+    }
+}
+
+private fun Code.Builder.bodyTextDemoCodeSnippet(state: BodyTextDemoState) {
+    with(state) {
+        functionCall("OudsBodyText") {
+            typedArgument("text", text)
+            typedArgument("size", size)
+            typedArgument("weight", weight)
+        }
+    }
+}
+
+@PreviewLightDark
+@Composable
+private fun PreviewBodyTextDemoScreen() = AppPreview {
+    BodyTextDemoScreen()
+}

app/src/main/java/com/orange/ouds/app/ui/components/typography/BodyTextDemoState.kt

@@ -0,0 +1,68 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.typography
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.listSaver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.res.stringResource
+import com.orange.ouds.app.R
+import com.orange.ouds.core.component.OudsBodyTextDefaults
+import com.orange.ouds.core.component.OudsBodyTextSize
+import com.orange.ouds.core.component.OudsTextWeight
+
+@Composable
+fun rememberBodyTextDemoState(
+    text: String = stringResource(id = R.string.app_components_typography_common_text_label),
+    size: OudsBodyTextSize = OudsBodyTextDefaults.Size,
+    weight: OudsTextWeight = OudsBodyTextDefaults.Weight
+) = rememberSaveable(text, size, weight, saver = BodyTextDemoState.Saver) { BodyTextDemoState(text, size, weight) }
+
+class BodyTextDemoState(
+    text: String,
+    size: OudsBodyTextSize,
+    weight: OudsTextWeight
+) : TypographyDemoState(text) {
+
+    companion object {
+
+        val Saver = listSaver(
+            save = { state ->
+                with(state) {
+                    listOf(
+                        with(TypographyDemoState.Saver) { save(state) },
+                        size,
+                        weight
+                    )
+                }
+            },
+            restore = { list: List<Any?> ->
+                val typographyDemoState = list[0]?.let { TypographyDemoState.Saver.restore(it) }
+                typographyDemoState?.run {
+                    BodyTextDemoState(
+                        text,
+                        list[1] as OudsBodyTextSize,
+                        list[2] as OudsTextWeight
+                    )
+                }
+            }
+        )
+    }
+
+    var size by mutableStateOf(size)
+
+    var weight by mutableStateOf(weight)
+}