[DON-2702] Modify BpkHorizontalNav to support changeable background c… (#2614)

* [DON-2702] Add support for changeable background colors in BpkHorizontalNav

* Updated snapshots

---------

Co-authored-by: skyscanner-backpack-bot[bot] <197108191+skyscanner-backpack-bot[bot]@users.noreply.github.com>

Author: RichSutherSky

app/screenshots/oss/debug/default/net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavTest_canvasContrastBackground.png

@@ -31,6 +31,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNav
+import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavBackgroundColor
 import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavSize
 import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavTab
 import net.skyscanner.backpack.compose.icon.BpkIcon
@@ -61,6 +62,9 @@ fun HorizontalNavStory(modifier: Modifier = Modifier) {
         BpkText(text = stringResource(R.string.tabs_small_with_icon))
         HorizontalNav_SmallWithIcon_Sample()
 
+        BpkText(text = stringResource(R.string.tabs_background))
+        HorizontalNav_CanvasContrastBackground_Sample()
+
         BpkText(text = stringResource(R.string.tabs_large))
         HorizontalNav_Large_Sample()
 
@@ -69,6 +73,28 @@ fun HorizontalNavStory(modifier: Modifier = Modifier) {
     }
 }
 
+@Composable
+internal fun HorizontalNav_CanvasContrastBackground_Sample(modifier: Modifier = Modifier) {
+    val tabs = listOf(
+        BpkHorizontalNavTab(
+            title = stringResource(R.string.tabs_one),
+        ),
+        BpkHorizontalNavTab(
+            title = stringResource(R.string.tabs_two),
+        ),
+    )
+
+    var activeIndex by rememberSaveable { mutableIntStateOf(0) }
+
+    BpkHorizontalNav(
+        modifier = modifier,
+        tabs = tabs,
+        activeIndex = activeIndex,
+        backgroundColor = BpkHorizontalNavBackgroundColor.CanvasContrast,
+        onChanged = { activeIndex = it },
+    )
+}
+
 @Composable
 internal fun HorizontalNav_Small_Sample(modifier: Modifier = Modifier) {
     val tabs = listOf(

app/screenshots/oss/debug/dm/net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavTest_canvasContrastBackground.png

@@ -168,6 +168,7 @@
 
     <string name="tabs_small">Small</string>
     <string name="tabs_small_with_icon">Small with icon</string>
+    <string name="tabs_background">Custom Background (Canvas Contrast)</string>
     <string name="tabs_large">Large</string>
     <string name="tabs_large_with_icon">Large with icon</string>
     <string name="tabs_one">One</string>

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

@@ -18,9 +18,10 @@
 
 package net.skyscanner.backpack.compose.horizontalnav
 
-import net.skyscanner.backpack.compose.BpkSnapshotTest
 import net.skyscanner.backpack.BpkTestVariant
 import net.skyscanner.backpack.Variants
+import net.skyscanner.backpack.compose.BpkSnapshotTest
+import net.skyscanner.backpack.demo.compose.HorizontalNav_CanvasContrastBackground_Sample
 import net.skyscanner.backpack.demo.compose.HorizontalNav_LargeWithIcon_Sample
 import net.skyscanner.backpack.demo.compose.HorizontalNav_Large_Sample
 import net.skyscanner.backpack.demo.compose.HorizontalNav_SmallWithIcon_Sample
@@ -49,6 +50,14 @@ class BpkHorizontalNavTest : BpkSnapshotTest() {
         }
     }
 
+    @Test
+    @Variants(BpkTestVariant.Default, BpkTestVariant.DarkMode)
+    fun canvasContrastBackground() {
+        snap {
+            HorizontalNav_CanvasContrastBackground_Sample()
+        }
+    }
+
     @Test
     @Variants(BpkTestVariant.Default)
     fun large() {

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

@@ -18,9 +18,6 @@
 
 package net.skyscanner.backpack.compose.horizontalnav
 
-import android.R.attr.enabled
-import android.R.attr.label
-import android.R.attr.onClick
 import androidx.compose.animation.core.FastOutSlowInEasing
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
@@ -39,7 +36,6 @@ import androidx.compose.material3.Surface
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -65,6 +61,11 @@ enum class BpkHorizontalNavSize {
     Small,
 }
 
+enum class BpkHorizontalNavBackgroundColor {
+    SurfaceDefault,
+    CanvasContrast,
+}
+
 data class BpkHorizontalNavTab(
     val title: String,
     val icon: BpkIcon? = null,
@@ -76,12 +77,17 @@ fun BpkHorizontalNav(
     activeIndex: Int,
     onChanged: (Int) -> Unit,
     modifier: Modifier = Modifier,
+    backgroundColor: BpkHorizontalNavBackgroundColor = BpkHorizontalNavBackgroundColor.SurfaceDefault,
     size: BpkHorizontalNavSize = BpkHorizontalNavSize.Default,
 ) {
     TabRow(
         selectedTabIndex = activeIndex,
         tabs = tabs,
         onChanged = onChanged,
+        backgroundColor = when (backgroundColor) {
+            BpkHorizontalNavBackgroundColor.SurfaceDefault -> BpkTheme.colors.surfaceDefault
+            BpkHorizontalNavBackgroundColor.CanvasContrast -> BpkTheme.colors.canvasContrast
+        },
         modifier = modifier.height(
             when (size) {
                 BpkHorizontalNavSize.Default -> 48.dp
@@ -113,12 +119,13 @@ private fun TabRow(
     selectedTabIndex: Int,
     onChanged: (Int) -> Unit,
     tabs: List<BpkHorizontalNavTab>,
+    backgroundColor: Color,
     modifier: Modifier = Modifier,
     content: @Composable RowScope.(BpkHorizontalNavTab) -> Unit,
 ) {
     Surface(
         modifier = modifier.selectableGroup(),
-        color = BpkTheme.colors.surfaceDefault,
+        color = backgroundColor,
         contentColor = BpkTheme.colors.textPrimary,
     ) {
         Row(

app/src/test/java/net/skyscanner/backpack/compose/horizontalnav/BpkHorizontalNavTest.kt

@@ -64,6 +64,30 @@ BpkHorizontalNav(
 )
 ```
 
+Example of a Horizontal Nav (with contrast background color):
+
+```Kotlin
+import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNav
+import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavBackgroundColor
+import net.skyscanner.backpack.compose.horizontalnav.BpkHorizontalNavTab
+
+val tabs = listOf(
+  BpkHorizontalNavTab(
+    title = "Tab 1",
+  ),
+  BpkHorizontalNavTab(
+    title = "Tab 2",
+  ),
+)
+
+BpkHorizontalNav(
+  tabs = tabs,
+  activeIndex = activeIndex,
+  backgroundColor = BpkHorizontalNavBackgroundColor.CanvasContrast,
+  onChanged = { index -> },
+)
+```
+
 Example of a Horizontal Nav (with icon):
 
 ```Kotlin