Skip to content

Commit

Permalink
Add space tokens headers
Browse files Browse the repository at this point in the history
  • Loading branch information
@florentmaitre
florentmaitre committed Nov 13, 2024
1 parent 902772f commit 50de57a
Show file tree
Hide file tree
Showing 8 changed files with 390 additions and 115 deletions.
26 changes: 13 additions & 13 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 @@ -20,13 +20,13 @@ import com.orange.ouds.app.R
val tokenCategories = TokenCategory::class.sealedSubclasses.mapNotNull { it.objectInstance }

@Immutable
sealed class TokenCategory(
sealed class TokenCategory<T>(
@StringRes val nameRes: Int,
@DrawableRes val imageRes: Int,
@StringRes val descriptionRes: Int,
val properties: List<TokenProperty> = emptyList(),
val subcategories: List<TokenCategory> = emptyList(),
) {
val properties: List<TokenProperty<T>> = emptyList(),
val subcategories: List<TokenCategory<*>> = emptyList(),
) where T : TokenCategory<T> {

companion object {
fun fromId(tokenId: Long) = tokenCategories.firstOrNull { token -> token.id == tokenId }
Expand All @@ -36,14 +36,14 @@ sealed class TokenCategory(
val isSubcategory: Boolean
get() = tokenCategories.any { it.subcategories.contains(this) }

data object Border : TokenCategory(
data object Border : TokenCategory<Border>(
R.string.app_tokens_border_label,
R.drawable.ic_border,
R.string.app_tokens_border_description_text,
listOf(TokenProperty.BorderWidth, TokenProperty.BorderRadius, TokenProperty.BorderStyle)
)

data object Color : TokenCategory(
data object Color : TokenCategory<Color>(
R.string.app_tokens_color_label,
R.drawable.ic_palette,
R.string.app_tokens_color_description_text,
Expand All @@ -60,13 +60,13 @@ sealed class TokenCategory(
)
)

data object Dimension : TokenCategory(
data object Dimension : TokenCategory<Dimension>(
R.string.app_tokens_dimension_label,
R.drawable.ic_dimension,
R.string.app_tokens_dimension_description_text,
subcategories = listOf(Space, Size)
) {
data object Space : TokenCategory(
data object Space : TokenCategory<Space>(
R.string.app_tokens_dimension_space_label,
R.drawable.ic_dimension,
R.string.app_tokens_dimension_space_description_text,
Expand All @@ -87,36 +87,36 @@ sealed class TokenCategory(
),
)

data object Size : TokenCategory(
data object Size : TokenCategory<Size>(
R.string.app_tokens_dimension_size_label,
R.drawable.ic_dimension,
R.string.app_tokens_dimension_size_description_text,
listOf(TokenProperty.SizeIconDecorative, TokenProperty.SizeIconWithText),
)
}

data object Elevation : TokenCategory(
data object Elevation : TokenCategory<Elevation>(
R.string.app_tokens_elevation_label,
R.drawable.ic_layers,
R.string.app_tokens_elevation_description_text,
listOf(TokenProperty.Elevation)
)

data object Grid : TokenCategory(
data object Grid : TokenCategory<Grid>(
R.string.app_tokens_grid_label,
R.drawable.ic_menu_grid,
R.string.app_tokens_grid_description_text,
listOf(TokenProperty.Grid)
)

data object Opacity : TokenCategory(
data object Opacity : TokenCategory<Opacity>(
R.string.app_tokens_opacity_label,
R.drawable.ic_filter_effects,
R.string.app_tokens_opacity_description_text,
listOf(TokenProperty.Opacity)
)

data object Typography : TokenCategory(
data object Typography : TokenCategory<Typography>(
R.string.app_tokens_typography_label,
R.drawable.ic_typography,
R.string.app_tokens_typography_description_text,
Expand Down
45 changes: 32 additions & 13 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 @@ -48,7 +48,7 @@ import com.orange.ouds.theme.tokens.OudsSpaceKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken

@Composable
fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick: (Long) -> Unit) {
fun TokenCategoryDetailScreen(tokenCategory: TokenCategory<*>, onSubcategoryClick: (Long) -> Unit) {

Screen {
LazyColumn(contentPadding = PaddingValues(bottom = OudsSpaceKeyToken.Fixed.Medium.value)) {
Expand All @@ -57,10 +57,6 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
descriptionRes = tokenCategory.descriptionRes,
imageRes = tokenCategory.imageRes
)

if (tokenCategory == TokenCategory.Grid) {
GridIllustrations()
}
}

if (tokenCategory.subcategories.isNotEmpty()) {
Expand Down Expand Up @@ -90,14 +86,21 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
Text(
modifier = Modifier
.fillMaxWidth()
.padding(OudsSpaceKeyToken.Fixed.Medium.value),
.padding(all = OudsSpaceKeyToken.Fixed.Medium.value),
text = stringResource(id = tokenProperty.nameRes),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = OudsTypographyKeyToken.HeadingMedium.value
)
}

TokenPropertyHeader(
modifier = Modifier
.padding(horizontal = OudsSpaceKeyToken.Fixed.Medium.value)
.padding(bottom = OudsSpaceKeyToken.Fixed.Medium.value),
tokenProperty = tokenProperty
)

tokenProperty.tokens().forEach { token ->
if (tokenProperty == TokenProperty.SizeIconWithText) {
Column(
Expand Down Expand Up @@ -154,7 +157,7 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
}

@Composable
private fun TokenIllustration(tokenProperty: TokenProperty, token: Token<Any>) = when (tokenProperty) {
private fun TokenIllustration(tokenProperty: TokenProperty<*>, token: Token<Any>) = when (tokenProperty) {
is TokenProperty.BorderWidth -> BorderIllustrationBox(width = token.value as Dp)
is TokenProperty.BorderRadius -> BorderIllustrationBox(shape = RoundedCornerShape(token.value as Dp))
is TokenProperty.BorderStyle -> BorderIllustrationBox(style = token.value as OudsBorderStyle)
Expand Down Expand Up @@ -186,19 +189,35 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token<Any>) =
is TokenProperty.Typography, TokenProperty.Grid -> Unit
}

@Composable
private fun TokenPropertyHeader(tokenProperty: TokenProperty<*>, modifier: Modifier = Modifier) {
@Suppress("UNCHECKED_CAST")
when (tokenProperty.categoryClass) {
TokenCategory.Grid::class -> GridHeader(modifier = modifier)
TokenCategory.Dimension.Space::class -> SpaceHeader(modifier = modifier, spaceTokenProperty = tokenProperty as TokenProperty<TokenCategory.Dimension.Space>)
else -> {}
}
}

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

private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider<TokenCategory>(*previewParameterValues.toTypedArray())
private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewParameterProvider<TokenCategory<*>>(*previewParameterValues.toTypedArray())

private val previewParameterValues: List<TokenCategory>
private val previewParameterValues: List<TokenCategory<*>>
get() = listOf(
TokenCategory.Opacity,
TokenCategory.Elevation,
TokenCategory.Grid
TokenCategory.Border,
// TokenCategory.Color,
// TokenCategory.Dimension,
// TokenCategory.Dimension.Size,
// TokenCategory.Dimension.Space,
// TokenCategory.Elevation,
// TokenCategory.Grid,
// TokenCategory.Opacity,
// TokenCategory.Typography,
)
Loading

0 comments on commit 50de57a

Please sign in to comment.