From ad98a5c977ad1e33c252750f437d1e80115d9d1c Mon Sep 17 00:00:00 2001 From: Pauline Auvray Date: Tue, 31 Dec 2024 15:51:13 +0100 Subject: [PATCH] Add "on colored background" customization option --- .../app/ui/components/link/LinkDemoScreen.kt | 117 +++++++++++------- .../app/ui/components/link/LinkDemoState.kt | 12 +- .../composable/CustomizationBottomSheet.kt | 7 +- .../composable/CustomizationElements.kt | 6 +- app/src/main/res/values/strings.xml | 1 + 5 files changed, 90 insertions(+), 53 deletions(-) diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt b/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt index 0cc6a76f..9e09716c 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt @@ -32,12 +32,14 @@ import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChipsColum 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.DetailScreenDescription +import com.orange.ouds.core.component.coloredbox.OudsColoredBox import com.orange.ouds.core.component.link.OudsLink import com.orange.ouds.core.theme.OudsTheme import com.orange.ouds.core.theme.OudsThemeTweak import com.orange.ouds.core.theme.value import com.orange.ouds.core.utilities.OudsPreview import com.orange.ouds.foundation.utilities.UiModePreviews +import com.orange.ouds.theme.tokens.OudsColorKeyToken import com.orange.ouds.theme.tokens.OudsSpaceKeyToken @OptIn(ExperimentalMaterial3Api::class) @@ -51,6 +53,11 @@ fun LinkDemoScreen() = DemoScreen(rememberLinkDemoState()) { checked = enabled, onCheckedChange = { enabled = it }, ) + CustomizationSwitchListItem( + label = stringResource(R.string.app_components_common_onColoredBackground_label), + checked = onColoredBackground, + onCheckedChange = { onColoredBackground = it }, + ) val sizes = remember { listOf(OudsLink.Size.Small, OudsLink.Size.Medium) } CustomizationChoiceChipsColumn( modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value), @@ -73,62 +80,82 @@ fun LinkDemoScreen() = DemoScreen(rememberLinkDemoState()) { modifier = Modifier.padding(all = OudsSpaceKeyToken.Fixed.Medium.value), descriptionRes = Component.Link.descriptionRes ) - LinkDemo(state = this@DemoScreen) - OudsThemeTweak(OudsTheme.Tweak.Invert) { - LinkDemo(state = this@DemoScreen) + val demoBoxModifier = Modifier.padding(all = OudsSpaceKeyToken.Fixed.Medium.value).fillMaxWidth() + if (!onColoredBackground) { + LinkDemoBox(state = this@DemoScreen, modifier = demoBoxModifier) + OudsThemeTweak(OudsTheme.Tweak.Invert) { + LinkDemoBox(state = this@DemoScreen, modifier = demoBoxModifier) + } + } else { + LinkDemoColoredBox(state = this@DemoScreen, modifier = demoBoxModifier) } } } } @Composable -private fun LinkDemo(state: LinkDemoState) { +private fun LinkDemoBox(state: LinkDemoState, modifier: Modifier = Modifier) { Box( modifier = Modifier .background(OudsTheme.colorScheme.backgroundColors.primary) - .padding(all = OudsSpaceKeyToken.Fixed.Medium.value) - .fillMaxWidth(), + .then(modifier), contentAlignment = Alignment.Center ) { - val text = stringResource(id = R.string.app_components_link_label) - with(state) { - when (layout) { - LinkDemoState.Layout.TextOnly -> { - OudsLink( - text = text, - icon = null, - onClick = {}, - enabled = enabled, - size = size - ) - } - LinkDemoState.Layout.IconAndText -> { - OudsLink( - text = text, - icon = OudsLink.Icon(painterResource(id = R.drawable.ic_heart)), - onClick = {}, - enabled = enabled, - size = size - ) - } - LinkDemoState.Layout.ArrowBack -> { - OudsLink( - text = text, - arrow = OudsLink.Arrow.Back, - onClick = {}, - enabled = enabled, - size = size - ) - } - LinkDemoState.Layout.ArrowNext -> { - OudsLink( - text = text, - arrow = OudsLink.Arrow.Next, - onClick = {}, - enabled = enabled, - size = size - ) - } + LinkDemo(state = state) + } +} + +@Composable +private fun LinkDemoColoredBox(state: LinkDemoState, modifier: Modifier = Modifier) { + OudsColoredBox( + color = OudsColorKeyToken.Surface.Brand.Primary, + modifier = modifier, + contentAlignment = Alignment.Center + ) { + LinkDemo(state = state) + } +} + +@Composable +private fun LinkDemo(state: LinkDemoState) { + val text = stringResource(id = R.string.app_components_link_label) + with(state) { + when (layout) { + LinkDemoState.Layout.TextOnly -> { + OudsLink( + text = text, + icon = null, + onClick = {}, + enabled = enabled, + size = size + ) + } + LinkDemoState.Layout.IconAndText -> { + OudsLink( + text = text, + icon = OudsLink.Icon(painterResource(id = R.drawable.ic_heart)), + onClick = {}, + enabled = enabled, + size = size + ) + } + LinkDemoState.Layout.ArrowBack -> { + OudsLink( + text = text, + arrow = OudsLink.Arrow.Back, + onClick = {}, + enabled = enabled, + size = size + ) + } + LinkDemoState.Layout.ArrowNext -> { + OudsLink( + text = text, + arrow = OudsLink.Arrow.Next, + onClick = {}, + enabled = enabled, + size = size + ) } } } diff --git a/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt b/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt index 9b661948..6aaa2f3d 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt @@ -26,28 +26,31 @@ import com.orange.ouds.core.component.link.OudsLinkDefaults @Composable fun rememberLinkDemoState( enabled: Boolean = true, + onColoredBackground: Boolean = false, size: OudsLink.Size = OudsLinkDefaults.Size, layout: LinkDemoState.Layout = LinkDemoState.Layout.TextOnly -) = rememberSaveable(enabled, size, layout, saver = LinkDemoState.Saver) { - LinkDemoState(enabled, size, layout) +) = rememberSaveable(enabled, onColoredBackground, size, layout, saver = LinkDemoState.Saver) { + LinkDemoState(enabled, onColoredBackground, size, layout) } class LinkDemoState( enabled: Boolean, + onColoredBackground: Boolean, size: OudsLink.Size, layout: Layout ) { companion object { - val Saver = run { val enabledKey = "enabled" + val onColoredBackgroundKey = "onColoredBackground" val sizeKey = "size" val layoutKey = "layout" mapSaver( save = { state -> mapOf( enabledKey to state.enabled, + onColoredBackgroundKey to state.onColoredBackground, sizeKey to state.size, layoutKey to state.layout ) @@ -55,6 +58,7 @@ class LinkDemoState( restore = { map -> LinkDemoState( map[enabledKey] as Boolean, + map[onColoredBackgroundKey] as Boolean, map[sizeKey] as OudsLink.Size, map[layoutKey] as Layout ) @@ -65,6 +69,8 @@ class LinkDemoState( var enabled: Boolean by mutableStateOf(enabled) + var onColoredBackground: Boolean by mutableStateOf(onColoredBackground) + var size: OudsLink.Size by mutableStateOf(size) var layout: Layout by mutableStateOf(layout) diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt index 40284ead..63385d2e 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt @@ -16,6 +16,7 @@ import androidx.activity.compose.BackHandler import androidx.compose.animation.core.animateFloatAsState import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxScope import androidx.compose.foundation.layout.Column @@ -95,7 +96,8 @@ fun CustomizationBottomSheetScaffold( .fillMaxWidth() .height(BottomSheetDefaults.SheetPeekHeight) .padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), - verticalAlignment = Alignment.CenterVertically + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(OudsSpaceKeyToken.Fixed.Medium.value) ) { val degrees = if (bottomSheetScaffoldState.bottomSheetState.currentValue == SheetValue.Expanded) 0f else -180f val angle by animateFloatAsState(targetValue = degrees, label = "ComponentCustomizationBottomSheetScaffoldIconRotation") @@ -106,9 +108,8 @@ fun CustomizationBottomSheetScaffold( tint = OudsColorKeyToken.Content.Default.value ) Text( - modifier = Modifier.padding(start = OudsSpaceKeyToken.Fixed.Medium.value), text = stringResource(id = titleResId), - style = OudsTypographyKeyToken.Heading.Medium.value + style = OudsTypographyKeyToken.Body.Strong.Large.value ) } diff --git a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt index de4e17d3..ca62ac80 100644 --- a/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt +++ b/app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt @@ -36,13 +36,15 @@ import com.orange.ouds.core.theme.value import com.orange.ouds.theme.tokens.OudsSpaceKeyToken import com.orange.ouds.theme.tokens.OudsTypographyKeyToken +private val labelStyleToken = OudsTypographyKeyToken.Body.Strong.Large + @Composable fun CustomizationSwitchListItem(label: String, checked: Boolean, onCheckedChange: (Boolean) -> Unit, enabled: Boolean = true) { ListItem( modifier = Modifier .fillMaxWidth() .clickable(enabled = enabled) { onCheckedChange(!checked) }, - headlineContent = { Text(text = label, style = OudsTypographyKeyToken.Heading.Medium.value) }, + headlineContent = { Text(text = label, style = labelStyleToken.value) }, trailingContent = { Switch(checked = checked, onCheckedChange = null, enabled = enabled) } ) } @@ -56,7 +58,7 @@ fun CustomizationChoiceChipsColumn( modifier: Modifier = Modifier ) { Column(modifier = modifier.fillMaxWidth()) { - Text(modifier = Modifier.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), text = label, style = OudsTypographyKeyToken.Heading.Medium.value) + Text(modifier = Modifier.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value), text = label, style = labelStyleToken.value) Row( Modifier .fillMaxWidth() diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index bbe767f9..a8c400b4 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -113,6 +113,7 @@ Text only Icon + text Style + On colored background Button