LMN-843 Add rating bar component (#1844)

* LMN-843 Bump foundation

* LMN-843 Create rating bar component

* Updated snapshots for 'rtl'

* Updated snapshots for 'default'

* Updated snapshots for 'dm'

* Revert flaky snapshots

* Updated snapshots for 'default'

* Trigger CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Backpack/src/main/res/values-night/backpack.internal.color.xml

@@ -21,6 +21,8 @@
   <!-- THIS FILE IS AUTO GENERATED. DO NOT MODIFY! -->
 
     <color name="__privateBadgeBackgroundNormal">#ff243346</color>
+    <color name="__privateBarTrackDefault">#ff243346</color>
+    <color name="__privateBarTrackOnContrast">#ff243346</color>
     <color name="__privateButtonDestructiveNormalBackground">#ff243346</color>
     <color name="__privateButtonDestructiveNormalForeground">#ffff649c</color>
     <color name="__privateButtonDestructivePressedBackground">#ffff649c</color>

Backpack/src/main/res/values/backpack.internal.color.xml

@@ -21,6 +21,8 @@
   <!-- THIS FILE IS AUTO GENERATED. DO NOT MODIFY! -->
 
     <color name="__privateBadgeBackgroundNormal">#ffeff3f8</color>
+    <color name="__privateBarTrackDefault">#ffe0e4e9</color>
+    <color name="__privateBarTrackOnContrast">#ffffffff</color>
     <color name="__privateButtonDestructiveNormalBackground">#ffe0e4e9</color>
     <color name="__privateButtonDestructiveNormalForeground">#ffc80456</color>
     <color name="__privateButtonDestructivePressedBackground">#ffc80456</color>

app/src/androidTest/java/net/skyscanner/backpack/compose/ratingbar/BpkRatingBarTest.kt

@@ -0,0 +1,51 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner 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 net.skyscanner.backpack.compose.ratingbar
+
+import net.skyscanner.backpack.BpkTestVariant
+import net.skyscanner.backpack.Variants
+import net.skyscanner.backpack.compose.BpkSnapshotTest
+import net.skyscanner.backpack.compose.rating.BpkRatingScale
+import net.skyscanner.backpack.demo.compose.RatingBarSample
+import org.junit.Test
+
+class BpkRatingBarTest : BpkSnapshotTest() {
+
+    @Test
+    fun default() {
+        snap { RatingBarSample(style = BpkRatingBarStyle.Default, scale = BpkRatingScale.ZeroToFive) }
+    }
+
+    @Test
+    fun onContrast() {
+        snap { RatingBarSample(style = BpkRatingBarStyle.OnContrast, scale = BpkRatingScale.ZeroToFive) }
+    }
+
+    @Test
+    @Variants(BpkTestVariant.Default)
+    fun zero_to_10() {
+        snap { RatingBarSample(style = BpkRatingBarStyle.Default, scale = BpkRatingScale.ZeroToTen) }
+    }
+
+    @Test
+    @Variants(BpkTestVariant.Default)
+    fun onContrast_zero_to_10() {
+        snap { RatingBarSample(style = BpkRatingBarStyle.OnContrast, scale = BpkRatingScale.ZeroToTen) }
+    }
+}

app/src/main/java/net/skyscanner/backpack/demo/components/RatingBarComponent.kt

@@ -0,0 +1,24 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner 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 net.skyscanner.backpack.demo.components
+
+import net.skyscanner.backpack.meta.ComponentMarker
+
+@ComponentMarker("Rating Bar")
+annotation class RatingBarComponent

app/src/main/java/net/skyscanner/backpack/demo/compose/RatingBarStory.kt

@@ -0,0 +1,82 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner 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 net.skyscanner.backpack.demo.compose
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import net.skyscanner.backpack.compose.rating.BpkRatingScale
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBar
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBarStyle
+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.demo.R
+import net.skyscanner.backpack.demo.components.RatingBarComponent
+import net.skyscanner.backpack.demo.meta.ComposeStory
+
+@Composable
+@RatingBarComponent
+@ComposeStory
+fun RatingBarStory(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier
+            .verticalScroll(rememberScrollState())
+            .padding(vertical = BpkSpacing.Md),
+    ) {
+        RatingBarSection(style = BpkRatingBarStyle.Default)
+        RatingBarSection(style = BpkRatingBarStyle.OnContrast)
+    }
+}
+
+@Composable
+internal fun RatingBarSection(style: BpkRatingBarStyle, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        BpkText(
+            text = style.name,
+            style = BpkTheme.typography.heading5,
+            modifier = Modifier.padding(horizontal = BpkSpacing.Base, vertical = BpkSpacing.Md),
+        )
+        RatingBarSample(style = style, scale = BpkRatingScale.ZeroToFive)
+        RatingBarSample(style = style, scale = BpkRatingScale.ZeroToTen)
+    }
+}
+
+@Composable
+internal fun RatingBarSample(style: BpkRatingBarStyle, scale: BpkRatingScale, modifier: Modifier = Modifier) {
+    BpkRatingBar(
+        modifier = modifier
+            .background(
+                when (style) {
+                    BpkRatingBarStyle.Default -> BpkTheme.colors.canvas
+                    BpkRatingBarStyle.OnContrast -> BpkTheme.colors.canvasContrast
+                },
+            )
+            .padding(BpkSpacing.Base),
+        label = stringResource(R.string.generic_leading_text),
+        rating = 4.7f,
+        style = style,
+        scale = scale,
+    )
+}

