HMA-5074 HMA-5073: Added InsetView and InsetTextView in Compose (#111)

* HMA-5074: Added InsetView in Compose

* fix padding on sample

* spotless

* address comments

* Fix padding order

* address feedback

* address comment

components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/inset/InsetTextView.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2023 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.molecule.inset
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.typography
+import uk.gov.hmrc.components.compose.ui.theme.hmrc_spacing_8
+
+@Composable
+fun InsetTextView(
+    text: String,
+    modifier: Modifier = Modifier
+) {
+    InsetView(
+        modifier = modifier,
+        childView = {
+            Text(
+                modifier = Modifier.padding(vertical = hmrc_spacing_8),
+                text = text,
+                style = typography.body,
+                textAlign = TextAlign.Start,
+            )
+        }
+    )
+}

components-compose/src/main/java/uk/gov/hmrc/components/compose/molecule/inset/InsetView.kt

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 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.molecule.inset
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Divider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors
+import uk.gov.hmrc.components.compose.ui.theme.hmrc_spacing_16
+import uk.gov.hmrc.components.compose.ui.theme.hmrc_spacing_4
+
+@Composable
+fun InsetView(
+    modifier: Modifier = Modifier,
+    childView: @Composable () -> Unit,
+) {
+    Column {
+        Row(modifier = modifier.height(IntrinsicSize.Min)) {
+            Divider(
+                color = colors.hmrcGrey2,
+                modifier = Modifier
+                    .fillMaxHeight()
+                    .clip(RectangleShape)
+                    .padding(end = hmrc_spacing_16)
+                    .width(hmrc_spacing_4)
+            )
+            childView()
+        }
+    }
+}

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

@@ -17,6 +17,7 @@ package uk.gov.hmrc.components.compose.ui.theme
 
 import androidx.compose.ui.unit.dp
 
+val hmrc_spacing_4 = 4.dp
 val hmrc_spacing_8 = 8.dp
 val hmrc_spacing_16 = 16.dp
 val hmrc_icon_size_24 = 24.dp

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/data/model/AtomItem.kt → sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/data/model/ComponentMenuItem.kt

@@ -18,4 +18,4 @@ package uk.gov.hmrc.sample_compose_fragments.data.model
 import androidx.annotation.StringRes
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.ComponentItem
 
-class AtomItem(val id: Int, @StringRes override val titleRes: Int): ComponentItem
+class ComponentMenuItem(val id: Int, @StringRes override val titleRes: Int): ComponentItem

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/data/repository/RepositoryImp.kt

@@ -16,7 +16,7 @@
 package uk.gov.hmrc.sample_compose_fragments.data.repository
 
 import uk.gov.hmrc.sample_compose_components.R
-import uk.gov.hmrc.sample_compose_fragments.data.model.AtomItem
+import uk.gov.hmrc.sample_compose_fragments.data.model.ComponentMenuItem
 import uk.gov.hmrc.sample_compose_fragments.data.model.ColorItem
 import uk.gov.hmrc.sample_compose_fragments.domain.repository.Repository
 import javax.inject.Inject
@@ -25,8 +25,21 @@ class RepositoryImpl @Inject constructor() : Repository {
 
     override suspend fun getColorList() = ColorItem.values().asList()
     override suspend fun getAtomList() = arrayListOf(
-        AtomItem(1, R.string.atoms_text),
-        AtomItem(2, R.string.atoms_buttons),
-        AtomItem(3, R.string.atoms_divider)
+        ComponentMenuItem(ATOM_TEXT, R.string.atoms_text),
+        ComponentMenuItem(ATOM_BUTTON, R.string.atoms_buttons),
+        ComponentMenuItem(ATOM_DIVIDER, R.string.atoms_divider)
     )
+    override suspend fun getMoleculesList() = arrayListOf(
+        ComponentMenuItem(MOLECULE_INSET_VIEW, R.string.molecules_inset),
+        ComponentMenuItem(MOLECULE_INSET_TEXT_VIEW, R.string.molecules_inset_text)
+    )
+
+    companion object {
+        const val ATOM_TEXT = 1
+        const val ATOM_BUTTON = 2
+        const val ATOM_DIVIDER = 3
+
+        const val MOLECULE_INSET_VIEW = 1
+        const val MOLECULE_INSET_TEXT_VIEW = 2
+    }
 }

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/domain/repository/Repository.kt

@@ -16,9 +16,10 @@
 package uk.gov.hmrc.sample_compose_fragments.domain.repository
 
 import uk.gov.hmrc.sample_compose_fragments.data.model.ColorItem
-import uk.gov.hmrc.sample_compose_fragments.data.model.AtomItem
+import uk.gov.hmrc.sample_compose_fragments.data.model.ComponentMenuItem
 
 interface Repository {
     suspend fun getColorList(): List<ColorItem>
-    suspend fun getAtomList(): List<AtomItem>
+    suspend fun getAtomList(): List<ComponentMenuItem>
+    suspend fun getMoleculesList(): List<ComponentMenuItem>
 }

sample-compose-fragments/src/main/java/uk/gov/hmrc/sample_compose_fragments/presentation/extension/ModifierExtension.kt

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2023 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.sample_compose_fragments.presentation.extension
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.ImageBitmap
+import androidx.compose.ui.graphics.ImageShader
+import androidx.compose.ui.graphics.ShaderBrush
+import androidx.compose.ui.graphics.TileMode
+import androidx.compose.ui.res.imageResource
+import uk.gov.hmrc.sample_compose_components.R
+
+internal fun Modifier.addPlaceholderModifier(): Modifier = composed {
+    val image = ImageBitmap.imageResource(id = R.drawable.checked_tile)
+    val repeatImage = remember(image) {
+        ShaderBrush(ImageShader(image, TileMode.Repeated, TileMode.Repeated))
+    }
+    this.then(
+        wrapContentHeight()
+            .fillMaxWidth()
+            .background(repeatImage)
+    )
+}

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

@@ -31,6 +31,8 @@ import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
 import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors
 import uk.gov.hmrc.sample_compose_components.R
 import uk.gov.hmrc.sample_compose_components.databinding.FragmentAtomsBinding
+import uk.gov.hmrc.sample_compose_fragments.data.repository.RepositoryImpl.Companion.ATOM_BUTTON
+import uk.gov.hmrc.sample_compose_fragments.data.repository.RepositoryImpl.Companion.ATOM_TEXT
 import uk.gov.hmrc.sample_compose_fragments.presentation.screens.ComponentListScreen
 import uk.gov.hmrc.sample_compose_fragments.presentation.viewModel.AtomsViewModel
 
@@ -52,8 +54,8 @@ class AtomsFragment : Fragment(R.layout.fragment_atoms) {
                 ) {
                     ComponentListScreen(items = listItems, navigateTo = {
                         when (it.id) {
-                            1 -> findNavController().navigate(R.id.action_atomsFragment_to_textFragment)
-                            2 -> findNavController().navigate(R.id.action_atomsFragment_to_buttonFragment)
+                            ATOM_TEXT -> findNavController().navigate(R.id.action_atomsFragment_to_textFragment)
+                            ATOM_BUTTON -> findNavController().navigate(R.id.action_atomsFragment_to_buttonFragment)
                         }
                     })
                 }

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

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2023 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.sample_compose_fragments.presentation.fragment.molecules
+
+import android.os.Bundle
+import android.view.View
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Surface
+import androidx.compose.ui.Modifier
+import androidx.fragment.app.Fragment
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors
+import uk.gov.hmrc.sample_compose_components.R
+import uk.gov.hmrc.sample_compose_components.databinding.FragmentComposeExampleBinding
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.InsetTextViewScreen
+
+class InsetTextViewFragment : Fragment(R.layout.fragment_compose_example) {
+
+    private lateinit var binding: FragmentComposeExampleBinding
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        binding = FragmentComposeExampleBinding.bind(view)
+        binding.composeView.setContent {
+            HmrcTheme() {
+                Surface(
+                    modifier = Modifier.fillMaxHeight().fillMaxWidth(),
+                    color = colors.hmrcPageBackground
+                ) {
+                    InsetTextViewScreen()
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2023 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.sample_compose_fragments.presentation.fragment.molecules
+
+import android.os.Bundle
+import android.view.View
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Surface
+import androidx.compose.ui.Modifier
+import androidx.fragment.app.Fragment
+import dagger.hilt.android.AndroidEntryPoint
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme
+import uk.gov.hmrc.components.compose.ui.theme.HmrcTheme.colors
+import uk.gov.hmrc.sample_compose_components.R
+import uk.gov.hmrc.sample_compose_components.databinding.FragmentComposeExampleBinding
+import uk.gov.hmrc.sample_compose_fragments.presentation.screens.InsetViewScreen
+
+@AndroidEntryPoint
+class InsetViewFragment : Fragment(R.layout.fragment_compose_example) {
+
+    private lateinit var binding: FragmentComposeExampleBinding
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+        binding = FragmentComposeExampleBinding.bind(view)
+        binding.composeView.setContent {
+            HmrcTheme() {
+                Surface(
+                    modifier = Modifier.fillMaxHeight().fillMaxWidth(),
+                    color = colors.hmrcPageBackground
+                ) {
+                    InsetViewScreen()
+                }
+            }
+        }
+    }
+}