Add OudsSwitch

Author: florentmaitre

NOTICE.txt

@@ -37,6 +37,8 @@ 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
 app/src/main/res/drawable-hdpi/il_components_radiobutton_dark.png
+app/src/main/res/drawable-hdpi/il_components_switch.png
+app/src/main/res/drawable-hdpi/il_components_switch_dark.png
 app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png
 app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin_dark.png
 app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png
@@ -51,6 +53,8 @@ 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
 app/src/main/res/drawable-mdpi/il_components_radiobutton_dark.png
+app/src/main/res/drawable-mdpi/il_components_switch.png
+app/src/main/res/drawable-mdpi/il_components_switch_dark.png
 app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png
 app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin_dark.png
 app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png
@@ -65,6 +69,8 @@ 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
 app/src/main/res/drawable-xhdpi/il_components_radiobutton_dark.png
+app/src/main/res/drawable-xhdpi/il_components_switch.png
+app/src/main/res/drawable-xhdpi/il_components_switch_dark.png
 app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png
 app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin_dark.png
 app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png
@@ -79,6 +85,8 @@ 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
 app/src/main/res/drawable-xxhdpi/il_components_radiobutton_dark.png
+app/src/main/res/drawable-xxhdpi/il_components_switch.png
+app/src/main/res/drawable-xxhdpi/il_components_switch_dark.png
 app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png
 app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin_dark.png
 app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png
@@ -93,6 +101,8 @@ 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
 app/src/main/res/drawable-xxxhdpi/il_components_radiobutton_dark.png
+app/src/main/res/drawable-xxxhdpi/il_components_switch.png
+app/src/main/res/drawable-xxxhdpi/il_components_switch_dark.png
 app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png
 app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin_dark.png
 app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png
@@ -106,6 +116,7 @@ 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/radiobutton_selected.xml
+core/src/main/res/drawable/switch_selected.xml
 
 docs/assets/logo-icon.svg
 

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

@@ -22,6 +22,7 @@ import com.orange.ouds.app.ui.components.checkbox.CheckboxItemDemoScreen
 import com.orange.ouds.app.ui.components.link.LinkDemoScreen
 import com.orange.ouds.app.ui.components.radiobutton.RadioButtonDemoScreen
 import com.orange.ouds.app.ui.components.radiobutton.RadioButtonItemDemoScreen
+import com.orange.ouds.app.ui.components.switch.SwitchDemoScreen
 import com.orange.ouds.app.ui.utilities.LightDarkResourceId
 
 val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }
@@ -68,6 +69,13 @@ sealed class Component(
         R.string.app_components_radioButton_description_text,
         listOf(Variant.RadioButton, Variant.RadioButtonItem)
     )
+
+    data object Switch : Component(
+        R.string.app_components_switch_label,
+        LightDarkResourceId(R.drawable.il_components_switch, R.drawable.il_components_switch_dark),
+        R.string.app_components_switch_description_text,
+        listOf(Variant.Switch, Variant.SwitchItem)
+    )
 }
 
 sealed class Variant(
@@ -89,4 +97,6 @@ sealed class Variant(
 
     data object RadioButton : Variant(R.string.app_components_radioButton_radioButton_label, { RadioButtonDemoScreen() })
     data object RadioButtonItem : Variant(R.string.app_components_radioButton_radioButtonItem_label, { RadioButtonItemDemoScreen() })
+    data object Switch : Variant(R.string.app_components_switch_switch_label, { SwitchDemoScreen() })
+    data object SwitchItem : Variant(R.string.app_components_switch_switchItem_label, {})
 }

app/src/main/java/com/orange/ouds/app/ui/components/switch/SwitchDemoScreen.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.switch
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.rememberBottomSheetScaffoldState
+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.enabledArgument
+import com.orange.ouds.app.ui.utilities.composable.CodeSnippet
+import com.orange.ouds.app.ui.utilities.composable.CustomizationBottomSheetScaffold
+import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchListItem
+import com.orange.ouds.app.ui.utilities.composable.DemoScreen
+import com.orange.ouds.app.ui.utilities.composable.LightDarkDemo
+import com.orange.ouds.core.component.OudsSwitch
+import com.orange.ouds.core.theme.OudsTheme
+import com.orange.ouds.core.utilities.OudsPreview
+import com.orange.ouds.foundation.utilities.UiModePreviews
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SwitchDemoScreen() = DemoScreen(rememberSwitchDemoState()) {
+    CustomizationBottomSheetScaffold(
+        bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
+        bottomSheetContent = {
+            CustomizationSwitchListItem(
+                label = stringResource(R.string.app_common_enabled_label),
+                checked = enabled,
+                onCheckedChange = { enabled = it }
+            )
+        }
+    ) {
+        LightDarkDemo {
+            SwitchDemo(state = this@DemoScreen)
+        }
+
+        SwitchDemoCodeSnippet(
+            state = this@DemoScreen,
+            modifier = Modifier
+                .padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.medium)
+                .padding(top = OudsTheme.spaces.fixed.medium)
+        )
+    }
+}
+
+@Composable
+private fun SwitchDemo(state: SwitchDemoState) {
+    with(state) {
+        OudsSwitch(
+            checked = checked,
+            onCheckedChange = { checked = it },
+            enabled = enabled
+        )
+    }
+}
+
+@Composable
+private fun SwitchDemoCodeSnippet(state: SwitchDemoState, modifier: Modifier = Modifier) {
+    CodeSnippet(modifier = modifier) {
+        with(state) {
+            functionCall("OudsSwitch") {
+                typedArgument("checked", checked)
+                lambdaArgument("onCheckedChange") {
+                    comment("Change state")
+                }
+                enabledArgument(enabled)
+            }
+        }
+    }
+}
+
+@UiModePreviews.Default
+@Composable
+private fun PreviewSwitchDemoScreen() = OudsPreview {
+    SwitchDemoScreen()
+}

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