app/src/main/res/values/strings.xml

@@ -220,6 +220,7 @@
     <string name="generic_price">Price</string>
     <string name="generic_departures">Departures</string>
     <string name="generic_show">Show</string>
+    <string name="generic_leading_text">Leading text</string>
 
     <string name="nudger_minus_disabled">Minus Disabled</string>
     <string name="nudger_plus_disabled">Plus Disabled</string>

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/ratingbar/BpkRatingBar.kt

@@ -0,0 +1,80 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner 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 net.skyscanner.backpack.compose.ratingbar
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.LinearProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.semantics.semantics
+import net.skyscanner.backpack.compose.rating.BpkRatingScale
+import net.skyscanner.backpack.compose.rating.BpkRatingSize
+import net.skyscanner.backpack.compose.rating.internal.BpkRatingNumbers
+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.internal.BpkRatingBarColors
+import net.skyscanner.backpack.compose.utils.invisibleSemantic
+
+@Composable
+fun BpkRatingBar(
+    label: String,
+    rating: Float,
+    modifier: Modifier = Modifier,
+    style: BpkRatingBarStyle = BpkRatingBarStyle.Default,
+    scale: BpkRatingScale = BpkRatingScale.ZeroToFive,
+) {
+    Column(modifier = modifier.semantics(mergeDescendants = true) { }, verticalArrangement = Arrangement.spacedBy(BpkSpacing.Md)) {
+        Row(verticalAlignment = Alignment.Bottom) {
+            BpkText(
+                text = label,
+                style = BpkTheme.typography.footnote,
+                modifier = Modifier.weight(1f),
+            )
+            BpkRatingNumbers(value = rating, scale = scale, size = BpkRatingSize.Base, showScale = true)
+        }
+        LinearProgressIndicator(
+            progress = when (scale) {
+                BpkRatingScale.ZeroToFive -> rating / 5F
+                BpkRatingScale.ZeroToTen -> rating / 10F
+            },
+            color = BpkTheme.colors.corePrimary,
+            trackColor = when (style) {
+                BpkRatingBarStyle.Default -> BpkRatingBarColors.barTrackDefault
+                BpkRatingBarStyle.OnContrast -> BpkRatingBarColors.barTrackOnContrast
+            },
+            strokeCap = StrokeCap.Round,
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(BpkSpacing.Md)
+                .invisibleSemantic(),
+        )
+    }
+}
+
+enum class BpkRatingBarStyle {
+    Default,
+    OnContrast,
+}

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/tokens/internal/BpkRatingBarColors.kt

@@ -0,0 +1,36 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner 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.
+ */
+
+// Auto-generated: do not edit
+@file:Suppress("RedundantVisibilityModifier", "unused")
+
+package net.skyscanner.backpack.compose.tokens.`internal`
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import net.skyscanner.backpack.compose.utils.dynamicColorOf
+
+internal object BpkRatingBarColors {
+    internal val barTrackDefault: Color
+        @Composable
+        get() = dynamicColorOf(Color(0xFFE0E4E9), Color(0xFF243346))
+
+    internal val barTrackOnContrast: Color
+        @Composable
+        get() = dynamicColorOf(Color(0xFFFFFFFF), Color(0xFF243346))
+}

docs/compose/RatingBar/README.md

@@ -0,0 +1,54 @@
+# Rating
+
+[![Maven Central](https://img.shields.io/maven-central/v/net.skyscanner.backpack/backpack-compose)](https://search.maven.org/artifact/net.skyscanner.backpack/backpack-compose)
+[![Class reference](https://img.shields.io/badge/Class%20reference-Android-blue)](https://backpack.github.io/android/backpack-compose/net.skyscanner.backpack.compose.ratingbar)
+[![Source code](https://img.shields.io/badge/Source%20code-GitHub-lightgrey)](https://github.com/Skyscanner/backpack-android/tree/main/backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/ratingbar)
+
+## Default
+
+| Day                                                                                                                                                                    | Night                                                                                                                                                                                 |
+|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-android/main/docs/compose/RatingBar/screenshots/default.png" alt="Rating bar component" width="375" /> | <img src="https://raw.githubusercontent.com/Skyscanner/backpack-android/main/docs/compose/RatingBar/screenshots/default_dm.png" alt="Rating bar component - dark mode" width="375" /> |
+
+## Installation
+
+Backpack Compose is available through [Maven Central](https://search.maven.org/artifact/net.skyscanner.backpack/backpack-compose). Check the main [Readme](https://github.com/skyscanner/backpack-android#installation) for a complete installation guide.
+
+## Usage
+
+Example of a rating bar:
+
+```Kotlin
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBar
+
+BpkRatingBar(
+    label = "Label",
+    rating = 4.5f,
+)
+```
+
+Example of a rating bar on contrast:
+
+```Kotlin
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBar
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBarStyle
+
+BpkRatingBar(
+    label = "Label",
+    rating = 4.5f,
+    style = BpkRatingBarStyle.OnContrast,
+)
+```
+
+Example of a rating bar with zero to 10 scale:
+
+```Kotlin
+import net.skyscanner.backpack.compose.ratingbar.BpkRatingBar
+import net.skyscanner.backpack.compose.rating.BpkRatingScale
+
+BpkRatingBar(
+    label = "Label",
+    rating = 4.5f,
+    scale = BpkRatingScale.ZeroToTen,
+)
+```