[MUON-543] BPKGraphic promo sponsored (#2073)

* [MUON-543] Update BPKWrapper Sponsored version * [MUON-543] Add long text snapshot test * Alternate init for sponsored version Remove modifier approach * Update snapshot tests * Record snapshots * Updated snapshots * PR Updates * Record snapshots * Record snapshots * Updated snapshots --------- Co-authored-by: Dario Roa <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Skyscanner · Oct 9, 2024 · 297d7ca · 297d7ca
1 parent 3cad846
commit 297d7ca
Show file tree

Hide file tree

Showing 21 changed files with 158 additions and 105 deletions.
diff --git a/Backpack-SwiftUI/GraphicPromo/Classes/BPKGraphicPromo.swift b/Backpack-SwiftUI/GraphicPromo/Classes/BPKGraphicPromo.swift
@@ -43,7 +43,7 @@ public struct BPKGraphicPromo: View {
     private var sponsor: Sponsor?
 
     // MARK: - Internal settings
-    private let sponsorLogoHeight = 60.0
+    private let sponsorLogoHeight = 32.0
     private let aspectRatio: CGFloat = 3/4
     private let padding = BPKSpacing.lg
     private let cornerRadius = BPKCornerRadius.md
@@ -70,6 +70,30 @@ public struct BPKGraphicPromo: View {
         self.verticalAlignment = verticalAlignment
     }
 
+    public init(
+        headline: String,
+        image: Image,
+        type: `Type` = .button,
+        variant: Variant = .onDark,
+        sponsorTitle: String,
+        partnerLogo: Image,
+        sponsoredAccessibilityLabel: String
+    ) {
+        self.headline = headline
+        self.kicker = nil
+        self.subheadline = nil
+        self.image = image
+        self.type = type
+        self.overlay = .linear(.high, .bottom)
+        self.variant = variant
+        self.verticalAlignment = .bottom
+
+        self.sponsor = .init(
+            title: sponsorTitle,
+            logo: partnerLogo,
+            accessibilityLabel: sponsoredAccessibilityLabel)
+    }
+
     public var body: some View {
         Button(action: tapAction) {
             contentView()
@@ -93,52 +117,93 @@ public struct BPKGraphicPromo: View {
     // swiftlint:disable closure_body_length
     @ViewBuilder
     private func contentView() -> some View {
-        VStack(alignment: .leading, spacing: .md) {
-            if verticalAlignment == .bottom {
-                if let sponsor {
-                    sponsorOverlayView(sponsor)
-                    Spacer()
-                } else {
-                    Spacer()
+        Group {
+            if let sponsor {
+                sponsorContentView(sponsor)
+            } else {
+                Spacer()
+                VStack(alignment: .leading, spacing: .md) {
+                    if verticalAlignment == .bottom {
+                        Spacer()
+                    }
+
+                    if let kicker {
+                        BPKText(kicker, style: .label1)
+                            .foregroundColor(variant.foregroundColor)
+                            .lineLimit(nil)
+                    }
+
+                    headlineView
+
+                    if let subheadline {
+                        BPKText(subheadline, style: .heading5)
+                            .lineLimit(nil)
+                            .foregroundColor(variant.foregroundColor)
+                    }
+
+                    if verticalAlignment == .top {
+                        Spacer()
+                    }
                 }
             }
-
-            if let kicker {
-                BPKText(kicker, style: .label1)
-                    .foregroundColor(variant.foregroundColor)
-                    .lineLimit(nil)
-            }
-
-            BPKText(headline, style: .heading2)
-                .foregroundColor(variant.foregroundColor)
-                .lineLimit(nil)
-
-            if let subheadline {
-                BPKText(subheadline, style: .heading5)
-                    .lineLimit(nil)
-                    .foregroundColor(variant.foregroundColor)
-            }
-
-            if verticalAlignment == .top {
-                if let sponsor {
-                    Spacer()
-                    sponsorOverlayView(sponsor)
-                } else {
-                    Spacer()
+        }
+    }
+
+    @ViewBuilder
+    private func sponsorContentView(_ sponsor: Sponsor) -> some View {
+        VStack(alignment: .leading, spacing: .md) {
+            Spacer()
+            headlineView
+            sponsorFooter
+        }
+    }
+
+    private var headlineView: some View {
+        BPKText(headline, style: .heading2)
+            .foregroundColor(variant.foregroundColor)
+            .lineLimit(nil)
+    }
+
+    @ViewBuilder
+    private var sponsorFooter: some View {
+        if #available(iOS 16.0, *) {
+            ViewThatFits {
+                HStack(spacing: .md) {
+                    sponsorLogo
+                    sponsoredText
+                }
+                VStack(alignment: .leading, spacing: .md) {
+                    sponsorLogo
+                    sponsoredText
                 }
             }
+        } else {
+            VStack(alignment: .leading, spacing: .md) {
+                sponsorLogo
+                sponsoredText
+            }
         }
     }
 
     @ViewBuilder
-    private func sponsorOverlayView(_ sponsor: Sponsor) -> some View {
-        VStack(alignment: .leading, spacing: .md) {
-            BPKText(sponsor.title, style: .label1)
-                .foregroundColor(variant.foregroundColor)
+    private var sponsorLogo: some View {
+        if let sponsor {
             sponsor.logo
                 .resizable()
-                .aspectRatio(contentMode: .fit)
+                .scaledToFit()
                 .frame(height: sponsorLogoHeight)
+                .foregroundStyle(Color(variant.foregroundColor.value))
+                .frame(maxWidth: 160)
+                .fixedSize()
+        }
+    }
+
+    @ViewBuilder
+    private var sponsoredText: some View {
+        if let sponsor {
+            BPKText(sponsor.title, style: .caption)
+                .foregroundColor(variant.foregroundColor)
+                .foregroundStyle(Color(variant.foregroundColor.value))
         }
     }
 
@@ -150,12 +215,6 @@ public struct BPKGraphicPromo: View {
     }
 
     // MARK: - Public modifiers
-    public func sponsor(title: String, logo: Image, accessibilityLabel: String) -> BPKGraphicPromo {
-        var view = self
-        view.sponsor = Sponsor(title: title, logo: logo, accessibilityLabel: accessibilityLabel)
-        return view
-    }
-
     public func fallbackColor(_ color: Color) -> BPKGraphicPromo {
         var view = self
         view.backgroundColor = color
@@ -239,31 +298,23 @@ struct BPKGraphicPromo_Previews: PreviewProvider {
 
             ScrollView {
                 BPKGraphicPromo(
-                    kicker: "Travel tips",
-                    headline: "Three peaks challenge",
-                    subheadline: "How to complete the trip in three days",
-                    image: Image(systemName: "heart")
+                    headline: "There's always more to explore in Britain",
+                    image: Image(systemName: "heart"),
+                    sponsorTitle: "In partnership with Skyland",
+                    partnerLogo: Image(systemName: "heart.fill"),
+                    sponsoredAccessibilityLabel: "Sponsored by: Skyland"
                 )
                 .fallbackColor(Color(.coreAccentColor))
-                .sponsor(
-                    title: "Sponsored",
-                    logo: Image(systemName: "heart.fill"),
-                    accessibilityLabel: "Sponsored by: Skyland"
-                )
             }
             .previewDisplayName("Sponsored")
 
             ScrollView {
                 BPKGraphicPromo(
-                    kicker: "Travel tips",
-                    headline: "Three peaks challenge",
-                    subheadline: "How to complete the trip in three days",
-                    image: Image(systemName: "heart")
-                )
-                .sponsor(
-                    title: "Sponsored",
-                    logo: Image(systemName: "heart.fill"),
-                    accessibilityLabel: "Sponsored by: Skyland"
+                    headline: "There's always more to explore in Britain",
+                    image: Image(systemName: "heart"),
+                    sponsorTitle: "In partnership with Skyland",
+                    partnerLogo: Image(systemName: "heart.fill"),
+                    sponsoredAccessibilityLabel: "Sponsored by: Skyland"
                 )
                 .fallbackColor(Color(.coreAccentColor))
             }

diff --git a/Backpack-SwiftUI/Tests/GraphicPromo/BPKGraphicPromoTests.swift b/Backpack-SwiftUI/Tests/GraphicPromo/BPKGraphicPromoTests.swift
@@ -58,21 +58,17 @@ class BPKGraphicPromoTests: XCTestCase {
         assertSnapshot(sut)
     }
 
-    func test_topAligned_sponsored() {
+    func test_sponsored() {
         // Given
         let sut = VStack {
             BPKGraphicPromo(
-                kicker: "Travel tips",
                 headline: "Three peaks challenge",
-                subheadline: "How to complete the trip in three days",
-                image: Image("dialog_image", bundle: TestsBundle.bundle)
+                image: Image("dialog_image", bundle: TestsBundle.bundle),
+                sponsorTitle: "Sponsored",
+                partnerLogo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
+                sponsoredAccessibilityLabel: "Sponsored by: Skyland"
             )
             .fallbackColor(Color(.statusDangerFillColor))
-            .sponsor(
-                title: "Sponsored",
-                logo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
-                accessibilityLabel: "Sponsored by: Skyland"
-            )
         }
         .frame(width: 375, height: 800)
         .padding()
@@ -81,22 +77,17 @@ class BPKGraphicPromoTests: XCTestCase {
         assertSnapshot(sut)
     }
 
-    func test_bottomAligned_sponsored() {
+    func test_sponsored_longText() {
         // Given
         let sut = VStack {
             BPKGraphicPromo(
-                kicker: "Travel tips",
-                headline: "Three peaks challenge",
-                subheadline: "How to complete the trip in three days",
+                headline: "Three peaks challenge.",
                 image: Image("dialog_image", bundle: TestsBundle.bundle),
-                verticalAlignment: .bottom
+                sponsorTitle: "This will be a longer string that should change the layout to vertical",
+                partnerLogo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
+                sponsoredAccessibilityLabel: "Sponsored by: Skyland"
             )
             .fallbackColor(Color(.statusDangerFillColor))
-            .sponsor(
-                title: "Sponsored",
-                logo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
-                accessibilityLabel: "Sponsored by: Skyland"
-            )
         }
         .frame(width: 375, height: 800)
         .padding()
@@ -105,22 +96,18 @@ class BPKGraphicPromoTests: XCTestCase {
         assertSnapshot(sut)
     }
 
-    func test_topAligned_sponsored_a11y() {
+    func test_sponsored_a11y() {
         // Given
         BPKFont.setDynamicType(enabled: true)
         let sut = VStack {
             BPKGraphicPromo(
-                kicker: "Travel tips",
                 headline: "Three peaks challenge",
-                subheadline: "How to complete the trip in three days",
-                image: Image("dialog_image", bundle: TestsBundle.bundle)
+                image: Image("dialog_image", bundle: TestsBundle.bundle),
+                sponsorTitle: "This will be a longer string that should change the layout to vertical",
+                partnerLogo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
+                sponsoredAccessibilityLabel: "Sponsored by: Skyland"
             )
             .fallbackColor(Color(.statusDangerFillColor))
-            .sponsor(
-                title: "Sponsored",
-                logo: Image(decorative: "skyland", bundle: TestsBundle.bundle),
-                accessibilityLabel: "Sponsored by: Skyland"
-            )
         }
         .frame(width: 375, height: 1000)
         .padding()

diff --git a/...o/__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.dark-mode.png b/...o/__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.dark-mode.png
diff --git a/.../__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.light-mode.png b/.../__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.light-mode.png
diff --git a/...icPromo/__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.rtl.png b/...icPromo/__Snapshots__/BPKGraphicPromoTests/test_bottomAligned_sponsored.rtl.png
diff --git a/...ts/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.dark-mode.png b/...ts/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.dark-mode.png
diff --git a/...s/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.light-mode.png b/...s/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.light-mode.png
diff --git a/...UI/Tests/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.rtl.png b/...UI/Tests/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored.rtl.png
diff --git a/...aphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.dark-mode.png b/...aphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.dark-mode.png
diff --git a/...phicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.light-mode.png b/...phicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.light-mode.png
diff --git a/...sts/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.rtl.png b/...sts/GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_a11y.rtl.png
diff --git a/...cPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.dark-mode.png b/...cPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.dark-mode.png
diff --git a/...Promo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.light-mode.png b/...Promo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.light-mode.png
diff --git a/...GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.rtl.png b/...GraphicPromo/__Snapshots__/BPKGraphicPromoTests/test_sponsored_longText.rtl.png
diff --git a/...romo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.dark-mode.png b/...romo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.dark-mode.png
diff --git a/...omo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.light-mode.png b/...omo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.light-mode.png
diff --git a/...aphicPromo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.rtl.png b/...aphicPromo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored.rtl.png
diff --git a/...__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.dark-mode.png b/...__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.dark-mode.png
diff --git a/..._Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.light-mode.png b/..._Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.light-mode.png
diff --git a/...Promo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.rtl.png b/...Promo/__Snapshots__/BPKGraphicPromoTests/test_topAligned_sponsored_a11y.rtl.png
diff --git a/Example/Backpack/SwiftUI/Components/GraphicPromo/GraphicPromoExampleView.swift b/Example/Backpack/SwiftUI/Components/GraphicPromo/GraphicPromoExampleView.swift
@@ -31,33 +31,48 @@ struct GraphicPromoExampleView: View {
 
     var body: some View {
         ScrollView {
-            BPKGraphicPromo(
-                kicker: "Travel tips",
-                headline: "Three peaks challenge",
-                subheadline: "How to complete the climb in 3 days",
-                image: Image(decorative: "graphic_promo"),
-                overlay: .solid(.off),
-                verticalAlignment: verticalAlignment
-            )
+            Group {
+                if sponsored {
+                    sponsoredGraphicPromo
+                } else {
+                    standardGraphicPromo
+                }
+            }
             .onTapGesture {
                 print("Graphic promo tap")
             }
-            .fallbackColor(Color(.surfaceHighlightColor))
-            .if(sponsored) { view in
-                view.sponsor(
-                    title: "Sponsored",
-                    logo: Image(decorative: "skyland"),
-                    accessibilityLabel: "Sponsored by Skyland"
-                )
-            }
             .padding(.horizontal, .md)
+
         }
     }
+
+    private var standardGraphicPromo: some View {
+        BPKGraphicPromo(
+            kicker: "Travel tips",
+            headline: "There’s always more to explore in Britain",
+            subheadline: "How to complete the climb in 3 days",
+            image: Image(decorative: "graphic_promo"),
+            overlay: .solid(.off),
+            verticalAlignment: verticalAlignment
+        )
+        .fallbackColor(Color(.surfaceHighlightColor))
+    }
+
+    private var sponsoredGraphicPromo: some View {
+        BPKGraphicPromo(
+            headline: "There’s always more to explore in Britain",
+            image: Image(decorative: "graphic_promo"),
+            sponsorTitle: "Sponsored by Skyland",
+            partnerLogo: Image(decorative: "skyland"),
+            sponsoredAccessibilityLabel: "Sponsored by Skyland"
+        )
+        .fallbackColor(Color(.surfaceHighlightColor))
+    }
 }
 
 struct GraphicPromoExampleView_Previews: PreviewProvider {
     static var previews: some View {
-        GraphicPromoExampleView(verticalAlignment: .top, sponsored: false)
+        GraphicPromoExampleView(verticalAlignment: .top, sponsored: true)
             .padding(.horizontal, .base)
     }
 }