For mozilla-mobile#27401 - refactor SelectableChip into Chip composable

app/src/main/java/org/mozilla/fenix/compose/Chip.kt

@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.compose
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.selection.selectable
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.capitalize
+import androidx.compose.ui.text.intl.Locale
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.mozilla.fenix.theme.FirefoxTheme
+
+/**
+ * Default layout for a clickable chip.
+ *
+ * @param text [String] displayed in this chip. Ideally should only be one word.
+ * @param modifider [Modifier] used to be applied to the layout of the chip.
+ * @param textColor optional text [Color] for the chip.
+ * @param backgroundColor optional background [Color] for the chip.
+ * @param onClick optional Callback for when the user taps this chip.
+ */
+@Composable
+fun Chip(
+    text: String,
+    modifier: Modifier = Modifier,
+    textColor: Color = FirefoxTheme.colors.textActionPrimary,
+    backgroundColor: Color = FirefoxTheme.colors.actionPrimary,
+    onClick: (() -> Unit)? = null,
+) {
+    Box(
+        modifier = modifier
+            .selectable(false) {
+                if (onClick != null) {
+                    onClick()
+                }
+            }
+            .clip(MaterialTheme.shapes.small)
+            .background(color = backgroundColor)
+            .padding(horizontal = 16.dp, vertical = 10.dp),
+    ) {
+        Text(
+            text = text.capitalize(Locale.current),
+            style = TextStyle(fontSize = 14.sp),
+            color = textColor,
+        )
+    }
+}
+
+/**
+ * An example of a selectable chip.
+ */
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun SelectableChipPreview() {
+    val selectedState = remember { mutableStateOf(false) }
+
+    FirefoxTheme {
+        Column(
+            modifier = Modifier.fillMaxHeight()
+                .background(FirefoxTheme.colors.layer1),
+        ) {
+            Chip(
+                text = "Chirp",
+                textColor = if (selectedState.value) {
+                    FirefoxTheme.colors.textActionTertiary
+                } else {
+                    FirefoxTheme.colors.textActionPrimary
+                },
+                backgroundColor = if (selectedState.value) {
+                    FirefoxTheme.colors.actionTertiary
+                } else {
+                    FirefoxTheme.colors.actionPrimary
+                },
+            ) {
+                selectedState.value = !selectedState.value
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt

@@ -59,12 +59,12 @@ import mozilla.components.service.pocket.PocketStory.PocketSponsoredStory
 import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryCaps
 import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim
 import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.Chip
 import org.mozilla.fenix.compose.ClickableSubstringLink
 import org.mozilla.fenix.compose.EagerFlingBehavior
 import org.mozilla.fenix.compose.ListItemTabLarge
 import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
 import org.mozilla.fenix.compose.ListItemTabSurface
-import org.mozilla.fenix.compose.SelectableChip
 import org.mozilla.fenix.compose.StaggeredHorizontalGrid
 import org.mozilla.fenix.compose.TabSubtitleWithInterdot
 import org.mozilla.fenix.compose.inComposePreview
@@ -399,15 +399,23 @@ fun PocketStoriesCategories(
             verticalItemsSpacing = 16.dp,
         ) {
             categories.filter { it.name != POCKET_STORIES_DEFAULT_CATEGORY_NAME }.forEach { category ->
-                SelectableChip(
+                val selectedState = remember { mutableStateOf(selections.map { it.name }.contains(category.name)) }
+
+                Chip(
                     text = category.name,
-                    isSelected = selections.map { it.name }.contains(category.name),
-                    selectedTextColor = selectedTextColor,
-                    unselectedTextColor = unselectedTextColor,
-                    selectedBackgroundColor = selectedBackgroundColor,
-                    unselectedBackgroundColor = unselectedBackgroundColor,
+                    textColor = if (selectedState.value) {
+                        selectedTextColor ?: FirefoxTheme.colors.textActionPrimary
+                    } else {
+                        unselectedTextColor ?: FirefoxTheme.colors.textActionPrimary
+                    },
+                    backgroundColor = if (selectedState.value) {
+                        selectedBackgroundColor ?: FirefoxTheme.colors.actionPrimary
+                    } else {
+                        unselectedBackgroundColor ?: FirefoxTheme.colors.actionTertiary
+                    },
                 ) {
                     onCategoryClick(category)
+                    selectedState.value = !selectedState.value
                 }
             }
         }