Merge pull request #189 from Spendesk/release/1.7.1

Release/1.7.1
Spendesk · Mar 23, 2023 · 735477b · 735477b
2 parents 1d3f29f + 164ef1c
commit 735477b
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 16 deletions.
diff --git a/build.gradle b/build.gradle
@@ -2,7 +2,7 @@
 buildscript {
 
     ext {
-        grapes_version = '1.7.0'
+        grapes_version = '1.7.1'
 
         kotlin_version = '1.7.10'
         firebase_app_distribution_version = '2.1.2'

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/appbar/GrapesTopAppBar.kt
@@ -25,6 +25,7 @@ import com.spendesk.grapes.compose.theme.GrapesTheme
  * @since 28/12/2022, Wed
  **/
 
+// TODO: Create a parameter handling colors = GrapesTopAppBarDefaults.colors()
 @Composable
 fun GrapesTopAppBar(
     title: @Composable () -> Unit,
@@ -51,6 +52,7 @@ fun GrapesTopAppBarTitle(
     Text(
         modifier = modifier,
         text = title,
+        color = GrapesTheme.colors.mainComplementary,
         maxLines = 2,
         overflow = TextOverflow.Ellipsis,
         style = GrapesTheme.typography.titleL,
@@ -97,6 +99,19 @@ 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
+    )
+}
+
+@Composable
+fun GrapesTopAppBarCloseIcon(
+    modifier: Modifier = Modifier,
+) {
+    Icon(
+        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
     )
 }
 
@@ -108,6 +123,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
     )
 }
 
@@ -154,6 +170,17 @@ fun GrapesSimpleTopAppBarPreview() {
                 },
             )
 
+            GrapesTopAppBar(
+                modifier = Modifier.fillMaxWidth(),
+                title = { GrapesTopAppBarTitle(title = "Top app bar title") },
+                navigationIcon = {
+                    GrapesTopAppBarIconButton(
+                        icon = { GrapesTopAppBarCloseIcon() },
+                        onClick = { Log.i("GrapesTopAppBar", "navigationIcon click") }
+                    )
+                },
+            )
+
             GrapesTopAppBar(
                 modifier = Modifier
                     .fillMaxWidth(),

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucket.kt
@@ -28,13 +28,25 @@ fun GrapesBucket(
     onActionClicked: (() -> Unit)? = null,
     content: @Composable (() -> Unit)? = null
 ) {
-    GrapesBucketCore(
+    GrapesBucket(
         modifier = modifier,
         headline = { GrapesBucketHeadline(title = title, action = action, actionColor = actionColor, onActionClicked = onActionClicked) },
         content = content
     )
 }
 
+@Composable
+fun GrapesBucket(
+    modifier: Modifier = Modifier,
+    headline: @Composable () -> Unit,
+    content: @Composable (() -> Unit)? = null
+) {
+    GrapesBucketCore(
+        modifier = modifier,
+        headline = headline,
+        content = content,
+    )
+}
 // region internal
 
 @Composable
@@ -86,6 +98,22 @@ private fun GrapesBucketPreview() {
                 modifier = Modifier.padding(12.dp),
                 title = "Grapes Bucket Container Title"
             )
+
+            GrapesBucket(
+                modifier = Modifier.padding(12.dp),
+                headline = {
+                    GrapesBucketHeadline(
+                        modifier = Modifier.background(Color.Yellow),
+                        title = "Bucket de Rick Astley",
+                        action = "Remove",
+                        actionColor = GrapesTheme.colors.mainAlertNormal)
+                }
+            ) {
+                Column {
+                    Text(text = "Line 1")
+                    Text(text = "Line 2")
+                }
+            }
         }
     }
 }
diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/bucket/GrapesBucketHeadline.kt
@@ -24,7 +24,7 @@ import com.spendesk.grapes.compose.theme.GrapesTheme
  * @since : 06/03/2023, Mon
  **/
 @Composable
