feat(list-item): create component list item version 0.1

NOTICE.txt

@@ -49,7 +49,8 @@ app/src/main/res/drawable/ic_sosh_tips_and_tricks.xml
 app/src/main/res/drawable/ic_typography.xml
 app/src/main/res/drawable/ic_ui_dark_mode.xml
 app/src/main/res/drawable/ic_ui_light_mode.xml
-app/src/main/res/drawable/ic_untinted_icon.png
+app/src/main/res/drawable/ic_untinted_square.png
+app/src/main/res/drawable/ic_untinted_widescreen.png
 app/src/main/res/drawable/ic_wireframe_avatar.xml
 app/src/main/res/drawable/ic_wireframe_call.xml
 app/src/main/res/drawable/ic_wireframe_filters.xml
@@ -122,13 +123,16 @@ 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_control_item_next.xml
+theme-orange/src/main/res/drawable/ic_orange_component_control_item_previous.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
 theme-orange/src/main/res/drawable/ic_orange_component_radio_button_selected.xml
 theme-orange/src/main/res/drawable/ic_orange_component_switch_selected.xml
 theme-orange/src/main/res/drawable/ic_orange_component_tag_close.xml
 theme-orange/src/main/res/drawable/ic_orange_functional_actions_delete_cross_round.xml
+theme-orange/src/main/res/drawable/ic_orange_functional_actions_external_link.xml
 theme-orange/src/main/res/drawable/ic_orange_functional_navigation_form_chevron_left.xml
 theme-orange/src/main/res/drawable/ic_orange_functional_navigation_menu_grid_ui_round.xml
 theme-orange/src/main/res/drawable/ic_orange_functional_settings_and_tools_accessibility_hide.xml
@@ -159,13 +163,16 @@ theme-sosh/src/main/res/drawable/ic_sosh_component_button_previous.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_checkbox_selected.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_checkbox_undetermined.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_chip_tick.xml
+theme-sosh/src/main/res/drawable/ic_sosh_component_control_item_next.xml
+theme-sosh/src/main/res/drawable/ic_sosh_component_control_item_previous.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_link_external_link.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_link_next.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_link_previous.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_radio_button_selected.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_switch_selected.xml
 theme-sosh/src/main/res/drawable/ic_sosh_component_tag_close.xml
 theme-sosh/src/main/res/drawable/ic_sosh_functional_actions_delete_cross_round.xml
+theme-sosh/src/main/res/drawable/ic_sosh_functional_actions_external_link.xml
 theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_form_chevron_left.xml
 theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_menu_grid_ui_round.xml
 theme-sosh/src/main/res/drawable/ic_sosh_functional_settings_and_tools_accessibility_hide.xml
@@ -198,13 +205,16 @@ 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_control_item_next.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_component_control_item_previous.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
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_radio_button_selected.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_switch_selected.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_component_tag_close.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_functional_actions_delete_cross_round.xml
+theme-wireframe/src/main/res/drawable/ic_wireframe_functional_actions_external_link.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_form_chevron_left.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_menu_grid_ui_round.xml
 theme-wireframe/src/main/res/drawable/ic_wireframe_functional_settings_and_tools_accessibility_hide.xml

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

@@ -15,15 +15,13 @@ package com.orange.ouds.app.ui
 import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewLightDark
