Feature/hma 7953 android add preview annotations to compose sample app screens (#195)

* HMRC Preview added

* Preview added in  screens

* Preview added in SeparatedViewContainerScreen

* Preview added in SelectRowViewScreen

* Preview added in SelectRowViewScreen

* Preview added in ColorsListScreen

* HMRCPreview template is added

* PR issue resolved

Author: aliahmedbd

components-compose/src/main/java/uk/gov/hmrc/components/compose/ui/theme/HmrcAllDevicePreview.kt

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package uk.gov.hmrc.components.compose.ui.theme
+
+import android.content.res.Configuration
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * Device previews for light and dark mode
+ */
+@Preview(
+    name = "Phone - Light",
+    device = Devices.PIXEL_4,
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    showBackground = true,
+)
+@Preview(
+    name = "Phone - Dark",
+    device = Devices.PIXEL_4,
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    showBackground = true,
+)
+@Preview(
+    name = "Tablet - Light",
+    device = Devices.PIXEL_C,
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    showBackground = true,
+)
+@Preview(
+    name = "Tablet - Dark",
+    device = Devices.PIXEL_C,
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    showBackground = true,
+)
+@Preview(
+    name = "Large Font mode",
+    uiMode = Configuration.UI_MODE_NIGHT_NO,
+    fontScale = 2f,
+    showBackground = true,
+)
+annotation class HmrcAllDevicePreview

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/atoms/ButtonScreen.kt

@@ -20,13 +20,13 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import uk.gov.hmrc.components.compose.atom.button.IconButton
 import uk.gov.hmrc.components.compose.atom.button.PrimaryButton
 import uk.gov.hmrc.components.compose.atom.button.SecondaryButton
-import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.dimensions
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
 @Composable
@@ -46,10 +46,10 @@ fun ButtonScreen() {
     }
 }
 
-@Preview(showBackground = true)
+@HmrcAllDevicePreview()
 @Composable
 fun ButtonScreenPreview() {
-    HmrcTheme {
+    HmrcPreview {
         ButtonScreen()
     }
-}
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/atoms/DividerScreen.kt

@@ -24,7 +24,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import uk.gov.hmrc.components.compose.atom.divider.HmrcDivider
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
 object DividerScreen {
@@ -62,3 +64,11 @@ object DividerScreen {
     }
 
 }
+
+@HmrcAllDevicePreview()
+@Composable
+fun DividerScreenPreview() {
+    HmrcPreview {
+        DividerScreen()
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/atoms/TextScreen.kt

@@ -19,7 +19,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
 import uk.gov.hmrc.components.compose.atom.bullet.BulletedTextView
 import uk.gov.hmrc.components.compose.atom.heading.Heading3
 import uk.gov.hmrc.components.compose.atom.heading.Heading4
@@ -33,7 +32,9 @@ import uk.gov.hmrc.components.compose.atom.text.H5Text
 import uk.gov.hmrc.components.compose.atom.text.InfoText
 import uk.gov.hmrc.components.compose.atom.text.LinkText
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
 @Composable
@@ -44,12 +45,18 @@ fun TextScreen() {
             text = stringResource(id = R.string.text_h3),
             modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16)
         )
-        Heading4(text = stringResource(id = R.string.text_heading4), modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16))
+        Heading4(
+            text = stringResource(id = R.string.text_heading4),
+            modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16)
+        )
         H4Text(
             text = stringResource(id = R.string.text_h4),
             modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16)
         )
-        Heading5(text = stringResource(id = R.string.text_heading5), modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16))
+        Heading5(
+            text = stringResource(id = R.string.text_heading5),
+            modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16)
+        )
         H5Text(
             text = stringResource(id = R.string.text_h5),
             modifier = Modifier.padding(top = HmrcTheme.dimensions.hmrcSpacing16)
@@ -85,10 +92,10 @@ fun TextScreen() {
     }
 }
 
