diff --git a/changelog.md b/changelog.md index 077e90a19..58cd14c04 100644 --- a/changelog.md +++ b/changelog.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- \[Demo\] Change buttons screens by removing style customization and adding a code implementation section ([#339](https://github.com/Orange-OpenSource/ods-android/issues/339)) - \[Doc\] Use ODS Jekyll theme header to display favicons on documentation github pages ([#370](https://github.com/Orange-OpenSource/ods-android/issues/370)) ### Fixed diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsContained.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsContained.kt index ef5073549..eefbc3a8c 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsContained.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsContained.kt @@ -26,6 +26,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import com.orange.ods.compose.component.OdsComponent import com.orange.ods.compose.component.button.OdsButton import com.orange.ods.compose.component.button.OdsButtonStyle import com.orange.ods.compose.component.chip.OdsChoiceChip @@ -33,8 +34,11 @@ import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow import com.orange.ods.compose.theme.OdsDisplaySurface import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText +import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn import com.orange.ods.demo.ui.utilities.composable.Subtitle import com.orange.ods.demo.ui.utilities.composable.SwitchListItem +import com.orange.ods.demo.ui.utilities.composable.Title import com.orange.ods.utilities.extension.fullName @OptIn(ExperimentalMaterialApi::class) @@ -46,16 +50,6 @@ fun ButtonsContained(style: OdsButtonStyle) { ComponentCustomizationBottomSheetScaffold( bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), bottomSheetContent = { - Subtitle(textRes = R.string.component_style, horizontalPadding = true) - OdsChoiceChipsFlowRow( - selectedChip = containedButtonStyle, - modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)), - outlinedChips = true - ) { - OdsChoiceChip(textRes = R.string.component_button_style_primary, value = OdsButtonStyle.Primary) - OdsChoiceChip(textRes = R.string.component_button_style_default, value = OdsButtonStyle.Default) - OdsChoiceChip(textRes = R.string.component_button_style_functional, value = OdsButtonStyle.FunctionalPositive) - } if (containedButtonStyle.value in listOf(OdsButtonStyle.FunctionalPositive, OdsButtonStyle.FunctionalNegative)) { Subtitle(textRes = R.string.component_button_style_functional, horizontalPadding = true) OdsChoiceChipsFlowRow( @@ -77,7 +71,14 @@ fun ButtonsContained(style: OdsButtonStyle) { .verticalScroll(rememberScrollState()) .padding(vertical = dimensionResource(id = R.dimen.screen_vertical_margin)) ) { - ButtonStyleTitle(style = containedButtonStyle.value) + with(containedButtonStyle.value) { + if (this in listOf(OdsButtonStyle.FunctionalNegative, OdsButtonStyle.FunctionalPositive)) { + Title( + textRes = if (this == OdsButtonStyle.FunctionalNegative) R.string.component_button_style_functional_negative else R.string.component_button_style_functional_positive, + horizontalPadding = true + ) + } + } ContainedButton(style = containedButtonStyle.value, leadingIcon = hasLeadingIcon, enabled = isEnabled, variableWidth = hasVariableWidth) @@ -104,35 +105,19 @@ fun ButtonsContained(style: OdsButtonStyle) { ) } } - } - } - } -} -@Composable -private fun ButtonStyleTitle(style: OdsButtonStyle) { - val titleRes: Int - val technicalText: String - when (style) { - OdsButtonStyle.Default -> { - titleRes = R.string.component_button_style_default - technicalText = OdsButtonStyle.Default.fullName - } - OdsButtonStyle.Primary -> { - titleRes = R.string.component_button_style_primary - technicalText = OdsButtonStyle.Primary.fullName - } - OdsButtonStyle.FunctionalNegative -> { - titleRes = R.string.component_button_style_functional_negative - technicalText = OdsButtonStyle.FunctionalNegative.fullName - } - OdsButtonStyle.FunctionalPositive -> { - titleRes = R.string.component_button_style_functional_positive - technicalText = OdsButtonStyle.FunctionalPositive.fullName + CodeImplementationColumn { + ButtonTechnicalText( + componentName = OdsComponent.OdsButton.name, + style = containedButtonStyle.value.fullName, + enabled = isEnabled, + variableWidth = hasVariableWidth, + icon = hasLeadingIcon + ) + } + } } } - - StyleTitle(titleRes = titleRes, technicalText = technicalText) } @Composable @@ -143,9 +128,7 @@ private fun ContainedButton( variableWidth: Boolean, displaySurface: OdsDisplaySurface = OdsDisplaySurface.Default ) { - val modifier = Modifier - .padding(horizontal = dimensionResource(R.dimen.screen_horizontal_margin)) - .padding(top = dimensionResource(R.dimen.spacing_m)) + val modifier = Modifier.padding(horizontal = dimensionResource(R.dimen.screen_horizontal_margin), vertical = dimensionResource(R.dimen.spacing_m)) OdsButton( modifier = if (variableWidth) modifier else modifier.fillMaxWidth(), diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsOutlined.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsOutlined.kt index 510995454..6fb6c42ef 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsOutlined.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsOutlined.kt @@ -24,10 +24,13 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import com.orange.ods.compose.component.OdsComponent import com.orange.ods.compose.component.button.OdsOutlinedButton import com.orange.ods.compose.theme.OdsDisplaySurface import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText +import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn import com.orange.ods.demo.ui.utilities.composable.SwitchListItem @OptIn(ExperimentalMaterialApi::class) @@ -72,6 +75,15 @@ fun ButtonsOutlined() { ) } } + + CodeImplementationColumn { + ButtonTechnicalText( + componentName = OdsComponent.OdsOutlinedButton.name, + enabled = isEnabled, + variableWidth = hasVariableWidth, + icon = hasLeadingIcon + ) + } } } } diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsText.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsText.kt index e0677916b..57052fe3e 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsText.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsText.kt @@ -24,6 +24,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import com.orange.ods.compose.component.OdsComponent import com.orange.ods.compose.component.button.OdsTextButton import com.orange.ods.compose.component.button.OdsTextButtonStyle import com.orange.ods.compose.component.chip.OdsChoiceChip @@ -31,8 +32,11 @@ import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow import com.orange.ods.compose.theme.OdsDisplaySurface import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText +import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn import com.orange.ods.demo.ui.utilities.composable.Subtitle import com.orange.ods.demo.ui.utilities.composable.SwitchListItem +import com.orange.ods.demo.ui.utilities.composable.Title import com.orange.ods.utilities.extension.fullName @OptIn(ExperimentalMaterialApi::class) @@ -63,7 +67,10 @@ fun ButtonsText() { .verticalScroll(rememberScrollState()) .padding(vertical = dimensionResource(id = R.dimen.screen_vertical_margin)) ) { - ButtonStyleTitle(style = textButtonStyle.value) + Title( + textRes = if (textButtonStyle.value == OdsTextButtonStyle.Default) R.string.component_button_style_default else R.string.component_button_style_primary, + horizontalPadding = true + ) TextButton(style = textButtonStyle.value, leadingIcon = hasLeadingIcon, enabled = isEnabled, variableWidth = hasVariableWidth) @@ -90,27 +97,19 @@ fun ButtonsText() { ) } } - } - } - } -} -@Composable -private fun ButtonStyleTitle(style: OdsTextButtonStyle) { - val titleRes: Int - val technicalText: String - when (style) { - OdsTextButtonStyle.Default -> { - titleRes = R.string.component_button_style_default - technicalText = OdsTextButtonStyle.Default.fullName - } - OdsTextButtonStyle.Primary -> { - titleRes = R.string.component_button_style_primary - technicalText = OdsTextButtonStyle.Primary.fullName + CodeImplementationColumn { + ButtonTechnicalText( + componentName = OdsComponent.OdsTextButton.name, + style = textButtonStyle.value.fullName, + enabled = isEnabled, + variableWidth = hasVariableWidth, + icon = hasLeadingIcon + ) + } + } } } - - StyleTitle(titleRes = titleRes, technicalText = technicalText) } @Composable diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsToggle.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsToggle.kt index 3d0a5866a..50385447e 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsToggle.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ButtonsToggle.kt @@ -29,11 +29,15 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import com.orange.ods.compose.component.OdsComponent import com.orange.ods.compose.component.button.OdsIconToggleButton import com.orange.ods.compose.theme.OdsDisplaySurface import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.utilities.ComponentCountRow import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold +import com.orange.ods.demo.ui.utilities.composable.ButtonTechnicalText +import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn +import com.orange.ods.demo.ui.utilities.composable.RowSurroundedTechnicalText import com.orange.ods.demo.ui.utilities.composable.Title @OptIn(ExperimentalMaterialApi::class) @@ -106,6 +110,25 @@ fun ButtonsToggle() { ) } } + + CodeImplementationColumn { + if (toggleCount.value > 1) { + RowSurroundedTechnicalText { + repeat(toggleCount.value) { + ButtonTechnicalText( + modifier = Modifier.padding(start = dimensionResource(id = R.dimen.spacing_s)), + componentName = OdsComponent.OdsIconToggleButton.name, + enabled = true + ) + } + } + } else { + ButtonTechnicalText( + componentName = OdsComponent.OdsIconToggleButton.name, + enabled = true + ) + } + } } } diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ComponentButtons.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ComponentButtons.kt index 668067ee4..4436a8d6d 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ComponentButtons.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/buttons/ComponentButtons.kt @@ -20,14 +20,13 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.dimensionResource +import androidx.compose.ui.res.stringResource import com.orange.ods.compose.component.button.OdsButtonStyle +import com.orange.ods.compose.text.OdsTextBody2 import com.orange.ods.compose.theme.OdsDisplaySurface import com.orange.ods.compose.theme.OdsTheme import com.orange.ods.demo.R import com.orange.ods.demo.ui.components.Variant -import com.orange.ods.demo.ui.utilities.composable.Subtitle -import com.orange.ods.demo.ui.utilities.composable.TechnicalText -import com.orange.ods.demo.ui.utilities.composable.Title @Composable fun ComponentButtons(variant: Variant) { @@ -42,35 +41,44 @@ fun ComponentButtons(variant: Variant) { } } -@Composable -fun StyleTitle(@StringRes titleRes: Int, technicalText: String) { - Title(titleRes, horizontalPadding = true) - TechnicalText(text = technicalText, horizontalPadding = true) -} - @Composable fun DarkSurface(content: @Composable ColumnScope.() -> Unit) { - ForcedBackgroundColumn(color = OdsTheme.darkThemeColors.surface) { - Subtitle(textRes = R.string.component_force_on_dark, displaySurface = OdsDisplaySurface.Dark, horizontalPadding = true) - content() - } + ForcedBackgroundColumn(darkSurface = true, content = content) } @Composable fun LightSurface(content: @Composable ColumnScope.() -> Unit) { - ForcedBackgroundColumn(color = OdsTheme.lightThemeColors.surface) { - Subtitle(textRes = R.string.component_force_on_light, displaySurface = OdsDisplaySurface.Light, horizontalPadding = true) - content() - } + ForcedBackgroundColumn(darkSurface = false, content = content) } @Composable -private fun ForcedBackgroundColumn(color: Color, content: @Composable ColumnScope.() -> Unit) { +private fun ForcedBackgroundColumn(darkSurface: Boolean, content: @Composable ColumnScope.() -> Unit) { + val backgroundColor: Color + @StringRes val textRes: Int + val displaySurface: OdsDisplaySurface + if (darkSurface) { + backgroundColor = OdsTheme.darkThemeColors.surface + textRes = R.string.component_force_on_dark + displaySurface = OdsDisplaySurface.Dark + } else { + backgroundColor = OdsTheme.lightThemeColors.surface + textRes = R.string.component_force_on_light + displaySurface = OdsDisplaySurface.Light + } + Column( modifier = Modifier .fillMaxWidth() - .background(color = color) - .padding(bottom = dimensionResource(R.dimen.spacing_m)), - content = content - ) + .background(color = backgroundColor) + .padding(bottom = dimensionResource(R.dimen.spacing_m)) + ) { + OdsTextBody2( + modifier = Modifier + .padding(horizontal = dimensionResource(id = R.dimen.spacing_m)) + .padding(top = dimensionResource(id = R.dimen.spacing_s)), + text = stringResource(id = textRes), + displaySurface = displaySurface + ) + content() + } } \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt new file mode 100644 index 000000000..f2db2ca08 --- /dev/null +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt @@ -0,0 +1,73 @@ +/* + * + * Copyright 2021 Orange + * + * Use of this source code is governed by an MIT-style + * license that can be found in the LICENSE file or at + * https://opensource.org/licenses/MIT. + * / + */ + +package com.orange.ods.demo.ui.utilities.composable + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.dimensionResource +import com.orange.ods.compose.theme.OdsTheme +import com.orange.ods.demo.R + +@Composable +fun CodeImplementationColumn(content: @Composable ColumnScope.() -> Unit) { + Column(modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.spacing_m), vertical = dimensionResource(id = R.dimen.spacing_s))) { + Subtitle(textRes = R.string.code_implementation) + Spacer(modifier = Modifier.height(dimensionResource(id = R.dimen.spacing_s))) + Column( + modifier = Modifier + .background(OdsTheme.colors.onSurface.copy(alpha = 0.12f)) + .padding(horizontal = dimensionResource(id = R.dimen.spacing_s), vertical = dimensionResource(id = R.dimen.spacing_s)), + content = content + ) + } +} + +@Composable +fun ButtonTechnicalText( + componentName: String, + enabled: Boolean, + modifier: Modifier = Modifier, + style: String? = null, + variableWidth: Boolean? = null, + icon: Boolean? = null +) { + Column(modifier = modifier) { + TechnicalText(text = "$componentName(") + Column(modifier = Modifier.padding(start = dimensionResource(id = R.dimen.spacing_s))) { + if (variableWidth == false) { + TechnicalText(text = "modifier = Modifier.fillMaxWidth(),") + } + style?.let { TechnicalText(text = "style = $style,") } + if (icon == true) { + TechnicalText(text = "icon = painterResource(id = R.drawable.ic_search),") + } + if (!enabled) { + TechnicalText(text = "enabled = false,") + } + TechnicalText(text = "//...") + } + TechnicalText(text = ")") + } +} + +@Composable +fun RowSurroundedTechnicalText(content: @Composable () -> Unit) { + TechnicalText(text = "Row {") + content() + TechnicalText(text = "}") + +} \ No newline at end of file diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/Texts.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/Texts.kt index ee6ae3a59..16b6da0d3 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/Texts.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/Texts.kt @@ -21,7 +21,10 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.res.dimensionResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.Font +import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp import com.orange.ods.compose.text.OdsTextH5 import com.orange.ods.compose.text.OdsTextSubtitle1 import com.orange.ods.compose.theme.OdsDisplaySurface @@ -58,13 +61,13 @@ fun Subtitle(@StringRes textRes: Int, displaySurface: OdsDisplaySurface = OdsDis } @Composable -fun TechnicalText(text: String, horizontalPadding: Boolean = false) { +fun TechnicalText(text: String, modifier: Modifier = Modifier) { + val courier = FontFamily(Font(R.font.courier_prime_regular)) Text( text = text, - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = if (horizontalPadding) dimensionResource(R.dimen.screen_horizontal_margin) else 0.dp), - style = OdsTheme.typography.body2, - color = OdsTheme.colors.onBackground.copy(alpha = ContentAlpha.medium) + modifier = modifier.fillMaxWidth(), + fontFamily = courier, + fontSize = 14.sp, + color = OdsTheme.colors.onSurface.copy(alpha = ContentAlpha.medium) ) } \ No newline at end of file diff --git a/demo/src/main/res/font/courier_prime_regular.ttf b/demo/src/main/res/font/courier_prime_regular.ttf new file mode 100644 index 000000000..4af1ff54c Binary files /dev/null and b/demo/src/main/res/font/courier_prime_regular.ttf differ diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml index ab97b8356..1322aeaa3 100644 --- a/demo/src/main/res/values/strings.xml +++ b/demo/src/main/res/values/strings.xml @@ -10,6 +10,7 @@ ODS Preview + Code implementation Guidelines @@ -128,7 +129,6 @@ Positive Negative - Cards Card image first