Add MetadataAvatar component (#59)

dhis2 · Sep 13, 2023 · 321db4e · 321db4e
1 parent 57598e7
commit 321db4e
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 0 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
@@ -29,6 +29,7 @@ import org.hisp.dhis.common.screens.Components
 import org.hisp.dhis.common.screens.FormShellsScreen
 import org.hisp.dhis.common.screens.FormsComponentsScreen
 import org.hisp.dhis.common.screens.IconButtonScreen
+import org.hisp.dhis.common.screens.IconCardsScreen
 import org.hisp.dhis.common.screens.InputIntegerScreen
 import org.hisp.dhis.common.screens.InputLetterScreen
 import org.hisp.dhis.common.screens.InputLongTextScreen
@@ -119,6 +120,7 @@ fun Main() {
             Components.LEGEND_DESCRIPTION -> LegendDescriptionScreen()
             Components.FORM_SHELLS -> FormShellsScreen()
             Components.BUTTON_BLOCK -> ButtonBlockScreen()
+            Components.ICON_CARDS -> IconCardsScreen()
             Components.BOTTOM_SHEET_HEADER -> BottomSheetHeaderScreen()
             Components.TAGS -> TagsScreen()
             Components.SECTIONS -> SectionScreen()

diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/Components.kt
@@ -25,4 +25,5 @@ enum class Components(val label: String) {
     LEGEND_DESCRIPTION("Legend description"),
     INPUT("Input"),
     BUTTON_BLOCK("Button block"),
+    ICON_CARDS("Icon Cards"),
 }
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IconCardsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IconCardsScreen.kt
@@ -0,0 +1,60 @@
+package org.hisp.dhis.common.screens
+
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize
+import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.component.MetadataAvatar
+import org.hisp.dhis.mobile.ui.designsystem.component.RowComponentContainer
+import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
+import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
+
+@Composable
+fun IconCardsScreen() {
+    ColumnComponentContainer(title = "Metadata Avatar") {
+        RowComponentContainer {
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_microscope_outline"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = SurfaceColor.Primary,
+                size = AvatarSize.Normal,
+            )
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_microscope_outline"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = SurfaceColor.Primary,
+                size = AvatarSize.Large,
+            )
+        }
+        RowComponentContainer {
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_nurse_positive"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = SurfaceColor.CustomGreen,
+                size = AvatarSize.Normal,
+            )
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_nurse_positive"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = SurfaceColor.CustomGreen,
+                size = AvatarSize.Large,
+            )
+        }
+    }
+}
diff --git a/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/MetadataAvatar.kt b/...em/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/MetadataAvatar.kt
@@ -0,0 +1,65 @@
+package org.hisp.dhis.mobile.ui.designsystem.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize.Large
+import org.hisp.dhis.mobile.ui.designsystem.component.AvatarSize.Normal
+import org.hisp.dhis.mobile.ui.designsystem.theme.Radius
+import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
+
+/**
+ * DHIS2 metadata avatar
+ *
+ * @param icon: Icon content
+ * @param iconTint: Color of the icon
+ * @param backgroundColor: Background color of the avatar. By default it's icon tine with 10% alpha
+ * @param size: size of the component [AvatarSize]
+ */
+@Composable
+fun MetadataAvatar(
+    icon: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    iconTint: Color = Color.Unspecified,
+    backgroundColor: Color = Color.Unspecified,
+    size: AvatarSize = Normal,
+) {
+    val backgroundPadding = when (size) {
+        Normal -> 0.dp
+        Large -> 4.dp
+    }
+    val boxBackgroundColor = if (backgroundColor != Color.Unspecified) {
+        backgroundColor
+    } else {
+        iconTint.copy(alpha = 0.1f)
+    }
+    Box(
+        modifier = modifier
+            .background(
+                color = boxBackgroundColor,
+                shape = RoundedCornerShape(Radius.XS),
+            )
+            .padding(backgroundPadding)
+            .size(Spacing.Spacing40),
+        contentAlignment = Alignment.Center,
+    ) {
+        CompositionLocalProvider(
+            LocalContentColor provides iconTint,
+        ) {
+            icon()
+        }
+    }
+}
+
+enum class AvatarSize {
+    Normal, Large
+}