@@ -62,6 +60,7 @@ private fun ChangeThemeSettingsDialogContent(themeState: ThemeState, onThemeSett
                 checked = when (themeSetting) {
                     ThemeSetting.RoundedCornerAlertMessages -> themeSettings.roundedCornerAlertMessages.orElse { false }
                     ThemeSetting.RoundedCornerButtons -> themeSettings.roundedCornerButtons.orElse { false }
+                    ThemeSetting.RoundedCornerCardItems -> themeSettings.roundedCornerCardItems.orElse { false }
                     ThemeSetting.RoundedCornerProgressIndicators -> themeSettings.roundedCornerProgressIndicators.orElse { false }
                     ThemeSetting.RoundedCornerTextInputs -> themeSettings.roundedCornerTextInputs.orElse { false }
                 },
@@ -70,6 +69,7 @@ private fun ChangeThemeSettingsDialogContent(themeState: ThemeState, onThemeSett
                     themeSettings = when (themeSetting) {
                         ThemeSetting.RoundedCornerAlertMessages -> themeSettings.copy(roundedCornerAlertMessages = checked)
                         ThemeSetting.RoundedCornerButtons -> themeSettings.copy(roundedCornerButtons = checked)
+                        ThemeSetting.RoundedCornerCardItems -> themeSettings.copy(roundedCornerCardItems = checked)
                         ThemeSetting.RoundedCornerProgressIndicators -> themeSettings.copy(roundedCornerProgressIndicators = checked)
                         ThemeSetting.RoundedCornerTextInputs -> themeSettings.copy(roundedCornerTextInputs = checked)
                     }
@@ -104,6 +104,7 @@ private fun getSupportedThemeSettings(theme: OudsThemeContract): List<ThemeSetti
             when (themeSetting) {
                 ThemeSetting.RoundedCornerAlertMessages -> roundedCornerAlertMessages != null
                 ThemeSetting.RoundedCornerButtons -> roundedCornerButtons != null
+                ThemeSetting.RoundedCornerCardItems -> roundedCornerCardItems != null
                 ThemeSetting.RoundedCornerProgressIndicators -> roundedCornerProgressIndicators != null
                 ThemeSetting.RoundedCornerTextInputs -> roundedCornerTextInputs != null
             }
@@ -120,13 +121,14 @@ object ChangeThemeSettingsDialog {
 
 private enum class ThemeSetting {
 
-    RoundedCornerAlertMessages, RoundedCornerButtons, RoundedCornerProgressIndicators, RoundedCornerTextInputs;
+    RoundedCornerAlertMessages, RoundedCornerButtons, RoundedCornerCardItems, RoundedCornerProgressIndicators, RoundedCornerTextInputs;
 
     val titleResId: Int
         @StringRes
         get() = when (this) {
             RoundedCornerAlertMessages -> R.string.app_themeSettingsDialog_roundedCornerAlertMessages_label
             RoundedCornerButtons -> R.string.app_themeSettingsDialog_roundedCornerButtons_label
+            RoundedCornerCardItems -> R.string.app_themeSettingsDialog_roundedCornerCardItems_label
             RoundedCornerProgressIndicators -> R.string.app_themeSettingsDialog_roundedCornerProgressIndicators_label
             RoundedCornerTextInputs -> R.string.app_themeSettingsDialog_roundedCornerTextInputs_label
         }

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

@@ -27,6 +27,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
         private const val USER_THEME_NAME_KEY = "userThemeName"
         private const val USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY = "userThemeSettingsRoundedCornerAlertMessages"
         private const val USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY = "userThemeSettingsRoundedCornerButtons"
+        private const val USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY = "userThemeSettingsRoundedCornerCardItems"
         private const val USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY = "userThemeSettingsRoundedCornerProgressIndicators"
         private const val USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY = "userThemeSettingsRoundedCornerTextInputs"
     }
@@ -42,6 +43,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
     fun storeUserThemeSettings(themeSettings: OudsThemeSettings) = runBlocking {
         dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY, themeSettings.roundedCornerAlertMessages)
         dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY, themeSettings.roundedCornerButtons)
+        dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY, themeSettings.roundedCornerCardItems)
         dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY, themeSettings.roundedCornerProgressIndicators)
         dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY, themeSettings.roundedCornerTextInputs)
     }
@@ -50,6 +52,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
         OudsThemeSettings(
             roundedCornerAlertMessages = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY),
             roundedCornerButtons = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY),
+            roundedCornerCardItems = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY),
             roundedCornerProgressIndicators = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY),
             roundedCornerTextInputs = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY)
         )

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

@@ -119,13 +119,15 @@ class ThemeState(
                         orangeFontFamily = OrangeFontFamily(OrangeHelveticaNeueLatin.Downloadable, OrangeHelveticaNeueArabic.Downloadable),
                         roundedCornerAlertMessages = roundedCornerAlertMessages.orElse { false },
                         roundedCornerButtons = roundedCornerButtons.orElse { false },
+                        roundedCornerCardItems = roundedCornerCardItems.orElse { false },
                         roundedCornerProgressIndicators = roundedCornerProgressIndicators.orElse { false },
                         roundedCornerTextInputs = roundedCornerTextInputs.orElse { false }
                     )
                     ORANGE_COMPACT_THEME_NAME -> OrangeCompactTheme(
                         orangeFontFamily = OrangeFontFamily(OrangeHelveticaNeueLatin.Downloadable, OrangeHelveticaNeueArabic.Downloadable),
                         roundedCornerAlertMessages = roundedCornerAlertMessages.orElse { false },
                         roundedCornerButtons = roundedCornerButtons.orElse { false },
+                        roundedCornerCardItems = roundedCornerCardItems.orElse { false },
                         roundedCornerProgressIndicators = roundedCornerProgressIndicators.orElse { false },
                         roundedCornerTextInputs = roundedCornerTextInputs.orElse { false }
                     )

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

@@ -32,6 +32,9 @@ import com.orange.ouds.app.ui.components.coloredbackground.ColoredBackgroundDemo
 import com.orange.ouds.app.ui.components.divider.DividerDemoScreen
 import com.orange.ouds.app.ui.components.floatingactionbutton.FloatingActionButtonDemoScreen
 import com.orange.ouds.app.ui.components.link.LinkDemoScreen
+import com.orange.ouds.app.ui.components.listitem.BaseListItemDemoState
+import com.orange.ouds.app.ui.components.listitem.CardItemDemoScreen
+import com.orange.ouds.app.ui.components.listitem.ListItemDemoScreen
 import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoScreen
 import com.orange.ouds.app.ui.components.passwordinput.PasswordInputDemoScreen
 import com.orange.ouds.app.ui.components.pincodeinput.PinCodeInputDemoScreen
