Create menu bottom sheet components

library-compose/src/main/java/com/spendesk/grapes/compose/actionmenu/ActionMenuItem.kt

@@ -0,0 +1,160 @@
+package com.spendesk.grapes.compose.actionmenu
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.spendesk.grapes.compose.R
+import com.spendesk.grapes.compose.theme.GrapesTheme
+
+/**
+ * @author : RomainGF
+ * @since : 09/10/2023
+ **/
+private val iconMaxSize = 16.dp
+private val verticalInnerPadding = 20.dp
+private const val ACTION_TEXT_MAX_LINES = 2
+
+/**
+ * ActionMenuItem is a button with an icon and a text.
+ *
+ * @param text Text to display on the button
+ * @param icon Slot for the icon to display on the left of the text. Size is constrained to 16dp.
+ * @param onClick Callback when the button is clicked
+ * @param modifier Modifier
+ * @param enabled Whether the button is enabled or not
+ */
+@Composable
+fun ActionMenuItem(
+    text: String,
+    icon: @Composable () -> Unit,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+) {
+    Button(
+        onClick = onClick,
+        enabled = enabled,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = GrapesTheme.colors.neutralLightest,
+            contentColor = GrapesTheme.colors.primaryNormal,
+            disabledContainerColor = GrapesTheme.colors.neutralLightest,
+            disabledContentColor = GrapesTheme.colors.neutralNormal,
+        ),
+        contentPadding = PaddingValues(
+            start = GrapesTheme.dimensions.paddingXLarge,
+            end = GrapesTheme.dimensions.paddingLarge,
+            top = verticalInnerPadding,
+            bottom = verticalInnerPadding,
+        ),
+        shape = GrapesTheme.shapes.small,
+        modifier = modifier,
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            ActionMenuItemIcon(
+                enabled = enabled,
+                icon = icon,
+            )
+            Spacer(Modifier.width(GrapesTheme.dimensions.paddingXLarge))
+            Text(
+                text = text,
+                maxLines = ACTION_TEXT_MAX_LINES,
+                overflow = TextOverflow.Ellipsis,
+                style = GrapesTheme.typography.titleS,
+                modifier = Modifier.weight(1f),
+            )
+            if (enabled) {
+                Spacer(Modifier.width(GrapesTheme.dimensions.paddingLarge))
+                Icon(
+                    painter = painterResource(R.drawable.ic_chevron_right),
+                    contentDescription = null,
+                    tint = GrapesTheme.colors.primaryLighter,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun ActionMenuItemIcon(
+    enabled: Boolean,
+    icon: @Composable () -> Unit,
+) {
+    Box(
+        modifier = Modifier.sizeIn(
+            maxWidth = iconMaxSize,
+            maxHeight = iconMaxSize,
+        ),
+    ) {
+        val iconContentColor = if (enabled) {
+            GrapesTheme.colors.primaryNormal
+        } else {
+            GrapesTheme.colors.neutralNormal
+        }
+        CompositionLocalProvider(LocalContentColor provides iconContentColor) {
+            icon()
+        }
+    }
+}
+
+@Preview
+@Preview(fontScale = 2f)
+@Composable
+private fun ActionMenuItemPreview() {
+    GrapesTheme {
+        val icon = @Composable {
+            Icon(
+                painter = painterResource(R.drawable.ic_neutral),
+                contentDescription = null,
+                modifier = Modifier.size(48.dp)
+            )
+        }
+        val text = "Action"
+        val longText = "Action with a very long title which will not fit in one line. Event two lines will not be enough"
+        val modifier = Modifier.fillMaxWidth()
+        Column(
+            verticalArrangement = Arrangement.spacedBy(8.dp)
+        ) {
+            ActionMenuItem(
+                text = text,
+                icon = icon,
+                onClick = {},
+                modifier = modifier,
+            )
+            ActionMenuItem(
+                text = longText,
+                icon = icon,
+                onClick = {},
+                modifier = modifier,
+            )
+            ActionMenuItem(
+                text = text,
+                icon = icon,
+                onClick = {},
+                enabled = false,
+                modifier = modifier,
+            )
+        }
+    }
+}

library-compose/src/main/java/com/spendesk/grapes/compose/actionmenu/ActionMenuSection.kt

@@ -0,0 +1,135 @@
+package com.spendesk.grapes.compose.actionmenu
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.spendesk.grapes.compose.R
+import com.spendesk.grapes.compose.theme.GrapesTheme
+
+/**
+ * @author : RomainGF
+ * @since : 09/10/2023
+ **/
+
+private val iconMaxSize = 56.dp
+private val sectionShape = RoundedCornerShape(16.dp)
+private const val TITLE_MAX_LINES = 2
+private const val DESCRIPTION_MAX_LINES = 3
+
+@Composable
+fun ActionMenuSection(
+    title: String,
+    description: String,
+    illustration: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Card(
+        modifier = modifier,
+        colors = CardDefaults.cardColors(
+            containerColor = GrapesTheme.colors.structureSurface,
+        ),
+        shape = sectionShape,
+    ) {
+        Column(
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingSmall),
+            modifier = Modifier.padding(GrapesTheme.dimensions.paddingSmall),
+        ) {
+            ActionMenuSectionHeader(
+                title = title,
+                description = description,
+                illustration = illustration,
+                modifier = Modifier.padding(
+                    top = GrapesTheme.dimensions.paddingSmall,
+                    end = GrapesTheme.dimensions.paddingSmall,
+                )
+            )
+            content()
+        }
+    }
+}
+
+@Composable
+private fun ActionMenuSectionHeader(
+    title: String,
+    description: String,
+    illustration: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        horizontalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingSmall),
+        verticalAlignment = Alignment.CenterVertically,
+        modifier = modifier,
+    ) {
+        Box(
+            content = { illustration() },
+            modifier = Modifier.sizeIn(
+                maxWidth = iconMaxSize,
+                maxHeight = iconMaxSize,
+            ),
+        )
+        Column(
+            verticalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingXSmall),
+        ) {
+            Text(
+                text = title,
+                style = GrapesTheme.typography.titleM,
+                color = GrapesTheme.colors.structureComplementary,
+                maxLines = TITLE_MAX_LINES,
+                overflow = TextOverflow.Ellipsis,
+            )
+            Text(
+                text = description,
+                style = GrapesTheme.typography.bodyS,
+                color = GrapesTheme.colors.neutralDark,
+                maxLines = DESCRIPTION_MAX_LINES,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+    }
+}
+
+@Preview
+@Preview(fontScale = 2f)
+@Composable
+private fun ActionMenuSectionPreview() {
+    GrapesTheme {
+        ActionMenuSection(
+            title = "Make a purchase request",
+            description = "Order a virtual card to directly use company money online",
+            illustration = {
+                Icon(painterResource(R.drawable.ic_neutral), null, Modifier.fillMaxSize())
+            },
+            modifier = Modifier.fillMaxWidth(),
+        ) {
+            ActionMenuItem(
+                text = "Ask for a virtual card",
+                icon = { Icon(painterResource(R.drawable.ic_neutral), null) },
+                onClick = {},
+            )
+            ActionMenuItem(
+                text = "Ask for a virtual card",
+                icon = { Icon(painterResource(R.drawable.ic_neutral), null) },
+                onClick = {},
+            )
+        }
+    }
+}

library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt

@@ -59,7 +59,7 @@ fun GrapesTopAppBarTitle(
     Text(
         modifier = modifier,
         text = title,
-        color = GrapesTheme.colors.mainComplementary,
+        color = GrapesTheme.colors.structureComplementary,
         maxLines = 2,
         overflow = TextOverflow.Ellipsis,
         style = GrapesTheme.typography.titleL,
@@ -106,7 +106,7 @@ fun GrapesTopAppBarBackIcon(
         modifier = modifier.size(24.dp),
         imageVector = ImageVector.vectorResource(R.drawable.ic_arrow_back),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_back_icon_description),
-        tint = GrapesTheme.colors.mainComplementary
+        tint = GrapesTheme.colors.structureComplementary,
     )
 }
 
@@ -118,7 +118,7 @@ fun GrapesTopAppBarCloseIcon(
         modifier = modifier.size(24.dp),
         imageVector = ImageVector.vectorResource(R.drawable.ic_close),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_close_icon_description),
-        tint = GrapesTheme.colors.mainComplementary
+        tint = GrapesTheme.colors.structureComplementary
     )
 }
 
@@ -130,7 +130,7 @@ fun GrapesTopAppBarMoreIcon(
         modifier = modifier.size(24.dp),
         imageVector = ImageVector.vectorResource(R.drawable.ic_more_vertical),
         contentDescription = stringResource(id = R.string.grapes_top_app_bar_more_icon_description),
-        tint = GrapesTheme.colors.mainComplementary
+        tint = GrapesTheme.colors.structureComplementary
     )
 }
 
@@ -142,7 +142,7 @@ fun GrapesSimpleTopAppBarPreview() {
         Column(
             modifier = Modifier
                 .fillMaxSize()
-                .background(GrapesTheme.colors.mainNeutralLighter)
+                .background(GrapesTheme.colors.structureBackground)
                 .verticalScroll(rememberScrollState()),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {

library-compose/src/main/res/drawable/ic_chevron_right.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+    <path
+        android:fillColor="#000000"
+        android:fillType="evenOdd"
+        android:pathData="M8.645,8L5,4.373L6.379,3L10.714,7.314C11.095,7.693 11.095,8.307 10.714,8.686L6.379,13L5,11.627L8.645,8Z" />
+</vector>