-@Preview
+@HmrcAllDevicePreview
 @Composable
 fun TextScreenPreview() {
-    HmrcTheme {
+    HmrcPreview {
         TextScreen()
     }
 }

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/colors/ColorsListScreen.kt

@@ -26,6 +26,7 @@ import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Text
@@ -41,18 +42,29 @@ import uk.gov.hmrc.components.compose.organism.HmrcCardView
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.typography
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_fragments.data.model.ColorItem
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.viewModel.ColorsViewModel
 
 @Composable
 fun ColorsListScreen(viewModel: ColorsViewModel) {
     val listItems by viewModel.colorItems.collectAsStateWithLifecycle()
-    val listState = rememberLazyListState()
+    ColorsListScreen(listItems)
+}
 
+@Composable
+fun ColorsListScreen(
+    listItems: List<ColorItem>,
+    listState: LazyListState = rememberLazyListState()
+) {
     LazyColumn(
         modifier = Modifier.fillMaxSize(1F),
         state = listState,
-        contentPadding = PaddingValues(top = HmrcTheme.dimensions.hmrcSpacing8, bottom = HmrcTheme.dimensions.hmrcSpacing8)
+        contentPadding = PaddingValues(
+            top = HmrcTheme.dimensions.hmrcSpacing8,
+            bottom = HmrcTheme.dimensions.hmrcSpacing8
+        )
     ) {
         items(listItems) { item ->
             ListItem(item = item)
@@ -73,7 +85,9 @@ fun ListItem(item: ColorItem) {
                     .align(alignment = Alignment.CenterVertically),
             )
             Text(
-                modifier = Modifier.padding(start = HmrcTheme.dimensions.hmrcSpacing16).align(alignment = Alignment.CenterVertically),
+                modifier = Modifier
+                    .padding(start = HmrcTheme.dimensions.hmrcSpacing16)
+                    .align(alignment = Alignment.CenterVertically),
                 text = "${item.colorName} (${item.color.hexToString()})",
                 style = typography.h5
             )
@@ -82,3 +96,11 @@ fun ListItem(item: ColorItem) {
 }
 
 private fun Color.hexToString(): String = String.format("#%08X", toArgb())
+
+@HmrcAllDevicePreview
+@Composable
+fun ColorsListScreenPreview() {
+    HmrcPreview {
+        ColorsListScreen(listItems = ColorItem.values().asList())
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/molecules/BoldTitleBodyViewScreen.kt

@@ -22,8 +22,10 @@ import androidx.compose.ui.res.stringResource
 import uk.gov.hmrc.components.compose.molecule.titleBody.BoldTitleBodyView
 import uk.gov.hmrc.components.compose.organism.HmrcCardView
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ExamplesSlot
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.PlaceholderSlot
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
@@ -57,3 +59,10 @@ fun BoldTitleBodyViewScreen() {
     }
 }
 
+@HmrcAllDevicePreview
+@Composable
+fun BoldTitleBodyViewScreenPreview() {
+    HmrcPreview {
+        BoldTitleBodyViewScreen()
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/molecules/BottomSheetViewScreen.kt

@@ -21,8 +21,10 @@ import uk.gov.hmrc.components.compose.molecule.selectrow.SelectRowView
 import uk.gov.hmrc.components.compose.molecule.titleBody.H5TitleBodyView
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.dimensions
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ExamplesSlot
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
 @Composable
@@ -327,7 +329,7 @@ fun CustomPaddingBottomSheet(
         )
         Spacer(modifier = Modifier.height(dimensions.hmrcSpacing16))
         TextInputView(
-            onInputValueChange = {  },
+            onInputValueChange = { },
             errorText = "",
             labelText = stringResource(id = R.string.text_input_placeholder_label),
             hintText = stringResource(id = R.string.text_input_placeholder_hint),
@@ -346,3 +348,11 @@ fun CustomPaddingBottomSheet(
         )
     }
 }
+
+@HmrcAllDevicePreview
+@Composable
+internal fun BottomSheetViewScreenPreview() {
+    HmrcPreview {
+        BottomSheetViewScreen()
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/molecules/CurrencyInputViewScreen.kt

@@ -29,8 +29,10 @@ import uk.gov.hmrc.components.compose.atom.text.BodyText
 import uk.gov.hmrc.components.compose.molecule.input.CurrencyInputView
 import uk.gov.hmrc.components.compose.organism.HmrcCardView
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ExamplesSlot
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.PlaceholderSlot
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 import uk.gov.hmrc.sample_compose_fragments.presentation.viewModel.CurrencyInputViewModel
@@ -132,3 +134,11 @@ fun CurrencyInputViewScreen() {
         }
     }
 }
+
+@HmrcAllDevicePreview
+@Composable
+private fun CurrencyInputViewScreenPreview() {
+    HmrcPreview {
+        CurrencyInputViewScreen()
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/molecules/DonutChartViewScreen.kt

@@ -42,7 +42,9 @@ import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.dimensions
 import uk.gov.hmrc.components.compose.ui.theme.LocalOrientationMode
 import uk.gov.hmrc.components.compose.ui.theme.Orientation
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ExamplesSlot
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.PlaceholderSlot
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
@@ -224,4 +226,10 @@ fun DonutChartViewScreen() {
     }
 }
 
-
+@HmrcAllDevicePreview
+@Composable
+internal fun DonutChartViewScreenPreview() {
+    HmrcPreview {
+        DonutChartViewScreen()
+    }
+}

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/screens/molecules/H4TitleBodyViewScreen.kt

@@ -22,8 +22,10 @@ import androidx.compose.ui.res.stringResource
 import uk.gov.hmrc.components.compose.molecule.titleBody.H4TitleBodyView
 import uk.gov.hmrc.components.compose.organism.HmrcCardView
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcAllDevicePreview
 import uk.gov.hmrc.sample_compose_components.R
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ExamplesSlot
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.HmrcPreview
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.PlaceholderSlot
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.sampletemplate.ScreenScrollViewColumn
 
@@ -56,3 +58,11 @@ fun H4TitleBodyViewScreen() {
         }
     }
 }
+
+@HmrcAllDevicePreview
+@Composable
+internal fun H4TitleBodyViewScreenPreview() {
+    HmrcPreview {
+        H4TitleBodyViewScreen()
+    }
+}