Skip to content

Commit

Permalink
Add link component to the demo app
Browse files Browse the repository at this point in the history
  • Loading branch information
paulinea committed Dec 12, 2024
1 parent 0f4fdd7 commit 1869468
Show file tree
Hide file tree
Showing 6 changed files with 264 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.components.button.ButtonDemoScreen
import com.orange.ouds.app.ui.components.link.LinkDemoScreen

val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }

Expand All @@ -41,4 +42,11 @@ sealed class Component(
R.string.app_components_button_description_text,
{ ButtonDemoScreen() }
)

data object Link : Component(
R.string.app_components_link_label,
R.drawable.il_components_button,
R.string.app_components_link_description_text,
{ LinkDemoScreen() }
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,14 @@ fun ButtonDemoScreen() = DemoScreen(rememberButtonDemoState()) {
}
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_button_style_label),
label = stringResource(R.string.app_components_common_style_label),
chipsLabels = styles.map { it::class.simpleName.orEmpty() },
selectedChipIndex = styles.indexOf(style),
onSelectionChange = { id -> style = styles[id] }
)
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_button_layout_label),
label = stringResource(R.string.app_components_common_layout_label),
chipsLabels = ButtonDemoState.Layout.entries.map { stringResource(it.labelRes) },
selectedChipIndex = ButtonDemoState.Layout.entries.indexOf(layout),
onSelectionChange = { id -> layout = ButtonDemoState.Layout.entries[id] }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@ class ButtonDemoState(
var layout: Layout by mutableStateOf(layout)

enum class Layout(@StringRes val labelRes: Int) {
TextOnly(R.string.app_components_button_textOnlyLayout_label),
IconAndText(R.string.app_components_button_iconAndTextLayout_label),
TextOnly(R.string.app_components_common_textOnlyLayout_label),
IconAndText(R.string.app_components_common_iconAndTextLayout_label),
IconOnly(R.string.app_components_button_iconOnlyLayout_label)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
/*
* Software Name: OUDS Android
* SPDX-FileCopyrightText: Copyright (c) Orange SA
* SPDX-License-Identifier: MIT
*
* This software is distributed under the MIT license,
* the text of which is available at https://opensource.org/license/MIT/
* or see the "LICENSE" file for more details.
*
* Software description: Android library of reusable graphical components
*/

package com.orange.ouds.app.ui.components.link

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.components.Component
import com.orange.ouds.app.ui.utilities.composable.CustomizationBottomSheetScaffold
import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChipsColumn
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.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.OudsSpaceKeyToken

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun LinkDemoScreen() = DemoScreen(rememberLinkDemoState()) {
CustomizationBottomSheetScaffold(
bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
bottomSheetContent = {
CustomizationSwitchListItem(
label = stringResource(R.string.app_common_enabled_label),
checked = enabled,
onCheckedChange = { enabled = it },
enabled = style == OudsLink.Style.Default
)
val styles = remember { listOf(OudsLink.Style.Default, OudsLink.Style.Skeleton) }
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_common_style_label),
chipsLabels = styles.map { it::class.simpleName.orEmpty() },
selectedChipIndex = styles.indexOf(style),
onSelectionChange = { id -> style = styles[id] }
)
val sizes = remember { listOf(OudsLink.Size.Small, OudsLink.Size.Medium) }
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_link_size_label),
chipsLabels = sizes.map { it.name },
selectedChipIndex = sizes.indexOf(size),
onSelectionChange = { id -> size = sizes[id] }
)
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_common_layout_label),
chipsLabels = LinkDemoState.Layout.entries.map { stringResource(it.labelRes) },
selectedChipIndex = LinkDemoState.Layout.entries.indexOf(layout),
onSelectionChange = { id -> layout = LinkDemoState.Layout.entries[id] }
)
}
) {
Column(modifier = Modifier.fillMaxWidth()) {
DetailScreenDescription(
modifier = Modifier.padding(all = OudsSpaceKeyToken.Fixed.Medium.value),
descriptionRes = Component.Link.descriptionRes
)
LinkDemo(state = this@DemoScreen)
OudsThemeTweak(OudsTheme.Tweak.Invert) {
LinkDemo(state = this@DemoScreen)
}
}
}
}

