feat: create component - chips

NOTICE.txt

@@ -37,6 +37,8 @@ app/src/main/res/drawable-hdpi/il_components_button.png
 app/src/main/res/drawable-hdpi/il_components_button_dark.png
 app/src/main/res/drawable-hdpi/il_components_checkbox.png
 app/src/main/res/drawable-hdpi/il_components_checkbox_dark.png
+app/src/main/res/drawable-hdpi/il_components_chip.png
+app/src/main/res/drawable-hdpi/il_components_chip_dark.png
 app/src/main/res/drawable-hdpi/il_components_link.png
 app/src/main/res/drawable-hdpi/il_components_link_dark.png
 app/src/main/res/drawable-hdpi/il_components_radiobutton.png
@@ -53,6 +55,8 @@ app/src/main/res/drawable-mdpi/il_components_button.png
 app/src/main/res/drawable-mdpi/il_components_button_dark.png
 app/src/main/res/drawable-mdpi/il_components_checkbox.png
 app/src/main/res/drawable-mdpi/il_components_checkbox_dark.png
+app/src/main/res/drawable-mdpi/il_components_chip.png
+app/src/main/res/drawable-mdpi/il_components_chip_dark.png
 app/src/main/res/drawable-mdpi/il_components_link.png
 app/src/main/res/drawable-mdpi/il_components_link_dark.png
 app/src/main/res/drawable-mdpi/il_components_radiobutton.png
@@ -69,6 +73,8 @@ app/src/main/res/drawable-xhdpi/il_components_button.png
 app/src/main/res/drawable-xhdpi/il_components_button_dark.png
 app/src/main/res/drawable-xhdpi/il_components_checkbox.png
 app/src/main/res/drawable-xhdpi/il_components_checkbox_dark.png
+app/src/main/res/drawable-xhdpi/il_components_chip.png
+app/src/main/res/drawable-xhdpi/il_components_chip_dark.png
 app/src/main/res/drawable-xhdpi/il_components_link.png
 app/src/main/res/drawable-xhdpi/il_components_link_dark.png
 app/src/main/res/drawable-xhdpi/il_components_radiobutton.png
@@ -85,6 +91,8 @@ app/src/main/res/drawable-xxhdpi/il_components_button.png
 app/src/main/res/drawable-xxhdpi/il_components_button_dark.png
 app/src/main/res/drawable-xxhdpi/il_components_checkbox.png
 app/src/main/res/drawable-xxhdpi/il_components_checkbox_dark.png
+app/src/main/res/drawable-xxhdpi/il_components_chip.png
+app/src/main/res/drawable-xxhdpi/il_components_chip_dark.png
 app/src/main/res/drawable-xxhdpi/il_components_link.png
 app/src/main/res/drawable-xxhdpi/il_components_link_dark.png
 app/src/main/res/drawable-xxhdpi/il_components_radiobutton.png
@@ -101,6 +109,8 @@ app/src/main/res/drawable-xxxhdpi/il_components_button.png
 app/src/main/res/drawable-xxxhdpi/il_components_button_dark.png
 app/src/main/res/drawable-xxxhdpi/il_components_checkbox.png
 app/src/main/res/drawable-xxxhdpi/il_components_checkbox_dark.png
+app/src/main/res/drawable-xxxhdpi/il_components_chip.png
+app/src/main/res/drawable-xxxhdpi/il_components_chip_dark.png
 app/src/main/res/drawable-xxxhdpi/il_components_link.png
 app/src/main/res/drawable-xxxhdpi/il_components_link_dark.png
 app/src/main/res/drawable-xxxhdpi/il_components_radiobutton.png
@@ -119,6 +129,7 @@ app/src/prod/res/drawable/ic_launcher_foreground.xml
 core/src/main/res/drawable/checkbox_indeterminate.xml
 core/src/main/res/drawable/checkbox_selected.xml
 core/src/main/res/drawable/chevron_left.xml
+core/src/main/res/drawable/chip_tick.xml
 core/src/main/res/drawable/radiobutton_selected.xml
 core/src/main/res/drawable/switch_selected.xml
 

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

