Skip to content

Commit dcd6ee6

Browse files
florentmaitreflorentmaitre
committed
Add FilterChip and SuggestionChip demos
1 parent bf41830 commit dcd6ee6

29 files changed

Lines changed: 486 additions & 27 deletions

‎NOTICE.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ app/src/main/res/drawable-hdpi/il_components_button.png
3535
app/src/main/res/drawable-hdpi/il_components_button_dark.png
3636
app/src/main/res/drawable-hdpi/il_components_checkbox.png
3737
app/src/main/res/drawable-hdpi/il_components_checkbox_dark.png
38+
app/src/main/res/drawable-hdpi/il_components_chip.png
39+
app/src/main/res/drawable-hdpi/il_components_chip_dark.png
3840
app/src/main/res/drawable-hdpi/il_components_link.png
3941
app/src/main/res/drawable-hdpi/il_components_link_dark.png
4042
app/src/main/res/drawable-hdpi/il_components_radiobutton.png
@@ -51,6 +53,8 @@ app/src/main/res/drawable-mdpi/il_components_button.png
5153
app/src/main/res/drawable-mdpi/il_components_button_dark.png
5254
app/src/main/res/drawable-mdpi/il_components_checkbox.png
5355
app/src/main/res/drawable-mdpi/il_components_checkbox_dark.png
56+
app/src/main/res/drawable-mdpi/il_components_chip.png
57+
app/src/main/res/drawable-mdpi/il_components_chip_dark.png
5458
app/src/main/res/drawable-mdpi/il_components_link.png
5559
app/src/main/res/drawable-mdpi/il_components_link_dark.png
5660
app/src/main/res/drawable-mdpi/il_components_radiobutton.png
@@ -67,6 +71,8 @@ app/src/main/res/drawable-xhdpi/il_components_button.png
6771
app/src/main/res/drawable-xhdpi/il_components_button_dark.png
6872
app/src/main/res/drawable-xhdpi/il_components_checkbox.png
6973
app/src/main/res/drawable-xhdpi/il_components_checkbox_dark.png
74+
app/src/main/res/drawable-xhdpi/il_components_chip.png
75+
app/src/main/res/drawable-xhdpi/il_components_chip_dark.png
7076
app/src/main/res/drawable-xhdpi/il_components_link.png
7177
app/src/main/res/drawable-xhdpi/il_components_link_dark.png
7278
app/src/main/res/drawable-xhdpi/il_components_radiobutton.png
@@ -83,6 +89,8 @@ app/src/main/res/drawable-xxhdpi/il_components_button.png
8389
app/src/main/res/drawable-xxhdpi/il_components_button_dark.png
8490
app/src/main/res/drawable-xxhdpi/il_components_checkbox.png
8591
app/src/main/res/drawable-xxhdpi/il_components_checkbox_dark.png
92+
app/src/main/res/drawable-xxhdpi/il_components_chip.png
93+
app/src/main/res/drawable-xxhdpi/il_components_chip_dark.png
8694
app/src/main/res/drawable-xxhdpi/il_components_link.png
8795
app/src/main/res/drawable-xxhdpi/il_components_link_dark.png
8896
app/src/main/res/drawable-xxhdpi/il_components_radiobutton.png
@@ -99,6 +107,8 @@ app/src/main/res/drawable-xxxhdpi/il_components_button.png
99107
app/src/main/res/drawable-xxxhdpi/il_components_button_dark.png
100108
app/src/main/res/drawable-xxxhdpi/il_components_checkbox.png
101109
app/src/main/res/drawable-xxxhdpi/il_components_checkbox_dark.png
110+
app/src/main/res/drawable-xxxhdpi/il_components_chip.png
111+
app/src/main/res/drawable-xxxhdpi/il_components_chip_dark.png
102112
app/src/main/res/drawable-xxxhdpi/il_components_link.png
103113
app/src/main/res/drawable-xxxhdpi/il_components_link_dark.png
104114
app/src/main/res/drawable-xxxhdpi/il_components_radiobutton.png

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import com.orange.ouds.app.R
1919
import com.orange.ouds.app.ui.components.button.ButtonDemoScreen
2020
import com.orange.ouds.app.ui.components.checkbox.CheckboxDemoScreen
2121
import com.orange.ouds.app.ui.components.checkbox.CheckboxItemDemoScreen
22+
import com.orange.ouds.app.ui.components.chip.FilterChipDemoScreen
23+
import com.orange.ouds.app.ui.components.chip.SuggestionChipDemoScreen
2224
import com.orange.ouds.app.ui.components.divider.DividerDemoScreen
2325
import com.orange.ouds.app.ui.components.link.LinkDemoScreen
2426
import com.orange.ouds.app.ui.components.radiobutton.RadioButtonDemoScreen
@@ -58,6 +60,13 @@ sealed class Component(
5860
listOf(Variant.Checkbox, Variant.CheckboxItem, Variant.IndeterminateCheckbox, Variant.IndeterminateCheckboxItem)
5961
)
6062

