Bug 1840332 - Add ReviewGradeCard

app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckCards.kt

@@ -0,0 +1,162 @@
+/* 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.shopping.ui
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Card
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.theme.FirefoxTheme
+
+private val cardShape = RoundedCornerShape(8.dp)
+private val defaultCardElevation = 5.dp
+private val defaultCardContentPadding = 16.dp
+
+/**
+ * A card container for review quality check UI that can be expanded and collapsed.
+ *
+ * @param title The title of the card.
+ * @param modifier Modifier to be applied to the card.
+ * @param content The content of the card.
+ */
+@Composable
+fun ReviewQualityCheckExpandableCard(
+    title: String,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    ReviewQualityCheckCard(
+        modifier = modifier,
+        contentPadding = 0.dp,
+    ) {
+        var isExpanded by remember { mutableStateOf(false) }
+
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable {
+                    isExpanded = isExpanded.not()
+                }
+                .padding(defaultCardContentPadding),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Text(
+                text = title,
+                color = FirefoxTheme.colors.textPrimary,
+                style = FirefoxTheme.typography.headline8,
+            )
+
+            val chevronDrawable = if (isExpanded) {
+                R.drawable.mozac_ic_chevron_up_20
+            } else {
+                R.drawable.mozac_ic_chevron_down_20
+            }
+
+            Icon(
+                painter = painterResource(id = chevronDrawable),
+                contentDescription = null,
+                tint = FirefoxTheme.colors.iconPrimary,
+            )
+        }
+
+        AnimatedVisibility(visible = isExpanded) {
+            Box(
+                modifier = Modifier.padding(
+                    start = defaultCardContentPadding,
+                    end = defaultCardContentPadding,
+                    bottom = defaultCardContentPadding,
+                ),
+            ) {
+                content()
+            }
+        }
+    }
+}
+
+/**
+ * A card container for review quality check UI.
+ *
+ * @param modifier Modifier to be applied to the card.
+ * @param backgroundColor The background color of the card.
+ * @param elevation The elevation of the card.
+ * @param content The content of the card.
+ */
+@Composable
+fun ReviewQualityCheckCard(
+    modifier: Modifier,
+    backgroundColor: Color = FirefoxTheme.colors.layer2,
+    elevation: Dp = defaultCardElevation,
+    contentPadding: Dp = defaultCardContentPadding,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Card(
+        shape = cardShape,
+        backgroundColor = backgroundColor,
+        elevation = elevation,
+        modifier = modifier,
+    ) {
+        Column(
+            modifier = Modifier.padding(contentPadding),
+        ) {
+            content()
+        }
+    }
+}
+
+@LightDarkPreview
+@Composable
+private fun ReviewQualityCheckCardPreview() {
+    FirefoxTheme {
+        Column(modifier = Modifier.padding(16.dp)) {
+            ReviewQualityCheckCard(
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Text(
+                    text = "Review Quality Check Card Content",
+                    color = FirefoxTheme.colors.textPrimary,
+                    style = FirefoxTheme.typography.headline8,
+                )
+            }
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            ReviewQualityCheckExpandableCard(
+                title = "Review Quality Check Expandable Card",
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Text(
+                    text = "content",
+                    color = FirefoxTheme.colors.textPrimary,
+                    style = FirefoxTheme.typography.body2,
+                )
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckContent.kt

@@ -28,6 +28,7 @@ import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.R
 import org.mozilla.fenix.compose.BottomSheetHandle
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.shopping.state.ReviewQualityCheckState
 import org.mozilla.fenix.theme.FirefoxTheme
 
 private val bottomSheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
@@ -65,6 +66,13 @@ fun ReviewQualityCheckContent(
         Header()
 
         Spacer(modifier = Modifier.height(16.dp))
+
+        ReviewGradeCard(
+            modifier = Modifier.fillMaxWidth(),
+            reviewGrade = ReviewQualityCheckState.Grade.B,
+        )
+
+        Spacer(modifier = Modifier.height(16.dp))
     }
 }
 
@@ -90,6 +98,24 @@ private fun Header() {
     }
 }
 
+@Composable
+private fun ReviewGradeCard(
+    reviewGrade: ReviewQualityCheckState.Grade,
+    modifier: Modifier = Modifier,
+) {
+    ReviewQualityCheckCard(modifier = modifier.semantics(mergeDescendants = true) {}) {
+        Text(
+            text = stringResource(R.string.review_quality_check_grade_title),
+            color = FirefoxTheme.colors.textPrimary,
+            style = FirefoxTheme.typography.headline8,
+        )
+
+        Spacer(modifier = Modifier.height(8.dp))
+
+        ReviewGradeExpanded(grade = reviewGrade)
+    }
+}
+
 @Composable
 @LightDarkPreview
 private fun ReviewQualityCheckContentPreview() {

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

@@ -119,4 +119,5 @@
     <string name="review_quality_check_grade_c_description" translatable="false">Only some reliable reviews</string>
     <string name="review_quality_check_grade_d_f_description" translatable="false">Unreliable reviews</string>
     <string name="review_quality_check_star_rating_content_description">%1$s out of 5 stars</string>
+    <string name="review_quality_check_grade_title">How reliable are the reviews?</string>
 </resources>