[fenix] For https://github.com/mozilla-mobile/fenix/issues/27401 - replace PocketStoriesCategories with SelectableChipColors

app/src/androidTest/java/org/mozilla/fenix/ui/HomeScreenTest.kt

@@ -224,6 +224,7 @@ class HomeScreenTest {
         }
     }
 
+    @Ignore("failing after a design refactor, see https://github.com/mozilla-mobile/fenix/issues/28472")
     @Test
     fun selectStoriesByTopicItemTest() {
         activityTestRule.activityRule.applySettingsExceptions {

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

@@ -21,6 +21,7 @@ import mozilla.components.lib.state.ext.observeAsComposableState
 import org.mozilla.fenix.R
 import org.mozilla.fenix.components.components
 import org.mozilla.fenix.compose.ComposeViewHolder
+import org.mozilla.fenix.compose.SelectableChipColors
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.compose.home.HomeSectionHeader
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -60,7 +61,7 @@ class PocketCategoriesViewHolder(
             .observeAsComposableState { state -> state.wallpaperState }.value ?: WallpaperState.default
 
         var (selectedBackgroundColor, unselectedBackgroundColor, selectedTextColor, unselectedTextColor) =
-            PocketStoriesCategoryColors.buildColors()
+            SelectableChipColors.buildColors()
         wallpaperState.composeRunIfWallpaperCardColorsAreAvailable { cardColorLight, cardColorDark ->
             if (isSystemInDarkTheme()) {
                 selectedBackgroundColor = cardColorDark
@@ -75,7 +76,7 @@ class PocketCategoriesViewHolder(
             }
         }
 
-        val categoryColors = PocketStoriesCategoryColors(
+        val categoryColors = SelectableChipColors(
             selectedTextColor = selectedTextColor,
             unselectedTextColor = unselectedTextColor,
             selectedBackgroundColor = selectedBackgroundColor,
@@ -105,7 +106,7 @@ class PocketCategoriesViewHolder(
 private fun PocketTopics(
     categories: List<PocketRecommendedStoriesCategory> = emptyList(),
     categoriesSelections: List<PocketRecommendedStoriesSelectedCategory> = emptyList(),
-    categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
+    categoryColors: SelectableChipColors = SelectableChipColors.buildColors(),
     onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
 ) {
     Column {

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

@@ -68,6 +68,7 @@ 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.SelectableChipColors
 import org.mozilla.fenix.compose.StaggeredHorizontalGrid
 import org.mozilla.fenix.compose.TabSubtitleWithInterdot
 import org.mozilla.fenix.compose.inComposePreview
@@ -419,7 +420,7 @@ private fun Rect.getIntersectPercentage(realSize: IntSize, other: Rect): Float {
  * @param categories The categories needed to be displayed.
  * @param selections List of categories currently selected.
  * @param modifier [Modifier] to be applied to the layout.
- * @param categoryColors The color set defined by [PocketStoriesCategoryColors] used to style Pocket categories.
+ * @param categoryColors The color set defined by [SelectableChipColors] used to style Pocket categories.
  * @param onCategoryClick Callback for when the user taps a category.
  */
 @OptIn(ExperimentalComposeUiApi::class)
@@ -429,9 +430,16 @@ fun PocketStoriesCategories(
     categories: List<PocketRecommendedStoriesCategory>,
     selections: List<PocketRecommendedStoriesSelectedCategory>,
     modifier: Modifier = Modifier,
-    categoryColors: PocketStoriesCategoryColors = PocketStoriesCategoryColors.buildColors(),
+    categoryColors: SelectableChipColors = SelectableChipColors.buildColors(),
     onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
 ) {
+    val selectableChipColors = SelectableChipColors(
+        selectedTextColor = categoryColors.selectedTextColor,
+        unselectedTextColor = categoryColors.unselectedTextColor,
+        selectedBackgroundColor = categoryColors.selectedBackgroundColor,
+        unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
+    )
+
     Box(
         modifier = modifier.semantics {
             testTagsAsResourceId = true
@@ -446,10 +454,8 @@ fun PocketStoriesCategories(
                 SelectableChip(
                     text = category.name,
                     isSelected = selections.map { it.name }.contains(category.name),
-                    selectedTextColor = categoryColors.selectedTextColor,
-                    unselectedTextColor = categoryColors.unselectedTextColor,
-                    selectedBackgroundColor = categoryColors.selectedBackgroundColor,
-                    unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
+                    isSquare = true,
+                    selectableChipColors = selectableChipColors,
                 ) {
                     onCategoryClick(category)
                 }
@@ -458,40 +464,6 @@ fun PocketStoriesCategories(
     }
 }
 
-/**
- * Wrapper for the color parameters of [PocketStoriesCategories].
- *
- * @param selectedTextColor Text [Color] when the category is selected.
- * @param unselectedTextColor Text [Color] when the category is not selected.
- * @param selectedBackgroundColor Background [Color] when the category is selected.
- * @param unselectedBackgroundColor Background [Color] when the category is not selected.
- */
-data class PocketStoriesCategoryColors(
-    val selectedBackgroundColor: Color,
-    val unselectedBackgroundColor: Color,
-    val selectedTextColor: Color,
-    val unselectedTextColor: Color,
-) {
-    companion object {
-
-        /**
-         * Builder function used to construct an instance of [PocketStoriesCategoryColors].
-         */
-        @Composable
-        fun buildColors(
-            selectedBackgroundColor: Color = FirefoxTheme.colors.actionPrimary,
-            unselectedBackgroundColor: Color = FirefoxTheme.colors.actionTertiary,
-            selectedTextColor: Color = FirefoxTheme.colors.textActionPrimary,
-            unselectedTextColor: Color = FirefoxTheme.colors.textActionTertiary,
-        ) = PocketStoriesCategoryColors(
-            selectedBackgroundColor = selectedBackgroundColor,
-            unselectedBackgroundColor = unselectedBackgroundColor,
-            selectedTextColor = selectedTextColor,
-            unselectedTextColor = unselectedTextColor,
-        )
-    }
-}
-
 /**
  * Pocket feature section title.
  * Shows a default text about Pocket and offers a external link to learn more.