Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit aa07c5e

Browse files
t-p-whitet-p-white
committed
Bug 1892914 - Added the microsurvey 'content' view r=android-reviewers,amejiamarmol
Differential Revision: https://phabricator.services.mozilla.com/D208473
1 parent 6cede0c commit aa07c5e

File tree

2 files changed

+155
-23
lines changed

2 files changed

+155
-23
lines changed

‎mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicroSurveyContent.kt

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* This Source Code Form is subject to the terms of the Mozilla Public
2+
* License, v. 2.0. If a copy of the MPL was not distributed with this
3+
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4+
5+
package org.mozilla.fenix.microsurvey.ui
6+
7+
import androidx.annotation.DrawableRes
8+
import androidx.compose.foundation.Image
9+
import androidx.compose.foundation.layout.Column
10+
import androidx.compose.foundation.layout.Row
11+
import androidx.compose.foundation.layout.Spacer
12+
import androidx.compose.foundation.layout.fillMaxWidth
13+
import androidx.compose.foundation.layout.padding
14+
import androidx.compose.foundation.layout.size
15+
import androidx.compose.foundation.layout.width
16+
import androidx.compose.foundation.layout.wrapContentHeight
17+
import androidx.compose.foundation.shape.RoundedCornerShape
18+
import androidx.compose.material.Card
19+
import androidx.compose.material.Text
20+
import androidx.compose.runtime.Composable
21+
import androidx.compose.ui.Alignment
22+
import androidx.compose.ui.Modifier
23+
import androidx.compose.ui.graphics.Color
24+
import androidx.compose.ui.res.painterResource
25+
import androidx.compose.ui.res.stringResource
26+
import androidx.compose.ui.tooling.preview.PreviewScreenSizes
27+
import androidx.compose.ui.unit.Dp
28+
import androidx.compose.ui.unit.dp
29+
import org.mozilla.fenix.R
30+
import org.mozilla.fenix.compose.annotation.LightDarkPreview
31+
import org.mozilla.fenix.compose.list.RadioButtonListItem
32+
import org.mozilla.fenix.theme.FirefoxTheme
33+
34+
private val shape = RoundedCornerShape(16.dp)
35+
private val elevation: Dp = 5.dp
36+
37+
/**
38+
* The micro survey content UI to hold question and answer data.
39+
*
40+
* @param question The survey question text.
41+
* @param answers The survey answer text options available for the question.
42+
* @param icon The survey icon, this will represent the feature the survey is for.
43+
* @param backgroundColor The view background color.
44+
* @param selectedAnswer The current selected answer. Will be null until user selects an option.
45+
* @param onSelectionChange An event that updates the [selectedAnswer].
46+
*/
47+
@Composable
48+
fun MicroSurveyContent(
49+
question: String,
50+
answers: List<String>,
51+
@DrawableRes icon: Int = R.drawable.ic_print, // todo currently unknown what the default will be if any.
52+
backgroundColor: Color = FirefoxTheme.colors.layer2,
53+
selectedAnswer: String? = null,
54+
onSelectionChange: (String) -> Unit,
55+
) {
56+
Card(
57+
shape = shape,
58+
backgroundColor = backgroundColor,
59+
elevation = elevation,
60+
modifier = Modifier
61+
.wrapContentHeight()
62+
.fillMaxWidth(),
63+
) {
64+
Column(modifier = Modifier.wrapContentHeight()) {
65+
Header(icon, question)
66+
67+
answers.forEach {
68+
RadioButtonListItem(
69+
label = it,
70+
selected = selectedAnswer == it,
71+
onClick = {
72+
onSelectionChange.invoke(it)
73+
},
74+
)
75+
}
76+
}
77+
}
78+
}
79+
80+
@Composable
81+
private fun Header(icon: Int, question: String) {
82+
Row(
83+
modifier = Modifier.padding(16.dp),
84+
verticalAlignment = Alignment.CenterVertically,
85+
) {
86+
Image(
87+
painter = painterResource(icon),
88+
contentDescription = "Survey icon", // todo update to string res once a11y strings are available.
89+
modifier = Modifier.size(24.dp),
90+
)
91+
92+
Spacer(modifier = Modifier.width(16.dp))
93+
94+
Text(
95+
text = question,
96+
color = FirefoxTheme.colors.textPrimary,
97+
style = FirefoxTheme.typography.headline7,
98+
)
99+
}
100+
}
101+
102+
/**
103+
* Preview for [MicroSurveyContent].
104+
*/
105+
@PreviewScreenSizes
106+
@LightDarkPreview
107+
@Composable
108+
fun MicroSurveyContentPreview() {
109+
FirefoxTheme {
110+
MicroSurveyContent(
111+
question = "How satisfied are you with printing in Firefox?",
112+
icon = R.drawable.ic_print,
113+
answers = listOf(
114+
stringResource(id = R.string.likert_scale_option_1),
115+
stringResource(id = R.string.likert_scale_option_2),
116+
stringResource(id = R.string.likert_scale_option_3),
117+
stringResource(id = R.string.likert_scale_option_4),
118+
stringResource(id = R.string.likert_scale_option_5),
119+
),
120+
onSelectionChange = {},
121+
)
122+
}
123+
}

