feat: Add configurable example for RadioButtons in CatalogApp (#571)

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/toggles/RadioButtonConfigurator.kt

@@ -0,0 +1,185 @@
+/*
+ * Copyright (c) 2023 Adevinta
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package com.adevinta.spark.catalog.configurator.samples.toggles
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.adevinta.spark.SparkTheme
+import com.adevinta.spark.catalog.R
+import com.adevinta.spark.catalog.model.Configurator
+import com.adevinta.spark.catalog.themes.SegmentedButton
+import com.adevinta.spark.catalog.util.SampleSourceUrl
+import com.adevinta.spark.components.menu.DropdownMenuItem
+import com.adevinta.spark.components.text.Text
+import com.adevinta.spark.components.textfields.SelectTextField
+import com.adevinta.spark.components.textfields.TextField
+import com.adevinta.spark.components.toggles.ContentSide
+import com.adevinta.spark.components.toggles.RadioButton
+import com.adevinta.spark.components.toggles.RadioButtonLabelled
+import com.adevinta.spark.components.toggles.SwitchLabelled
+import com.adevinta.spark.components.toggles.ToggleIntent
+
+public val RadioButtonConfigurator: Configurator = Configurator(
+    name = "RadioButton",
+    description = "RadioButton configuration",
+    sourceUrl = "$SampleSourceUrl/RadioButtonSamples.kt",
+) {
+    RadioButtonSample()
+}
+
+@Preview(
+    showBackground = true,
+)
+@Composable
+private fun RadioButtonSample() {
+    val scrollState = rememberScrollState()
+    val focusManager = LocalFocusManager.current
+    Column(
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+        modifier = Modifier.verticalScroll(scrollState),
+    ) {
+        var isEnabled by remember { mutableStateOf(true) }
+        var contentSide by remember { mutableStateOf(ContentSide.End) }
+        var label: String? by remember { mutableStateOf(null) }
+        var selected by remember { mutableStateOf(false) }
+        var intent by remember { mutableStateOf(ToggleIntent.Main) }
+        val onClick = { selected = !selected }
+        ConfigedRadioButton(
+            label = label,
+            onClick = onClick,
+            selected = selected,
+            isEnabled = isEnabled,
+            intent = intent,
+            contentSide = contentSide,
+        )
+        SwitchLabelled(
+            checked = isEnabled,
+            onCheckedChange = {
+                isEnabled = it
+                focusManager.clearFocus()
+            },
+        ) {
+            Text(
+                text = stringResource(id = R.string.configurator_component_screen_enabled_label),
+                modifier = Modifier.fillMaxWidth(),
+            )
+        }
+        val intents = ToggleIntent.values()
+        var expanded by remember { mutableStateOf(false) }
+        SelectTextField(
+            modifier = Modifier.fillMaxWidth(),
+            value = intent.name,
+            onValueChange = {},
+            readOnly = true,
+            label = stringResource(id = R.string.configurator_component_screen_intent_label),
+            expanded = expanded,
+            onExpandedChange = { expanded = !expanded },
+            onDismissRequest = { expanded = false },
+            dropdownContent = {
+                intents.forEach {
+                    DropdownMenuItem(
+                        text = { Text(it.name) },
+                        onClick = {
+                            intent = it
+                            expanded = false
+                        },
+                    )
+                }
+            },
+        )
+        Column {
+            Text(
+                text = stringResource(id = R.string.configurator_component_toggle_content_side_label),
+                modifier = Modifier.padding(bottom = 8.dp),
+                style = SparkTheme.typography.body2.copy(fontWeight = FontWeight.Bold),
+            )
+            val contentSides = ContentSide.values()
+            val contentSidesLabel = contentSides.map { it.name }
+            SegmentedButton(
+                options = contentSidesLabel,
+                selectedOption = contentSide.name,
+                onOptionSelect = {
+                    contentSide = ContentSide.valueOf(it)
+                    focusManager.clearFocus()
+                },
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(48.dp),
+            )
+        }
+        TextField(
+            modifier = Modifier.fillMaxWidth(),
+            value = label.orEmpty(),
+            onValueChange = {
+                label = it
+            },
+            label = stringResource(id = R.string.configurator_component_screen_textfield_label),
+            placeholder = stringResource(id = R.string.configurator_component_toggle_placeholder_label),
+        )
+    }
+}
+
+@Composable
+private fun ConfigedRadioButton(
+    modifier: Modifier = Modifier,
+    label: String?,
+    onClick: () -> Unit,
+    selected: Boolean,
+    isEnabled: Boolean,
+    contentSide: ContentSide,
+    intent: ToggleIntent,
+) {
+    if (label.isNullOrBlank().not()) {
+        RadioButtonLabelled(
+            modifier = modifier,
+            enabled = isEnabled,
+            selected = selected,
+            onClick = onClick,
+            contentSide = contentSide,
+            intent = intent,
+        ) { Text(text = label!!) }
+    } else {
+        RadioButton(
+            modifier = modifier,
+            enabled = isEnabled,
+            selected = selected,
+            onClick = onClick,
+            intent = intent,
+        )
+    }
+}

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/CheckboxExamples.kt

@@ -150,7 +150,7 @@ private fun LabeledCheckboxGroupVerticalExample(labels: List<String>) {
 
     Column(modifier = Modifier.selectableGroup()) {
         Text(
-            text = stringResource(id = R.string.component_checkbox_vertical_group_title),
+            text = stringResource(id = R.string.component_toggle_vertical_group_title),
             style = SparkTheme.typography.headline2,
         )
         VerticalSpacer(space = 8.dp)
@@ -197,7 +197,7 @@ private fun LabeledCheckboxGroupVerticalExample(labels: List<String>) {
 private fun LabeledCheckboxGroupHorizontalExample(labels: List<String>) {
     Column {
         Text(
-            text = stringResource(id = R.string.component_checkbox_horizontal_group_title),
+            text = stringResource(id = R.string.component_toggle_horizontal_group_title),
             style = SparkTheme.typography.headline2,
         )
         VerticalSpacer(space = 8.dp)

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/RadioButtonExamples.kt

@@ -0,0 +1,190 @@
+/*
+ * Copyright (c) 2023 Adevinta
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package com.adevinta.spark.catalog.examples.samples.toggles
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.adevinta.spark.SparkTheme
+import com.adevinta.spark.catalog.R
+import com.adevinta.spark.catalog.model.Example
+import com.adevinta.spark.catalog.util.SampleSourceUrl
+import com.adevinta.spark.components.spacer.VerticalSpacer
+import com.adevinta.spark.components.toggles.ContentSide
+import com.adevinta.spark.components.toggles.RadioButton
+import com.adevinta.spark.components.toggles.RadioButtonLabelled
+
+private const val RadioButtonExampleDescription = "RadioButton examples"
+private const val RadioButtonExampleSourceUrl = "$SampleSourceUrl/RadioButtonSamples.kt"
+public val RadioButtonExamples: List<Example> = listOf(
+    Example(
+        name = "Standalone radio button",
+        description = RadioButtonExampleDescription,
+        sourceUrl = RadioButtonExampleSourceUrl,
+    ) {
+        Column {
+            var selected by remember { mutableStateOf(true) }
+            val onClick = { selected = !selected }
+            RadioButton(
+                selected = selected,
+                onClick = onClick,
+                enabled = true,
+            )
+            RadioButton(
+                selected = selected,
+                onClick = onClick,
+                enabled = false,
+            )
+        }
+    },
+    Example(
+        name = "Labeled radio button content side",
+        description = RadioButtonExampleDescription,
+        sourceUrl = RadioButtonExampleSourceUrl,
+    ) {
+        RadioButtonContentSideExample()
+    },
+    Example(
+        name = "Labeled radio button group",
+        description = RadioButtonExampleDescription,
+        sourceUrl = RadioButtonExampleSourceUrl,
+    ) {
+        LabeledRadioButtonGroupExample()
+    },
+)
+
+@Composable
+private fun RadioButtonContentSideExample() {
+    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
+        val label = stringResource(id = R.string.component_checkbox_content_side_example_label)
+        ContentSide.values().forEach { contentSide ->
+            var selected by remember { mutableStateOf(false) }
+            RadioButtonLabelled(
+                modifier = Modifier.fillMaxWidth(),
+                enabled = true,
+                selected = selected,
+                contentSide = contentSide,
+                onClick = { selected = !selected },
+            ) {
+                Text(
+                    text = label,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun LabeledRadioButtonGroupExample() {
+    val labels = listOf(
+        stringResource(id = R.string.component_checkbox_group_example_option1_label),
+        stringResource(id = R.string.component_checkbox_group_example_option2_label),
+    )
+    Column(verticalArrangement = Arrangement.spacedBy(24.dp)) {
+        LabeledRadioButtonGroupHorizontalExample(labels)
+        LabeledRadioButtonVerticalGroupExample(labels)
+    }
+}
+
+@Composable
+private fun LabeledRadioButtonVerticalGroupExample(
+    labels: List<String>,
+) {
+    var childrenStates by remember {
+        mutableStateOf(List(labels.size) { false })
+    }
+    Column {
+        Text(
+            text = stringResource(id = R.string.component_toggle_vertical_group_title),
+            style = SparkTheme.typography.headline2,
+        )
+        VerticalSpacer(space = 8.dp)
+        labels.forEachIndexed { index, label ->
+            val selected = childrenStates.getOrElse(index) { false }
+            val onClick = {
+                childrenStates = childrenStates.mapIndexed { i, selected ->
+                    if (i == index && selected.not()) {
+                        true
+                    } else if (i != index && selected) {
+                        false
+                    } else {
+                        selected
+                    }
+                }
+            }
+            RadioButtonLabelled(
+                enabled = true,
+                selected = selected,
+                contentSide = ContentSide.End,
+                onClick = onClick,
+            ) {
+                Text(text = label)
+            }
+        }
+    }
+}
+
+@Composable
+private fun LabeledRadioButtonGroupHorizontalExample(labels: List<String>) {
+    Column {
+        Text(
+            text = stringResource(id = R.string.component_toggle_horizontal_group_title),
+            style = SparkTheme.typography.headline2,
+        )
+        VerticalSpacer(space = 8.dp)
+        var childrenStates by remember {
+            mutableStateOf(List(labels.size) { false })
+        }
+        Row(horizontalArrangement = Arrangement.spacedBy(24.dp)) {
+            labels.forEachIndexed { index, label ->
+                val selected = childrenStates.getOrElse(index) { false }
+                val onClick = {
+                    childrenStates = childrenStates.mapIndexed { i, selected ->
+                        if (i == index && selected.not()) {
+                            true
+                        } else if (i != index && selected) {
+                            false
+                        } else {
+                            selected
+                        }
+                    }
+                }
+                RadioButtonLabelled(
+                    enabled = true,
+                    selected = selected,
+                    onClick = onClick,
+                ) { Text(label) }
+            }
+        }
+    }
+}