Added Nudger with title, subtitle and icon (#1708)

* Added the component implementation and story * Updated the tests * Updated the tests * Updated the samples * Updated snapshots for 'rtl' * Updated snapshots for 'default' * Review changes * Updated the screenshots * Review changes * Updated snapshots for 'dm' * Updated snapshots for 'default' * Fixed Nudger with title and icon * Updated snapshots for 'rtl' * Updated snapshots for 'default' --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Skyscanner · Sep 8, 2023 · 204a02f · 204a02f
1 parent 6e21ab2
commit 204a02f
Show file tree

Hide file tree

Showing 14 changed files with 173 additions and 3 deletions.
diff --git a/...bug/default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png b/...bug/default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png
diff --git a/...ult/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withIconNoSubtitle.png b/...ult/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withIconNoSubtitle.png
diff --git a/...bug/default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withNoIcon.png b/...bug/default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withNoIcon.png
diff --git a/...default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withNoSubtitle.png b/...default/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_withNoSubtitle.png
diff --git a/...ss/debug/dm/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png b/...ss/debug/dm/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png
diff --git a/...s/debug/rtl/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png b/...s/debug/rtl/net.skyscanner.backpack.compose.nudger.BpkNudgerTest_defaultRow.png
diff --git a/app/src/androidTest/java/net/skyscanner/backpack/compose/nudger/BpkNudgerTest.kt b/app/src/androidTest/java/net/skyscanner/backpack/compose/nudger/BpkNudgerTest.kt
@@ -21,8 +21,11 @@ package net.skyscanner.backpack.compose.nudger
 import net.skyscanner.backpack.compose.BpkSnapshotTest
 import net.skyscanner.backpack.BpkTestVariant
 import androidx.test.ext.junit.runners.AndroidJUnit4
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.tokens.Account
 import net.skyscanner.backpack.Variants
 import net.skyscanner.backpack.demo.compose.NudgerExample
+import net.skyscanner.backpack.demo.compose.NudgerRowExample
 import net.skyscanner.backpack.demo.compose.NudgerStoryAvg
 import net.skyscanner.backpack.demo.compose.NudgerStoryMax
 import net.skyscanner.backpack.demo.compose.NudgerStoryMin
@@ -76,4 +79,27 @@ class BpkNudgerTest : BpkSnapshotTest() {
             NudgerExample(initialValue = NudgerStoryMin - NudgerStoryMax)
         }
     }
+
+    @Test
+    fun defaultRow() = snap {
+        NudgerRowExample(icon = BpkIcon.Account)
+    }
+
+    @Test
+    @Variants(BpkTestVariant.Default)
+    fun withNoSubtitle() = snap {
+        NudgerRowExample(subtitle = null)
+    }
+
+    @Test
+    @Variants(BpkTestVariant.Default)
+    fun withNoIcon() = snap {
+        NudgerRowExample()
+    }
+
+    @Test
+    @Variants(BpkTestVariant.Default)
+    fun withIconNoSubtitle() = snap {
+        NudgerRowExample(icon = BpkIcon.Account, subtitle = null)
+    }
 }
diff --git a/app/src/main/java/net/skyscanner/backpack/demo/compose/NudgerStory.kt b/app/src/main/java/net/skyscanner/backpack/demo/compose/NudgerStory.kt
@@ -22,6 +22,8 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -30,9 +32,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import net.skyscanner.backpack.compose.icon.BpkIcon
 import net.skyscanner.backpack.compose.nudger.BpkNudger
 import net.skyscanner.backpack.compose.text.BpkText
 import net.skyscanner.backpack.compose.theme.BpkTheme
+import net.skyscanner.backpack.compose.tokens.Account
 import net.skyscanner.backpack.compose.tokens.BpkSpacing
 import net.skyscanner.backpack.demo.R
 import net.skyscanner.backpack.demo.components.NudgerComponent
