Skip to content

Commit 09ab7f7

Browse files
florentmaitreflorentmaitre
committed
Add top app bar demo
1 parent a73f43b commit 09ab7f7

File tree

15 files changed

+489
-62
lines changed

15 files changed

+489
-62
lines changed

‎app/src/main/java/com/orange/ouds/app/ui/components/Component.kt‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import com.orange.ouds.app.ui.components.switch.SwitchItemDemoScreen
3333
import com.orange.ouds.app.ui.components.tag.InputTagDemoScreen
3434
import com.orange.ouds.app.ui.components.tag.TagDemoScreen
3535
import com.orange.ouds.app.ui.components.textinput.TextInputDemoScreen
36+
import com.orange.ouds.app.ui.components.topappbar.TopAppBarDemoScreen
3637
import com.orange.ouds.app.ui.utilities.previewCompatibleClass
3738

3839
val components = Component::class.sealedSubclasses.mapNotNull { it.objectInstance }
@@ -135,6 +136,13 @@ sealed class Component(
135136
{ TextInputIllustration() },
136137
demoScreen = { TextInputDemoScreen() }
137138
)
139+
140+
data object TopAppBar : Component(
141+
R.string.app_components_topAppBar_label,
142+
R.string.app_components_topAppBar_description_text,
143+
{ TopAppBarIllustration() },
144+
demoScreen = { TopAppBarDemoScreen() }
145+
)
138146
}
139147

140148
sealed class Variant(

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentCode.kt‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ package com.orange.ouds.app.ui.components
1414

1515
import androidx.annotation.DrawableRes
1616
import androidx.annotation.StringRes
17+
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.graphics.toArgb
1719
import com.orange.ouds.app.ui.utilities.Code
1820
import com.orange.ouds.app.ui.utilities.FunctionCall
1921
import com.orange.ouds.core.component.OudsColoredBoxColor
@@ -36,6 +38,13 @@ fun FunctionCall.Builder.painterArgument(@DrawableRes id: Int) {
3638
}
3739
}
3840

41+
fun FunctionCall.Builder.colorArgument(name: String, color: Color) {
42+
constructorCallArgument<Color>(name) {
43+
isMultiline = false
44+
rawArgument(null, "0x${color.toArgb().toHexString()}")
45+
}
46+
}
47+
3948
fun FunctionCall.Builder.stringArgument(name: String, @StringRes id: Int) = formattableArgument(name) { "\"${it.getString(id)}\"" }
4049

4150
fun FunctionCall.Builder.contentDescriptionArgument(@StringRes id: Int) = stringArgument(Argument.ContentDescription, id)

‎app/src/main/java/com/orange/ouds/app/ui/components/ComponentIllustrations.kt‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import androidx.compose.foundation.layout.height
1919
import androidx.compose.foundation.layout.padding
2020
import androidx.compose.foundation.layout.width
2121
import androidx.compose.foundation.text.input.rememberTextFieldState
22+
import androidx.compose.material3.ExperimentalMaterial3Api
2223
import androidx.compose.runtime.Composable
2324
import androidx.compose.runtime.CompositionLocalProvider
2425
import androidx.compose.ui.Modifier
@@ -30,7 +31,6 @@ import androidx.compose.ui.unit.dp
3031
import com.orange.ouds.app.R
3132
import com.orange.ouds.app.ui.components.coloredbackground.ColoredBackgroundDemoStateDefaults
3233
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
33-
import com.orange.ouds.app.ui.utilities.ThemeDrawableResources
3434
import com.orange.ouds.app.ui.utilities.composable.Illustration
3535
import com.orange.ouds.core.component.OudsBadge
3636
import com.orange.ouds.core.component.OudsBadgeSize
@@ -51,6 +51,9 @@ import com.orange.ouds.core.component.OudsSwitch
5151
import com.orange.ouds.core.component.OudsTag
5252
import com.orange.ouds.core.component.OudsTagStatus
5353
import com.orange.ouds.core.component.OudsTextInput
54+
import com.orange.ouds.core.component.OudsTopAppBar
55+
import com.orange.ouds.core.component.OudsTopAppBarAction
56+
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
5457
import com.orange.ouds.core.theme.isOudsInDarkTheme
5558

5659
@Composable
@@ -192,6 +195,23 @@ fun TextInputIllustration() = ComponentIllustration {
192195
)
193196
}
194197