@@ -0,0 +1,60 @@
+/*
+ * 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.switch
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.mapSaver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+
+@Composable
+fun rememberSwitchDemoState(
+    checked: Boolean = false,
+    enabled: Boolean = true
+) = rememberSaveable(checked, enabled, saver = SwitchDemoState.Saver) {
+    SwitchDemoState(checked, enabled)
+}
+
+class SwitchDemoState(
+    checked: Boolean,
+    enabled: Boolean
+) {
+
+    companion object {
+
+        val Saver = run {
+            val checkedKey = "checked"
+            val enabledKey = "enabled"
+            mapSaver(
+                save = { state ->
+                    mapOf(
+                        checkedKey to state.checked,
+                        enabledKey to state.enabled
+                    )
+                },
+                restore = { map ->
+                    SwitchDemoState(
+                        map[checkedKey] as Boolean,
+                        map[enabledKey] as Boolean
+                    )
+                }
+            )
+        }
+    }
+
+    var checked: Boolean by mutableStateOf(checked)
+
+    var enabled: Boolean by mutableStateOf(enabled)
+}

app/src/main/res/drawable-hdpi/il_components_switch.png

@@ -154,6 +154,12 @@
     <string name="app_components_radioButton_radioButtonItem_outlined_label">Outlined</string>
     <string name="app_components_radioButton_radioButtonItem_additionalText_label">Additional text</string>
 
+    <!-- Components: switch -->
+    <string name="app_components_switch_label">Switch</string>
+    <string name="app_components_switch_description_text">A switch allows the user to toggle between two states, typically "on" and "off." It is often represented as a button or a slider that changes position or color to indicate the current state. Switches are used to enable or disable features, options, or settings in an intuitive and visual manner.</string>
+    <string name="app_components_switch_switch_label">Switch</string>
+    <string name="app_components_switch_switchItem_label">Switch item</string>
+
     <!-- About -->
     <string name="app_about_name_label">Design System Toolbox</string>
     <string name="app_about_pullRequest_label">Pull request\u0020</string>

app/src/main/res/drawable-hdpi/il_components_switch_dark.png

@@ -0,0 +1,52 @@
+/*
+ * 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.core.component
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.test.assertIsOff
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.performClick
+import com.orange.ouds.core.extension.setOudsContent
+import org.junit.Rule
+import org.junit.Test
+import org.mockito.kotlin.mock
+import org.mockito.kotlin.verify
+
+internal class OudsSwitchButtonTest {
+
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun oudsSwitch_click_succeeds() {
+        with(composeTestRule) {
+            val testTag = "OudsSwitch"
+            val checked = false
+            val onCheckedChange = mock<(Boolean) -> Unit>()
+
+            setOudsContent {
+                OudsSwitch(
+                    checked = checked,
+                    onCheckedChange = onCheckedChange,
+                    modifier = Modifier.testTag(testTag)
+                )
+            }
+
+            onNodeWithTag(testTag).assertIsOff()
+            onNodeWithTag(testTag).performClick()
+            verify(onCheckedChange).invoke(!checked)
+        }
+    }
+}