For #25025 - Show sponsored stories on debug only

The design asks for a new row in between the primary and the secondary text so
I went with making "ListItemTabSurface" public allowing for customizing the
content it will show but keeping the same layout and general UX.

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

@@ -112,7 +112,7 @@ fun ListItemTabLarge(
  * @param tabDetails [Composable] Displayed to the the end of the image. Allows for variation in the item text style.
  */
 @Composable
-private fun ListItemTabSurface(
+fun ListItemTabSurface(
     imageUrl: String,
     onClick: (() -> Unit)? = null,
     tabDetails: @Composable () -> Unit
@@ -159,3 +159,18 @@ private fun ListItemTabLargePreview() {
         ) { }
     }
 }
+
+@Composable
+@Preview
+private fun ListItemTabSurfacePreview() {
+    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
+        ListItemTabSurface(
+            imageUrl = ""
+        ) {
+            PrimaryText(
+                text = "This can be anything",
+                fontSize = 22.sp
+            )
+        }
+    }
+}

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

@@ -39,11 +39,14 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import mozilla.components.service.pocket.PocketStory
 import mozilla.components.service.pocket.PocketStory.PocketRecommendedStory
+import mozilla.components.service.pocket.PocketStory.PocketSponsoredStory
+import mozilla.components.service.pocket.PocketStory.PocketSponsoredStoryShim
 import org.mozilla.fenix.R
 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.PrimaryText
@@ -114,6 +117,63 @@ fun PocketStory(
     )
 }
 
+/**
+ * Displays a single [PocketSponsoredStory].
+ *
+ * @param story The [PocketSponsoredStory] to be displayed.
+ * @param onStoryClick Callback for when the user taps on this story.
+ */
+@Composable
+fun PocketSponsoredStory(
+    story: PocketSponsoredStory,
+    onStoryClick: (PocketSponsoredStory) -> Unit
+) {
+    val (imageWidth, imageHeight) = with(LocalDensity.current) {
+        116.dp.toPx().roundToInt() to 84.dp.toPx().roundToInt()
+    }
+    val imageUrl = story.imageUrl.replace(
+        "&resize=w[0-9]+-h[0-9]+".toRegex(),
+        "&resize=w$imageWidth-h$imageHeight"
+    )
+
+    ListItemTabSurface(imageUrl, { onStoryClick(story) }) {
+        PrimaryText(
+            text = story.title,
+            fontSize = 14.sp,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 2,
+        )
+
+        Spacer(Modifier.height(9.dp))
+
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Icon(
+                painter = painterResource(id = R.drawable.pocket_star_stroke),
+                contentDescription = null,
+                tint = FirefoxTheme.colors.iconSecondary,
+            )
+
+            Spacer(Modifier.width(8.dp))
+
+            SecondaryText(
+                text = stringResource(R.string.pocket_stories_sponsor_indication),
+                fontSize = 12.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
+        }
+
+        Spacer(Modifier.height(7.dp))
+
+        SecondaryText(
+            text = story.sponsor,
+            fontSize = 12.sp,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+        )
+    }
+}
+
 /**
  * Displays a list of [PocketStory]es on 3 by 3 grid.
  * If there aren't enough stories to fill all columns placeholders containing an external link
@@ -160,6 +220,10 @@ fun PocketStories(
                                 .build().toString()
                             onStoryClicked(it.copy(url = uri), rowIndex to columnIndex)
                         }
+                    } else if (story is PocketSponsoredStory) {
+                        PocketSponsoredStory(story) {
+                            onStoryClicked(story, rowIndex to columnIndex)
+                        }
                     }
                 }
             }
@@ -291,19 +355,30 @@ private class PocketStoryProvider : PreviewParameterProvider<PocketStory> {
 }
 
 internal fun getFakePocketStories(limit: Int = 1): List<PocketStory> {
-    return mutableListOf<PocketRecommendedStory>().apply {
+    return mutableListOf<PocketStory>().apply {
         for (index in 0 until limit) {
-            add(
-                PocketRecommendedStory(
-                    title = "This is a ${"very ".repeat(index)} long title",
-                    publisher = "Publisher",
-                    url = "https://story$index.com",
-                    imageUrl = "",
-                    timeToRead = index,
-                    category = "Category #$index",
-                    timesShown = index.toLong()
+            when (index % 2 == 0) {
+                true -> add(
+                    PocketRecommendedStory(
+                        title = "This is a ${"very ".repeat(index)} long title",
+                        publisher = "Publisher",
+                        url = "https://story$index.com",
+                        imageUrl = "",
+                        timeToRead = index,
+                        category = "Category #$index",
+                        timesShown = index.toLong()
+                    )
                 )
-            )
+                false -> add(
+                    PocketSponsoredStory(
+                        title = "This is a ${"very ".repeat(index)} long title",
+                        url = "https://sponsored-story$index.com",
+                        imageUrl = "",
+                        sponsor = "Mozilla",
+                        shim = PocketSponsoredStoryShim("", "")
+                    )
+                )
+            }
         }
     }
 }

app/src/main/res/drawable/pocket_star_stroke.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- 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/. -->
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="12dp"
+    android:height="12dp"
+    android:viewportWidth="12"
+    android:viewportHeight="12">
+  <path
+      android:pathData="M6,0C6.335,0 6.634,0.208 6.75,0.522L8.027,3.973L11.478,5.25C11.792,5.366 12,5.665 12,6C12,6.335 11.792,6.634 11.478,6.75L8.027,8.027L6.75,11.478C6.634,11.792 6.335,12 6,12C5.665,12 5.366,11.792 5.25,11.478L3.973,8.027L0.522,6.75C0.208,6.634 0,6.335 0,6C0,5.665 0.208,5.366 0.522,5.25L3.973,3.973L5.25,0.522C5.366,0.208 5.665,0 6,0ZM6,3.105L5.346,4.873C5.265,5.092 5.092,5.265 4.873,5.346L3.105,6L4.873,6.654C5.092,6.735 5.265,6.908 5.346,7.127L6,8.895L6.654,7.127C6.735,6.908 6.908,6.735 7.127,6.654L8.895,6L7.127,5.346C6.908,5.265 6.735,5.092 6.654,4.873L6,3.105Z"
+      android:fillColor="#666666"
+      android:fillType="evenOdd"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -1823,6 +1823,8 @@
     <string name="pocket_stories_feature_caption">Part of the Firefox family. %s</string>
     <!-- Clickable text for opening an external link for more information about Pocket. -->
     <string name="pocket_stories_feature_learn_more">Learn more</string>
+    <!-- Text indicating that the Pocket story that also displays this text is a sponsored story by other 3rd party entity. -->
+    <string name="pocket_stories_sponsor_indication">Sponsored</string>
 
     <!-- Snackbar message for enrolling in a Nimbus experiment from the secret settings when Studies preference is Off.-->
     <string name="experiments_snackbar">Enable telemetry to send data.</string>