63+
data object Chip : Component(
64+
R.string.app_components_chip_label,
65+
LightDarkResourceId(R.drawable.il_components_chip, R.drawable.il_components_chip_dark),
66+
R.string.app_components_chip_description_text,
67+
listOf(Variant.FilterChip, Variant.SuggestionChip)
68+
)
69+
6170
data object Divider : Component(
6271
R.string.app_components_divider_label,
6372
LightDarkResourceId(R.drawable.il_components_divider, R.drawable.il_components_divider_dark),
@@ -105,6 +114,10 @@ sealed class Variant(
105114
data object IndeterminateCheckboxItem :
106115
Variant(R.string.app_components_checkbox_indeterminateCheckboxItem_label, { CheckboxItemDemoScreen(indeterminate = true) })
107116

117+
// Chip
118+
data object FilterChip : Variant(R.string.app_components_chip_filterChip_label, { FilterChipDemoScreen() })
119+
data object SuggestionChip : Variant(R.string.app_components_chip_suggestionChip_label, { SuggestionChipDemoScreen() })
120+
108121
// Divider
109122
data object HorizontalDivider : Variant(R.string.app_components_divider_horizontalDivider_label, { DividerDemoScreen() })
110123
data object VerticalDivider : Variant(R.string.app_components_divider_verticalDivider_label, { DividerDemoScreen(vertical = true) })

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,12 @@ fun FunctionCall.Builder.painterArgument(@DrawableRes id: Int) {
3636
}
3737
}
3838

39-
fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int) {
40-
formattableArgument("contentDescription") { "\"${it.getString(id)}\"" }
41-
}
39+
fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int) = stringResourceArgument("contentDescription", id)
4240

4341
fun FunctionCall.Builder.onClickArgument(init: Code.Builder.() -> Unit = {}) = lambdaArgument("onClick", init)
4442

4543
fun FunctionCall.Builder.labelArgument(label: String?) = typedArgument("label", label)
4644

