Add grid illustrations

NOTICE.txt

@@ -21,6 +21,36 @@ app/src/main/res/drawable/ic_spacing.xml
 app/src/main/res/drawable/ic_ui_dark_mode.xml
 app/src/main/res/drawable/ic_ui_light_mode.xml
 app/src/main/res/drawable/il_opacity_union.xml
+app/src/main/res/drawable-hdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-hdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-hdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-mdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-xxxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-hdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-mdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xxhdpi/il_tokens_grid_min_width.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_column_margin.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_max_width.png
+app/src/main/res/drawable-night-xxxhdpi/il_tokens_grid_min_width.png
 
 docs/images/favicon-16x16.png
 docs/images/orange-logo.svg

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

@@ -12,6 +12,8 @@
 
 package com.orange.ouds.app.ui.tokens
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -25,6 +27,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+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
@@ -52,6 +55,10 @@ fun TokenCategoryDetailScreen(tokenCategory: TokenCategory, onSubcategoryClick:
                     descriptionRes = tokenCategory.descriptionRes,
                     imageRes = tokenCategory.imageRes
                 )
+
+                if (tokenCategory == TokenCategory.Grid) {
+                    GridIllustrations()
+                }
             }
 
             if (tokenCategory.subcategories.isNotEmpty()) {
@@ -169,6 +176,36 @@ private fun TokenIllustration(tokenProperty: TokenProperty, token: Token<Any>) =
     is TokenProperty.Typography, TokenProperty.Grid -> Unit
 }
 
+@Composable
+private fun GridIllustrations() {
+    Image(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value)
+            .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
+        painter = painterResource(id = R.drawable.il_tokens_grid_column_margin),
+        contentDescription = null
+    )
+    Image(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value)
+            .padding(top = OudsSpacingFixedKeyToken.Medium.value)
+            .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
+        painter = painterResource(id = R.drawable.il_tokens_grid_min_width),
+        contentDescription = null
+    )
+    Image(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = OudsSpacingFixedKeyToken.Medium.value)
+            .padding(top = OudsSpacingFixedKeyToken.Medium.value)
+            .background(OudsColorKeyToken.OnSurface.value), //TODO use BgEmphasizedPrimary token when available
+        painter = painterResource(id = R.drawable.il_tokens_grid_max_width),
+        contentDescription = null
+    )
+}
+
 @UiModePreviews.Default
 @Composable
 private fun PreviewTokenCategoryDetailScreen(
@@ -182,5 +219,6 @@ private class TokenCategoryDetailScreenPreviewParameterProvider : BasicPreviewPa
 private val previewParameterValues: List<TokenCategory>
     get() = listOf(
         TokenCategory.Opacity,
-        TokenCategory.Elevation
+        TokenCategory.Elevation,
+        TokenCategory.Grid
     )