-internal fun GrapesBucketHeadline(
+fun GrapesBucketHeadline(
     title: String,
     modifier: Modifier = Modifier,
     action: String? = null,

diff --git a/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt b/library-compose/src/main/java/com/spendesk/grapes/compose/select/GrapesSelect.kt
@@ -1,19 +1,22 @@
 package com.spendesk.grapes.compose.select
 
 import androidx.compose.animation.animateContentSize
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.animateIntAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExposedDropdownMenuBox
-import androidx.compose.material3.ExposedDropdownMenuDefaults
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -22,6 +25,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.spendesk.grapes.compose.theme.GrapesTheme
@@ -42,21 +47,23 @@ fun GrapesSelect(
     entries: List<SelectEntry>,
     onItemSelected: (SelectEntry) -> Unit,
     placeHolder: String,
-    modifier: Modifier = Modifier
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true
 ) {
     var isExpanded by remember { mutableStateOf(false) }
 
     ExposedDropdownMenuBox(
         expanded = isExpanded,
-        onExpandedChange = { isExpanded = !isExpanded },
+        onExpandedChange = { if (isEnabled) isExpanded = !isExpanded },
         modifier = modifier
     ) {
         Select(
             isExpanded = isExpanded,
             label = selectedEntry?.label ?: placeHolder,
             modifier = Modifier
                 .menuAnchor()
-                .animateContentSize()
+                .animateContentSize(),
+            isEnabled = isEnabled
         )
 
         ExposedDropdownMenu(
@@ -79,25 +86,43 @@ fun GrapesSelect(
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
-private fun Select(isExpanded: Boolean, label: String, modifier: Modifier = Modifier) {
+private fun Select(
+    isExpanded: Boolean,
+    label: String,
+    modifier: Modifier = Modifier,
+    isEnabled: Boolean = true
+) {
     val radiusSize by animateIntAsState(targetValue = if (isExpanded) 0 else 50, label = "Radius percentage animation")
 
+    val itemColor = if (isEnabled) GrapesTheme.colors.mainWhite else GrapesTheme.colors.mainNeutralLighter
+    val contentColor = if (isEnabled) GrapesTheme.colors.mainComplementary else GrapesTheme.colors.mainNeutralDark
+
     Row(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(GrapesTheme.dimensions.paddingLarge),
         modifier = modifier
-            .background(GrapesTheme.colors.mainWhite, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize))
+            .background(itemColor, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize))
             .border(1.dp, GrapesTheme.colors.mainPrimaryLighter, shape = RoundedCornerShape(50, 50, radiusSize, radiusSize))
             .padding(horizontal = GrapesTheme.dimensions.paddingLarge, vertical = GrapesTheme.dimensions.paddingMedium)
     ) {
-        Text(text = label, style = GrapesTheme.typography.titleS)
+        Text(text = label, style = GrapesTheme.typography.titleS, color = contentColor)
 
-        ExposedDropdownMenuDefaults.TrailingIcon(
-            expanded = isExpanded
-        )
+        GrapesSelectIcon(expanded = isExpanded, tint = contentColor)
     }
 }
 
+@Composable
+private fun GrapesSelectIcon(expanded: Boolean, tint: Color) {
+    val rotation by animateFloatAsState(targetValue = if (expanded) 180f else 0f, label = "Rotation angle animation")
+
+    Icon(
+        Icons.Filled.ArrowDropDown,
+        null,
+        Modifier.rotate(rotation),
+        tint = tint
+    )
+}
+
 @Preview
 @Composable
 private fun GrapesSelectorPreview() {
@@ -109,8 +134,9 @@ private fun GrapesSelectorPreview() {
     }
 
     GrapesTheme {
-        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
             GrapesSelect(selectedValue, values, onItemSelected = { selectedValue = it }, placeHolder = "Select Value")
+            GrapesSelect(selectedValue, values, onItemSelected = { selectedValue = it }, placeHolder = "Select Value", isEnabled = false)
         }
     }
 }
diff --git a/library-compose/src/main/res/drawable/ic_close.xml b/library-compose/src/main/res/drawable/ic_close.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M20.542,18.421C20.932,18.798 21.088,19.355 20.951,19.88C20.814,20.404 20.404,20.814 19.88,20.951C19.355,21.088 18.798,20.932 18.421,20.542L11.982,14.103L5.542,20.542C4.953,21.111 4.018,21.102 3.439,20.524C2.861,19.945 2.853,19.01 3.421,18.421L9.861,11.982L3.421,5.542C2.853,4.953 2.861,4.018 3.439,3.439C4.018,2.861 4.953,2.853 5.542,3.421L11.982,9.861L18.421,3.421C19.01,2.853 19.945,2.861 20.524,3.439C21.102,4.018 21.111,4.953 20.542,5.542L14.103,11.982L20.542,18.421Z"
+      android:fillColor="#17114E"/>
+</vector>
diff --git a/library-compose/src/main/res/values/grapes_strings.xml b/library-compose/src/main/res/values/grapes_strings.xml
@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+
     <string name="grapes_top_app_bar_back_icon_description">Back</string>
+    <string name="grapes_top_app_bar_close_icon_description">Close</string>
     <string name="grapes_top_app_bar_more_icon_description">More</string>
-
 </resources>