For mozilla-mobile#21391 - Final design composables

Fonts are not exactly following the Figma design but do better suit the overall
design since the other fonts are also not respecting the latest specs.

app/src/main/java/org/mozilla/fenix/compose/ClickableSubstringLink.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 androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.tooling.preview.Preview
+import mozilla.components.ui.colors.PhotonColors
+
+/**
+ * [Text] containing a substring styled as an URL informing when this is clicked.
+ *
+ * @param text Full text that will be displayed
+ * @param textColor [Color] of the normal text. The URL substring will have a default URL style applied.
+ * @param clickableStartIndex [text] index at which the URL substring starts.
+ * @param clickableEndIndex [text] index at which the URL substring ends.
+ * @param onClick Callback to be invoked only when the URL substring is clicked.
+ */
+@Composable
+fun ClickableSubstringLink(
+    text: String,
+    textColor: Color,
+    clickableStartIndex: Int,
+    clickableEndIndex: Int,
+    onClick: () -> Unit
+) {
+    val annotatedText = buildAnnotatedString {
+        append(text)
+
+        addStyle(
+            SpanStyle(textColor),
+            start = 0,
+            end = clickableStartIndex
+        )
+
+        addStyle(
+            SpanStyle(
+                textDecoration = TextDecoration.Underline,
+                color = when (isSystemInDarkTheme()) {
+                    true -> PhotonColors.Violet40
+                    false -> PhotonColors.Violet70
+                }
+            ),
+            start = clickableStartIndex,
+            end = clickableEndIndex
+        )
+
+        addStyle(
+            SpanStyle(textColor),
+            start = clickableEndIndex,
+            end = text.length
+        )
+
+        addStringAnnotation(
+            tag = "link",
+            annotation = "",
+            start = clickableStartIndex,
+            end = clickableEndIndex
+        )
+    }
+
+    ClickableText(
+        text = annotatedText,
+        onClick = {
+            annotatedText
+                .getStringAnnotations("link", it, it)
+                .firstOrNull()?.let {
+                    onClick()
+                }
+        }
+    )
+}
+
+@Composable
+@Preview
+private fun ClickableSubstringTextPreview() {
+    val text = "This text contains a link"
+    Box(modifier = Modifier.background(PhotonColors.White)) {
+        ClickableSubstringLink(
+            text,
+            PhotonColors.DarkGrey90,
+            text.indexOf("link"),
+            text.length
+        ) { }
+    }
+}

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

@@ -0,0 +1,84 @@
+/* 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 androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import mozilla.components.browser.engine.gecko.fetch.GeckoViewFetchClient
+import mozilla.components.concept.fetch.Client
+import mozilla.components.concept.fetch.MutableHeaders
+import mozilla.components.concept.fetch.Request
+import mozilla.components.concept.fetch.Response
+import mozilla.components.support.images.compose.loader.ImageLoader
+import mozilla.components.support.images.compose.loader.WithImage
+
+/**
+ * A composable that lays out and draws the image from a given URL while showing a default placeholder
+ * while that image is downloaded or a default fallback image when downloading failed.
+ *
+ * @param client [Client] instance to be used for downloading the image.
+ * When using [GeckoViewFetchClient] the image will automatically be cached if it has the right headers.
+ * @param url URL from where the to download the image to be shown.
+ * @param modifier [Modifier] to be applied to the layout.
+ * @param private Whether or not this is a private request. Like in private browsing mode,
+ * private requests will not cache anything on disk and not send any cookies shared with the browser.
+ * @param targetSize Image size (width and height) the loaded image should be scaled to.
+ * @param contentDescription Localized text used by accessibility services to describe what this image represents.
+ * This should always be provided unless this image is used for decorative purposes, and does not represent
+ * a meaningful action that a user can take.
+ */
+@Composable
+@Suppress("LongParameterList")
+fun Image(
+    client: Client,
+    url: String,
+    modifier: Modifier = Modifier,
+    private: Boolean = false,
+    targetSize: Dp = 100.dp,
+    contentDescription: String? = null
+) {
+    ImageLoader(
+        url = url,
+        client = client,
+        private = private,
+        targetSize = targetSize
+    ) {
+        WithImage { painter ->
+            androidx.compose.foundation.Image(
+                painter = painter,
+                modifier = modifier,
+                contentDescription = contentDescription,
+            )
+        }
+
+        WithDefaultPlaceholder(modifier, contentDescription)
+
+        WithDefaultFallback(modifier, contentDescription)
+    }
+}
+
+@Composable
+@Preview
+private fun ImagePreview() {
+    Image(
+        FakeClient(),
+        "https://mozilla.com",
+        Modifier.height(100.dp).width(200.dp)
+    )
+}
+
+internal class FakeClient : Client() {
+    override fun fetch(request: Request) = Response(
+        url = request.url,
+        status = 200,
+        body = Response.Body.empty(),
+        headers = MutableHeaders()
+    )
+}

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

@@ -0,0 +1,87 @@
+/* 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 androidx.compose.foundation.Image
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.painter.ColorPainter
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import mozilla.components.support.images.compose.loader.Fallback
+import mozilla.components.support.images.compose.loader.ImageLoaderScope
+import mozilla.components.support.images.compose.loader.Placeholder
+import mozilla.components.ui.colors.PhotonColors
+
+/**
+ * Renders the app default image placeholder while the image is still getting loaded.
+ *
+ * @param modifier [Modifier] allowing to control among others the dimensions and shape of the image.
+ * @param contentDescription Text provided to accessibility services to describe what this image represents.
+ * Defaults to [null] suited for an image used only for decorative purposes and not to be read by
+ * accessibility services.
+ */
+@Composable
+internal fun ImageLoaderScope.WithDefaultPlaceholder(
+    modifier: Modifier,
+    contentDescription: String? = null
+) {
+    Placeholder {
+        DefaultImagePlaceholder(modifier, contentDescription)
+    }
+}
+
+/**
+ * Renders the app default image placeholder if loading the image failed.
+ *
+ * @param modifier [Modifier] allowing to control among others the dimensions and shape of the image.
+ * @param contentDescription Text provided to accessibility services to describe what this image represents.
+ * Defaults to [null] suited for an image used only for decorative purposes and not to be read by
+ * accessibility services.
+ */
+@Composable
+internal fun ImageLoaderScope.WithDefaultFallback(
+    modifier: Modifier,
+    contentDescription: String? = null
+) {
+    Fallback {
+        DefaultImagePlaceholder(modifier, contentDescription)
+    }
+}
+
+/**
+ * Application default image placeholder.
+ *
+ * @param modifier [Modifier] allowing to control among others the dimensions and shape of the image.
+ * @param contentDescription Text provided to accessibility services to describe what this image represents.
+ * Defaults to [null] suited for an image used only for decorative purposes and not to be read by
+ * accessibility services.
+ */
+@Composable
+internal fun DefaultImagePlaceholder(
+    modifier: Modifier,
+    contentDescription: String? = null
+) {
+    val color = when (isSystemInDarkTheme()) {
+        true -> PhotonColors.DarkGrey30
+        false -> PhotonColors.LightGrey30
+    }
+
+    Image(ColorPainter(color), contentDescription, modifier)
+}
+
+@Composable
+@Preview
+private fun DefaultImagePlaceholderPreview() {
+    DefaultImagePlaceholder(
+        Modifier
+            .size(200.dp, 100.dp)
+            .clip(RoundedCornerShape(8.dp))
+    )
+}