‎mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicroSurveyOpenView.kt

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
package org.mozilla.fenix.microsurvey.ui
66

7+
import androidx.annotation.DrawableRes
78
import androidx.compose.foundation.layout.Column
89
import androidx.compose.foundation.layout.Row
9-
import androidx.compose.foundation.layout.fillMaxWidth
10-
import androidx.compose.foundation.layout.height
1110
import androidx.compose.foundation.layout.padding
12-
import androidx.compose.foundation.shape.RoundedCornerShape
13-
import androidx.compose.material.Card
1411
import androidx.compose.runtime.Composable
12+
import androidx.compose.runtime.mutableStateOf
13+
import androidx.compose.runtime.remember
1514
import androidx.compose.ui.Alignment
1615
import androidx.compose.ui.Modifier
1716
import androidx.compose.ui.res.stringResource
17+
import androidx.compose.ui.tooling.preview.PreviewScreenSizes
1818
import androidx.compose.ui.unit.dp
1919
import org.mozilla.fenix.R
2020
import org.mozilla.fenix.compose.annotation.LightDarkPreview
@@ -23,16 +23,20 @@ import org.mozilla.fenix.theme.FirefoxTheme
2323
/**
2424
* The UI used for micro-survey when this is opened.
2525
*
26+
* @param question The survey question text.
27+
* @param answers The survey answer text options available for the question.
28+
* @param icon The survey icon, this will represent the feature the survey is for.
2629
* @param isSubmitted Whether the user submitted an answer or not.
27-
* @param isContentAnswerSelected Whether the user clicked on one of the answers or not.
28-
* @param content The content of the micro-survey.
2930
*/
3031
@Composable
3132
fun MicroSurveyOpenView(
33+
question: String,
34+
answers: List<String>,
35+
@DrawableRes icon: Int = R.drawable.ic_print, // todo currently unknown what the default will be if any.
3236
isSubmitted: Boolean,
33-
isContentAnswerSelected: Boolean,
34-
content: @Composable () -> Unit,
3537
) {
38+
val selectedAnswer = remember { mutableStateOf<String?>(null) }
39+
3640
Column(
3741
modifier = Modifier.padding(horizontal = 16.dp),
3842
) {
@@ -47,7 +51,13 @@ fun MicroSurveyOpenView(
4751
) {}
4852
}
4953

50-
content()
54+
MicroSurveyContent(
55+
question = question,
56+
icon = icon,
57+
answers = answers,
58+
selectedAnswer = selectedAnswer.value,
59+
onSelectionChange = { selectedAnswer.value = it },
60+
)
5161

5262
Row(
5363
modifier = Modifier
@@ -56,7 +66,7 @@ fun MicroSurveyOpenView(
5666
) {
5767
MicroSurveyFooter(
5868
isSubmitted = isSubmitted,
59-
isContentAnswerSelected = isContentAnswerSelected,
69+
isContentAnswerSelected = selectedAnswer.value != null,
6070
onLinkClick = {},
6171
onButtonClick = {},
6272
)
@@ -67,23 +77,22 @@ fun MicroSurveyOpenView(
6777
/**
6878
* The preview for micro-survey open view.
6979
*/
70-
@Composable
80+
@PreviewScreenSizes
7181
@LightDarkPreview
82+
@Composable
7283
fun MicroSurveyOpenViewPreview() {
7384
FirefoxTheme {
7485
MicroSurveyOpenView(
86+
question = "How satisfied are you with printing in Firefox?",
87+
icon = R.drawable.ic_print,
88+
answers = listOf(
89+
stringResource(id = R.string.likert_scale_option_1),
90+
stringResource(id = R.string.likert_scale_option_2),
91+
stringResource(id = R.string.likert_scale_option_3),
92+
stringResource(id = R.string.likert_scale_option_4),
93+
stringResource(id = R.string.likert_scale_option_5),
94+
),
7595
isSubmitted = false,
76-
isContentAnswerSelected = false,
77-
) {
78-
Card(
79-
shape = RoundedCornerShape(16.dp),
80-
backgroundColor = FirefoxTheme.colors.textPrimary,
81-
modifier = Modifier
82-
.fillMaxWidth(),
83-
) {
84-
Column(modifier = Modifier.height(400.dp)) {
85-
}
86-
}
87-
}
96+
)
8897
}
8998
}

0 commit comments

Comments
 (0)