[ANDROAPP-5165] Add custom colors to tags (#282)

* [ANDROAPP-5165] Add custom colors to tags Signed-off-by: Pablo <[email protected]> * [ANDROAPP-5165] Add success tag type and circular small progress indicator Signed-off-by: Pablo <[email protected]> * add snapshot tests Signed-off-by: Pablo <[email protected]> * add snapshot images Signed-off-by: Pablo <[email protected]> * ktlint Signed-off-by: Pablo <[email protected]> * fix merge with develop Signed-off-by: Pablo <[email protected]> * fix snapshot images Signed-off-by: Pablo <[email protected]> * restore image Signed-off-by: Pablo <[email protected]> --------- Signed-off-by: Pablo <[email protected]>
dhis2 · Aug 9, 2024 · 1fda92d · 1fda92d
1 parent a6eb2ed
commit 1fda92d
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 7 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ProgressScreen.kt
@@ -1,6 +1,9 @@
 package org.hisp.dhis.common.screens.others
 
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicator
@@ -77,6 +80,38 @@ internal fun ProgressScreen() {
                     hasError = false,
                 )
             }
+            RowComponentContainer {
+                ProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    progress = 0.25f,
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    progress = 0.50f,
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    progress = 0.75f,
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    progress = 1f,
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    modifier = Modifier.size(24.dp),
+                    progress = 0.6f,
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    hasError = false,
+                )
+            }
             ProgressIndicator(
                 type = ProgressIndicatorType.CIRCULAR,
                 hasError = false,
@@ -107,5 +142,18 @@ internal fun ProgressScreen() {
                 hasError = true,
             )
         }
+        RowComponentContainer {
+            ProgressIndicator(
+                modifier = Modifier.size(24.dp),
+                progress = 0.70f,
+                type = ProgressIndicatorType.CIRCULAR_SMALL,
+                hasError = true,
+            )
+            ProgressIndicator(
+                modifier = Modifier.size(24.dp),
+                type = ProgressIndicatorType.CIRCULAR_SMALL,
+                hasError = true,
+            )
+        }
     }
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/TagsPreview.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/previews/TagsPreview.kt
@@ -3,15 +3,22 @@ package org.hisp.dhis.common.screens.previews
 import androidx.compose.foundation.layout.Arrangement.spacedBy
 import androidx.compose.foundation.layout.Column
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import org.hisp.dhis.mobile.ui.designsystem.component.Tag
 import org.hisp.dhis.mobile.ui.designsystem.component.TagType
 
 @Composable
 fun TagsPreview() {
     Column(verticalArrangement = spacedBy(20.dp)) {
-        TagType.values().forEach {
+        TagType.entries.forEach {
             Tag(label = "label", type = it)
         }
+        Tag(
+            label = "Low",
+            type = TagType.DEFAULT,
+            defaultBackgroundColor = Color(0xFFFADB14).copy(alpha = 0.5f),
+            defaultTextColor = Color(0xFFFADB14),
+        )
     }
 }
diff --git a/...roidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ProgressIndicatorSnapshotTest.kt b/...roidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/ProgressIndicatorSnapshotTest.kt
@@ -0,0 +1,54 @@
+package org.hisp.dhis.mobile.ui.designsystem
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicator
+import org.hisp.dhis.mobile.ui.designsystem.component.ProgressIndicatorType
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.junit.Rule
+import org.junit.Test
+
+class ProgressIndicatorSnapshotTest {
+
+    @get:Rule
+    val paparazzi = paparazzi()
+
+    @Test
+    fun launchChip() {
+        paparazzi.snapshot {
+            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+                ProgressIndicator(
+                    type = ProgressIndicatorType.LINEAR,
+                    progress = 0.25f,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.LINEAR,
+                    progress = 0.25f,
+                    hasError = true,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.CIRCULAR,
+                    progress = 0.25f,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.CIRCULAR,
+                    progress = 0.25f,
+                    hasError = true,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    progress = 0.25f,
+                    hasError = false,
+                )
+                ProgressIndicator(
+                    type = ProgressIndicatorType.CIRCULAR_SMALL,
+                    progress = 0.25f,
+                    hasError = true,
+                )
+            }
+        }
+    }
+}
diff --git a/...system/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/TagSnapshotTest.kt b/...system/src/androidUnitTest/kotlin/org/hisp/dhis/mobile/ui/designsystem/TagSnapshotTest.kt
@@ -0,0 +1,30 @@
+package org.hisp.dhis.mobile.ui.designsystem
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.ui.Modifier
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.Tag
+import org.hisp.dhis.mobile.ui.designsystem.component.TagType
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+import org.junit.Rule
+import org.junit.Test
+
+class TagSnapshotTest {
+
+    @get:Rule
+    val paparazzi = paparazzi()
+
+    @Test
+    fun launchChip() {
+        paparazzi.snapshot {
+            ColumnComponentContainer(modifier = Modifier.padding(Spacing.Spacing10)) {
+                TagType.entries.forEach {
+                    Tag(
+                        label = "Label",
+                        type = it,
+                    )
+                }
+            }
+        }
+    }
+}
diff --git a/...src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ProgressIndicator.kt b/...src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/ProgressIndicator.kt
@@ -2,12 +2,16 @@ package org.hisp.dhis.mobile.ui.designsystem.component
 
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.material3.ProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import org.hisp.dhis.mobile.ui.designsystem.theme.Border
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 enum class ProgressIndicatorType {
     CIRCULAR,
+    CIRCULAR_SMALL,
     LINEAR,
 }
 
