ANDROAPP-5494-mobile-ui-Metadata-Avatar (#62)

* Change `MetadataAvatar` corner radius based on size

* Add white background below the box background color

* Clip icon in MetadataAvatar to a rounded corner shape

Since it's possible icons won't have a shape, we are clipping them to ensure it's same as design

* Add a negative metadata avatar sample to scree

* Rename `IconCardsScreen` to `MetadataAvatarScreen`

* Remove hardcoded spacing values in `MetadataAvatar`

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

@@ -31,7 +31,6 @@ 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
@@ -45,6 +44,7 @@ import org.hisp.dhis.common.screens.InputScreen
 import org.hisp.dhis.common.screens.InputTextScreen
 import org.hisp.dhis.common.screens.LegendDescriptionScreen
 import org.hisp.dhis.common.screens.LegendScreen
+import org.hisp.dhis.common.screens.MetadataAvatarScreen
 import org.hisp.dhis.common.screens.ProgressScreen
 import org.hisp.dhis.common.screens.RadioButtonScreen
 import org.hisp.dhis.common.screens.SectionScreen
@@ -124,7 +124,7 @@ fun Main() {
             Components.LEGEND_DESCRIPTION -> LegendDescriptionScreen()
             Components.FORM_SHELLS -> FormShellsScreen()
             Components.BUTTON_BLOCK -> ButtonBlockScreen()
-            Components.ICON_CARDS -> IconCardsScreen()
+            Components.METADATA_AVATAR -> MetadataAvatarScreen()
             Components.BOTTOM_SHEET_HEADER -> BottomSheetHeaderScreen()
             Components.TAGS -> TagsScreen()
             Components.SECTIONS -> SectionScreen()

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

@@ -27,7 +27,7 @@ enum class Components(val label: String) {
     BUTTON_BLOCK("Button block"),
     CHIPS("Chips"),
     BADGES("Badges"),
-    ICON_CARDS("Icon Cards"),
+    METADATA_AVATAR("Metadata Avatar"),
     INPUT_RADIO_BUTTON("Input Radio Button"),
     SWITCH("Switch"),
 }

common/src/commonMain/kotlin/org/hisp/dhis/common/screens/IconCardsScreen.kt → common/src/commonMain/kotlin/org/hisp/dhis/common/screens/MetadataAvatarScreen.kt

@@ -2,6 +2,7 @@ package org.hisp.dhis.common.screens
 
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 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
@@ -10,7 +11,7 @@ import org.hisp.dhis.mobile.ui.designsystem.resource.provideDHIS2Icon
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
 
 @Composable
-fun IconCardsScreen() {
+fun MetadataAvatarScreen() {
     ColumnComponentContainer(title = "Metadata Avatar") {
         RowComponentContainer {
             MetadataAvatar(
@@ -56,5 +57,27 @@ fun IconCardsScreen() {
                 size = AvatarSize.Large,
             )
         }
+        RowComponentContainer {
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_medicines_negative"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = Color(0xFFE12F58),
+                size = AvatarSize.Normal,
+            )
+            MetadataAvatar(
+                icon = {
+                    Icon(
+                        painter = provideDHIS2Icon("dhis2_medicines_negative"),
+                        contentDescription = "",
+                    )
+                },
+                iconTint = Color(0xFFE12F58),
+                size = AvatarSize.Large,
+            )
+        }
     }
 }

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

@@ -10,8 +10,8 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 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
@@ -34,28 +34,34 @@ fun MetadataAvatar(
     size: AvatarSize = Normal,
 ) {
     val backgroundPadding = when (size) {
-        Normal -> 0.dp
-        Large -> 4.dp
+        Normal -> Spacing.Spacing0
+        Large -> Spacing.Spacing4
+    }
+    val cornerRadius = when (size) {
+        Normal -> Radius.XS
+        Large -> Radius.S
     }
     val boxBackgroundColor = if (backgroundColor != Color.Unspecified) {
         backgroundColor
     } else {
         iconTint.copy(alpha = 0.1f)
     }
+
     Box(
         modifier = modifier
-            .background(
-                color = boxBackgroundColor,
-                shape = RoundedCornerShape(Radius.XS),
-            )
+            .clip(RoundedCornerShape(cornerRadius))
+            .background(color = Color.White)
+            .background(color = boxBackgroundColor)
             .padding(backgroundPadding)
             .size(Spacing.Spacing40),
         contentAlignment = Alignment.Center,
     ) {
         CompositionLocalProvider(
             LocalContentColor provides iconTint,
         ) {
-            icon()
+            Box(modifier = Modifier.clip(RoundedCornerShape(Radius.XS))) {
+                icon()
+            }
         }
     }
 }