Skip to content

Commit

Permalink
Bpkr 215 android graphic promo contribution (#1721)
Browse files Browse the repository at this point in the history
* BPKR [Android] Graphic promo contribution

* Add accessibility label

* Made overlayType nullable and add tests

* Add animation

* Fix animation duration and spacing

* Add example of usage to README.md

* Add missing license heading

* Added screenshots and updated README.md

* Updated README.md

* Updated snapshots for 'rtl'

* Updated snapshots for 'dm'

* Updated snapshots for 'default'

* Swtiched the implementation to InteractiveBackgroundIndication

* Switched to Spring animation

* Updated snapshots for 'rtl'

* Updated snapshots for 'default'

* Fix screenshot column formatting in README.md

* Addressed feedback

* Updated snapshots for 'dm'

* Updated snapshots for 'rtl'

* Updated snapshots for 'default'

* Addressed peer review

* Addressed pending peer review

* Updated snapshots for 'dm'

* Updated snapshots for 'rtl'

* Reverting Spacer between content and sponsor logo

* Updated snapshots for 'rtl'

* Updated snapshots for 'dm'

* Updated snapshots for 'rtl'

---------

Co-authored-by: Saidu Ernest Kamara <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: bvitaliyg <[email protected]>
  • Loading branch information
4 people authored Nov 22, 2023
1 parent 014f32e commit d7e9f8a
Show file tree
Hide file tree
Showing 44 changed files with 705 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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()
}
}
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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")
},
)
}
Binary file added app/src/main/res/drawable-nodpi/graphic_promo.jpg
5 changes: 5 additions & 0 deletions app/src/main/res/drawable/skyairlines.xml
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit d7e9f8a

Please sign in to comment.