Skip to content

Commit

Permalink
Display dimension size tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Oct 22, 2024
1 parent f35cda4 commit 1e744c7
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 35 deletions.
62 changes: 62 additions & 0 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategory.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,30 @@ import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Immutable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.orange.ouds.app.R
import com.orange.ouds.core.theme.value
import com.orange.ouds.foundation.extensions.orElse
import com.orange.ouds.theme.OudsBorderStyle
import com.orange.ouds.theme.dashedBorder
import com.orange.ouds.theme.dottedBorder
Expand All @@ -42,6 +50,8 @@ import com.orange.ouds.theme.tokens.OudsBorderStyleKeyToken
import com.orange.ouds.theme.tokens.OudsBorderWidthKeyToken
import com.orange.ouds.theme.tokens.OudsElevationKeyToken
import com.orange.ouds.theme.tokens.OudsOpacityKeyToken
import com.orange.ouds.theme.tokens.OudsSizeIconDecorativeKeyToken
import com.orange.ouds.theme.tokens.OudsSizeIconWithTextKeyToken
import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken
Expand Down Expand Up @@ -88,6 +98,7 @@ sealed class TokenCategory(
R.string.app_tokens_size_label,
R.drawable.ic_spacing,
R.string.app_tokens_size_description_text,
listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithLabel),
subcategory = true
)
}
Expand Down Expand Up @@ -216,6 +227,57 @@ sealed class TokenProperty(
}
}

data object SizeIconDecorative : TokenProperty(
nameRes = R.string.app_tokens_size_iconDecorative_label,
tokens = { OudsSizeIconDecorativeKeyToken.entries.map { Token(it.name, it.value) } }
) {
@Composable
fun Illustration(size: Dp) {
Box(
modifier = Modifier
.size(80.dp)
.background(color = OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
contentAlignment = Alignment.Center,
) {
Icon(
modifier = Modifier.size(size),
painter = painterResource(R.drawable.ic_design_token_figma),
tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available
contentDescription = null
)
}
}
}

data object SizeIconWithLabel : TokenProperty(
nameRes = R.string.app_tokens_size_iconWithLabel_label,
tokens = { OudsSizeIconWithTextKeyToken.entries.map { Token(it.name, it.value) } }
) {
@Composable
fun Illustration(size: Dp, tokenName: String) {
val label = tokenName.substringBefore("Size")
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.spacedBy(OudsSpacingFixedKeyToken.Shorter.value),
verticalAlignment = Alignment.CenterVertically
) {
Icon(
modifier = Modifier.size(size),
painter = painterResource(R.drawable.ic_design_token_figma),
tint = Color(0xFF26B2FF), //TODO use AlwaysInfo token when available
contentDescription = null
)
Text(
modifier = Modifier.weight(1f),
text = label,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.entries.firstOrNull { it.name == label }?.value.orElse { OudsTypographyKeyToken.BodyStrongLarge.value }
)
}
}
}

data object Typography : TokenProperty(nameRes = null, tokens = { OudsTypographyKeyToken.entries.map { Token(it.name, it.value) } })
}

Expand Down
93 changes: 59 additions & 34 deletions app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,14 @@ import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.unit.Dp
import com.orange.ouds.app.R
import com.orange.ouds.app.ui.utilities.composable.DetailScreenHeader
import com.orange.ouds.app.ui.utilities.composable.Screen
import com.orange.ouds.core.theme.value
import com.orange.ouds.theme.OudsBorderStyle
import com.orange.ouds.core.utilities.OudsPreview
import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
import com.orange.ouds.foundation.utilities.UiModePreviews
import com.orange.ouds.theme.OudsBorderStyle
import com.orange.ouds.theme.tokens.OudsSpacingFixedKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import com.orange.ouds.theme.tokens.semantic.OudsColorKeyToken
Expand Down Expand Up @@ -89,46 +90,58 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
}

tokenProperty.tokens().forEach { token ->
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value)
) {
when (tokenProperty) {
is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp)
is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp)
is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle)
is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp)
is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float)
is TokenProperty.Typography -> Unit
}

val isTypographyProperty = tokenProperty is TokenProperty.Typography