@@ -20,6 +20,8 @@ import com.orange.ouds.app.ui.components.badge.BadgeDemoScreen
 import com.orange.ouds.app.ui.components.button.ButtonDemoScreen
 import com.orange.ouds.app.ui.components.checkbox.CheckboxDemoScreen
 import com.orange.ouds.app.ui.components.checkbox.CheckboxItemDemoScreen
+import com.orange.ouds.app.ui.components.chip.FilterChipDemoScreen
+import com.orange.ouds.app.ui.components.chip.SuggestionChipDemoScreen
 import com.orange.ouds.app.ui.components.divider.DividerDemoScreen
 import com.orange.ouds.app.ui.components.link.LinkDemoScreen
 import com.orange.ouds.app.ui.components.radiobutton.RadioButtonDemoScreen
@@ -67,6 +69,13 @@ sealed class Component(
         listOf(Variant.Checkbox, Variant.CheckboxItem, Variant.IndeterminateCheckbox, Variant.IndeterminateCheckboxItem)
     )
 
+    data object Chip : Component(
+        R.string.app_components_chip_label,
+        LightDarkResourceId(R.drawable.il_components_chip, R.drawable.il_components_chip_dark),
+        R.string.app_components_chip_description_text,
+        listOf(Variant.FilterChip, Variant.SuggestionChip)
+    )
+
     data object Divider : Component(
         R.string.app_components_divider_label,
         LightDarkResourceId(R.drawable.il_components_divider, R.drawable.il_components_divider_dark),
@@ -114,6 +123,10 @@ sealed class Variant(
     data object IndeterminateCheckboxItem :
         Variant(R.string.app_components_checkbox_indeterminateCheckboxItem_label, { CheckboxItemDemoScreen(indeterminate = true) })
 
+    // Chip
+    data object FilterChip : Variant(R.string.app_components_chip_filterChip_label, { FilterChipDemoScreen() })
+    data object SuggestionChip : Variant(R.string.app_components_chip_suggestionChip_label, { SuggestionChipDemoScreen() })
+
     // Divider
     data object HorizontalDivider : Variant(R.string.app_components_divider_horizontalDivider_label, { DividerDemoScreen() })
     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

@@ -36,9 +36,7 @@ fun FunctionCall.Builder.painterArgument(@DrawableRes id: Int) {
     }
 }
 
-fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int) {
-    formattableArgument("contentDescription") { "\"${it.getString(id)}\"" }
-}
+fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int, vararg formatArgs: Any) = stringResourceArgument("contentDescription", id, formatArgs)
 
 fun FunctionCall.Builder.onClickArgument(init: Code.Builder.() -> Unit = {}) = lambdaArgument("onClick", init)
 

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

@@ -30,8 +30,8 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.components.Component
 import com.orange.ouds.app.ui.utilities.Code
-import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChips
 import com.orange.ouds.app.ui.utilities.composable.CustomizationDropdownMenu
+import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
 import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
 import com.orange.ouds.app.ui.utilities.composable.DemoScreen
 import com.orange.ouds.app.ui.utilities.formattedName
