Bpkr 215 android graphic promo contribution

app/src/androidTest/java/net/skyscanner/backpack/compose/graphicpromotion/BpkGraphicPromoTest.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.graphicpromotion
+
+import net.skyscanner.backpack.compose.BpkSnapshotTest
+import net.skyscanner.backpack.compose.overlay.BpkOverlayType
+import net.skyscanner.backpack.demo.compose.BpkGraphicPromoSample
+import net.skyscanner.backpack.demo.compose.GraphicPromoStoryAlignmentBottomSponsored
+import net.skyscanner.backpack.demo.compose.GraphicPromoStoryAlignmentBottomWithText
+import net.skyscanner.backpack.demo.compose.GraphicPromoStoryAlignmentTopSponsored
+import net.skyscanner.backpack.demo.compose.GraphicPromoStoryAlignmentTopWithKicker
+import net.skyscanner.backpack.demo.compose.GraphicPromoStoryDefault
+import org.junit.Test
+
+class BpkGraphicPromoTest : BpkSnapshotTest() {
+
+    @Test
+    fun default() = snap {
+        GraphicPromoStoryDefault()
+    }
+
+    @Test
+    fun defaultWithOverlay() = snap {
+        BpkGraphicPromoSample(
+            headline = "Three Parks Challenge",
+            overlayType = BpkOverlayType.SolidHigh,
+        )
+    }
+
+    @Test
+    fun topAlignedKickerAvailable() = snap {
+        BpkGraphicPromoSample(
+            subHeadline = "How to complete the climb in 3 days",
+        )
+    }
+
+    @Test
+    fun topAlignedKickerSubHeadlineAvailable() = snap {
+        GraphicPromoStoryAlignmentTopWithKicker()
+    }
+
+    @Test
+    fun topAlignedKickerSubHeadlineSponsoredAvailable() = snap {
+        GraphicPromoStoryAlignmentTopSponsored()
+    }
+
+    @Test
+    fun bottomAlignedKickerAvailable() = snap {
+        BpkGraphicPromoSample(
+            subHeadline = "How to complete the climb in 3 days",
+            verticalAlignment = BpkGraphicPromoVerticalAlignment.Bottom,
+        )
+    }
+
+    @Test
+    fun bottomAlignedKickerSubHeadlineAvailable() = snap {
+        GraphicPromoStoryAlignmentBottomWithText()
+    }
+
+    @Test
+    fun bottomAlignedKickerSubHeadlineSponsoredAvailable() = snap {
+        GraphicPromoStoryAlignmentBottomSponsored()
+    }
+}

app/src/main/java/net/skyscanner/backpack/demo/components/GraphicPromoComponent.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("GraphicPromo")
+annotation class GraphicPromoComponent

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

