Skip to content

Commit cf87c2c

Browse files
paulineapaulinea
authored
feat(list-item): add OudsListItem, OudsSmallListItem, OudsCardItem and OudsSmallCardItem version 0.1.0 (#1412)
1 parent 4e5fa90 commit cf87c2c

306 files changed

Lines changed: 6609 additions & 62 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎NOTICE.txt‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ app/src/main/res/drawable/ic_sosh_tips_and_tricks.xml
4949
app/src/main/res/drawable/ic_typography.xml
5050
app/src/main/res/drawable/ic_ui_dark_mode.xml
5151
app/src/main/res/drawable/ic_ui_light_mode.xml
52-
app/src/main/res/drawable/ic_untinted_icon.png
52+
app/src/main/res/drawable/ic_untinted_square.png
53+
app/src/main/res/drawable/ic_untinted_widescreen.png
5354
app/src/main/res/drawable/ic_wireframe_avatar.xml
5455
app/src/main/res/drawable/ic_wireframe_call.xml
5556
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
122123
theme-orange/src/main/res/drawable/ic_orange_component_checkbox_selected.xml
123124
theme-orange/src/main/res/drawable/ic_orange_component_checkbox_undetermined.xml
124125
theme-orange/src/main/res/drawable/ic_orange_component_chip_tick.xml
126+
theme-orange/src/main/res/drawable/ic_orange_component_control_item_next.xml
127+
theme-orange/src/main/res/drawable/ic_orange_component_control_item_previous.xml
125128
theme-orange/src/main/res/drawable/ic_orange_component_link_external_link.xml
126129
theme-orange/src/main/res/drawable/ic_orange_component_link_next.xml
127130
theme-orange/src/main/res/drawable/ic_orange_component_link_previous.xml
128131
theme-orange/src/main/res/drawable/ic_orange_component_radio_button_selected.xml
129132
theme-orange/src/main/res/drawable/ic_orange_component_switch_selected.xml
130133
theme-orange/src/main/res/drawable/ic_orange_component_tag_close.xml
131134
theme-orange/src/main/res/drawable/ic_orange_functional_actions_delete_cross_round.xml
135+
theme-orange/src/main/res/drawable/ic_orange_functional_actions_external_link.xml
132136
theme-orange/src/main/res/drawable/ic_orange_functional_navigation_form_chevron_left.xml
133137
theme-orange/src/main/res/drawable/ic_orange_functional_navigation_menu_grid_ui_round.xml
134138
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
159163
theme-sosh/src/main/res/drawable/ic_sosh_component_checkbox_selected.xml
160164
theme-sosh/src/main/res/drawable/ic_sosh_component_checkbox_undetermined.xml
161165
theme-sosh/src/main/res/drawable/ic_sosh_component_chip_tick.xml
166+
theme-sosh/src/main/res/drawable/ic_sosh_component_control_item_next.xml
167+
theme-sosh/src/main/res/drawable/ic_sosh_component_control_item_previous.xml
162168
theme-sosh/src/main/res/drawable/ic_sosh_component_link_external_link.xml
163169
theme-sosh/src/main/res/drawable/ic_sosh_component_link_next.xml
164170
theme-sosh/src/main/res/drawable/ic_sosh_component_link_previous.xml
165171
theme-sosh/src/main/res/drawable/ic_sosh_component_radio_button_selected.xml
166172
theme-sosh/src/main/res/drawable/ic_sosh_component_switch_selected.xml
167173
theme-sosh/src/main/res/drawable/ic_sosh_component_tag_close.xml
168174
theme-sosh/src/main/res/drawable/ic_sosh_functional_actions_delete_cross_round.xml
175+
theme-sosh/src/main/res/drawable/ic_sosh_functional_actions_external_link.xml
169176
theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_form_chevron_left.xml
170177
theme-sosh/src/main/res/drawable/ic_sosh_functional_navigation_menu_grid_ui_round.xml
171178
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
198205
theme-wireframe/src/main/res/drawable/ic_wireframe_component_checkbox_selected.xml
199206
theme-wireframe/src/main/res/drawable/ic_wireframe_component_checkbox_undetermined.xml
200207
theme-wireframe/src/main/res/drawable/ic_wireframe_component_chip_tick.xml
208+
theme-wireframe/src/main/res/drawable/ic_wireframe_component_control_item_next.xml
209+
theme-wireframe/src/main/res/drawable/ic_wireframe_component_control_item_previous.xml
201210
theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_external_link.xml
202211
theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_next.xml
203212
theme-wireframe/src/main/res/drawable/ic_wireframe_component_link_previous.xml
204213
theme-wireframe/src/main/res/drawable/ic_wireframe_component_radio_button_selected.xml
205214
theme-wireframe/src/main/res/drawable/ic_wireframe_component_switch_selected.xml
206215
theme-wireframe/src/main/res/drawable/ic_wireframe_component_tag_close.xml
207216
theme-wireframe/src/main/res/drawable/ic_wireframe_functional_actions_delete_cross_round.xml
217+
theme-wireframe/src/main/res/drawable/ic_wireframe_functional_actions_external_link.xml
208218
theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_form_chevron_left.xml
209219
theme-wireframe/src/main/res/drawable/ic_wireframe_functional_navigation_menu_grid_ui_round.xml
210220
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‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ package com.orange.ouds.app.ui
1515
import androidx.annotation.StringRes
1616
import androidx.compose.foundation.layout.Arrangement
1717
import androidx.compose.foundation.layout.Column
18-
import androidx.compose.foundation.layout.Row
1918
import androidx.compose.foundation.layout.fillMaxWidth
2019
import androidx.compose.foundation.layout.padding
2120
import androidx.compose.runtime.Composable
2221
import androidx.compose.runtime.getValue
2322
import androidx.compose.runtime.mutableStateOf
2423
import androidx.compose.runtime.saveable.rememberSaveable
2524
import androidx.compose.runtime.setValue
26-
import androidx.compose.ui.Alignment
2725
import androidx.compose.ui.Modifier
2826
import androidx.compose.ui.res.stringResource
2927
import androidx.compose.ui.tooling.preview.PreviewLightDark
@@ -62,6 +60,7 @@ private fun ChangeThemeSettingsDialogContent(themeState: ThemeState, onThemeSett
6260
checked = when (themeSetting) {
6361
ThemeSetting.RoundedCornerAlertMessages -> themeSettings.roundedCornerAlertMessages.orElse { false }
6462
ThemeSetting.RoundedCornerButtons -> themeSettings.roundedCornerButtons.orElse { false }
63+
ThemeSetting.RoundedCornerCardItems -> themeSettings.roundedCornerCardItems.orElse { false }
6564
ThemeSetting.RoundedCornerProgressIndicators -> themeSettings.roundedCornerProgressIndicators.orElse { false }
6665
ThemeSetting.RoundedCornerTextInputs -> themeSettings.roundedCornerTextInputs.orElse { false }
6766
},
@@ -70,6 +69,7 @@ private fun ChangeThemeSettingsDialogContent(themeState: ThemeState, onThemeSett
7069
themeSettings = when (themeSetting) {
7170
ThemeSetting.RoundedCornerAlertMessages -> themeSettings.copy(roundedCornerAlertMessages = checked)
7271
ThemeSetting.RoundedCornerButtons -> themeSettings.copy(roundedCornerButtons = checked)
72+
ThemeSetting.RoundedCornerCardItems -> themeSettings.copy(roundedCornerCardItems = checked)
7373
ThemeSetting.RoundedCornerProgressIndicators -> themeSettings.copy(roundedCornerProgressIndicators = checked)
7474
ThemeSetting.RoundedCornerTextInputs -> themeSettings.copy(roundedCornerTextInputs = checked)
7575
}
@@ -104,6 +104,7 @@ private fun getSupportedThemeSettings(theme: OudsThemeContract): List<ThemeSetti
104104
when (themeSetting) {
105105
ThemeSetting.RoundedCornerAlertMessages -> roundedCornerAlertMessages != null
106106
ThemeSetting.RoundedCornerButtons -> roundedCornerButtons != null
107+
ThemeSetting.RoundedCornerCardItems -> roundedCornerCardItems != null
107108
ThemeSetting.RoundedCornerProgressIndicators -> roundedCornerProgressIndicators != null
108109
ThemeSetting.RoundedCornerTextInputs -> roundedCornerTextInputs != null
109110
}
@@ -120,13 +121,14 @@ object ChangeThemeSettingsDialog {
120121

121122
private enum class ThemeSetting {
122123

123-
RoundedCornerAlertMessages, RoundedCornerButtons, RoundedCornerProgressIndicators, RoundedCornerTextInputs;
124+
RoundedCornerAlertMessages, RoundedCornerButtons, RoundedCornerCardItems, RoundedCornerProgressIndicators, RoundedCornerTextInputs;
124125

125126
val titleResId: Int
126127
@StringRes
127128
get() = when (this) {
128129
RoundedCornerAlertMessages -> R.string.app_themeSettingsDialog_roundedCornerAlertMessages_label
129130
RoundedCornerButtons -> R.string.app_themeSettingsDialog_roundedCornerButtons_label
131+
RoundedCornerCardItems -> R.string.app_themeSettingsDialog_roundedCornerCardItems_label
130132
RoundedCornerProgressIndicators -> R.string.app_themeSettingsDialog_roundedCornerProgressIndicators_label
131133
RoundedCornerTextInputs -> R.string.app_themeSettingsDialog_roundedCornerTextInputs_label
132134
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
2727
private const val USER_THEME_NAME_KEY = "userThemeName"
2828
private const val USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY = "userThemeSettingsRoundedCornerAlertMessages"
2929
private const val USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY = "userThemeSettingsRoundedCornerButtons"
30+
private const val USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY = "userThemeSettingsRoundedCornerCardItems"
3031
private const val USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY = "userThemeSettingsRoundedCornerProgressIndicators"
3132
private const val USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY = "userThemeSettingsRoundedCornerTextInputs"
3233
}
@@ -42,6 +43,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
4243
fun storeUserThemeSettings(themeSettings: OudsThemeSettings) = runBlocking {
4344
dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY, themeSettings.roundedCornerAlertMessages)
4445
dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY, themeSettings.roundedCornerButtons)
46+
dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY, themeSettings.roundedCornerCardItems)
4547
dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY, themeSettings.roundedCornerProgressIndicators)
4648
dataStoreService.putBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY, themeSettings.roundedCornerTextInputs)
4749
}
@@ -50,6 +52,7 @@ class MainViewModel @Inject constructor(private val dataStoreService: DataStoreS
5052
OudsThemeSettings(
5153
roundedCornerAlertMessages = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_ALERT_MESSAGES_KEY),
5254
roundedCornerButtons = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_BUTTONS_KEY),
55+
roundedCornerCardItems = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_CARD_ITEMS_KEY),
5356
roundedCornerProgressIndicators = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_PROGRESS_INDICATORS_KEY),
5457
roundedCornerTextInputs = dataStoreService.getBoolean(USER_THEME_SETTINGS_ROUNDED_CORNER_TEXT_INPUTS_KEY)
5558
)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,13 +119,15 @@ class ThemeState(
119119
orangeFontFamily = OrangeFontFamily(OrangeHelveticaNeueLatin.Downloadable, OrangeHelveticaNeueArabic.Downloadable),
120120
roundedCornerAlertMessages = roundedCornerAlertMessages.orElse { false },
121121
roundedCornerButtons = roundedCornerButtons.orElse { false },
122+
roundedCornerCardItems = roundedCornerCardItems.orElse { false },
122123
roundedCornerProgressIndicators = roundedCornerProgressIndicators.orElse { false },
123124
roundedCornerTextInputs = roundedCornerTextInputs.orElse { false }
124125
)
125126
ORANGE_COMPACT_THEME_NAME -> OrangeCompactTheme(
126127
orangeFontFamily = OrangeFontFamily(OrangeHelveticaNeueLatin.Downloadable, OrangeHelveticaNeueArabic.Downloadable),
127128
roundedCornerAlertMessages = roundedCornerAlertMessages.orElse { false },
128129
roundedCornerButtons = roundedCornerButtons.orElse { false },
130+
roundedCornerCardItems = roundedCornerCardItems.orElse { false },
129131
roundedCornerProgressIndicators = roundedCornerProgressIndicators.orElse { false },
130132
roundedCornerTextInputs = roundedCornerTextInputs.orElse { false }
131133
)

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ import com.orange.ouds.app.ui.components.coloredbackground.ColoredBackgroundDemo
3232
import com.orange.ouds.app.ui.components.divider.DividerDemoScreen
3333
import com.orange.ouds.app.ui.components.floatingactionbutton.FloatingActionButtonDemoScreen
3434
import com.orange.ouds.app.ui.components.link.LinkDemoScreen
35+
import com.orange.ouds.app.ui.components.listitem.BaseListItemDemoState
36+
import com.orange.ouds.app.ui.components.listitem.CardItemDemoScreen
37+
import com.orange.ouds.app.ui.components.listitem.ListItemDemoScreen
3538
import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoScreen
3639
import com.orange.ouds.app.ui.components.passwordinput.PasswordInputDemoScreen
3740
import com.orange.ouds.app.ui.components.pincodeinput.PinCodeInputDemoScreen
@@ -142,6 +145,13 @@ sealed class Component(
142145
demoScreen = { LinkDemoScreen() }
143146
)
144147

