Skip to content

Commit de08fa0

Browse files
paulineapaulinea
authored
feat: create component - tag (#654)
1 parent 69367bd commit de08fa0

File tree

30 files changed

+1084
-69
lines changed

30 files changed

+1084
-69
lines changed

‎NOTICE.txt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,17 @@ docs/assets/logo-icon.svg
7070
theme-contract/src/main/res/drawable/ic_checkbox_indeterminate.xml
7171
theme-contract/src/main/res/drawable/ic_checkbox_selected.xml
7272
theme-contract/src/main/res/drawable/ic_chevron_left.xml
73-
theme-contract/src/main/res/drawable/ic_tick.xml
7473
theme-contract/src/main/res/drawable/ic_radio_button_selected.xml
7574
theme-contract/src/main/res/drawable/ic_switch_selected.xml
75+
theme-contract/src/main/res/drawable/ic_tag_bullet.xml
76+
theme-contract/src/main/res/drawable/ic_tick.xml
7677

7778
theme-sosh/src/main/res/drawable/sosh_checkbox_indeterminate.xml
7879
theme-sosh/src/main/res/drawable/sosh_checkbox_selected.xml
7980
theme-sosh/src/main/res/drawable/sosh_chevron_left.xml
80-
theme-sosh/src/main/res/drawable/sosh_tick.xml
8181
theme-sosh/src/main/res/drawable/sosh_radio_button_selected.xml
8282
theme-sosh/src/main/res/drawable/sosh_switch_selected.xml
83+
theme-sosh/src/main/res/drawable/sosh_tick.xml
8384
theme-sosh/src/main/res/font/sosh_black.ttf
8485
theme-sosh/src/main/res/font/sosh_bold.ttf
8586
theme-sosh/src/main/res/font/sosh_medium.ttf

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import com.orange.ouds.app.ui.components.radiobutton.RadioButtonDemoScreen
2929
import com.orange.ouds.app.ui.components.radiobutton.RadioButtonItemDemoScreen
3030
import com.orange.ouds.app.ui.components.switch.SwitchDemoScreen
3131
import com.orange.ouds.app.ui.components.switch.SwitchItemDemoScreen
32+
import com.orange.ouds.app.ui.components.tag.TagDemoScreen
3233
import com.orange.ouds.app.ui.utilities.previewCompatibleClass
3334

3435
val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }
@@ -110,6 +111,13 @@ sealed class Component(
110111
{ SwitchIllustration() },
111112
listOf(Variant.Switch, Variant.SwitchItem)
112113
)
114+
115+
data object Tag : Component(
116+
R.string.app_components_tag_label,
117+
R.string.app_components_tag_description_text,
118+
{ TagIllustration() },
119+
demoScreen = { TagDemoScreen() }
120+
)
113121
}
114122

115123
sealed class Variant(

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import com.orange.ouds.core.component.OudsHorizontalDivider
3737
import com.orange.ouds.core.component.OudsLink
3838
import com.orange.ouds.core.component.OudsRadioButton
3939
import com.orange.ouds.core.component.OudsSwitch
40+
import com.orange.ouds.core.component.OudsTag
4041
import com.orange.ouds.core.theme.isOudsInDarkTheme
4142

4243
@Composable
@@ -147,6 +148,11 @@ fun SwitchIllustration() = ComponentIllustration {
147148
}
148149
}
149150

