Skip to content

Commit 827ec34

Browse files
paulineapaulinea
authored
chore(app): add missing tokens to demo app (#962)
1 parent 8baba34 commit 827ec34

8 files changed

Lines changed: 107 additions & 72 deletions

File tree

‎app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ package com.orange.ouds.app.ui.tokens
1515
import androidx.compose.runtime.Composable
1616
import androidx.compose.ui.graphics.Color
1717
import androidx.compose.ui.graphics.isUnspecified
18+
import androidx.compose.ui.graphics.toArgb
1819
import androidx.compose.ui.res.stringResource
1920
import androidx.compose.ui.text.TextStyle
2021
import androidx.compose.ui.unit.Dp
@@ -38,7 +39,10 @@ data class Token<T>(val name: String, val relativeName: String, val value: @Comp
3839
if (value.isUnspecified) {
3940
stringResource(id = R.string.app_tokens_color_unspecified_label)
4041
} else {
41-
stringResource(id = R.string.app_tokens_colorFormat_label, value.value.toString(16).substring(2, 8).uppercase())
42+
stringResource(
43+
id = R.string.app_tokens_colorFormat_label,
44+
value.toArgb().toHexString().uppercase().let { if (it.startsWith("FF")) it.drop(2) else it }
45+
)
4246
}
4347
}
4448
is Float -> "\u200e${value}f" // "\u200e" forces LTR display even if the app is in arabic

‎app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ sealed class TokenCategory<T>(
6161
TokenProperty.ColorBackground,
6262
TokenProperty.ColorBorder,
6363
TokenProperty.ColorContent,
64+
TokenProperty.ColorOpacity,
6465
TokenProperty.ColorOverlay,
6566
TokenProperty.ColorSurface,
6667
)
@@ -80,8 +81,8 @@ sealed class TokenCategory<T>(
8081
TokenProperty.SpaceScaled,
8182
TokenProperty.SpaceFixed,
8283
TokenProperty.SpacePaddingInline,
83-
TokenProperty.SpacePaddingStack,
84-
TokenProperty.SpacePaddingInset,
84+
TokenProperty.SpacePaddingBlock,
85+
TokenProperty.SpaceInset,
8586
TokenProperty.SpaceColumnGap,
8687
TokenProperty.SpaceRowGap,
8788
),
@@ -91,7 +92,7 @@ sealed class TokenCategory<T>(
9192
R.string.app_tokens_dimension_size_label,
9293
{ R.drawable.ic_dimension },
9394
R.string.app_tokens_dimension_size_description_text,
94-
listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText),
95+
listOf(TokenProperty.SizeMinInteractiveArea, TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText, TokenProperty.SizeMaxWidth),
9596
)
9697
}
9798