if (tokenProperty == TokenProperty.SizeIconWithLabel) {
Column(
modifier = Modifier
.weight(1f)
.padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value)
.fillMaxWidth()
.padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value)
) {
TokenIllustration(tokenProperty = tokenProperty, token = token)
Text(
modifier = Modifier.fillMaxWidth(),
text = token.name,
text = stringResource(id = R.string.app_tokens_size_iconWithLabelTokenName_label, token.name, token.literalValue),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = if (isTypographyProperty) {
token.value as TextStyle
} else {
OudsTypographyKeyToken.BodyStrongLarge.value
}
)
Text(
modifier = Modifier.fillMaxWidth(),
text = token.literalValue,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value) //TODO use ContentMuted token when available
style = OudsTypographyKeyToken.BodyDefaultMedium.value,
color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available
)
}
} else {
val isTypographyProperty = tokenProperty is TokenProperty.Typography

Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = OudsSpacingFixedKeyToken.Medium.value, vertical = OudsSpacingFixedKeyToken.Shorter.value)
) {
TokenIllustration(tokenProperty = tokenProperty, token = token)

Column(
modifier = Modifier
.weight(1f)
.padding(start = if (isTypographyProperty) OudsSpacingFixedKeyToken.None.value else OudsSpacingFixedKeyToken.Medium.value)
) {
Text(
modifier = Modifier.fillMaxWidth(),
text = token.name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = if (isTypographyProperty) {
token.value as TextStyle
} else {
OudsTypographyKeyToken.BodyStrongLarge.value
}
)
Text(
modifier = Modifier.fillMaxWidth(),
text = token.literalValue,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.BodyDefaultMedium.value.copy(color = OudsColorKeyToken.Tertiary.value), //TODO use ContentMuted token when available
color = OudsColorKeyToken.OnSurfaceVariant.value //TODO use ContentMuted token when available
)
}
}
}
}
}
Expand All @@ -137,12 +150,24 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
}
}

@Composable
private fun TokenIllustration(tokenProperty: TokenProperty, token: Token<Any>) = when (tokenProperty) {
is TokenProperty.BorderWidth -> tokenProperty.Illustration(width = token.value as Dp)
is TokenProperty.BorderRadius -> tokenProperty.Illustration(radius = token.value as Dp)
is TokenProperty.BorderStyle -> tokenProperty.Illustration(style = token.value as OudsBorderStyle)
is TokenProperty.Opacity -> tokenProperty.Illustration(opacity = token.value as Float)
is TokenProperty.Elevation -> tokenProperty.Illustration(elevation = token.value as Dp)
is TokenProperty.SizeIconDecorative -> tokenProperty.Illustration(size = token.value as Dp)
is TokenProperty.SizeIconWithLabel -> tokenProperty.Illustration(size = token.value as Dp, token.name)
is TokenProperty.Typography -> Unit
}

@UiModePreviews.Default
@Composable
private fun PreviewTokenCategoryDetailScreen(
@PreviewParameter(TokenCategoryDetailScreenPreviewParameterProvider::class) parameter: TokenCategory
) = OudsPreview {
TokenCategoryDetailScreen(parameter)
TokenCategoryDetailScreen(parameter, {})
}

private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider<TokenCategory>(*previewParameterValues.toTypedArray())
Expand All @@ -151,4 +176,4 @@ private val previewParameterValues: List<TokenCategory>
get() = listOf(
TokenCategory.Opacity,
TokenCategory.Elevation
)
)
6 changes: 5 additions & 1 deletion app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,13 @@
<string name="app_tokens_spacing_label">Spacing</string>
<string name="app_tokens_spacing_description_text">Space refers to the measurements used to define the spacing between UI elements.</string>

<!-- Tokens: dimension/spacing -->
<!-- Tokens: dimension/size -->
<string name="app_tokens_size_label">Size</string>
<string name="app_tokens_size_description_text">Size refers to the specific measurements used to define the dimensions of UI elements within the design system.</string>
<string name="app_tokens_size_iconDecorative_label">Icon decorative</string>
<string name="app_tokens_size_iconWithLabel_label">Icon with label</string>
<string name="app_tokens_size_iconWithLabelTokenName_label">%1$s (%2$s)</string>


<!-- Tokens: elevation -->
<string name="app_tokens_elevation_label">Elevation</string>
Expand Down

0 comments on commit 1e744c7

Please sign in to comment.