diff --git a/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckCards.kt b/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckCards.kt
new file mode 100644
index 000000000..9f8e109c4
--- /dev/null
+++ b/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,
+ )
+ }
+ }
+ }
+}
diff --git a/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckContent.kt b/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckContent.kt
index 78663ad03..05bb3bfeb 100644
--- a/app/src/main/java/org/mozilla/fenix/shopping/ui/ReviewQualityCheckContent.kt
+++ b/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() {
diff --git a/app/src/main/res/values/static_strings.xml b/app/src/main/res/values/static_strings.xml
index 3a06998b3..fc892bd38 100644
--- a/app/src/main/res/values/static_strings.xml
+++ b/app/src/main/res/values/static_strings.xml
@@ -119,4 +119,5 @@
Only some reliable reviews
Unreliable reviews
%1$s out of 5 stars
+ How reliable are the reviews?