ANDROAPP-5889-mobile-ui-indicator-component (#182)

* Add indicator input

* Fix corner radius not applying to start of indicator input

common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt

@@ -36,6 +36,7 @@ import org.hisp.dhis.common.screens.FormsComponentsScreen
 import org.hisp.dhis.common.screens.FullScreenImageScreen
 import org.hisp.dhis.common.screens.IconButtonScreen
 import org.hisp.dhis.common.screens.ImageBlockScreen
+import org.hisp.dhis.common.screens.IndicatorInputScreen
 import org.hisp.dhis.common.screens.InputAgeScreen
 import org.hisp.dhis.common.screens.InputBarCodeScreen
 import org.hisp.dhis.common.screens.InputCheckBoxScreen
@@ -93,7 +94,7 @@ fun App() {
 
 @Composable
 fun Main() {
-    val currentScreen = remember { mutableStateOf(Components.ORG_TREE_BOTTOM_SHEET) }
+    val currentScreen = remember { mutableStateOf(Components.INDICATOR_INPUT) }
     var expanded by remember { mutableStateOf(false) }
 
     Column(
@@ -199,6 +200,7 @@ fun Main() {
             Components.INPUT_NOT_SUPPORTED -> InputNotSupportedScreen()
             Components.FULL_SCREEN_IMAGE -> FullScreenImageScreen()
             Components.ORG_TREE_BOTTOM_SHEET -> OrgTreeBottomSheetScreen()
+            Components.INDICATOR_INPUT -> IndicatorInputScreen()
         }
     }
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt

@@ -60,4 +60,5 @@ enum class Components(val label: String) {
     INPUT_NOT_SUPPORTED("Input Not Supported"),
     FULL_SCREEN_IMAGE("Full Screen Image"),
     ORG_TREE_BOTTOM_SHEET("Org Tree Bottom Sheet"),
+    INDICATOR_INPUT("Indicator Input"),
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IndicatorInputScreen.kt

@@ -0,0 +1,36 @@
+package org.hisp.dhis.common.screens
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.IndicatorInput
+
+@Composable
+fun IndicatorInputScreen() {
+    ColumnComponentContainer {
+        IndicatorInput(
+            title = "Systolic and diastolic pressure",
+            content = "120 mmHg / 80 mmHg",
+            indicatorColor = Color(0xFF00A940),
+        )
+        IndicatorInput(
+            title = "Heart rate",
+            content = "160 bpm",
+            indicatorColor = Color(0xFFE12F58),
+        )
+        IndicatorInput(
+            title = "Cholesterol",
+            content = "190 mg/dL",
+            indicatorColor = Color(0xFFFADB14),
+        )
+        IndicatorInput(
+            title = "Blood Oxygen Level",
+            content = "96%",
+            indicatorColor = Color(0xFFFFF7C7),
+        )
+        IndicatorInput(
+            title = "Cholesterol",
+            content = "190 mg/dL",
+        )
+    }
+}

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/IndicatorInput.kt

@@ -0,0 +1,60 @@
+package org.hisp.dhis.mobile.ui.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+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.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredWidth
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
+
+@Composable
+fun IndicatorInput(
+    title: String,
+    content: String,
+    modifier: Modifier = Modifier,
+    indicatorColor: Color = SurfaceColor.Container,
+) {
+    val backgroundColor = indicatorColor.copy(alpha = 0.1f)
+
+    Row(
+        modifier = modifier.fillMaxWidth()
+            .height(IntrinsicSize.Max)
+            .clip(RoundedCornerShape(Spacing.Spacing8))
+            .background(backgroundColor),
+    ) {
+        Box(
+            Modifier.padding(
+                horizontal = Spacing.Spacing16,
+                vertical = Spacing.Spacing8,
+            ).weight(1f),
+        ) {
+            Column {
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.bodyMedium,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+                Text(
+                    text = content,
+                    style = MaterialTheme.typography.bodyLarge,
+                    modifier = Modifier.fillMaxWidth(),
+                )
+            }
+        }
+
+        Box(Modifier.background(indicatorColor).requiredWidth(Spacing.Spacing16).fillMaxHeight())
+    }
+}