151+
@Composable
152+
fun TagIllustration() = ComponentIllustration {
153+
OudsTag(label = stringResource(id = R.string.app_components_common_label_label), status = OudsTag.Status.Positive)
154+
}
155+
150156
@Composable
151157
private fun ComponentIllustration(content: @Composable () -> Unit) {
152158
CompositionLocalProvider(

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import com.orange.ouds.app.ui.components.contentDescriptionArgument
3232
import com.orange.ouds.app.ui.components.painterArgument
3333
import com.orange.ouds.app.ui.utilities.Code
3434
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
35+
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenuItem
3536
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
3637
import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
3738
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
@@ -66,26 +67,28 @@ private fun BadgeDemoBottomSheetContent(state: BadgeDemoState) {
6667
)
6768
CustomizationFilterChips(
6869
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
69-
label = stringResource(R.string.app_components_badge_size_label),
70+
label = stringResource(R.string.app_components_common_size_label),
7071
chipLabels = OudsBadge.Size.entries.map { it.formattedName },
7172
selectedChipIndex = OudsBadge.Size.entries.indexOf(size),
7273
onSelectionChange = { id -> size = OudsBadge.Size.entries[id] }
7374
)
7475
val statuses = OudsBadge.Status.entries
7576
CustomizationDropdownMenu(
76-
label = stringResource(id = R.string.app_components_badge_status_label),
77-
itemLabels = statuses.map { it.formattedName },
77+
label = stringResource(id = R.string.app_components_common_status_label),
78+
items = statuses.map { status ->
79+
CustomizationDropdownMenuItem(
80+
label = status.formattedName,
81+
leadingIcon = {
82+
Box(
83+
modifier = Modifier
84+
.fillMaxSize()
85+
.background(status.backgroundColor)
86+
)
87+
}
88+
)
89+
},
7890
selectedItemIndex = statuses.indexOf(status),
79-
onSelectionChange = { status = statuses[it] },
80-
itemLeadingIcons = statuses.map { status ->
81-
{
82-
Box(
83-
modifier = Modifier
84-
.fillMaxSize()
85-
.background(status.backgroundColor)
86-
)
87-
}
88-
}
91+
onSelectionChange = { status = statuses[it] }
8992
)
9093
CustomizationTextField(
9194
label = stringResource(R.string.app_components_badge_count_label),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {
6767
)
6868
CustomizationFilterChips(
6969
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
70-
label = stringResource(R.string.app_components_button_hierarchy_label),
70+
label = stringResource(R.string.app_components_common_hierarchy_label),
7171
chipLabels = OudsButton.Hierarchy.entries.map { it.name },
7272
selectedChipIndex = OudsButton.Hierarchy.entries.indexOf(hierarchy),
7373
onSelectionChange = { id -> hierarchy = OudsButton.Hierarchy.entries[id] }

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import com.orange.ouds.app.ui.components.labelArgument
3333
import com.orange.ouds.app.ui.components.onClickArgument
3434
import com.orange.ouds.app.ui.utilities.Code
3535
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
36+
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenuItem
3637
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
3738
import com.orange.ouds.app.ui.utilities.formattedName
3839
import com.orange.ouds.core.component.OudsButton
@@ -58,18 +59,20 @@ private fun ColoredBackgroundDemoBottomSheetContent(state: ColoredBackgroundDemo
5859
val colors = OudsColoredBox.Color.entries.filter { it.mode.isSupported }
5960
CustomizationDropdownMenu(
6061
label = stringResource(id = R.string.app_components_coloredBackground_color_label),
61-
itemLabels = colors.map { it.formattedName },
62+
items = colors.map { color ->
63+
CustomizationDropdownMenuItem(
64+
label = color.formattedName,
65+
leadingIcon = {
66+
Box(
67+
modifier = Modifier
68+
.fillMaxSize()
69+
.background(color.value)
70+
)
71+
}
72+
)
73+
},
6274
selectedItemIndex = colors.indexOf(color),
6375
onSelectionChange = { color = colors[it] },
64-
itemLeadingIcons = colors.map { color ->
65-
{
66-
Box(
67-
modifier = Modifier
68-
.fillMaxSize()
69-
.background(color.value)
70-
)
71-
}
72-
}
7376
)
7477
}
7578
}

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

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import androidx.compose.ui.unit.dp
2626
import com.orange.ouds.app.R
2727
import com.orange.ouds.app.ui.utilities.Code
2828
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
29+
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenuItem
2930
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
3031
import com.orange.ouds.app.ui.utilities.formattedName
3132
import com.orange.ouds.core.component.OudsDivider
@@ -52,18 +53,20 @@ private fun DividerDemoBottomSheetContent(state: DividerDemoState) {
5253
val colors = OudsDivider.Color.entries
5354
CustomizationDropdownMenu(
5455
label = stringResource(id = R.string.app_components_common_color_label),
55-
itemLabels = colors.map { it.formattedName },
56+
items = colors.map { color ->
57+
CustomizationDropdownMenuItem(
58+
label = color.formattedName,
59+
leadingIcon = {
60+
Box(
61+
modifier = Modifier
62+
.fillMaxSize()
63+
.background(color.value)
64+
)
65+
}
66+
)
67+
},
5668
selectedItemIndex = colors.indexOf(color),
57-
onSelectionChange = { color = colors[it] },
58-
itemLeadingIcons = colors.map { color ->
59-
{
60-
Box(
61-
modifier = Modifier
62-
.fillMaxSize()
63-
.background(color.value)
64-
)
65-
}
66-
}
69+
onSelectionChange = { color = colors[it] }
6770
)
6871
}
6972
}

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

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
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.tag
14+
15+
import androidx.compose.foundation.background
16+
import androidx.compose.foundation.layout.Box
17+
import androidx.compose.foundation.layout.fillMaxSize
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 androidx.compose.ui.tooling.preview.PreviewLightDark
24+
import com.orange.ouds.app.R
25+
import com.orange.ouds.app.ui.components.Component
26+
import com.orange.ouds.app.ui.components.labelArgument
27+
import com.orange.ouds.app.ui.components.painterArgument
28+
import com.orange.ouds.app.ui.utilities.Code
29+
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
30+
import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenuItem
31+
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
32+
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
33+
import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
34+
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
35+
import com.orange.ouds.app.ui.utilities.formattedName
36+
import com.orange.ouds.core.component.OudsTag
37+
import com.orange.ouds.core.theme.OudsTheme
38+
import com.orange.ouds.core.utilities.OudsPreview
39+
import com.orange.ouds.theme.OudsVersion
40+
41+
@Composable
42+
fun TagDemoScreen() {
43+
val state = rememberTagDemoState()
44+
DemoScreen(
45+
description = stringResource(id = Component.Tag.descriptionRes),
46+
bottomSheetContent = { TagDemoBottomSheetContent(state = state) },
47+
codeSnippet = { tagDemoCodeSnippet(state = state) },
48+
demoContent = { TagDemoContent(state = state) },
49+
version = OudsVersion.Component.Tag
50+
)
51+
}
52+
53+
@Composable
54+
private fun TagDemoBottomSheetContent(state: TagDemoState) {
55+
with(state) {
56+
CustomizationFilterChips(
57+
label = stringResource(R.string.app_components_common_hierarchy_label),
58+
chipLabels = OudsTag.Hierarchy.entries.map { it.name },
59+
selectedChipIndex = OudsTag.Hierarchy.entries.indexOf(hierarchy),
60+
onSelectionChange = { id -> hierarchy = OudsTag.Hierarchy.entries[id] }
61+
)
62+
val statuses = OudsTag.Status.entries
63+
CustomizationDropdownMenu(
64+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
65+
label = stringResource(id = R.string.app_components_common_status_label),
66+
items = statuses.map { status ->
67+
CustomizationDropdownMenuItem(
68+
label = status.formattedName,
69+
leadingIcon = {
70+
Box(
71+
modifier = Modifier
72+
.fillMaxSize()
73+
.background(status.backgroundColor(hierarchy))
74+
)
75+
},
76+
enabled = !(status == OudsTag.Status.Disabled && loading)
77+
)
78+
},
79+
selectedItemIndex = statuses.indexOf(status),
80+
onSelectionChange = { status = statuses[it] }
81+
)
82+
CustomizationFilterChips(
83+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
84+
label = stringResource(R.string.app_components_common_layout_label),
85+
chipLabels = TagDemoState.Layout.entries.map { stringResource(it.labelRes) },
86+
selectedChipIndex = TagDemoState.Layout.entries.indexOf(layout),
87+
onSelectionChange = { id -> layout = TagDemoState.Layout.entries[id] }
88+
)
89+
CustomizationSwitchItem(
90+
label = stringResource(R.string.app_components_tag_loading_label),
91+
checked = loading,
92+
onCheckedChange = { loading = it },
93+
enabled = loadingSwitchEnabled
94+
)
95+
CustomizationFilterChips(
96+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
97+
label = stringResource(R.string.app_components_tag_shape_label),
98+
chipLabels = OudsTag.Shape.entries.map { it.name },
99+
selectedChipIndex = OudsTag.Shape.entries.indexOf(shape),
100+
onSelectionChange = { id -> shape = OudsTag.Shape.entries[id] }
101+
)
102+
CustomizationFilterChips(
103+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
104+
label = stringResource(R.string.app_components_common_size_label),
105+
chipLabels = OudsTag.Size.entries.map { it.name },
106+
selectedChipIndex = OudsTag.Size.entries.indexOf(size),
107+
onSelectionChange = { id -> size = OudsTag.Size.entries[id] }
108+
)
109+
CustomizationTextField(
110+
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
111+
label = stringResource(R.string.app_components_common_label_label),
112+
value = label,
113+
onValueChange = { value -> label = value }
114+
)
115+
}
116+
}
117+
118+
@Composable
119+
private fun TagDemoContent(state: TagDemoState) {
120+
with(state) {
121+
val loading = if (loading) OudsTag.Loading(null) else null
122+
if (layout == TagDemoState.Layout.TextAndIcon) {
123+
OudsTag(
124+
icon = OudsTag.Icon(painter = painterResource(R.drawable.ic_heart)),
125+
label = label,
126+
hierarchy = hierarchy,
127+
status = status,
128+
size = size,
129+
shape = shape,
130+
loading = loading,
131+
)
132+
} else {
133+
OudsTag(
134+
hasBullet = layout == TagDemoState.Layout.TextAndBullet,
135+
label = label,
136+
hierarchy = hierarchy,
137+
status = status,
138+
size = size,
139+
shape = shape,
140+
loading = loading,
141+
)
142+
}
143+
}
144+
}
145+
146+
private fun Code.Builder.tagDemoCodeSnippet(state: TagDemoState) {
147+
with(state) {
148+
functionCall(OudsTag::class.simpleName.orEmpty()) {
149+
when (layout) {
150+
TagDemoState.Layout.TextAndBullet -> typedArgument("hasBullet", true)
151+
TagDemoState.Layout.TextAndIcon -> {
152+
constructorCallArgument<OudsTag.Icon>("icon") {
153+
painterArgument(R.drawable.ic_heart)
154+
}
155+
}
156+
TagDemoState.Layout.TextOnly -> {}
157+
}
158+
labelArgument(label)
159+
typedArgument("hierarchy", hierarchy)
160+
typedArgument("shape", shape)
161+
typedArgument("size", size)
162+
typedArgument("status", status)
163+
typedArgument("loading", loading)
164+
}
165+
}
166+
}
167+
168+
@PreviewLightDark
169+
@Composable
170+
private fun PreviewTagDemoScreen() = OudsPreview {
171+
TagDemoScreen()
172+
}

0 commit comments

Comments
 (0)