148+
data object ListItem : Component(
149+
R.string.app_components_listItem_tech,
150+
R.string.app_components_listItem_description_text,
151+
{ ListItemIllustration() },
152+
listOf(Variant.ListItem, Variant.SmallListItem, Variant.CardItem, Variant.SmallCardItem)
153+
)
154+
145155
data object NavigationBar : Component(
146156
R.string.app_components_navigationBar_tech,
147157
R.string.app_components_navigationBar_description_text,
@@ -251,6 +261,12 @@ sealed class Variant(
251261
data object HorizontalDivider : Variant(R.string.app_components_divider_horizontalDivider_tech, { DividerDemoScreen() })
252262
data object VerticalDivider : Variant(R.string.app_components_divider_verticalDivider_tech, { DividerDemoScreen(vertical = true) })
253263

264+
// List item
265+
data object ListItem : Variant(R.string.app_components_listItem_listItem_tech, { ListItemDemoScreen(size = BaseListItemDemoState.Size.Default) })
266+
data object SmallListItem : Variant(R.string.app_components_listItem_smallListItem_tech, { ListItemDemoScreen(size = BaseListItemDemoState.Size.Small) })
267+
data object CardItem : Variant(R.string.app_components_listItem_cardItem_tech, { CardItemDemoScreen(size = BaseListItemDemoState.Size.Default) })
268+
data object SmallCardItem : Variant(R.string.app_components_listItem_smallCardItem_tech, { CardItemDemoScreen(size = BaseListItemDemoState.Size.Small) })
269+
254270
// Progress indicator
255271
data object CircularProgressIndicator :
256272
Variant(R.string.app_components_progressIndicator_circularProgressIndicator_tech, { CircularProgressIndicatorDemoScreen() }) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ inline fun <reified T> FunctionCall.Builder.iconArgument(
5555
tinted: Boolean = true
5656
) {
5757
constructorCallArgument<T>(name) {
58-
painterArgument(if (tinted) resId else R.drawable.ic_untinted_icon)
58+
painterArgument(if (tinted) resId else R.drawable.ic_untinted_square)
5959
contentDescriptionResId?.let { contentDescriptionArgument(it) }
6060
if (!tinted) tintedArgument(tinted)
6161
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ import com.orange.ouds.core.component.OudsFloatingActionButtonIcon
5858
import com.orange.ouds.core.component.OudsHorizontalDivider
5959
import com.orange.ouds.core.component.OudsLink
6060
import com.orange.ouds.core.component.OudsLinkIndicator
61+
import com.orange.ouds.core.component.OudsListItem
62+
import com.orange.ouds.core.component.OudsListItemLeading
6163
import com.orange.ouds.core.component.OudsNavigationBar
6264
import com.orange.ouds.core.component.OudsNavigationBarItem
6365
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
@@ -75,6 +77,7 @@ import com.orange.ouds.core.component.OudsTopAppBarAction
7577
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
7678
import com.orange.ouds.core.component.rememberOudsPasswordInputState
7779
import com.orange.ouds.core.theme.isOudsInDarkTheme
80+
import com.orange.ouds.foundation.ExperimentalOudsApi
7881

7982
@Composable
8083
fun AlertIllustration() = ComponentIllustration {
@@ -200,6 +203,18 @@ fun LinkIllustration() = ComponentIllustration {
200203
)
201204
}
202205

206+
@OptIn(ExperimentalOudsApi::class)
207+
@Composable
208+
fun ListItemIllustration() = ComponentIllustration {
209+
OudsListItem(
210+
modifier = Modifier.padding(horizontal = 12.dp),
211+
label = stringResource(id = R.string.app_components_common_label_label),
212+
description = stringResource(id = R.string.app_components_common_description_tech),
213+
leading = OudsListItemLeading.Icon(painterResource(LocalThemeDrawableResources.current.tipsAndTricks), ""),
214+
edgeToEdge = false
215+
)
216+
}
217+
203218
@Composable
204219
fun NavigationBarIllustration() = ComponentIllustration {
205220
val items = List(3) { index ->

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ private fun ControlItemIconCustomization(state: ControlItemDemoState) {
7878
private fun ControlItemEdgeToEdgeCustomization(state: ControlItemDemoState) {
7979
with(state) {
8080
CustomizationSwitchItem(
81-
label = stringResource(id = R.string.app_components_controlItem_edgeToEdge_tech),
81+
label = stringResource(id = R.string.app_components_common_edgeToEdge_tech),
8282
checked = edgeToEdge,
8383
onCheckedChange = { edgeToEdge = it },
8484
)
@@ -90,7 +90,7 @@ private fun ControlItemEdgeToEdgeCustomization(state: ControlItemDemoState) {
9090
private fun ControlItemDividerCustomization(state: ControlItemDemoState) {
9191
with(state) {
9292
CustomizationSwitchItem(
93-
label = stringResource(id = R.string.app_components_controlItem_divider_tech),
93+
label = stringResource(R.string.app_components_common_divider_tech),
9494
checked = divider,
9595
onCheckedChange = { divider = it },
9696
)

0 commit comments

Comments
 (0)