@@ -18,8 +22,8 @@ enum class ProgressIndicatorType {
  * They communicate an app’s state and indicate available actions,
  * such as whether users can navigate away from the current screen.
  * @param modifier: optional modifier.
- * @param type: [ProgressIndicatorType] can be either
- * [ProgressIndicatorType.CIRCULAR] or [ProgressIndicatorType.LINEAR].
+ * @param type: [ProgressIndicatorType] can be [ProgressIndicatorType.CIRCULAR]
+ * [ProgressIndicatorType.CIRCULAR_SMALL] or [ProgressIndicatorType.LINEAR].
  * @param progress: indicates the loading progress
  * @param hasError: manages whether to show error or not.
  */
@@ -31,8 +35,18 @@ fun ProgressIndicator(
     hasError: Boolean = false,
 ) {
     when (type) {
-        ProgressIndicatorType.CIRCULAR -> CircularIndicator(modifier, progress, hasError)
         ProgressIndicatorType.LINEAR -> LinearIndicator(modifier, progress, hasError)
+        ProgressIndicatorType.CIRCULAR -> CircularIndicator(
+            modifier = modifier,
+            progress = progress,
+            hasError = hasError,
+        )
+        ProgressIndicatorType.CIRCULAR_SMALL -> CircularIndicator(
+            modifier = modifier,
+            strokeWidth = Border.Regular,
+            progress = progress,
+            hasError = hasError,
+        )
     }
 }
 
@@ -57,17 +71,24 @@ internal fun LinearIndicator(modifier: Modifier, progress: Float?, hasError: Boo
 }
 
 @Composable
-internal fun CircularIndicator(modifier: Modifier, progress: Float?, hasError: Boolean) {
+internal fun CircularIndicator(
+    modifier: Modifier,
+    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
+    progress: Float?,
+    hasError: Boolean,
+) {
     val color = if (hasError) SurfaceColor.Error else SurfaceColor.Primary
     if (progress != null) {
         CircularProgressIndicator(
             progress = { progress },
             modifier = modifier,
+            strokeWidth = strokeWidth,
             color = color,
         )
     } else {
         CircularProgressIndicator(
             modifier = modifier,
+            strokeWidth = strokeWidth,
             color = color,
         )
     }

diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Tags.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Tags.kt
@@ -8,6 +8,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import org.hisp.dhis.mobile.ui.designsystem.theme.Shape
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
@@ -16,6 +17,7 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.TextColor
 enum class TagType {
     ERROR,
     WARNING,
+    SUCCESS,
     DEFAULT,
 }
 
@@ -34,6 +36,8 @@ fun Tag(
     modifier: Modifier = Modifier,
     label: String,
     type: TagType,
+    defaultBackgroundColor: Color = SurfaceColor.PrimaryContainer,
+    defaultTextColor: Color = TextColor.OnPrimaryContainer,
 ) {
     Box(
         modifier = modifier
@@ -42,7 +46,8 @@ fun Tag(
                 color = when (type) {
                     TagType.ERROR -> SurfaceColor.ErrorContainer
                     TagType.WARNING -> SurfaceColor.WarningContainer
-                    TagType.DEFAULT -> SurfaceColor.PrimaryContainer
+                    TagType.SUCCESS -> SurfaceColor.CustomGreen.copy(0.1f)
+                    TagType.DEFAULT -> defaultBackgroundColor
                 },
                 shape = Shape.ExtraSmall,
             ).padding(horizontal = Spacing.Spacing8),
@@ -54,7 +59,8 @@ fun Tag(
             color = when (type) {
                 TagType.ERROR -> TextColor.OnErrorContainer
                 TagType.WARNING -> TextColor.OnWarningContainer
-                TagType.DEFAULT -> TextColor.OnPrimaryContainer
+                TagType.SUCCESS -> SurfaceColor.CustomGreen
+                TagType.DEFAULT -> defaultTextColor
             },
         )
     }

diff --git a/...p.dhis.mobile.ui.designsystem_NavigationBarSnapShotTest_launchNavigationBar.png b/...p.dhis.mobile.ui.designsystem_NavigationBarSnapShotTest_launchNavigationBar.png
diff --git a/...g.hisp.dhis.mobile.ui.designsystem_ProgressIndicatorSnapshotTest_launchChip.png b/...g.hisp.dhis.mobile.ui.designsystem_ProgressIndicatorSnapshotTest_launchChip.png
diff --git a/...hots/images/org.hisp.dhis.mobile.ui.designsystem_TagSnapshotTest_launchChip.png b/...hots/images/org.hisp.dhis.mobile.ui.designsystem_TagSnapshotTest_launchChip.png