ANDROID-15168 compose badge improvements (#383)

* ANDROID-15168 expose badge text size * ANDROID-15168 trim badgecontent if numeric and > 9 * ANDROID-15168 add more options to the catalog * ANDROID-15168 remove ExperimentalMaterialApi annotation * ANDROID-15168 add screenshots tests * Updated screenshots baseline * ANDROID-15168 add endline * ANDROID-15168 rename tests (and screenshots) * ANDROID-15168 rename tests (and screenshots) --------- Co-authored-by: jeprubio <[email protected]>
Telefonica · Sep 12, 2024 · 16231f8 · 16231f8
1 parent 16f0797
commit 16231f8
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 7 deletions.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Badges.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Badges.kt
@@ -7,12 +7,21 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.BadgedBox
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.compose.badge.Badge
+import com.telefonica.mistica.compose.button.Button
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -24,9 +33,44 @@ fun Badges() {
         verticalArrangement = Arrangement.spacedBy(16.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
+        var badgeContent: String? by rememberSaveable { mutableStateOf(null) }
+        var show: Boolean by rememberSaveable { mutableStateOf(false) }
 
         Spacer(modifier = Modifier.height(16.dp))
-        Badge()
-        Badge(content = "1")
+        BadgedBox(
+            badge = {
+                if (show) {
+                    Badge(content = badgeContent)
+                }
+            }
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.icn_creditcard),
+                contentDescription = null,
+            )
+        }
+        Button(
+            text = "Toggle",
+            onClickListener = {
+                badgeContent = ""
+                show = !show
+            }
+        )
+
+        Button(
+            text = "Show with one digit number",
+            onClickListener = {
+                show = true
+                badgeContent = (0..9).random().toString()
+            }
+        )
+
+        Button(
+            text = "Show with two digit number",
+            onClickListener = {
+                show = true
+                badgeContent = (10..99).random().toString()
+            }
+        )
     }
 }
diff --git a/library/screenshots/Badge_non_numeric.png b/library/screenshots/Badge_non_numeric.png
diff --git a/library/screenshots/Badge_numeric_one_digit.png b/library/screenshots/Badge_numeric_one_digit.png
diff --git a/library/screenshots/Badge_numeric_two_digits.png b/library/screenshots/Badge_numeric_two_digits.png
diff --git a/library/src/main/java/com/telefonica/mistica/compose/badge/Badge.kt b/library/src/main/java/com/telefonica/mistica/compose/badge/Badge.kt
@@ -6,22 +6,23 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import com.telefonica.mistica.compose.theme.MisticaTheme
 import com.telefonica.mistica.compose.theme.brand.MovistarBrand
+import androidx.compose.material.Badge as MaterialBadge
 
-@ExperimentalMaterialApi
 @Composable
 fun Badge(
     modifier: Modifier = Modifier,
+    textSize: TextUnit = TextUnit.Unspecified,
     content: String? = null,
 ) {
     if (content.isNullOrEmpty()) {
@@ -33,26 +34,36 @@ fun Badge(
                 .size(8.dp),
         ) { }
     } else {
-        androidx.compose.material.Badge(
+        MaterialBadge(
             backgroundColor = MisticaTheme.colors.badge,
             modifier = modifier.testTag(BadgeTestTags.BADGE_NUMBER),
         ) {
             Text(
                 modifier = Modifier.testTag(BadgeTestTags.BADGE_NUMBER_VALUE),
-                text = content,
+                text = getBadgeContent(content),
+                fontSize = textSize,
                 color = MisticaTheme.colors.textPrimaryInverse,
             )
         }
     }
 }
 
+private fun getBadgeContent(content: String) = if (content.all { it.isDigit() }) {
+    if (content.toLong() > 9) {
+        "9+"
+    } else {
+        content
+    }
+} else {
+    content
+}
+
 object BadgeTestTags {
     const val BADGE = "badge"
     const val BADGE_NUMBER = "badge_number"
     const val BADGE_NUMBER_VALUE = "badge_number_value"
 }
 
-@ExperimentalMaterialApi
 @Preview(showBackground = true)
 @Composable
 fun BadgePreview() {

diff --git a/library/src/test/java/com/telefonica/mistica/compose/badge/BadgeTest.kt b/library/src/test/java/com/telefonica/mistica/compose/badge/BadgeTest.kt
@@ -0,0 +1,76 @@
+package com.telefonica.mistica.compose.badge
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.BadgedBox
+import androidx.compose.material.Icon
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.test.junit4.createComposeRule
+import androidx.compose.ui.test.onRoot
+import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.R
+import com.telefonica.mistica.compose.theme.MisticaTheme
+import com.telefonica.mistica.compose.theme.brand.MovistarBrand
+import com.telefonica.mistica.testutils.ScreenshotsTest
+import org.junit.Rule
+import org.junit.Test
+import org.junit.runner.RunWith
+import org.robolectric.RobolectricTestRunner
+
+@RunWith(RobolectricTestRunner::class)
+class BadgeTest: ScreenshotsTest() {
+    @get:Rule
+    val composeTestRule = createComposeRule()
+
+    @Test
+    fun `Badge non numeric`() {
+        `when some badge`("")
+
+        `then screenshot is OK`()
+    }
+
+    @Test
+    fun `Badge numeric one digit`() {
+        `when some badge`(ONE_DIGIT_CONTENT)
+
+        `then screenshot is OK`()
+    }
+
+    @Test
+    fun `Badge numeric two digits`() {
+        `when some badge`(TWO_DIGITS_CONTENT)
+
+        `then screenshot is OK`()
+    }
+
+    private fun `when some badge`(value: String) {
+        composeTestRule.setContent {
+            MisticaTheme(brand = MovistarBrand) {
+                Box(modifier = Modifier.padding(24.dp)) {
+                    BadgedBox(
+                        badge = {
+                            Badge(
+                                content = value
+                            )
+                        }
+                    ) {
+                        Icon(
+                            painter = painterResource(id = R.drawable.icn_creditcard),
+                            contentDescription = "credit card"
+                        )
+                    }
+                }
+            }
+        }
+    }
+
+    private fun `then screenshot is OK`() {
+        compareScreenshot(composeTestRule.onRoot())
+    }
+
+    companion object {
+        private const val ONE_DIGIT_CONTENT = "9"
+        private const val TWO_DIGITS_CONTENT = "99"
+    }
+}