@@ -43,7 +47,7 @@ import net.skyscanner.backpack.demo.meta.ComposeStory
 @ComposeStory
 fun NudgerStory(modifier: Modifier = Modifier) {
     Column(
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier.fillMaxSize().padding(BpkSpacing.Base),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(BpkSpacing.Base, Alignment.CenterVertically),
     ) {
@@ -63,6 +67,16 @@ fun NudgerStory(modifier: Modifier = Modifier) {
         NudgerExample(name = stringResource(R.string.generic_disabled)) {
             NudgerExample(enabled = false)
         }
+
+        NudgerRowExample(
+            modifier = Modifier.fillMaxWidth(),
+        )
+
+        NudgerRowExample(
+            modifier = Modifier.fillMaxWidth(),
+            title = stringResource(R.string.generic_with_leading_icon),
+            icon = BpkIcon.Account,
+        )
     }
 }
 
@@ -84,6 +98,30 @@ internal fun NudgerExample(
     )
 }
 
+@Composable
+internal fun NudgerRowExample(
+    modifier: Modifier = Modifier,
+    title: String = stringResource(R.string.generic_title),
+    subtitle: String? = stringResource(R.string.generic_subtitle),
+    icon: BpkIcon? = null,
+    initialValue: Int = NudgerStoryAvg,
+    enabled: Boolean = true,
+) {
+    var value by remember { mutableStateOf(initialValue) }
+
+    BpkNudger(
+        title = title,
+        subtitle = subtitle,
+        icon = icon,
+        modifier = modifier,
+        value = value,
+        onValueChange = { value = it },
+        min = NudgerStoryMin,
+        max = NudgerStoryMax,
+        enabled = enabled,
+    )
+}
+
 @Composable
 private fun NudgerExample(
     name: String,

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -329,16 +329,18 @@
     <string name="progress_bar_large_stepped">Large stepped</string>
     <string name="progress_bar_decrease">Decrease</string>
     <string name="progress_bar_increase">Increase</string>
-    
+
     <string name="section_header_title">Section title</string>
     <string name="section_header_description">Description about this section (optional)</string>
     <string name="section_header_button_text">Action</string>
     <string name="section_header_icon_content_description">heart icon</string>
     <string name="section_header_button_click_feedback_msg">Click!</string>
-  
+
     <string name="snippet_headline">Headline Text</string>
     <string name="snippet_sub_heading">Description</string>
     <string name="snippet_body">"Lorem ipsum dolor sit amet, consectetur adipiscing elit." +
                 "Nulla tempus nec velit sit amet volutpat. Suspendisse potenti."</string>
     <string name="snippet_image_content_description">Image</string>
+    <string name="generic_title">Title</string>
+    <string name="generic_subtitle">Subtitle</string>
 </resources>
diff --git a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/nudger/BpkNudger.kt b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/nudger/BpkNudger.kt
@@ -19,6 +19,8 @@
 package net.skyscanner.backpack.compose.nudger
 
 import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
@@ -32,18 +34,24 @@ import androidx.compose.ui.semantics.invisibleToUser
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.setProgress
 import androidx.compose.ui.semantics.stateDescription
+import androidx.compose.ui.semantics.text
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import net.skyscanner.backpack.compose.button.BpkButton
 import net.skyscanner.backpack.compose.button.BpkButtonSize
 import net.skyscanner.backpack.compose.button.BpkButtonType
 import net.skyscanner.backpack.compose.fieldset.BpkFieldStatus
 import net.skyscanner.backpack.compose.fieldset.LocalFieldStatus
 import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.icon.BpkIconSize
 import net.skyscanner.backpack.compose.text.BpkText
 import net.skyscanner.backpack.compose.theme.BpkTheme
 import net.skyscanner.backpack.compose.tokens.BpkSpacing
 import net.skyscanner.backpack.compose.tokens.Minus
 import net.skyscanner.backpack.compose.tokens.Plus
+import net.skyscanner.backpack.compose.utils.invisibleSemantic
 import kotlin.math.roundToInt
 
 @OptIn(ExperimentalComposeUiApi::class)
@@ -104,6 +112,77 @@ fun BpkNudger(
     }
 }
 