45+
fun FunctionCall.Builder.labelArgument(@StringRes id: Int) = stringResourceArgument("label", id)
46+
4747
fun FunctionCall.Builder.enabledArgument(boolean: Boolean) = typedArgument("enabled", boolean)

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {
102102
private fun ButtonDemoContent(state: ButtonDemoState) {
103103
val icon = OudsButton.Icon(
104104
painter = painterResource(id = R.drawable.ic_heart),
105-
contentDescription = stringResource(id = R.string.app_components_button_icon_a11y)
105+
contentDescription = stringResource(id = R.string.app_components_common_icon_a11y)
106106
)
107107
with(state) {
108108
when (layout) {
@@ -145,7 +145,7 @@ private fun Code.Builder.buttonDemoCodeSnippet(state: ButtonDemoState) {
145145
if (layout in listOf(ButtonDemoState.Layout.IconOnly, ButtonDemoState.Layout.TextAndIcon)) {
146146
constructorCallArgument<OudsButton.Icon>("icon") {
147147
painterArgument(R.drawable.ic_heart)
148-
contentDescriptionArgument(R.string.app_components_button_icon_a11y)
148+
contentDescriptionArgument(R.string.app_components_common_icon_a11y)
149149
}
150150
}
151151
if (layout in listOf(ButtonDemoState.Layout.TextOnly, ButtonDemoState.Layout.TextAndIcon)) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ fun rememberButtonDemoState(
3131
onColoredBox: Boolean = false,
3232
style: OudsButton.Style = OudsButtonDefaults.Style,
3333
hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy,
34-
layout: ButtonDemoState.Layout = ButtonDemoState.Layout.TextOnly
34+
layout: ButtonDemoState.Layout = ButtonDemoState.Layout.entries.first()
3535
) = rememberSaveable(label, enabled, style, hierarchy, layout, saver = ButtonDemoState.Saver) {
3636
ButtonDemoState(label, enabled, onColoredBox, style, hierarchy, layout)
3737
}
@@ -108,6 +108,6 @@ class ButtonDemoState(
108108
enum class Layout(@StringRes val labelRes: Int) {
109109
TextOnly(R.string.app_components_common_textOnlyLayout_label),
110110
TextAndIcon(R.string.app_components_common_textAndIconLayout_label),
111-
IconOnly(R.string.app_components_button_iconOnlyLayout_label)
111+
IconOnly(R.string.app_components_common_iconOnlyLayout_label)
112112
}
113113
}

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.chip
14+
15+
import androidx.annotation.StringRes
16+
import androidx.compose.foundation.layout.Arrangement
17+
import androidx.compose.foundation.layout.FlowRow
18+
import androidx.compose.foundation.layout.padding
19+
import androidx.compose.runtime.Composable
20+
import androidx.compose.ui.Modifier
21+
import androidx.compose.ui.res.painterResource
22+
import androidx.compose.ui.res.stringResource
23+
import com.orange.ouds.app.R
24+
import com.orange.ouds.app.ui.components.contentDescriptionArgument
25+
import com.orange.ouds.app.ui.components.enabledArgument
26+
import com.orange.ouds.app.ui.components.labelArgument
27+
import com.orange.ouds.app.ui.components.onClickArgument
28+
import com.orange.ouds.app.ui.components.painterArgument
29+
import com.orange.ouds.app.ui.utilities.FunctionCall
30+
import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChips
31+
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
32+
import com.orange.ouds.core.component.OudsChip
33+
import com.orange.ouds.core.theme.OudsTheme
34+
35+
@Composable
36+
fun ChipDemoBottomSheetContent(state: ChipDemoState) {
37+
with(state) {
38+
CustomizationSwitchItem(
39+
label = stringResource(R.string.app_common_enabled_label),
40+
checked = enabled,
41+
onCheckedChange = { enabled = it }
42+
)
43+
CustomizationChoiceChips(
44+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
45+
label = stringResource(R.string.app_components_common_layout_label),
46+
chipsLabels = ChipDemoState.Layout.entries.map { stringResource(it.labelRes) },
47+
selectedChipIndex = ChipDemoState.Layout.entries.indexOf(layout),
48+
onSelectionChange = { id -> layout = ChipDemoState.Layout.entries[id] }
49+
)
50+
}
51+
}
52+
53+
@Composable
54+
fun ChipDemoContent(
55+
state: ChipDemoState,
56+
modifier: Modifier = Modifier,
57+
content: @Composable (index: Int, icon: OudsChip.Icon) -> Unit
58+
) {
59+
FlowRow(
60+
modifier = modifier,
61+
horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.short)
62+
) {
63+
val icon = OudsChip.Icon(
64+
painter = painterResource(id = R.drawable.ic_heart),
65+
contentDescription = stringResource(id = R.string.app_components_common_icon_a11y)
66+
)
67+
with(state) {
68+
repeat(ChipDemoState.ChipCount) { index ->
69+
content(index, icon)
70+
}
71+
}
72+
}
73+
}
74+
75+
fun FunctionCall.Builder.chipArguments(state: ChipDemoState, @StringRes labelResId: Int) = with(state) {
76+
onClickArgument()
77+
if (layout in listOf(ChipDemoState.Layout.IconOnly, ChipDemoState.Layout.TextAndIcon)) {
78+
constructorCallArgument<OudsChip.Icon>("icon") {
79+
painterArgument(R.drawable.ic_heart)
80+
contentDescriptionArgument(R.string.app_components_common_icon_a11y)
81+
}
82+
}
83+
if (layout in listOf(ChipDemoState.Layout.TextOnly, ChipDemoState.Layout.TextAndIcon)) {
84+
labelArgument(labelResId)
85+
}
86+
enabledArgument(enabled)
87+
}

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.chip
14+
15+
import androidx.annotation.StringRes
16+
import androidx.compose.runtime.getValue
17+
import androidx.compose.runtime.mutableStateOf
18+
import androidx.compose.runtime.saveable.listSaver
19+
import androidx.compose.runtime.setValue
20+
import com.orange.ouds.app.R
21+
22+
open class ChipDemoState(
23+
enabled: Boolean,
24+
layout: Layout
25+
) {
26+
27+
companion object {
28+
29+
const val ChipCount = 2
30+
31+
val Saver = listSaver(
32+
save = { state ->
33+
with(state) {
34+
listOf(
35+
enabled,
36+
layout
37+
)
38+
}
39+
},
40+
restore = { list ->
41+
ChipDemoState(
42+
list[0] as Boolean,
43+
list[1] as Layout
44+
)
45+
}
46+
)
47+
}
48+
49+
var enabled: Boolean by mutableStateOf(enabled)
50+
var layout: Layout by mutableStateOf(layout)
51+
52+
enum class Layout(@StringRes val labelRes: Int) {
53+
TextOnly(R.string.app_components_common_textOnlyLayout_label),
54+
TextAndIcon(R.string.app_components_common_textAndIconLayout_label),
55+
IconOnly(R.string.app_components_common_iconOnlyLayout_label)
56+
}
57+
}

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.chip
14+
15+
import androidx.compose.foundation.selection.selectableGroup
16+
import androidx.compose.runtime.Composable
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.res.stringResource
19+
import androidx.compose.ui.tooling.preview.PreviewLightDark
20+
import com.orange.ouds.app.R
21+
import com.orange.ouds.app.ui.utilities.Code
22+
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
23+
import com.orange.ouds.core.component.OudsFilterChip
24+
import com.orange.ouds.core.utilities.OudsPreview
25+
26+
@Composable
27+
fun FilterChipDemoScreen() {
28+
val state = rememberFilterChipDemoState()
29+
DemoScreen(
30+
bottomSheetContent = { ChipDemoBottomSheetContent(state = state) },
31+
codeSnippet = { filterChipDemoCodeSnippet(state = state) },
32+
demoContent = { FilterChipDemoContent(state = state) }
33+
)
34+
}
35+
36+
@Composable
37+
private fun FilterChipDemoContent(state: FilterChipDemoState) {
38+
val label = stringResource(R.string.app_components_chip_filterChip_label)
39+
ChipDemoContent(
40+
modifier = Modifier.selectableGroup(),
41+
state = state
42+
) { index, icon ->
43+
with(state) {
44+
val selected = selectedValues[index]
45+
val onClick = { selectedValues = selectedValues.toMutableList().also { it[index] = !it[index] } }
46+
when (layout) {
47+
ChipDemoState.Layout.TextOnly -> {
48+
OudsFilterChip(
49+
selected = selected,
50+
onClick = onClick,
51+
label = label,
52+
enabled = enabled
53+
)
54+
}
55+
ChipDemoState.Layout.TextAndIcon -> {
56+
OudsFilterChip(
57+
selected = selected,
58+
onClick = onClick,
59+
label = label,
60+
icon = icon,
61+
enabled = enabled
62+
)
63+
}
64+
ChipDemoState.Layout.IconOnly -> {
65+
OudsFilterChip(
66+
selected = selected,
67+
onClick = onClick,
68+
icon = icon,
69+
enabled = enabled
70+
)
71+
}
72+
}
73+
}
74+
}
75+
}
76+
77+
private fun Code.Builder.filterChipDemoCodeSnippet(state: FilterChipDemoState) {
78+
with(state) {
79+
comment("First filter chip")
80+
functionCall("OudsFilterChip") {
81+
typedArgument("selected", selectedValues[0])
82+
chipArguments(state, R.string.app_components_chip_filterChip_label)
83+
}
84+
}
85+
}
86+
87+
@PreviewLightDark
88+
@Composable
89+
private fun PreviewFilterChipDemoScreen() = OudsPreview {
90+
FilterChipDemoScreen()
91+
}

0 commit comments

Comments
 (0)