Add topic chips for NewsResourceCard

core-designsystem/build.gradle.kts

@@ -41,4 +41,10 @@ dependencies {
     api(libs.androidx.compose.runtime)
     lintPublish(project(":lint"))
     androidTestImplementation(project(":core-testing"))
+
+    // TODO : Remove these dependency once we upgrade to Android Studio Dolphin b/228889042
+    // These dependencies are currently necessary to render Compose previews
+    debugImplementation(libs.androidx.customview.poolingcontainer)
+    debugImplementation(libs.androidx.lifecycle.viewModelCompose)
+    debugImplementation(libs.androidx.savedstate.ktx)
 }

core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt

@@ -23,11 +23,17 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ProvideTextStyle
 import androidx.compose.material3.Shapes
+import androidx.compose.material3.SuggestionChip
+import androidx.compose.material3.SuggestionChipDefaults
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
+import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 
 /**
  * Now in Android filter chip with included leading checked icon as well as text content slot.
@@ -101,6 +107,80 @@ fun NiaFilterChip(
     )
 }
 
+/**
+ * Now in Android topic chip that displays a topic name text.
+ *
+ * @param enabled Whether the chip is currently enabled.
+ * @param onClick Called when the user clicks the chip for more options.
+ * @param modifier Modifier to be applied to the chip.
+ * @param label The text label content.
+ */
+@Composable
+@OptIn(ExperimentalMaterial3Api::class)
+fun NiaTopicChip(
+    enabled: Boolean,
+    onClick: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+    label: @Composable () -> Unit
+) {
+    SuggestionChip(
+        enabled = enabled,
+        onClick = { onClick },
+        label = {
+            ProvideTextStyle(value = MaterialTheme.typography.labelMedium) {
+                label()
+            }
+        },
+        modifier = modifier,
+        shape = Shapes.Full,
+        border = SuggestionChipDefaults.suggestionChipBorder(
+            borderColor = MaterialTheme.colorScheme.primaryContainer,
+            disabledBorderColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = NiaChipDefaults.DisabledChipContainerAlpha
+            ),
+            borderWidth = NiaChipDefaults.ChipBorderWidth
+        ),
+        colors = SuggestionChipDefaults.suggestionChipColors(
+            containerColor = MaterialTheme.colorScheme.primaryContainer,
+            disabledContainerColor = MaterialTheme.colorScheme.primaryContainer.copy(
+                alpha = NiaChipDefaults.DisabledChipContainerAlpha
+            ),
+            labelColor = MaterialTheme.colorScheme.onBackground,
+            disabledLabelColor = MaterialTheme.colorScheme.onBackground
+        )
+    )
+}
+
+@Preview("Enabled Topic Chip Preview")
+@Composable
+fun NiaEnabledTopicChipPreview() {
+    NiaTheme {
+        Surface {
+            NiaTopicChip(
+                enabled = true,
+                onClick = { }
+            ) {
+                Text("Accessibility")
+            }
+        }
+    }
+}
+
+@Preview("Disabled Topic Chip Preview")
+@Composable
+fun NiaDisabledTopicChipPreview() {
+    NiaTheme {
+        Surface {
+            NiaTopicChip(
+                enabled = false,
+                onClick = { }
+            ) {
+                Text("Accessibility")
+            }
+        }
+    }
+}
+
 /**
  * Now in Android chip default values.
  */

core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt

@@ -17,6 +17,7 @@
 package com.google.samples.apps.nowinandroid.core.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -26,6 +27,8 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
@@ -57,10 +60,12 @@ import androidx.compose.ui.unit.dp
 import androidx.core.os.ConfigurationCompat
 import coil.compose.AsyncImage
 import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaToggleButton
+import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaTopicChip
 import com.google.samples.apps.nowinandroid.core.designsystem.icon.NiaIcons
 import com.google.samples.apps.nowinandroid.core.designsystem.theme.NiaTheme
 import com.google.samples.apps.nowinandroid.core.model.data.Author
 import com.google.samples.apps.nowinandroid.core.model.data.NewsResource
+import com.google.samples.apps.nowinandroid.core.model.data.Topic
 import com.google.samples.apps.nowinandroid.core.model.data.previewNewsResources
 import java.time.ZoneId
 import java.time.format.DateTimeFormatter
@@ -117,6 +122,8 @@ fun NewsResourceCardExpanded(
                     NewsResourceDate(newsResource.publishDate)
                     Spacer(modifier = Modifier.height(12.dp))
                     NewsResourceShortDescription(newsResource.content)
+                    Spacer(modifier = Modifier.height(12.dp))
+                    NewsResourceTopics(newsResource.topics)
                 }
             }
         }
@@ -152,13 +159,7 @@ fun NewsResourceAuthors(
         // Only display first author for now
         val author = authors[0]
 
-        val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0)
+        val authorNameFormatted = uppercaseFormat(author.name)
-
-        val authorNameFormatted = if (locale != null) {
-            author.name.uppercase(locale)
-        } else {
-            author.name.uppercase()
-        }
 
         val authorImageUrl = author.imageUrl
 
@@ -265,9 +266,35 @@ fun NewsResourceShortDescription(
 
 @Composable
 fun NewsResourceTopics(
-    newsResource: NewsResource
+    topics: List<Topic>,
+    modifier: Modifier = Modifier
 ) {
-    TODO()
+    LazyRow(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        items(items = topics, key = { item -> item.id }) { topic ->
+            NiaTopicChip(
+                enabled = true, // ToDo: Chip should be disabled if user is not following
+                onClick = { }, // ToDo: Handle topic chip interaction
+            ) {
+                Text(uppercaseFormat(topic.name))
+            }
+        }
+    }
+}
+
+@Composable
+private fun uppercaseFormat(string: String): String {
+    val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0)
+
+    val uppercaseFormatted = if (locale != null) {
+        string.uppercase(locale)
+    } else {
+        string.uppercase()
+    }
+
+    return uppercaseFormatted
 }
 
 @Preview("Bookmark Button")