+@Composable
+fun BpkNudger(
+    value: Int,
+    onValueChange: (Int) -> Unit,
+    min: Int,
+    max: Int,
+    title: String,
+    modifier: Modifier = Modifier,
+    subtitle: String? = null,
+    icon: BpkIcon? = null,
+    enabled: Boolean = LocalFieldStatus.current != BpkFieldStatus.Disabled,
+) {
+    Row(
+        modifier = modifier
+            .semantics {
+                text = listOfNotNull(title, subtitle).joinToString(separator = " ").let(::AnnotatedString)
+            }
+            .nudgerSemantics(value, onValueChange, min..max, enabled),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
+    ) {
+        Row(
+            modifier = Modifier.weight(1f),
+            verticalAlignment = Alignment.Top,
+            horizontalArrangement = Arrangement.spacedBy(BpkSpacing.Md),
+        ) {
+
+            if (icon != null) {
+                BpkIcon(
+                    icon = icon,
+                    size = BpkIconSize.Large,
+                    contentDescription = null, // handled by semantics modifier
+                )
+            }
+
+            Column(modifier = Modifier.weight(1f)) {
+                BpkText(
+                    text = title,
+                    style = BpkTheme.typography.heading5.copy(
+                        platformStyle = PlatformTextStyle(includeFontPadding = false),
+                    ),
+                    color = BpkTheme.colors.textPrimary,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.invisibleSemantic(),
+                )
+                if (subtitle != null) {
+                    BpkText(
+                        text = subtitle,
+                        style = BpkTheme.typography.bodyDefault.copy(
+                            platformStyle = PlatformTextStyle(includeFontPadding = false),
+                        ),
+                        color = BpkTheme.colors.textSecondary,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                        modifier = Modifier.invisibleSemantic(),
+                    )
+                }
+            }
+        }
+        BpkNudger(
+            value = value,
+            onValueChange = onValueChange,
+            min = min,
+            max = max,
+            enabled = enabled,
+            modifier = Modifier.invisibleSemantic(),
+        )
+    }
+}
+
 private fun Modifier.nudgerSemantics(
     value: Int,
     onValueChange: (Int) -> Unit,

diff --git a/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/utils/Modifier.kt b/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/utils/Modifier.kt
@@ -23,12 +23,15 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.layout.IntrinsicMeasureScope
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.invisibleToUser
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.IntRect
@@ -86,3 +89,7 @@ internal fun Modifier.offsetWithSize(offset: IntrinsicMeasureScope.(size: IntSiz
 internal fun Modifier.alignBy(anchor: Offset, alignment: Alignment): Modifier = offsetWithSize { size ->
     anchor.round() - alignment.align(IntSize.Zero, size, layoutDirection)
 }
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun Modifier.invisibleSemantic(): Modifier =
+    semantics { invisibleToUser() }
diff --git a/docs/compose/Nudger/README.md b/docs/compose/Nudger/README.md
@@ -19,7 +19,9 @@ Backpack Compose is available through [Maven Central](https://search.maven.org/a
 Example of a Nudger:
 
 ```Kotlin
+import net.skyscanner.backpack.compose.icon.BpkIcon
 import net.skyscanner.backpack.compose.nudger.BpkNudger
+import net.skyscanner.backpack.compose.tokens.Account
 
 BpkNudger(
   value = currentValue,
@@ -28,3 +30,19 @@ BpkNudger(
   max = maxValue,
 )
 ```
+
+Example of a Nudger with title, subtitle and icon:
+
+```Kotlin
+import net.skyscanner.backpack.compose.nudger.BpkNudger
+
+BpkNudger(
+  value = currentValue,
+  onValueChange = { /* update the value */ },
+  min = minValue,
+  max = maxValue,
+  title = "Title",
+  subtitle = "Subtitle",
+  icon = BpkIcon.Account,
+)
+```
diff --git a/docs/compose/Nudger/screenshots/default.png b/docs/compose/Nudger/screenshots/default.png
diff --git a/docs/compose/Nudger/screenshots/default_dm.png b/docs/compose/Nudger/screenshots/default_dm.png