Skip to content

Commit

Permalink
Add "on colored background" customization option
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Dec 31, 2024
1 parent 17a4eb0 commit ad98a5c
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 53 deletions.
117 changes: 72 additions & 45 deletions app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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),
Expand All @@ -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
)
}
}
}
Expand Down
12 changes: 9 additions & 3 deletions app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,39 @@ 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
)
},
restore = { map ->
LinkDemoState(
map[enabledKey] as Boolean,
map[onColoredBackgroundKey] as Boolean,
map[sizeKey] as OudsLink.Size,
map[layoutKey] as Layout
)
Expand All @@ -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)
Expand Down
7 changes: 4 additions & 3 deletions app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationBottomSheet.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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")
Expand All @@ -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
)
}

Expand Down
6 changes: 4 additions & 2 deletions app/src/main/java/com/orange/ouds/app/ui/utilities/composable/CustomizationElements.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
)
}
Expand All @@ -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()
Expand Down
1 change: 1 addition & 0 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
<string name="app_components_common_textOnlyLayout_label">Text only</string>
<string name="app_components_common_iconAndTextLayout_label">Icon + text</string>
<string name="app_components_common_style_label">Style</string>
<string name="app_components_common_onColoredBackground_label">On colored background</string>

<!-- Components: button -->
<string name="app_components_button_label">Button</string>
Expand Down

0 comments on commit ad98a5c

Please sign in to comment.