198+
@OptIn(ExperimentalMaterial3Api::class)
199+
@Composable
200+
fun TopAppBarIllustration() = ComponentIllustration {
201+
OudsTopAppBar(
202+
modifier = Modifier.padding(horizontal = 12.dp),
203+
title = stringResource(id = R.string.app_components_common_label_label),
204+
navigationIcon = OudsTopAppBarNavigationIcon.Back {},
205+
actions = listOf(
206+
OudsTopAppBarAction.Icon(
207+
painter = painterResource(LocalThemeDrawableResources.current.tipsAndTricks),
208+
contentDescription = "",
209+
onClick = {}
210+
)
211+
)
212+
)
213+
}
214+
195215
@Composable
196216
private fun ComponentIllustration(content: @Composable () -> Unit) {
197217
CompositionLocalProvider(

‎app/src/main/java/com/orange/ouds/app/ui/components/coloredbackground/ColoredBackgroundDemoScreen.kt‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -126,18 +126,23 @@ private fun Code.Builder.coloredBackgroundDemoCodeSnippet(state: ColoredBackgrou
126126
trailingLambda = true
127127
typedArgument("color", color)
128128
lambdaArgument(null) {
129-
functionCall("Text") {
130-
typedArgument("text", color.name.toSentenceCase())
131-
rawArgument("color", "OudsTheme.colorScheme.content.default")
132-
}
133-
functionCall("OudsButton") {
134-
labelArgument(R.string.app_components_button_label)
135-
onClickArgument {}
136-
}
137-
functionCall("OudsLink") {
138-
labelArgument(R.string.app_components_link_label)
139-
typedArgument("arrow", OudsLinkArrow.Next)
140-
onClickArgument {}
129+
functionCall("Column") {
130+
trailingLambda = true
131+
lambdaArgument(null) {
132+
functionCall("Text") {
133+
typedArgument("text", color.name.toSentenceCase())
134+
rawArgument("color", "OudsTheme.colorScheme.content.default")
135+
}
136+
functionCall("OudsButton") {
137+
labelArgument(R.string.app_components_button_label)
138+
onClickArgument {}
139+
}
140+
functionCall("OudsLink") {
141+
labelArgument(R.string.app_components_link_label)
142+
typedArgument("arrow", OudsLinkArrow.Next)
143+
onClickArgument {}
144+
}
145+
}
141146
}
142147
}
143148
}

‎app/src/main/java/com/orange/ouds/app/ui/components/navigationbar/NavigationBarDemoScreen.kt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@ import com.orange.ouds.app.ui.utilities.Code
3333
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
3434
import com.orange.ouds.app.ui.utilities.ThemeDrawableResourceProvider
3535
import com.orange.ouds.app.ui.utilities.ThemeDrawableResources
36+
import com.orange.ouds.app.ui.utilities.composable.AppPreview
3637
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
3738
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
3839
import com.orange.ouds.core.component.OudsNavigationBar
3940
import com.orange.ouds.core.component.OudsNavigationBarItem
4041
import com.orange.ouds.core.component.OudsNavigationBarItemBadge
4142
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
4243
import com.orange.ouds.core.theme.OudsTheme
43-
import com.orange.ouds.core.utilities.OudsPreview
4444
import com.orange.ouds.theme.OudsVersion
4545

4646
@Composable
@@ -153,6 +153,6 @@ enum class NavigationBarItem(val iconResourceProvider: ThemeDrawableResourceProv
153153

154154
@PreviewLightDark
155155
@Composable
156-
private fun PreviewNavigationBarDemoScreen() = OudsPreview {
156+
private fun PreviewNavigationBarDemoScreen() = AppPreview {
157157
NavigationBarDemoScreen()
158158
}

‎app/src/main/java/com/orange/ouds/app/ui/components/topappbar/TopAppBarDemoScreen.kt‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.app.ui.components.topappbar
14+
15+
import androidx.compose.foundation.layout.PaddingValues
16+
import androidx.compose.material3.ExperimentalMaterial3Api
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.res.painterResource
20+
import androidx.compose.ui.res.stringResource
21+
import androidx.compose.ui.tooling.preview.PreviewLightDark
22+
import com.orange.ouds.app.R
23+
import com.orange.ouds.app.ui.components.Component
24+
import com.orange.ouds.app.ui.components.colorArgument
25+
import com.orange.ouds.app.ui.components.contentDescriptionArgument
26+
import com.orange.ouds.app.ui.components.onClickArgument
27+
import com.orange.ouds.app.ui.components.painterArgument
28+
import com.orange.ouds.app.ui.utilities.Code
29+
import com.orange.ouds.app.ui.utilities.LocalThemeDrawableResources
30+
import com.orange.ouds.app.ui.utilities.ThemeDrawableResources
31+
import com.orange.ouds.app.ui.utilities.composable.AppPreview
32+
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
33+
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
34+
import com.orange.ouds.app.ui.utilities.composable.CustomizationTextField
35+
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
36+
import com.orange.ouds.core.component.OudsCenterAlignedTopAppBar
37+
import com.orange.ouds.core.component.OudsLargeTopAppBar
38+
import com.orange.ouds.core.component.OudsMediumTopAppBar
39+
import com.orange.ouds.core.component.OudsTopAppBar
40+
import com.orange.ouds.core.component.OudsTopAppBarAction
41+
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
42+
import com.orange.ouds.core.theme.OudsTheme
43+
import com.orange.ouds.theme.OudsVersion
44+
45+
@Composable
46+
fun TopAppBarDemoScreen() {
47+
val state = rememberTopAppBarDemoState()
48+
val themeDrawableResources = LocalThemeDrawableResources.current
49+
DemoScreen(
50+
description = stringResource(id = Component.TopAppBar.descriptionRes),
51+
bottomSheetContent = { TopAppBarDemoBottomSheetContent(state = state) },
52+
codeSnippet = { topAppBarDemoCodeSnippet(state = state, themeDrawableResources = themeDrawableResources) },
53+
demoContent = { TopAppBarDemoContent(state = state) },
54+
demoContentPaddingValues = PaddingValues(horizontal = OudsTheme.spaces.fixed.none),
55+
version = OudsVersion.Component.NavigationBar
56+
)
57+
}
58+
59+
@Composable
60+
private fun TopAppBarDemoBottomSheetContent(state: TopAppBarDemoState) {
61+
with(state) {
62+
CustomizationFilterChips(
63+
applyTopPadding = false,
64+
label = stringResource(R.string.app_components_common_size_label),
65+
chipLabels = TopAppBarDemoState.Size.entries.map { stringResource(it.labelRes) },
66+
selectedChipIndex = TopAppBarDemoState.Size.entries.indexOf(size),
67+
onSelectionChange = { id -> size = TopAppBarDemoState.Size.entries[id] }
68+
)
69+
CustomizationSwitchItem(
70+
label = stringResource(R.string.app_components_topAppBar_centerAligned_label),
71+
checked = centerAligned,
72+
onCheckedChange = { centerAligned = it },
73+
enabled = centerAlignedSwitchEnabled
74+
)
75+
CustomizationSwitchItem(
76+
label = stringResource(R.string.app_components_topAppBar_navigationIcon_label),
77+
checked = navigationIcon,
78+
onCheckedChange = { navigationIcon = it }
79+
)
80+
CustomizationTextField(
81+
label = stringResource(R.string.app_components_topAppBar_title_label),
82+
value = title,
83+
onValueChange = { value -> title = value }
84+
)
85+
CustomizationFilterChips(
86+
applyTopPadding = true,
87+
label = stringResource(R.string.app_components_topAppBar_avatar_label),
88+
chipLabels = TopAppBarDemoState.Avatar.entries.map { stringResource(it.labelRes) },
89+
selectedChipIndex = TopAppBarDemoState.Avatar.entries.indexOf(avatar),
90+
onSelectionChange = { id -> avatar = TopAppBarDemoState.Avatar.entries[id] }
91+
)
92+
CustomizationTextField(
93+
label = stringResource(R.string.app_components_topAppBar_avatarMonogram_label),
94+
value = avatarMonogram,
95+
onValueChange = { value -> avatarMonogram = value },
96+
enabled = avatarMonogramTextFieldEnabled
97+
)
98+
}
99+
}
100+
101+
@OptIn(ExperimentalMaterial3Api::class)
102+
@Composable
103+
private fun TopAppBarDemoContent(state: TopAppBarDemoState) {
104+
with(state) {
105+
val navigationIcon = if (navigationIcon) OudsTopAppBarNavigationIcon.Back {} else null
106+
val avatarContentDescription = stringResource(R.string.app_components_topAppBar_secondAction_a11y)
107+
val avatarAction = when (avatar) {
108+
TopAppBarDemoState.Avatar.Image -> OudsTopAppBarAction.Avatar(
109+
painter = painterResource(id = R.drawable.il_top_app_bar_avatar),
110+
contentDescription = avatarContentDescription,
111+
onClick = {}
112+
)
113+
TopAppBarDemoState.Avatar.Monogram -> OudsTopAppBarAction.Avatar(
114+
monogram = avatarMonogram,
115+
color = Color.White,
116+
backgroundColor = Color(0xff138126),
117+
contentDescription = avatarContentDescription,
118+
onClick = {}
119+
)
120+
}
121+
val actions = listOf(
122+
OudsTopAppBarAction.Icon(
123+
painter = painterResource(id = LocalThemeDrawableResources.current.tipsAndTricks),
124+
contentDescription = stringResource(R.string.app_components_topAppBar_firstAction_a11y),
125+
onClick = {}
126+
),
127+
avatarAction
128+
)
129+
when (size) {
130+
TopAppBarDemoState.Size.Small -> {
131+
if (centerAligned) {
132+
OudsCenterAlignedTopAppBar(
133+
title = title,
134+
navigationIcon = navigationIcon,
135+
actions = actions
136+
)
137+
} else {
138+
OudsTopAppBar(
139+
title = title,
140+
navigationIcon = navigationIcon,
141+
actions = actions
142+
)
143+
}
144+
}
145+
TopAppBarDemoState.Size.Medium -> {
146+
OudsMediumTopAppBar(
147+
title = title,
148+
navigationIcon = navigationIcon,
149+
actions = actions
150+
)
151+
}
152+
TopAppBarDemoState.Size.Large -> {
153+
OudsLargeTopAppBar(
154+
title = title,
155+
navigationIcon = navigationIcon,
156+
actions = actions
157+
)
158+
}
159+
}
160+
}
161+
}
162+
163+
private fun Code.Builder.topAppBarDemoCodeSnippet(state: TopAppBarDemoState, themeDrawableResources: ThemeDrawableResources) {
164+
with(state) {
165+
val functionName = when (size) {
166+
TopAppBarDemoState.Size.Small -> if (centerAligned) "OudsCenterAlignedTopAppBar" else "OudsTopAppBar"
167+
TopAppBarDemoState.Size.Medium -> "OudsMediumTopAppBar"
168+
TopAppBarDemoState.Size.Large -> "OudsLargeTopAppBar"
169+
}
170+
functionCall(functionName) {
171+
typedArgument("title", title)
172+
if (navigationIcon) {
173+
constructorCallArgument<OudsTopAppBarNavigationIcon.Back>("navigationIcon") {
174+
trailingLambda = true
175+
onClickArgument()
176+
}
177+
}
178+
functionCallArgument("actions", "listOf") {
179+
constructorCallArgument<OudsTopAppBarAction.Icon>(null) {
180+
painterArgument(themeDrawableResources.tipsAndTricks)
181+
contentDescriptionArgument(R.string.app_components_topAppBar_firstAction_a11y)
182+
onClickArgument()
183+
}
184+
constructorCallArgument<OudsTopAppBarAction.Avatar>(null) {
185+
when (avatar) {
186+
TopAppBarDemoState.Avatar.Image -> {
187+
painterArgument(R.drawable.il_top_app_bar_avatar)
188+
}
189+
TopAppBarDemoState.Avatar.Monogram -> {
190+
typedArgument("monogram", avatarMonogram)
191+
colorArgument("color", Color.White)
192+
colorArgument("backgroundColor", Color(0xff138126))
193+
}
194+
}
195+
contentDescriptionArgument(R.string.app_components_topAppBar_secondAction_a11y)
196+
onClickArgument()
197+
}
198+
}
199+
}
200+
}
201+
}
202+
203+
@PreviewLightDark
204+
@Composable
205+
private fun PreviewTopAppBarDemoScreen() = AppPreview {
206+
TopAppBarDemoScreen()
207+
}

0 commit comments

Comments
 (0)