@Composable
private fun LinkDemo(state: LinkDemoState) {
Box(
modifier = Modifier
.background(OudsTheme.colorScheme.backgroundColors.primary)
.padding(all = OudsSpaceKeyToken.Fixed.Medium.value)
.fillMaxWidth(),
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,
style = style,
size = size
)
}
LinkDemoState.Layout.IconAndText -> {
OudsLink(
text = text,
icon = OudsLink.Icon(painterResource(id = R.drawable.ic_heart)),
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
LinkDemoState.Layout.ArrowBack -> {
OudsLink(
text = text,
arrow = OudsLink.Arrow.Back,
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
LinkDemoState.Layout.ArrowNext -> {
OudsLink(
text = text,
arrow = OudsLink.Arrow.Next,
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
}
}
}
}

@UiModePreviews.Default
@Composable
private fun PreviewLinkDemoScreen() = OudsPreview {
LinkDemoScreen()
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/*
* Software Name: OUDS Android
* SPDX-FileCopyrightText: Copyright (c) Orange SA
* SPDX-License-Identifier: MIT
*
* This software is distributed under the MIT license,
* the text of which is available at https://opensource.org/license/MIT/
* or see the "LICENSE" file for more details.
*
* Software description: Android library of reusable graphical components
*/

package com.orange.ouds.app.ui.components.link

import androidx.annotation.StringRes
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.mapSaver
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import com.orange.ouds.app.R
import com.orange.ouds.core.component.link.OudsLink
import com.orange.ouds.core.component.link.OudsLinkDefaults

@Composable
fun rememberLinkDemoState(
enabled: Boolean = true,
style: OudsLink.Style = OudsLinkDefaults.Style,
size: OudsLink.Size = OudsLinkDefaults.Size,
layout: LinkDemoState.Layout = LinkDemoState.Layout.TextOnly
) = rememberSaveable(enabled, style, size, layout, saver = LinkDemoState.Saver) {
LinkDemoState(enabled, style, size, layout)
}

class LinkDemoState(
enabled: Boolean,
style: OudsLink.Style,
size: OudsLink.Size,
layout: Layout
) {

companion object {

val Saver = run {
val enabledKey = "enabled"
val styleKey = "style"
val sizeKey = "size"
val layoutKey = "layout"
mapSaver(
save = { state ->
mapOf(
enabledKey to state.enabled,
styleKey to state.style,
sizeKey to state.size,
layoutKey to state.layout
)
},
restore = { map ->
LinkDemoState(
map[enabledKey] as Boolean,
map[styleKey] as OudsLink.Style,
map[sizeKey] as OudsLink.Size,
map[layoutKey] as Layout
)
}
)
}
}

var enabled: Boolean by mutableStateOf(enabled)

var style: OudsLink.Style by mutableStateOf(style)

var size: OudsLink.Size by mutableStateOf(size)

var layout: Layout by mutableStateOf(layout)

enum class Layout(@StringRes val labelRes: Int) {
TextOnly(R.string.app_components_common_textOnlyLayout_label),
IconAndText(R.string.app_components_common_iconAndTextLayout_label),
ArrowBack(R.string.app_components_link_arrowBack_label),
ArrowNext(R.string.app_components_link_arrowNext_label)
}
}
17 changes: 13 additions & 4 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,27 @@
<string name="app_tokens_typography_description_text">Typography is our system of fonts and text styles. They enhance communication and reinforce the brand style.</string>

<!-- Components -->
<string name="app_components_common_layout_label">Style</string>
<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>

<!-- Components: button -->
<string name="app_components_button_label">Button</string>
<string name="app_components_button_description_text">Buttons allow users to make choices or perform an action. They have multiple styles for various needs.</string>
<string name="app_components_button_hierarchy_label">Hierarchy</string>
<string name="app_components_button_style_label">Style</string>
<string name="app_components_button_layout_label">Layout</string>
<string name="app_components_button_textOnlyLayout_label">Text only</string>
<string name="app_components_button_iconAndTextLayout_label">Icon + text</string>
<string name="app_components_button_iconOnlyLayout_label">Icon only</string>
<string name="app_components_button_icon_a11y">Icon</string>

<!-- Components: link -->
<string name="app_components_link_label">Link</string>
<string name="app_components_link_description_text">Links direct users to other resources or sections, whether internal (within the same application) or external (to a website or document).</string>
<string name="app_components_link_arrowBack_label">Arrow back</string>
<string name="app_components_link_arrowNext_label">Arrow next</string>
<string name="app_components_link_size_label">Size</string>
<string name="app_components_link_smallSize_label">Small</string>
<string name="app_components_link_mediumSize_label">Medium</string>

<!-- About screen -->
<string name="app_about_privacyPolicy_label">Privacy policy</string>
<string name="app_about_legalInformation_label">Legal information</string>
Expand Down

0 comments on commit 1869468

Please sign in to comment.