Merge pull request #151 from android/caren/topic_chips

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/Tag.kt

@@ -18,6 +18,7 @@ package com.google.samples.apps.nowinandroid.core.designsystem.component
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -26,6 +27,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import com.google.samples.apps.nowinandroid.core.designsystem.R
 
 @Composable
 fun NiaTopicTag(
@@ -36,9 +39,9 @@ fun NiaTopicTag(
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
     text: @Composable () -> Unit,
-    followText: @Composable () -> Unit,
-    unFollowText: @Composable () -> Unit,
-    browseText: @Composable () -> Unit
+    followText: @Composable () -> Unit = { Text(stringResource(R.string.follow)) },
+    unFollowText: @Composable () -> Unit = { Text(stringResource(R.string.unfollow)) },
+    browseText: @Composable () -> Unit = { Text(stringResource(R.string.browse_topic)) }
 ) {
     var expanded by remember { mutableStateOf(false) }
     Box(modifier = modifier) {

core-designsystem/src/main/res/values/strings.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     Copyright 2022 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<resources>
+    <string name="follow">Follow</string>
+    <string name="unfollow">Unfollow</string>
+    <string name="browse_topic">Browse topic</string>
+</resources>

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

@@ -17,6 +17,8 @@
 package com.google.samples.apps.nowinandroid.core.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.horizontalScroll
+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 +28,7 @@ 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.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
@@ -45,7 +48,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.painterResource
@@ -54,16 +56,18 @@ import androidx.compose.ui.semantics.onClick
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.tooling.preview.Preview
 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.NiaTopicTag
 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
+import java.util.Locale
 import kotlinx.datetime.Instant
 import kotlinx.datetime.toJavaInstant
 
@@ -117,6 +121,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 +158,7 @@ fun NewsResourceAuthors(
         // Only display first author for now
         val author = authors[0]
 
-        val locale = ConfigurationCompat.getLocales(LocalConfiguration.current).get(0)
-
-        val authorNameFormatted = if (locale != null) {
-            author.name.uppercase(locale)
-        } else {
-            author.name.uppercase()
-        }
+        val authorNameFormatted = author.name.uppercase(Locale.getDefault())
 
         val authorImageUrl = author.imageUrl
 
@@ -265,9 +265,23 @@ fun NewsResourceShortDescription(
 
 @Composable
 fun NewsResourceTopics(
-    newsResource: NewsResource
+    topics: List<Topic>,
+    modifier: Modifier = Modifier
 ) {
-    TODO()
+    Row(
+        modifier = modifier.horizontalScroll(rememberScrollState()), // causes narrow chips
+        horizontalArrangement = Arrangement.spacedBy(4.dp),
+    ) {
+        for (topic in topics) {
+            NiaTopicTag(
+                followed = true, // ToDo: Check if topic is followed
+                onFollowClick = { }, // ToDo
+                onUnfollowClick = { }, // ToDo
+                onBrowseClick = { }, // ToDo
+                text = { Text(text = topic.name.uppercase(Locale.getDefault())) }
+            )
+        }
+    }
 }
 
 @Preview("Bookmark Button")