From 1d63104cc1b075530b3fc1c368594765eb155c97 Mon Sep 17 00:00:00 2001 From: Caren Chang Date: Thu, 23 Jun 2022 13:15:50 -0700 Subject: [PATCH] Add topic chips for NewsResourceCard --- core-designsystem/build.gradle.kts | 6 ++ .../core/designsystem/component/Chip.kt | 80 +++++++++++++++++++ .../nowinandroid/core/ui/NewsResourceCard.kt | 45 ++++++++--- 3 files changed, 122 insertions(+), 9 deletions(-) diff --git a/core-designsystem/build.gradle.kts b/core-designsystem/build.gradle.kts index bada9e329..053081bbf 100644 --- a/core-designsystem/build.gradle.kts +++ b/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) } \ No newline at end of file diff --git a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt b/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt index 3d2cf3f2c..bef4cfc7b 100644 --- a/core-designsystem/src/main/java/com/google/samples/apps/nowinandroid/core/designsystem/component/Chip.kt +++ b/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. */ diff --git a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt b/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt index ac3de4363..dcf9ecba2 100644 --- a/core-ui/src/main/java/com/google/samples/apps/nowinandroid/core/ui/NewsResourceCard.kt +++ b/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 = if (locale != null) { - author.name.uppercase(locale) - } else { - author.name.uppercase() - } + val authorNameFormatted = uppercaseFormat(author.name) val authorImageUrl = author.imageUrl @@ -265,9 +266,35 @@ fun NewsResourceShortDescription( @Composable fun NewsResourceTopics( - newsResource: NewsResource + topics: List, + 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")