feat(catalog): Add illustrations for components item

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/ComponentsScreen.kt

@@ -45,7 +45,7 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.rememberNavController
 import com.adevinta.spark.SparkTheme
 import com.adevinta.spark.catalog.R
-import com.adevinta.spark.catalog.configurator.component.ConfiguratorComponentComponentItem
+import com.adevinta.spark.catalog.examples.component.ComponentItem
 import com.adevinta.spark.catalog.model.Component
 import com.adevinta.spark.components.text.Text
 import com.adevinta.spark.tokens.Layout
@@ -126,11 +126,15 @@ internal fun ComponentsListScreen(
             span = { GridItemSpan(1) },
             contentType = { ComponentsItemType.Component },
             itemContent = { component ->
-                ConfiguratorComponentComponentItem(component = component) {
-                    val componentId = component.id
-                    val route = "$ConfiguratorRoute/$componentId"
-                    navController.navigate(route)
-                }
+                ComponentItem(
+                    component = component,
+                    showExampleCount = false,
+                    onClick = {
+                        val componentId = component.id
+                        val route = "$ConfiguratorRoute/$componentId"
+                        navController.navigate(route)
+                    },
+                )
             },
         )
     }

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/Navigation.kt

@@ -28,7 +28,6 @@ import androidx.navigation.NavType
 import androidx.navigation.compose.composable
 import androidx.navigation.navArgument
 import com.adevinta.spark.catalog.configurator.component.ConfiguratorComponentScreen
-import com.adevinta.spark.catalog.examples.component.Component
 import com.adevinta.spark.catalog.model.Component
 
 internal fun NavGraphBuilder.navGraph(

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/component/Component.kt

@@ -159,6 +159,6 @@ private fun ConfiguratorComponentMenuPreview() {
             .fillMaxSize()
             .wrapContentSize(Alignment.Center),
     ) {
-        ConfiguratorComponentMenu(Components.first(), true, {})
+        ConfiguratorComponentMenu(Components.first(), true) {}
     }
 }

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/buttons/IconToggleButtonsConfigurator.kt