‎app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -112,22 +112,24 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClic
112112
item {
113113
Spacer(modifier = Modifier.height(OudsTheme.spaces.fixed.medium))
114114
}
115-
stickyHeader {
116-
tokenProperty.nameRes?.let {
117-
Text(
118-
modifier = Modifier
119-
.fillMaxWidth()
120-
.background(color = OudsTheme.colorScheme.background.primary)
121-
.padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)
122-
.semantics {
123-
heading()
124-
},
125-
text = stringResource(id = tokenProperty.nameRes),
126-
color = OudsTheme.colorScheme.content.default,
127-
maxLines = 1,
128-
overflow = TextOverflow.Ellipsis,
129-
style = OudsTheme.typography.heading.medium
130-
)
115+
if (tokenProperty != TokenProperty.SizeMinInteractiveArea) {
116+
stickyHeader {
117+
tokenProperty.nameRes?.let {
118+
Text(
119+
modifier = Modifier
120+
.fillMaxWidth()
121+
.background(color = OudsTheme.colorScheme.background.primary)
122+
.padding(vertical = OudsTheme.spaces.fixed.medium, horizontal = OudsTheme.grids.margin)
123+
.semantics {
124+
heading()
125+
},
126+
text = stringResource(id = tokenProperty.nameRes),
127+
color = OudsTheme.colorScheme.content.default,
128+
maxLines = 1,
129+
overflow = TextOverflow.Ellipsis,
130+
style = OudsTheme.typography.heading.medium
131+
)
132+
}
131133
}
132134
}
133135
item {
@@ -193,10 +195,10 @@ private fun TokenRow(tokenProperty: TokenProperty<out TokenCategory<*>>, token:
193195
) {
194196
Text(
195197
modifier = Modifier.fillMaxWidth(),
196-
text = if (tokenProperty == TokenProperty.SizeIconWithText) {
197-
token.relativeName.substringAfterLast('.')
198-
} else {
199-
token.relativeName
198+
text = when (tokenProperty) {
199+
is TokenProperty.SizeIconWithText -> token.relativeName.substringAfterLast('.')
200+
is TokenProperty.SizeMaxWidth -> token.name.substringAfter("type.")
201+
else -> token.relativeName
200202
},
201203
maxLines = 2,
202204
overflow = TextOverflow.Ellipsis,
@@ -223,20 +225,21 @@ private fun TokenIllustration(tokenProperty: TokenProperty<*>, token: Token<*>)
223225
is TokenProperty.BorderRadius -> BorderIllustration(shape = RoundedCornerShape(token.value() as Dp))
224226
is TokenProperty.BorderStyle -> BorderIllustration(style = token.value() as OudsBorderStyle)
225227
is TokenProperty.ColorAction, TokenProperty.ColorAlways, TokenProperty.ColorBackground, TokenProperty.ColorBorder, TokenProperty.ColorContent,
226-
TokenProperty.ColorOverlay, TokenProperty.ColorSurface -> ColorIllustration(color = token.value() as Color)
228+
TokenProperty.ColorOpacity, TokenProperty.ColorOverlay, TokenProperty.ColorSurface -> ColorIllustration(color = token.value() as Color)
227229
is TokenProperty.Opacity -> OpacityIllustration(opacity = token.value() as Float)
228230
is TokenProperty.Elevation -> ElevationIllustration(elevation = token.value() as Dp)
229231
is TokenProperty.SizeIconDecorative -> SizeIconIllustration(size = token.value() as Dp)
230232
is TokenProperty.SizeIconWithText -> SizeIconIllustration(size = token.value() as Dp)
233+
is TokenProperty.SizeMinInteractiveArea -> SizeMinInteractiveAreaIllustration(size = token.value() as Dp)
231234
is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustration(
232235
size = token.value() as Dp,
233236
contentAlignment = Alignment.Center
234237
)
235238
TokenProperty.SpacePaddingInline -> SpaceIllustration(size = token.value() as Dp)
236-
TokenProperty.SpacePaddingInset -> SpacePaddingInsetIllustration(size = token.value() as Dp)
237-
TokenProperty.SpacePaddingStack -> SpaceIllustration(size = token.value() as Dp, orientation = SpaceOrientation.Vertical)
239+
TokenProperty.SpaceInset -> SpacePaddingInsetIllustration(size = token.value() as Dp)
240+
TokenProperty.SpacePaddingBlock -> SpaceIllustration(size = token.value() as Dp, orientation = SpaceOrientation.Vertical)
238241
TokenProperty.SpaceRowGap -> SpaceIllustration(size = token.value() as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center)
239-
TokenProperty.Typography, TokenProperty.Grid -> Unit
242+
TokenProperty.SizeMaxWidth, TokenProperty.Typography, TokenProperty.Grid -> Unit
240243
}
241244

242245
@Composable

‎app/src/main/java/com/orange/ouds/app/ui/tokens/TokenProperty.kt‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import com.orange.ouds.core.theme.OudsTheme
2828
import com.orange.ouds.core.theme.OudsTypography
2929
import com.orange.ouds.foundation.extensions.asOrNull
3030
import kotlin.reflect.KClass
31+
import kotlin.reflect.KParameter
3132
import kotlin.reflect.KProperty1
3233
import kotlin.reflect.full.declaredMemberProperties
3334
import kotlin.reflect.full.primaryConstructor
@@ -85,7 +86,13 @@ sealed class TokenProperty<T>(
8586
tokens = getTokens<OudsColorScheme.Content>(),
8687
categoryClass = TokenCategory.Color::class
8788
)
88-
89+
90+
data object ColorOpacity : TokenProperty<TokenCategory.Color>(
91+
nameRes = R.string.app_tokens_color_opacity_label,
92+
tokens = getTokens<OudsColorScheme.Opacity>(),
93+
categoryClass = TokenCategory.Color::class
94+
)
95+
8996
data object ColorOverlay : TokenProperty<TokenCategory.Color>(
9097
nameRes = R.string.app_tokens_color_overlay_label,
9198
tokens = getTokens<OudsColorScheme.Overlay>(),
@@ -124,19 +131,19 @@ sealed class TokenProperty<T>(
124131

125132
data object SizeIconWithText : TokenProperty<TokenCategory.Dimension.Size>(
126133
nameRes = R.string.app_tokens_dimension_size_iconWith_label,
127-
tokens = listOf(
128-
OudsSizes.Icon.WithLabel.Small::class,
129-
OudsSizes.Icon.WithLabel.Medium::class,
130-
OudsSizes.Icon.WithLabel.Large::class,
131-
OudsSizes.Icon.WithLabel.ExtraLarge::class,
132-
OudsSizes.Icon.WithBody.Small::class,
133-
OudsSizes.Icon.WithBody.Medium::class,
134-
OudsSizes.Icon.WithBody.Large::class,
135-
OudsSizes.Icon.WithHeading.Small::class,
136-
OudsSizes.Icon.WithHeading.Medium::class,
137-
OudsSizes.Icon.WithHeading.Large::class,
138-
OudsSizes.Icon.WithHeading.ExtraLarge::class,
139-
).flatMap { getTokens(it) },
134+
tokens = getTokens<OudsSizes.Icon> { clazz, _ -> clazz != OudsSizes.Icon.Decorative::class },
135+
categoryClass = TokenCategory.Dimension.Size::class
136+
)
137+
138+
data object SizeMaxWidth : TokenProperty<TokenCategory.Dimension.Size>(
139+
nameRes = R.string.app_tokens_dimension_size_maxWidth_label,
140+
tokens = getTokens<OudsSizes.MaxWidth>(),
141+
categoryClass = TokenCategory.Dimension.Size::class
142+
)
143+
144+
data object SizeMinInteractiveArea : TokenProperty<TokenCategory.Dimension.Size>(
145+
nameRes = R.string.app_tokens_dimension_size_minInteractiveArea_label,
146+
tokens = getTokens<OudsSizes> { _, parameter -> parameter.name == OudsSizes::minInteractiveArea.name },
140147
categoryClass = TokenCategory.Dimension.Size::class
141148
)
142149

@@ -158,14 +165,14 @@ sealed class TokenProperty<T>(
158165
categoryClass = TokenCategory.Dimension.Space::class
159166
)
160167

161-
data object SpacePaddingInset : TokenProperty<TokenCategory.Dimension.Space>(
162-
nameRes = R.string.app_tokens_dimension_space_paddingInset_label,
168+
data object SpaceInset : TokenProperty<TokenCategory.Dimension.Space>(
169+
nameRes = R.string.app_tokens_dimension_space_inset_label,
163170
tokens = getTokens<OudsSpaces.Inset>(),
164171
categoryClass = TokenCategory.Dimension.Space::class
165172
)
166173

167-
data object SpacePaddingStack : TokenProperty<TokenCategory.Dimension.Space>(
168-
nameRes = R.string.app_tokens_dimension_space_paddingStack_label,
174+
data object SpacePaddingBlock : TokenProperty<TokenCategory.Dimension.Space>(
175+
nameRes = R.string.app_tokens_dimension_space_paddingBlock_label,
169176
tokens = getTokens<OudsSpaces.PaddingBlock>(),
170177
categoryClass = TokenCategory.Dimension.Space::class
171178
)
@@ -189,15 +196,15 @@ sealed class TokenProperty<T>(
189196
)
190197
}
191198

192-
inline fun <reified T : Any> getTokens() = getTokens(T::class)
199+
inline fun <reified T : Any> getTokens(noinline predicate: (KClass<*>, KParameter) -> Boolean = { _, _ -> true }) = getTokens(T::class, predicate)
193200

194-
fun <T : Any> getTokens(clazz: KClass<T>): List<Token<*>> {
201+
fun <T : Any> getTokens(clazz: KClass<T>, predicate: (KClass<*>, KParameter) -> Boolean = { _, _ -> true }): List<Token<*>> {
195202
val packageName = clazz.java.`package`?.name.orEmpty()
196203
val rootClassName = clazz.java.nestedName.substringBefore(".")
197204
val rootClass = Class.forName("$packageName.$rootClassName").kotlin
198205
val rootPath = getPath(rootClass)
199206

200-
return getTokenPaths(rootClass, clazz.takeIf { it != rootClass }, rootPath).map { tokenPath ->
207+
return getTokenPaths(rootClass, clazz.takeIf { it != rootClass }, rootPath, predicate).map { tokenPath ->
201208
Token(tokenPath, getTokenRelativeName(tokenPath, clazz), { getTokenValue(tokenPath) })
202209
}
203210
}
@@ -220,8 +227,9 @@ private fun getPath(clazz: KClass<*>): String {
220227
* will generate tokens for all children objects of [OudsColorScheme.Action] in the class tree. Other tokens in [OudsColorScheme] such as tokens in
221228
* [OudsColorScheme.Background] will be skipped. Pass `null` to take all tokens into account.
222229
* @param parentPath The path of the parent object in the class tree.
230+
* @param predicate A function that takes the class containing the token and its associated constructor parameter, and returns the result of predicate evaluation for this token.
223231
*/
224-
private fun getTokenPaths(clazz: KClass<*>, fromClass: KClass<*>?, parentPath: String): List<String> {
232+
private fun getTokenPaths(clazz: KClass<*>, fromClass: KClass<*>?, parentPath: String, predicate: (KClass<*>, KParameter) -> Boolean): List<String> {
225233
return clazz.primaryConstructor
226234
?.parameters // Use primary constructor parameters instead of declaredMemberProperties because parameters are sorted as they are declared
227235
.orEmpty()
@@ -237,12 +245,13 @@ private fun getTokenPaths(clazz: KClass<*>, fromClass: KClass<*>?, parentPath: S
237245
getTokenPaths(
238246
parameterClass,
239247
fromClass.takeIf { parameterClass != fromClass },
240-
path
248+
path,
249+
predicate
241250
)
242251
}
243252
// parameter is not a nested class thus a token value, we take the token path into account if fromClass is null
244253
// meaning we already encountered fromClass when browsing the class tree
245-
fromClass == null -> listOf(path)
254+
fromClass == null && predicate(clazz, parameter) -> listOf(path)
246255
else -> emptyList()
247256
}
248257
}

‎app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyHeader.kt‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,8 @@ private fun SpaceHeaderContent(spaceTokenProperty: TokenProperty<TokenCategory.D
127127
TokenProperty.SpaceScaled -> PaddingValues(start = OudsTheme.spaces.fixed.extraSmall, top = OudsTheme.spaces.fixed.twoExtraSmall)
128128
TokenProperty.SpaceFixed -> PaddingValues(start = OudsTheme.spaces.fixed.extraSmall)
129129
TokenProperty.SpacePaddingInline -> PaddingValues(horizontal = OudsTheme.spaces.fixed.extraSmall)
130-
TokenProperty.SpacePaddingStack -> PaddingValues(vertical = OudsTheme.spaces.fixed.extraSmall)
131-
TokenProperty.SpacePaddingInset -> PaddingValues(all = OudsTheme.spaces.fixed.extraSmall)
130+
TokenProperty.SpacePaddingBlock -> PaddingValues(vertical = OudsTheme.spaces.fixed.extraSmall)
131+
TokenProperty.SpaceInset -> PaddingValues(all = OudsTheme.spaces.fixed.extraSmall)
132132
else -> PaddingValues(all = 0.dp)
133133
}
134134

@@ -141,7 +141,7 @@ private fun SpaceHeaderContent(spaceTokenProperty: TokenProperty<TokenCategory.D
141141
val column = remember {
142142
spaceTokenProperty in listOf(
143143
TokenProperty.SpaceRowGap,
144-
TokenProperty.SpacePaddingStack,
144+
TokenProperty.SpacePaddingBlock,
145145
)
146146
}
147147

@@ -178,8 +178,8 @@ private fun SpaceHeaderText(spaceTokenProperty: TokenProperty<TokenCategory.Dime
178178
TokenProperty.SpaceColumnGap -> R.string.app_tokens_dimension_space_columnGapHeader_text
179179
TokenProperty.SpaceFixed -> R.string.app_tokens_dimension_space_fixedHeader_text
180180
TokenProperty.SpacePaddingInline -> R.string.app_tokens_dimension_space_paddingInlineHeader_text
181-
TokenProperty.SpacePaddingInset -> R.string.app_tokens_dimension_space_paddingInsetHeader_text
182-
TokenProperty.SpacePaddingStack -> R.string.app_tokens_dimension_space_paddingStackHeader_text
181+
TokenProperty.SpaceInset -> R.string.app_tokens_dimension_space_insetHeader_text
182+
TokenProperty.SpacePaddingBlock -> R.string.app_tokens_dimension_space_paddingBlockHeader_text
183183
TokenProperty.SpaceRowGap -> R.string.app_tokens_dimension_space_rowGapHeader_text
184184
TokenProperty.SpaceScaled -> R.string.app_tokens_dimension_space_scaledHeader_text
185185
else -> null
@@ -226,8 +226,8 @@ private val previewParameterValues: List<TokenProperty<TokenCategory.Dimension.S
226226
TokenProperty.SpaceScaled,
227227
// TokenProperty.SpaceFixed,
228228
// TokenProperty.SpacePaddingInline,
229-
// TokenProperty.SpacePaddingStack,
230-
// TokenProperty.SpacePaddingInset,
229+
// TokenProperty.SpacePaddingBlock,
230+
// TokenProperty.SpaceInset,
231231
// TokenProperty.SpaceColumnGap,
232232
// TokenProperty.SpaceRowGap,
233233
)

‎app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,9 @@ import com.orange.ouds.core.theme.takeUnlessHairline
5353
import com.orange.ouds.foundation.extensions.orElse
5454
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
5555

56-
private val defaultIllustrationSize = 64.dp
56+
private val DefaultIllustrationSize = 64.dp
57+
private val SizeTokenIllustrationSize = 80.dp
58+
5759

5860
@Composable
5961
private fun IllustrationBox(
@@ -64,7 +66,7 @@ private fun IllustrationBox(
6466
) {
6567
Box(
6668
modifier = modifier
67-
.size(defaultIllustrationSize)
69+
.size(DefaultIllustrationSize)
6870
.background(color = backgroundColor),
6971
contentAlignment = contentAlignment,
7072
content = content
@@ -142,7 +144,7 @@ fun OpacityIllustration(opacity: Float) {
142144

143145
@Composable
144146
fun SizeIconIllustration(size: Dp) {
145-
IllustrationBox(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) {
147+
IllustrationBox(modifier = Modifier.size(SizeTokenIllustrationSize), contentAlignment = Alignment.Center) {
146148
Icon(
147149
modifier = Modifier.size(size),
148150
painter = painterResource(R.drawable.ic_design_token_figma),
@@ -152,6 +154,17 @@ fun SizeIconIllustration(size: Dp) {
152154
}
153155
}
154156

157+
@Composable
158+
fun SizeMinInteractiveAreaIllustration(size: Dp) {
159+
IllustrationBox(modifier = Modifier.size(SizeTokenIllustrationSize), contentAlignment = Alignment.Center) {
160+
Box(
161+
modifier = Modifier
162+
.size(size)
163+
.background(color = OudsTheme.colorScheme.content.status.info),
164+
)
165+
}
166+
}
167+
155168
@Composable
156169
fun SpacePaddingInsetIllustration(size: Dp) {
157170
IllustrationBox {

0 commit comments

Comments
 (0)