Skip to content

Commit 5e11ee1

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

29 files changed

Lines changed: 477 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: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
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+
content: @Composable (index: Int, icon: OudsChip.Icon) -> Unit
57+
) {
58+
FlowRow(horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.short)) {
59+
val icon = OudsChip.Icon(
60+
painter = painterResource(id = R.drawable.ic_heart),
61+
contentDescription = stringResource(id = R.string.app_components_common_icon_a11y)
62+
)
63+
with(state) {
64+
repeat(ChipDemoState.ChipCount) { index ->
65+
content(index, icon)
66+
}
67+
}
68+
}
69+
}
70+
71+
fun FunctionCall.Builder.chipArguments(state: ChipDemoState, @StringRes labelResId: Int) = with(state) {
72+
onClickArgument()
73+
if (layout in listOf(ChipDemoState.Layout.IconOnly, ChipDemoState.Layout.TextAndIcon)) {
74+
constructorCallArgument<OudsChip.Icon>("icon") {
75+
painterArgument(R.drawable.ic_heart)
76+
contentDescriptionArgument(R.string.app_components_common_icon_a11y)
77+
}
78+
}
79+
if (layout in listOf(ChipDemoState.Layout.TextOnly, ChipDemoState.Layout.TextAndIcon)) {
80+
labelArgument(labelResId)
81+
}
82+
enabledArgument(enabled)
83+
}

‎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: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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.runtime.Composable
16+
import androidx.compose.ui.res.stringResource
17+
import androidx.compose.ui.tooling.preview.PreviewLightDark
18+
import com.orange.ouds.app.R
19+
import com.orange.ouds.app.ui.utilities.Code
20+
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
21+
import com.orange.ouds.core.component.OudsFilterChip
22+
import com.orange.ouds.core.utilities.OudsPreview
23+
24+
@Composable
25+
fun FilterChipDemoScreen() {
26+
val state = rememberFilterChipDemoState()
27+
DemoScreen(
28+
bottomSheetContent = { ChipDemoBottomSheetContent(state = state) },
29+
codeSnippet = { filterChipDemoCodeSnippet(state = state) },
30+
demoContent = { FilterChipDemoContent(state = state) }
31+
)
32+
}
33+
34+
@Composable
35+
private fun FilterChipDemoContent(state: FilterChipDemoState) {
36+
val label = stringResource(R.string.app_components_chip_filterChip_label)
37+
ChipDemoContent(state = state) { index, icon ->
38+
with(state) {
39+
val selected = selectedValues[index]
40+
val onClick = { selectedValues = selectedValues.toMutableList().also { it[index] = !it[index] } }
41+
when (layout) {
42+
ChipDemoState.Layout.TextOnly -> {
43+
OudsFilterChip(
44+
selected = selected,
45+
onClick = onClick,
46+
label = label,
47+
enabled = enabled
48+
)
49+
}
50+
ChipDemoState.Layout.TextAndIcon -> {
51+
OudsFilterChip(
52+
selected = selected,
53+
onClick = onClick,
54+
label = label,
55+
icon = icon,
56+
enabled = enabled
57+
)
58+
}
59+
ChipDemoState.Layout.IconOnly -> {
60+
OudsFilterChip(
61+
selected = selected,
62+
onClick = onClick,
63+
icon = icon,
64+
enabled = enabled
65+
)
66+
}
67+
}
68+
}
69+
}
70+
}
71+
72+
private fun Code.Builder.filterChipDemoCodeSnippet(state: FilterChipDemoState) {
73+
with(state) {
74+
comment("First filter chip")
75+
functionCall("OudsFilterChip") {
76+
typedArgument("selected", selectedValues[0])
77+
chipArguments(state, R.string.app_components_chip_filterChip_label)
78+
}
79+
}
80+
}
81+
82+
@PreviewLightDark
83+
@Composable
84+
private fun PreviewFilterChipDemoScreen() = OudsPreview {
85+
FilterChipDemoScreen()
86+
}

0 commit comments

Comments
 (0)