@@ -142,6 +145,13 @@ sealed class Component(
         demoScreen = { LinkDemoScreen() }
     )
 
+    data object ListItem : Component(
+        R.string.app_components_listItem_tech,
+        R.string.app_components_listItem_description_text,
+        { ListItemIllustration() },
+        listOf(Variant.ListItem, Variant.SmallListItem, Variant.CardItem, Variant.SmallCardItem)
+    )
+
     data object NavigationBar : Component(
         R.string.app_components_navigationBar_tech,
         R.string.app_components_navigationBar_description_text,
@@ -251,6 +261,12 @@ sealed class Variant(
     data object HorizontalDivider : Variant(R.string.app_components_divider_horizontalDivider_tech, { DividerDemoScreen() })
     data object VerticalDivider : Variant(R.string.app_components_divider_verticalDivider_tech, { DividerDemoScreen(vertical = true) })
 
+    // List item
+    data object ListItem : Variant(R.string.app_components_listItem_listItem_tech, { ListItemDemoScreen(size = BaseListItemDemoState.Size.Default) })
+    data object SmallListItem : Variant(R.string.app_components_listItem_smallListItem_tech, { ListItemDemoScreen(size = BaseListItemDemoState.Size.Small) })
+    data object CardItem : Variant(R.string.app_components_listItem_cardItem_tech, { CardItemDemoScreen(size = BaseListItemDemoState.Size.Default) })
+    data object SmallCardItem : Variant(R.string.app_components_listItem_smallCardItem_tech, { CardItemDemoScreen(size = BaseListItemDemoState.Size.Small) })
+
     // Progress indicator
     data object CircularProgressIndicator :
         Variant(R.string.app_components_progressIndicator_circularProgressIndicator_tech, { CircularProgressIndicatorDemoScreen() }) {

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

@@ -55,7 +55,7 @@ inline fun <reified T> FunctionCall.Builder.iconArgument(
     tinted: Boolean = true
 ) {
     constructorCallArgument<T>(name) {
-        painterArgument(if (tinted) resId else R.drawable.ic_untinted_icon)
+        painterArgument(if (tinted) resId else R.drawable.ic_untinted_square)
         contentDescriptionResId?.let { contentDescriptionArgument(it) }
         if (!tinted) tintedArgument(tinted)
     }

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

@@ -58,6 +58,8 @@ import com.orange.ouds.core.component.OudsFloatingActionButtonIcon
 import com.orange.ouds.core.component.OudsHorizontalDivider
 import com.orange.ouds.core.component.OudsLink
 import com.orange.ouds.core.component.OudsLinkIndicator
+import com.orange.ouds.core.component.OudsListItem
+import com.orange.ouds.core.component.OudsListItemLeading
 import com.orange.ouds.core.component.OudsNavigationBar
 import com.orange.ouds.core.component.OudsNavigationBarItem
 import com.orange.ouds.core.component.OudsNavigationBarItemIcon
@@ -75,6 +77,7 @@ import com.orange.ouds.core.component.OudsTopAppBarAction
 import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
 import com.orange.ouds.core.component.rememberOudsPasswordInputState
 import com.orange.ouds.core.theme.isOudsInDarkTheme
+import com.orange.ouds.foundation.ExperimentalOudsApi
 
 @Composable
 fun AlertIllustration() = ComponentIllustration {
@@ -200,6 +203,18 @@ fun LinkIllustration() = ComponentIllustration {
     )
 }
 
+@OptIn(ExperimentalOudsApi::class)
+@Composable
+fun ListItemIllustration() = ComponentIllustration {
+    OudsListItem(
+        modifier = Modifier.padding(horizontal = 12.dp),
+        label = stringResource(id = R.string.app_components_common_label_label),
+        description = stringResource(id = R.string.app_components_common_description_tech),
+        leading = OudsListItemLeading.Icon(painterResource(LocalThemeDrawableResources.current.tipsAndTricks), ""),
+        edgeToEdge = false
+    )
+}
+
 @Composable
 fun NavigationBarIllustration() = ComponentIllustration {
     val items = List(3) { index ->

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

@@ -78,7 +78,7 @@ private fun ControlItemIconCustomization(state: ControlItemDemoState) {
 private fun ControlItemEdgeToEdgeCustomization(state: ControlItemDemoState) {
     with(state) {
         CustomizationSwitchItem(
-            label = stringResource(id = R.string.app_components_controlItem_edgeToEdge_tech),
+            label = stringResource(id = R.string.app_components_common_edgeToEdge_tech),
             checked = edgeToEdge,
             onCheckedChange = { edgeToEdge = it },
         )
@@ -90,7 +90,7 @@ private fun ControlItemEdgeToEdgeCustomization(state: ControlItemDemoState) {
 private fun ControlItemDividerCustomization(state: ControlItemDemoState) {
     with(state) {
         CustomizationSwitchItem(
-            label = stringResource(id = R.string.app_components_controlItem_divider_tech),
+            label = stringResource(R.string.app_components_common_divider_tech),
             checked = divider,
             onCheckedChange = { divider = it },
         )