@@ -0,0 +1,144 @@
+/**
+ * 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 android.util.Log
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import net.skyscanner.backpack.compose.graphicpromotion.BpkGraphicPromo
+import net.skyscanner.backpack.compose.graphicpromotion.BpkGraphicsPromoSponsor
+import net.skyscanner.backpack.compose.graphicpromotion.BpkGraphicPromoVerticalAlignment
+import net.skyscanner.backpack.compose.overlay.BpkOverlayType
+import net.skyscanner.backpack.compose.tokens.BpkSpacing
+import net.skyscanner.backpack.demo.R
+import net.skyscanner.backpack.demo.components.GraphicPromoComponent
+import net.skyscanner.backpack.demo.meta.ComposeStory
+
+@Composable
+@GraphicPromoComponent
+@ComposeStory
+internal fun GraphicPromoStoryDefault(modifier: Modifier = Modifier) {
+    Column(modifier) {
+        BpkGraphicPromoSample()
+    }
+}
+
+@Composable
+@GraphicPromoComponent
+@ComposeStory("Top align with text")
+internal fun GraphicPromoStoryAlignmentTopWithKicker() {
+    BpkGraphicPromoSample(
+        kicker = "Travel tips",
+        subHeadline = "How to complete the climb in 3 days",
+    )
+}
+
+@Composable
+@GraphicPromoComponent
+@ComposeStory("Bottom align with text")
+internal fun GraphicPromoStoryAlignmentBottomWithText() {
+    BpkGraphicPromoSample(
+        kicker = "Travel tips",
+        subHeadline = "How to complete the climb in 3 days",
+        verticalAlignment = BpkGraphicPromoVerticalAlignment.Bottom,
+    )
+}
+
+@Composable
+@GraphicPromoComponent
+@ComposeStory("Top align Sponsored")
+internal fun GraphicPromoStoryAlignmentTopSponsored() {
+    BpkGraphicPromoSample(
+        kicker = "Travel tips",
+        subHeadline = "How to complete the climb in 3 days",
+        sponsor = BpkGraphicsPromoSponsor(
+            accessibilityLabel = "Sponsored",
+            logo = "https://images.kiwi.com/airlines/64/FR.png",
+            title = "Sponsored",
+        ),
+    )
+}
+
+@Composable
+@GraphicPromoComponent
+@ComposeStory("Bottom align Sponsored")
+internal fun GraphicPromoStoryAlignmentBottomSponsored() {
+    BpkGraphicPromoSample(
+        kicker = "Travel tips",
+        subHeadline = "How to complete the climb in 3 days",
+        verticalAlignment = BpkGraphicPromoVerticalAlignment.Bottom,
+        sponsor = BpkGraphicsPromoSponsor(
+            accessibilityLabel = "Sponsored",
+            logo = "https://images.kiwi.com/airlines/64/FR.png",
+            title = "Sponsored",
+        ),
+    )
+}
+
+@Composable
+internal fun BpkGraphicPromoSample(
+    modifier: Modifier = Modifier,
+    headline: String = "Three Parks Challenge",
+    subHeadline: String? = null,
+    kicker: String? = null,
+    verticalAlignment: BpkGraphicPromoVerticalAlignment = BpkGraphicPromoVerticalAlignment.Top,
+    overlayType: BpkOverlayType? = null,
+    sponsor: BpkGraphicsPromoSponsor? = null,
+) {
+    BpkGraphicPromo(
+        modifier = modifier
+            .fillMaxSize()
+            .padding(BpkSpacing.Base),
+        kicker = kicker,
+        headline = headline,
+        subHeadline = subHeadline,
+        verticalAlignment = verticalAlignment,
+        overlayType = overlayType,
+        sponsor = sponsor,
+        image = {
+            Image(
+                modifier = Modifier.matchParentSize(),
+                painter = painterResource(
+                    id = R.drawable.graphic_promo,
+                ),
+                contentDescription = "Image",
+                contentScale = ContentScale.Crop,
+            )
+        }, sponsorLogo = {
+            if (sponsor != null) {
+                Image(
+                    painter = painterResource(
+                        id = R.drawable.skyland,
+                    ),
+                    contentDescription = "Image",
+                    contentScale = ContentScale.Fit,
+                )
+            }
+        },
+        tapAction = {
+            Log.d("BpkGraphicPromo", "Tap on graphic promo")
+        },
+    )
+}

app/src/main/res/drawable/skyairlines.xml

@@ -0,0 +1,5 @@
+<vector android:autoMirrored="false" android:height="38dp"
+    android:viewportHeight="38" android:viewportWidth="222"
+    android:width="222dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#ffffff" android:fillType="evenOdd" android:pathData="M26.23,23.91C24.17,23.91 23.48,23.91 22.97,23.88C20.49,23.67 20.86,21.97 21.24,20.23L21.25,20.17L25.41,0.59C30.35,0.59 31.14,0.8 30.39,4.3L26.23,23.91H26.23ZM40.03,23.91L34.43,15.06L43.12,6.68H35.36L29.76,13.03C28.49,14.47 28.29,15.26 28.97,16.63L31.86,22.12C32.74,23.86 33.83,23.88 35.68,23.91L35.74,23.91H40.03ZM16.72,7.63H12.26C8.69,7.63 8.65,7.63 8.24,9.49C8.14,9.93 8.48,10.45 9.37,10.69C10.09,10.88 10.91,11.04 11.76,11.21C15.66,11.98 20.25,12.89 19.3,17.32C18.61,20.69 15.35,23.95 8.24,23.95H0C0.89,19.72 1.3,19.03 5.08,19.03H9.2C13.12,19.03 13.19,18.93 13.5,17.32C13.79,15.97 11.88,15.64 10.68,15.44C10.6,15.42 10.51,15.41 10.44,15.39C10.09,15.32 9.73,15.25 9.36,15.18C5.77,14.47 1.53,13.63 2.37,9.49C3.3,5.23 7.07,2.76 13.43,2.76H21.67C20.74,7.02 20.26,7.63 16.72,7.63H16.72ZM47.72,30.68C55.1,30.68 57.47,27.04 58.23,23.57L60.94,10.72C61.69,7.29 60.94,6.98 55.96,6.98L54.03,16.25L54.01,16.35C53.28,19.55 53.28,19.55 50.05,19.55C47.34,19.55 47.17,18.79 47.72,16.42L48.92,10.72C49.71,6.98 48.78,6.98 43.97,6.98L42.02,16.12C41.06,20.79 41.81,24.15 47.75,24.15C49.54,24.15 51.8,23.36 52.8,22.02L52.49,23.36C52.1,25.08 50.85,25.94 48.75,25.94H43.8C40.88,25.94 39.75,26.83 38.93,30.68H47.72ZM77.87,30.06C75.44,29.93 75.24,28.77 74.95,27.12L74.95,27.12L74.95,27.12C74.91,26.89 74.87,26.64 74.81,26.38H66.06C63.78,30.19 63.13,30.18 59.3,30.11H59.3H59.3H59.3H59.3H59.3H59.3H59.3H59.3H59.3C58.74,30.1 58.11,30.09 57.41,30.09L68.91,11.79C70.52,9.22 71,8.94 73.99,8.94H77.15L81.65,30.09C79,30.09 78.39,30.09 77.87,30.06V30.06ZM72.83,15.05L68.7,21.88H74.03L72.83,15.05ZM83.6,26.31C82.84,29.85 83.6,30.09 88.58,30.09L91.36,16.9C91.73,15.08 91.7,14.22 91.15,13.78C90.42,13.11 88.43,13.15 87.06,13.18C86.81,13.19 86.58,13.19 86.38,13.19L83.6,26.31ZM86.52,8.46C85.97,10.93 87.86,11.41 89.61,11.41C91.33,11.41 93.35,10.89 93.9,8.46C94.38,5.99 92.67,5.44 90.88,5.44C89.1,5.44 87,5.95 86.52,8.46ZM105.61,15.81C104.98,17.8 103.61,17.8 102.03,17.8L101.87,17.8C100.63,17.8 99.81,18.82 99.4,20.86L97.4,30.09C92.46,30.09 91.67,29.88 92.43,26.52L95.21,13.2C99.22,13.2 99.91,13.61 99.5,15.5C100.87,13.85 103.1,13.06 106.19,13.2L105.61,15.81ZM105.13,26.31C104.37,29.85 105.13,30.09 110.11,30.09L114.26,10.48C114.67,8.66 114.6,7.8 114.09,7.36C113.37,6.69 111.35,6.73 109.97,6.76C109.72,6.77 109.48,6.77 109.28,6.77L105.13,26.31ZM119.14,30.09C114.15,30.09 113.4,29.85 114.15,26.31L116.93,13.19C117.13,13.19 117.36,13.19 117.62,13.18C118.99,13.15 120.98,13.11 121.71,13.78C122.26,14.22 122.29,15.08 121.92,16.9L119.14,30.09ZM120.17,11.41C118.41,11.41 116.53,10.93 117.08,8.46C117.56,5.95 119.65,5.44 121.44,5.44C123.22,5.44 124.94,5.99 124.46,8.46C123.91,10.89 121.88,11.41 120.17,11.41ZM134.97,26.45C134.21,29.88 135,30.09 139.94,30.09V30.08L141.9,21.06C142.79,16.63 142.31,12.99 135.82,12.99C133.52,12.99 131.39,14.05 129.99,15.87C130.57,13.19 129.16,13.19 125.76,13.19L122.98,26.45C122.61,28.23 122.64,29.09 123.19,29.51C123.92,30.17 125.94,30.13 127.3,30.1C127.55,30.09 127.77,30.09 127.96,30.09L129.96,20.78C130.39,18.66 131.7,17.59 133.87,17.59C136.55,17.59 136.65,18.42 136.17,20.78L134.97,26.45ZM161.13,22.81C160.39,23.15 158.89,23.11 157.88,23.09C157.67,23.09 157.47,23.08 157.32,23.08H149.69C149.31,24.94 150.21,25.59 152.64,25.59H156.35C159.79,25.59 160.1,26.14 159.27,30.12H151.78C144.3,30.12 143.17,25.93 144.13,21.61C145.02,17.28 148.01,12.99 155.53,12.99C161.26,12.99 163.53,16.25 162.64,20.41C162.26,22.12 161.92,22.47 161.13,22.81V22.81ZM154.26,17.45C150.89,17.45 150.83,17.45 150.28,20.06H156.9C157.28,18.38 156.56,17.45 154.26,17.45ZM173.39,17.69H176.33C180.17,17.69 180.38,16.56 180.85,14.01C180.9,13.75 180.95,13.48 181,13.19H174.45C169.02,13.19 165.55,15.05 164.76,18.55C164.07,21.84 167.27,22.39 170.15,22.89C170.57,22.96 170.99,23.03 171.39,23.11C171.68,23.18 171.95,23.23 172.19,23.27C173.44,23.51 173.97,23.62 173.83,24.25C173.64,25.14 172.59,25.59 170.67,25.59H167.34C163.47,25.59 163.26,26.7 162.76,29.29C162.71,29.55 162.66,29.83 162.6,30.12H169.74C175.38,30.12 178.77,27.89 179.43,24.9C180.17,21.35 177.01,20.77 174.05,20.22L173.93,20.2C173.74,20.16 173.55,20.12 173.36,20.09L173.36,20.09C171.48,19.71 170.37,19.49 170.5,18.93C170.66,18.11 171.62,17.69 173.39,17.69ZM0,26.38L39.07,25.97V25.97C39.07,25.97 37.06,25.85 36.5,30.68H4.3C1.92,30.68 0,28.75 0,26.38ZM38.77,33.11H180.87H180.87C180.87,35.48 178.95,37.41 176.57,37.41H43.07C40.7,37.41 38.77,35.48 38.77,33.11ZM199.61,12.99L198.46,14.14C197.15,15.45 197.15,17.58 198.46,18.89L203.2,23.63L195.41,31.42C194.09,32.74 194.09,34.86 195.41,36.17L196.56,37.32L210.25,23.63L206.73,20.1L206.73,20.1L199.61,12.99ZM186.71,14.14L187.86,12.99L196.19,21.31L196.19,21.32L198.51,23.63L184.81,37.33L183.66,36.18C182.35,34.87 182.35,32.74 183.66,31.43L191.45,23.63L186.71,18.89C185.4,17.58 185.4,15.45 186.71,14.14ZM211.36,12.99L210.21,14.14C208.9,15.45 208.9,17.58 210.21,18.89L214.95,23.63L207.15,31.42C205.84,32.74 205.84,34.86 207.15,36.17L208.3,37.32L222,23.63L218.48,20.1L218.47,20.11L211.36,12.99Z"/>
+</vector>