Improve composable for icons and create RoundedIconAtom.

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt

@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * 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 io.element.android.libraries.designsystem.atomic.atoms
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.LocalColors
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+enum class RoundedIconAtomSize {
+    Medium,
+    Large
+}
+
+@Composable
+fun RoundedIconAtom(
+    modifier: Modifier = Modifier,
+    size: RoundedIconAtomSize = RoundedIconAtomSize.Large,
+    resourceId: Int? = null,
+    imageVector: ImageVector? = null,
+) {
+    Box(
+        modifier = modifier
+            .size(size.toContainerSize())
+            .background(
+                color = LocalColors.current.quinary,
+                shape = RoundedCornerShape(size.toCornerSize())
+            )
+    ) {
+        Icon(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .size(size.toIconSize()),
+            tint = MaterialTheme.colorScheme.secondary,
+            resourceId = resourceId,
+            imageVector = imageVector,
+            contentDescription = "",
+        )
+    }
+}
+
+private fun RoundedIconAtomSize.toContainerSize(): Dp {
+    return when (this) {
+        RoundedIconAtomSize.Medium -> 30.dp
+        RoundedIconAtomSize.Large -> 70.dp
+    }
+}
+
+private fun RoundedIconAtomSize.toCornerSize(): Dp {
+    return when (this) {
+        RoundedIconAtomSize.Medium -> 8.dp
+        RoundedIconAtomSize.Large -> 14.dp
+    }
+}
+
+private fun RoundedIconAtomSize.toIconSize(): Dp {
+    return when (this) {
+        RoundedIconAtomSize.Medium -> 16.dp
+        RoundedIconAtomSize.Large -> 48.dp
+    }
+}
+
+@Preview
+@Composable
+internal fun RoundedIconAtomLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun RoundedIconAtomDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+        RoundedIconAtom(
+            size = RoundedIconAtomSize.Medium,
+            imageVector = Icons.Filled.Home,
+        )
+        RoundedIconAtom(
+            size = RoundedIconAtomSize.Large,
+            imageVector = Icons.Filled.Home,
+        )
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt

@@ -16,55 +16,45 @@
 
 package io.element.android.libraries.designsystem.atomic.molecules
 
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
+import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
-import io.element.android.libraries.designsystem.theme.LocalColors
-import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
 
+/**
+ * Provide either an `iconResourceId` or an `iconImageVector`
+ */
 @Composable
 fun IconTitleSubtitleMolecule(
-    iconResourceId: Int,
     title: String,
     subTitle: String,
     modifier: Modifier = Modifier,
+    iconResourceId: Int? = null,
+    iconImageVector: ImageVector? = null,
 ) {
     Column(modifier) {
-        Box(
+        RoundedIconAtom(
             modifier = Modifier
-                .size(width = 70.dp, height = 70.dp)
-                .align(Alignment.CenterHorizontally)
-                .background(
-                    color = LocalColors.current.quinary,
-                    shape = RoundedCornerShape(14.dp)
-                )
-        ) {
-            Icon(
-                modifier = Modifier
-                    .align(Alignment.Center)
-                    .size(width = 48.dp, height = 48.dp),
-                tint = MaterialTheme.colorScheme.secondary,
-                resourceId = iconResourceId,
-                contentDescription = "",
-            )
-        }
+                .align(Alignment.CenterHorizontally),
+            size = RoundedIconAtomSize.Large,
+            resourceId = iconResourceId,
+            imageVector = iconImageVector,
+        )
         Spacer(modifier = Modifier.height(16.dp))
         Text(
             text = title,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt

@@ -30,6 +30,43 @@ import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 
+@Composable
+fun Icon(
+    contentDescription: String?,
+    modifier: Modifier = Modifier,
+    tint: Color = LocalContentColor.current,
+    imageVector: ImageVector? = null,
+    bitmap: ImageBitmap? = null,
+    @DrawableRes resourceId: Int? = null,
+) {
+    when {
+        imageVector != null -> {
+            Icon(
+                imageVector = imageVector,
+                contentDescription = contentDescription,
+                modifier = modifier,
+                tint = tint
+            )
+        }
+        bitmap != null -> {
+            Icon(
+                bitmap = bitmap,
+                contentDescription = contentDescription,
+                modifier = modifier,
+                tint = tint
+            )
+        }
+        resourceId != null -> {
+            Icon(
+                resourceId = resourceId,
+                contentDescription = contentDescription,
+                modifier = modifier,
+                tint = tint
+            )
+        }
+    }
+}
+
 @Composable
 fun Icon(
     imageVector: ImageVector,