@@ -83,7 +83,7 @@ private fun IconToggleButtonSample() {
         var shape by remember { mutableStateOf(IconButtonShape.Large) }
         var size by remember { mutableStateOf(IconButtonSize.Medium) }
         var intent by remember { mutableStateOf(IconButtonIntent.Main) }
-        var icons by remember { mutableStateOf(IconToggleButtonIcons(SparkIcons.CarOutline, SparkIcons.CarFill)) }
+        val icons by remember { mutableStateOf(IconToggleButtonIcons(SparkIcons.CarOutline, SparkIcons.CarFill)) }
         var contentDescription by remember { mutableStateOf("Content Description") }
 
         ConfigedIconToggleButton(

catalog/src/main/kotlin/com/adevinta/spark/catalog/configurator/samples/textfields/TextFieldsConfigurator.kt

@@ -210,7 +210,7 @@ private fun TextFieldSample() {
             modifier = Modifier.fillMaxWidth(),
             value = addonText ?: "",
             onValueChange = {
-                addonText = if (it.isBlank()) null else it
+                addonText = it.ifBlank { null }
             },
             label = "Prefix",
             placeholder = "State message of the TextField",

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/ComponentsScreen.kt

@@ -126,11 +126,14 @@ internal fun ComponentsListScreen(
             span = { GridItemSpan(1) },
             contentType = { ComponentsItemType.Component },
             itemContent = { component ->
-                ComponentItem(component = component) {
-                    val componentId = component.id
-                    val route = "$ComponentRoute/$componentId"
-                    navController.navigate(route)
-                }
+                ComponentItem(
+                    component = component,
+                    onClick = {
+                        val componentId = component.id
+                        val route = "$ComponentRoute/$componentId"
+                        navController.navigate(route)
+                    },
+                )
             },
         )
     }

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/component/ComponentItem.kt

@@ -26,20 +26,31 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.Text
+import androidx.compose.material3.surfaceColorAtElevation
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.adevinta.spark.catalog.R
 import com.adevinta.spark.catalog.model.Component
+import com.adevinta.spark.catalog.model.Configurator
+import com.adevinta.spark.catalog.util.PreviewTheme
+import com.adevinta.spark.catalog.util.drawForegroundGradientScrim
+import com.adevinta.spark.components.image.Illustration
+import com.adevinta.spark.components.tags.TagTinted
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 public fun ComponentItem(
     component: Component,
     onClick: (component: Component) -> Unit,
+    showExampleCount: Boolean = true,
 ) {
     OutlinedCard(
         onClick = { onClick(component) },
@@ -48,19 +59,83 @@ public fun ComponentItem(
             .padding(ComponentItemOuterPadding),
     ) {
         Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(ComponentItemInnerPadding),
+            modifier = Modifier.fillMaxSize(),
         ) {
+            val tint = ColorFilter.tint(LocalContentColor.current).takeIf { component.tintIcon }
+            Illustration(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .drawForegroundGradientScrim(
+                        color = MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp),
+                    ),
+                drawableRes = component.illustration,
+                contentDescription = null,
+                colorFilter = tint,
+            )
             Text(
                 text = component.name,
-                modifier = Modifier.align(Alignment.BottomStart),
+                modifier = Modifier
+                    .align(Alignment.BottomStart)
+                    .padding(ComponentItemInnerPadding),
                 style = MaterialTheme.typography.bodySmall,
             )
+            if (showExampleCount) {
+                TagTinted(
+                    modifier = Modifier
+                        .align(Alignment.BottomEnd)
+                        .padding(ComponentItemInnerPadding),
+                    text = component.examples.count().toString(),
+                )
+            }
         }
     }
 }
 
 private val ComponentItemHeight = 180.dp
 private val ComponentItemOuterPadding = 4.dp
 private val ComponentItemInnerPadding = 16.dp
+
+@Preview
+@Composable
+private fun ComponentItemPreview() {
+    PreviewTheme {
+        ComponentItem(
+            component = Component(
+                0,
+                name = "Tokens",
+                description = R.string.component_tokens_description,
+                guidelinesUrl = "https://www.google.com/#q=constituto",
+                docsUrl = "https://www.google.com/#q=dictas",
+                sourceUrl = "http://www.bing.com/search?q=inani",
+                examples = listOf(),
+                configurator = Configurator(
+                    name = "Ronny Bowman",
+                    description = "singulis",
+                    sourceUrl = "https://www.google.com/#q=tempor",
+                    content = {},
+                ),
+            ),
+            onClick = {},
+        )
+        ComponentItem(
+            component = Component(
+                0,
+                name = "Tokens",
+                description = R.string.component_tokens_description,
+                illustration = R.drawable.illu_component_tokens,
+                tintIcon = false,
+                guidelinesUrl = "https://www.google.com/#q=constituto",
+                docsUrl = "https://www.google.com/#q=dictas",
+                sourceUrl = "http://www.bing.com/search?q=inani",
+                examples = listOf(),
+                configurator = Configurator(
+                    name = "Ronny Bowman",
+                    description = "singulis",
+                    sourceUrl = "https://www.google.com/#q=tempor",
+                    content = {},
+                ),
+            ),
+            onClick = {},
+        )
+    }
+}

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/buttons/IconButtonsExamples.kt

@@ -145,7 +145,7 @@ private fun IconButtonSample(
     ) {
         val icon = SparkIcons.LikeFill
         val contentDescription = "Localized Content Description"
-        var isLoading by remember { mutableStateOf(false) }
+        val isLoading by remember { mutableStateOf(false) }
         button(
             /* onClick = */ { },
             /* enabled = */ true,

catalog/src/main/kotlin/com/adevinta/spark/catalog/examples/samples/toggles/SwitchExamples.kt

@@ -22,7 +22,6 @@
 package com.adevinta.spark.catalog.examples.samples.toggles
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -120,7 +119,7 @@ private fun LabeledSwitchGroupExample(
 }
 
 @Composable
-private fun ColumnScope.SwitchPair(
+private fun SwitchPair(
     checked: Boolean,
     icons: SwitchIcons? = null,
     onCheckedChange: (Boolean) -> Unit,

catalog/src/main/kotlin/com/adevinta/spark/catalog/model/Components.kt

@@ -21,6 +21,7 @@
  */
 package com.adevinta.spark.catalog.model
 
+import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import com.adevinta.spark.catalog.R
 import com.adevinta.spark.catalog.configurator.samples.buttons.ButtonsConfigurator
@@ -47,6 +48,8 @@ public data class Component(
     @StringRes
     val description: Int,
     val tintIcon: Boolean = true,
+    @DrawableRes
+    val illustration: Int = R.drawable.illu_component_placeholder,
     val guidelinesUrl: String,
     val docsUrl: String,
     val sourceUrl: String,
@@ -60,6 +63,8 @@ private fun nextId(): Int = nextId.also { nextId += 1 }
 private val Buttons = Component(
     id = nextId(),
     name = "Buttons",
+    illustration = R.drawable.illu_component_button,
+    tintIcon = false,
     description = R.string.component_button_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/34b742-button/b/32e1a2",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.buttons/index.html",
@@ -71,6 +76,8 @@ private val Buttons = Component(
 private val Checkboxes = Component(
     id = nextId(),
     name = "Checkboxes",
+    illustration = R.drawable.illu_component_checkbox,
+    tintIcon = false,
     description = R.string.component_checkbox_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/76f5a8-checkbox/b/98915d",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.toggles/index.html",
@@ -82,6 +89,8 @@ private val Checkboxes = Component(
 private val IconButtons = Component(
     id = nextId(),
     name = "IconButtons",
+    illustration = R.drawable.illu_component_iconbutton,
+    tintIcon = false,
     description = R.string.component_iconbutton_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/2352e9-icon-button/b/32e1a2",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.iconbuttons/index.html",
@@ -94,7 +103,8 @@ private val IconToggleButtons = Component(
     id = nextId(),
     name = "IconToggleButtons",
     description = R.string.component_icontogglebutton_description,
-    // No buttons icon
+    illustration = R.drawable.illu_component_icontogglebutton,
+    tintIcon = false,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/2352e9-icon-button/b/32e1a2",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.iconbuttons/index.html",
     sourceUrl = "$SparkSourceUrl/kotlin/com/adevinta/components/iconTogglebuttons/IconToggleButton.kt",
@@ -105,6 +115,8 @@ private val IconToggleButtons = Component(
 private val RadioButtons = Component(
     id = nextId(),
     name = "Radio buttons",
+    illustration = R.drawable.illu_component_radiobutton,
+    tintIcon = false,
     description = R.string.component_radiobutton_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/98058f-radio-button/b/700a17",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.toggles/index.html",
@@ -116,6 +128,8 @@ private val RadioButtons = Component(
 private val Switches = Component(
     id = nextId(),
     name = "Switches",
+    illustration = R.drawable.illu_component_switch,
+    tintIcon = false,
     description = R.string.component_switch_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/58a2c6-switch/b/700a17",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.components.toggles/index.html",
@@ -138,6 +152,8 @@ private val TextFields = Component(
 private val Tokens = Component(
     id = nextId(),
     name = "Tokens",
+    illustration = R.drawable.illu_component_tokens,
+    tintIcon = false,
     description = R.string.component_tokens_description,
     guidelinesUrl = "$ComponentGuidelinesUrl/p/3075e9-foundations",
     docsUrl = "$PackageSummaryUrl/com.adevinta.spark.tokens/index.html",

catalog/src/main/kotlin/com/adevinta/spark/catalog/showkase/ComponentDetailScreen.kt

@@ -157,7 +157,7 @@ private fun getCollabsableTextAndIcon(showDocumentation: Boolean) = if (showDocu
     stringResource(R.string.showkase_browser_show_documentation) to SparkIcons.ArrowHorizontalDown
 }
 
-internal fun Modifier.generateComposableModifier(metadata: ShowkaseBrowserComponent) = composed {
+internal fun Modifier.generateComposableModifier(metadata: ShowkaseBrowserComponent) = this then composed {
     val baseModifier = sizeIn(maxHeight = Dp(LocalConfiguration.current.screenHeightDp.toFloat()))
     when {
         metadata.heightDp != null && metadata.widthDp != null -> baseModifier.size(

catalog/src/main/kotlin/com/adevinta/spark/catalog/showkase/CurrentScreen.kt

@@ -33,8 +33,6 @@ internal enum class CurrentScreen {
     CATEGORIES,
 }
 
-internal fun String?.insideGroup() = this == CurrentScreen.COMPONENTS_IN_A_GROUP.name
-
 @Parcelize
 internal data class ShowkaseBrowserScreenMetadata(
     val currentGroup: String? = null,