diff --git a/catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/toggles/RadioButtonConfigurator.kt b/catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/toggles/RadioButtonConfigurator.kt new file mode 100644 index 000000000..52918b8b6 --- /dev/null +++ b/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, + ) + } +} diff --git a/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/CheckboxExamples.kt b/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/CheckboxExamples.kt index caeac230e..bac34f9d0 100644 --- a/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/CheckboxExamples.kt +++ b/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/CheckboxExamples.kt @@ -150,7 +150,7 @@ private fun LabeledCheckboxGroupVerticalExample(labels: List) { 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) { private fun LabeledCheckboxGroupHorizontalExample(labels: List) { 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) diff --git a/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/RadioButtonExamples.kt b/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/RadioButtonExamples.kt new file mode 100644 index 000000000..68689625b --- /dev/null +++ b/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 = 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, +) { + 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) { + 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) } + } + } + } +} diff --git a/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/SwitchExamples.kt b/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/SwitchExamples.kt index 12ae10155..df1ea2897 100644 --- a/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/SwitchExamples.kt +++ b/catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/SwitchExamples.kt @@ -100,27 +100,15 @@ private fun LabeledSwitchGroupExample( stringResource(id = R.string.component_checkbox_content_side_example_label), ) - - var childrenStates by remember { - mutableStateOf(List(labels.size) { false }) - } Column { - labels.forEachIndexed { index, label -> - val checked = childrenStates.getOrElse(index) { false } + labels.forEach { label -> + var checked by remember { mutableStateOf(false) } SwitchLabelled( modifier = Modifier.fillMaxWidth(), enabled = true, checked = checked, contentSide = contentSide, - onCheckedChange = { - childrenStates = childrenStates.mapIndexed { i, state -> - if (i == index) { - !state - } else { - state - } - } - }, + onCheckedChange = { checked = !checked }, ) { Text( text = label, diff --git a/catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt b/catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt index cd8f39484..a08559958 100644 --- a/catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt +++ b/catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt @@ -26,9 +26,11 @@ import com.adevinta.spark.catalog.R import com.adevinta.spark.catalog.configurator.samples.buttons.ButtonsConfigurator import com.adevinta.spark.catalog.configurator.samples.textfields.TextFieldsConfigurator import com.adevinta.spark.catalog.configurator.samples.toggles.CheckboxConfigurator +import com.adevinta.spark.catalog.configurator.samples.toggles.RadioButtonConfigurator import com.adevinta.spark.catalog.configurator.samples.toggles.SwitchConfigurator import com.adevinta.spark.catalog.examples.samples.buttons.ButtonsExamples import com.adevinta.spark.catalog.examples.samples.toggles.CheckboxExamples +import com.adevinta.spark.catalog.examples.samples.toggles.RadioButtonExamples import com.adevinta.spark.catalog.examples.samples.toggles.SwitchExamples import com.adevinta.spark.catalog.util.ComponentGuidelinesUrl import com.adevinta.spark.catalog.util.PackageSummaryUrl @@ -74,6 +76,18 @@ private val Checkboxes = Component( configurator = CheckboxConfigurator, ) +private val RadioButtons = Component( + id = nextId(), + name = "Radio buttons", + description = R.string.component_radiobutton_description, + // No buttons icon + guidelinesUrl = "$ComponentGuidelinesUrl/p/98058f-radio-button/b/700a17", + docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.toggles/index.html", + sourceUrl = "$SparkSourceUrl/kotlin/com/adevinta/spark/components/toggles/RadioButton.kt", + examples = RadioButtonExamples, + configurator = RadioButtonConfigurator, +) + private val Switches = Component( id = nextId(), name = "Switches", @@ -102,6 +116,7 @@ private val TextFields = Component( public val Components: List = listOf( Buttons, Checkboxes, + RadioButtons, Switches, TextFields, ) diff --git a/catalog/src/main/res/values/strings.xml b/catalog/src/main/res/values/strings.xml index 1ddd1571b..94d60404d 100644 --- a/catalog/src/main/res/values/strings.xml +++ b/catalog/src/main/res/values/strings.xml @@ -42,6 +42,9 @@ Components examples These are the examples that that can be found in the samples in the javadoc or the README.md files. They show usages of the components in different scenarios that should represent real use cases. Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post. + + Toggle grouping with vertical alignment + Toggle grouping with horizontal alignment Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items. This is an example of a multi-line text which is very long and in which the user should read all the information. @@ -49,10 +52,10 @@ Notifications Email The input / text-field component allows users to write in the space provided for the content. - Checkbox grouping with vertical alignment - Checkbox grouping with horizontal alignment ⚠️ Theming don’t work on these! These are the previews that the developers have when working on components. They are not exhaustive and are only meant to give you a quick idea of what the component looks like. + + Component used when only one choice may be selected in a series of options. Switch component allows the user to activate or deactivate the state of an element or concept. It is also used to control binary options (On/Off or True/False).