@@ -54,14 +54,14 @@ fun BadgeDemoScreen() {
 @Composable
 private fun BadgeDemoBottomSheetContent(state: BadgeDemoState) {
     with(state) {
-        CustomizationChoiceChips(
+        CustomizationFilterChips(
             modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
             label = stringResource(R.string.app_components_badge_type_label),
             chipsLabels = BadgeDemoState.Type.entries.map { stringResource(it.labelRes) },
             selectedChipIndex = BadgeDemoState.Type.entries.indexOf(type),
             onSelectionChange = { id -> type = BadgeDemoState.Type.entries[id] }
         )
-        CustomizationChoiceChips(
+        CustomizationFilterChips(
             modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
             label = stringResource(R.string.app_components_badge_size_label),
             chipsLabels = OudsBadge.Size.entries.map { it.formattedName },

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

@@ -28,7 +28,7 @@ import com.orange.ouds.app.ui.components.labelArgument
 import com.orange.ouds.app.ui.components.onClickArgument
 import com.orange.ouds.app.ui.components.painterArgument
 import com.orange.ouds.app.ui.utilities.Code
-import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChips
+import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
 import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
 import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
 import com.orange.ouds.app.ui.utilities.composable.DemoScreen
@@ -63,7 +63,7 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {
             onCheckedChange = { onColoredBox = it },
             enabled = onColoredBoxSwitchEnabled
         )
-        CustomizationChoiceChips(
+        CustomizationFilterChips(
             modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
             label = stringResource(R.string.app_components_button_hierarchy_label),
             chipsLabels = OudsButton.Hierarchy.entries.map { it.name },
@@ -76,14 +76,14 @@ private fun ButtonDemoBottomSheetContent(state: ButtonDemoState) {
                 OudsButton.Style.Loading(progress = null),
             )
         }
-        CustomizationChoiceChips(
+        CustomizationFilterChips(
             modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
             label = stringResource(R.string.app_components_common_style_label),
             chipsLabels = styles.map { it::class.simpleName.orEmpty() },
             selectedChipIndex = styles.indexOf(style),
             onSelectionChange = { id -> style = styles[id] }
         )
-        CustomizationChoiceChips(
+        CustomizationFilterChips(
             modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
             label = stringResource(R.string.app_components_common_layout_label),
             chipsLabels = ButtonDemoState.Layout.entries.map { stringResource(it.labelRes) },
@@ -115,7 +115,7 @@ private fun ButtonDemoContent(state: ButtonDemoState) {
                     hierarchy = hierarchy
                 )
             }
-            ButtonDemoState.Layout.IconAndText -> {
+            ButtonDemoState.Layout.TextAndIcon -> {
                 OudsButton(
                     icon = icon,
                     label = label,
@@ -142,13 +142,13 @@ private fun Code.Builder.buttonDemoCodeSnippet(state: ButtonDemoState) {
     with(state) {
         coloredBoxCall(onColoredBox) {
             functionCall(OudsButton::class.simpleName.orEmpty()) {
-                if (layout in listOf(ButtonDemoState.Layout.IconOnly, ButtonDemoState.Layout.IconAndText)) {
+                if (layout in listOf(ButtonDemoState.Layout.IconOnly, ButtonDemoState.Layout.TextAndIcon)) {
                     constructorCallArgument<OudsButton.Icon>("icon") {
                         painterArgument(R.drawable.ic_heart)
                         contentDescriptionArgument(R.string.app_components_common_icon_a11y)
                     }
                 }
-                if (layout in listOf(ButtonDemoState.Layout.TextOnly, ButtonDemoState.Layout.IconAndText)) {
+                if (layout in listOf(ButtonDemoState.Layout.TextOnly, ButtonDemoState.Layout.TextAndIcon)) {
                     labelArgument(label)
                 }
                 onClickArgument()

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

@@ -31,7 +31,7 @@ fun rememberButtonDemoState(
     onColoredBox: Boolean = false,
     style: OudsButton.Style = OudsButtonDefaults.Style,
     hierarchy: OudsButton.Hierarchy = OudsButtonDefaults.Hierarchy,
-    layout: ButtonDemoState.Layout = ButtonDemoState.Layout.TextOnly
+    layout: ButtonDemoState.Layout = ButtonDemoState.Layout.entries.first()
 ) = rememberSaveable(label, enabled, style, hierarchy, layout, saver = ButtonDemoState.Saver) {
     ButtonDemoState(label, enabled, onColoredBox, style, hierarchy, layout)
 }
@@ -107,7 +107,7 @@ class ButtonDemoState(
 
     enum class Layout(@StringRes val labelRes: Int) {
         TextOnly(R.string.app_components_common_textOnlyLayout_label),
-        IconAndText(R.string.app_components_common_iconAndTextLayout_label),
-        IconOnly(R.string.app_components_button_iconOnlyLayout_label)
+        TextAndIcon(R.string.app_components_common_textAndIconLayout_label),
+        IconOnly(R.string.app_components_common_iconOnlyLayout_label)
     }
 }

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

@@ -0,0 +1,89 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.chip
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Person
+import androidx.compose.material.icons.filled.Phone
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.components.contentDescriptionArgument
+import com.orange.ouds.app.ui.components.enabledArgument
+import com.orange.ouds.app.ui.components.labelArgument
+import com.orange.ouds.app.ui.components.onClickArgument
+import com.orange.ouds.app.ui.utilities.FunctionCall
+import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
+import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
+import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
+import com.orange.ouds.core.component.OudsChip
+import com.orange.ouds.core.theme.OudsTheme
+
+@Composable
+fun ChipDemoBottomSheetContent(state: ChipDemoState) {
+    with(state) {
+        CustomizationSwitchItem(
+            label = stringResource(R.string.app_common_enabled_label),
+            checked = enabled,
+            onCheckedChange = { enabled = it }
+        )
+        CustomizationFilterChips(
+            modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
+            label = stringResource(R.string.app_components_common_layout_label),
+            chipsLabels = ChipDemoState.Layout.entries.map { stringResource(it.labelRes) },
+            selectedChipIndex = ChipDemoState.Layout.entries.indexOf(layout),
+            onSelectionChange = { id -> layout = ChipDemoState.Layout.entries[id] }
+        )
+        CustomizationTextField(
+            label = stringResource(R.string.app_components_common_label_label),
+            value = label,
+            onValueChange = { value -> label = value }
+        )
+    }
+}
+
+@Composable
+fun ChipDemoContent(content: @Composable (index: Int, icon: OudsChip.Icon) -> Unit) {
+    val icons = listOf(
+        Icons.Filled.Person,
+        Icons.Filled.Phone
+    )
+    FlowRow(horizontalArrangement = Arrangement.spacedBy(OudsTheme.spaces.fixed.small)) {
+        repeat(ChipDemoState.ChipCount) { index ->
+            val icon = OudsChip.Icon(
+                imageVector = icons[index % icons.count()],
+                contentDescription = stringResource(id = R.string.app_components_common_icon_a11y)
+            )
+            content(index, icon)
+        }
+    }
+}
+
+fun FunctionCall.Builder.chipArguments(state: ChipDemoState) = with(state) {
+    onClickArgument()
+    if (layout in listOf(ChipDemoState.Layout.IconOnly, ChipDemoState.Layout.TextAndIcon)) {
+        constructorCallArgument<OudsChip.Icon>("icon") {
+            rawArgument("imageVector", "Icons.Filled.Person")
+            contentDescriptionArgument(R.string.app_components_common_icon_a11y)
+        }
+    }
+    if (layout in listOf(ChipDemoState.Layout.TextOnly, ChipDemoState.Layout.TextAndIcon)) {
+        val separator = if (label.isBlank()) "" else " "
+        labelArgument("$label${separator}1")
+    }
+    enabledArgument(enabled)
+}

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

@@ -0,0 +1,63 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.chip
+
+import androidx.annotation.StringRes
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.listSaver
+import androidx.compose.runtime.setValue
+import com.orange.ouds.app.R
+
+open class ChipDemoState(
+    enabled: Boolean,
+    layout: Layout,
+    label: String
+) {
+
+    companion object {
+
+        const val ChipCount = 2
+
+        val Saver = listSaver(
+            save = { state ->
+                with(state) {
+                    listOf(
+                        enabled,
+                        layout,
+                        label
+                    )
+                }
+            },
+            restore = { list ->
+                ChipDemoState(
+                    list[0] as Boolean,
+                    list[1] as Layout,
+                    list[2] as String
+                )
+            }
+        )
+    }
+
+    var enabled: Boolean by mutableStateOf(enabled)
+
+    var layout: Layout by mutableStateOf(layout)
+
+    var label: String by mutableStateOf(label)
+
+    enum class Layout(@StringRes val labelRes: Int) {
+        TextOnly(R.string.app_components_common_textOnlyLayout_label),
+        TextAndIcon(R.string.app_components_common_textAndIconLayout_label),
+        IconOnly(R.string.app_components_common_iconOnlyLayout_label)
+    }
+}