Merge pull request #240 from afterpay/feature/compact-badge

EIT-1889: Feature: Compact badge option

Afterpay.xcodeproj/project.pbxproj

@@ -21,6 +21,7 @@
 		4288AB7827BCB578009C9B69 /* PaymentButtonUIView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4288AB7727BCB578009C9B69 /* PaymentButtonUIView.swift */; };
 		42927C39274209B600B26435 /* ShippingOptionUpdate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 42927C38274209B600B26435 /* ShippingOptionUpdate.swift */; };
 		42DA4F9826E0740500204E75 /* IntroText.swift in Sources */ = {isa = PBXBuildFile; fileRef = 42DA4F9726E0740500204E75 /* IntroText.swift */; };
+		4509D351293473F500952DAD /* CompactBadgeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4509D350293473F500952DAD /* CompactBadgeView.swift */; };
 		4509D357293FFB5200952DAD /* CashAppPayCheckout.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4509D356293FFB5200952DAD /* CashAppPayCheckout.swift */; };
 		4509D359294017C500952DAD /* CashAppSigningResponse.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4509D358294017C500952DAD /* CashAppSigningResponse.swift */; };
 		4509D35B2940192400952DAD /* JWT.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4509D35A2940192400952DAD /* JWT.swift */; };
@@ -100,6 +101,7 @@
 		4288AB7727BCB578009C9B69 /* PaymentButtonUIView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaymentButtonUIView.swift; sourceTree = "<group>"; };
 		42927C38274209B600B26435 /* ShippingOptionUpdate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShippingOptionUpdate.swift; sourceTree = "<group>"; };
 		42DA4F9726E0740500204E75 /* IntroText.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = IntroText.swift; sourceTree = "<group>"; };
+		4509D350293473F500952DAD /* CompactBadgeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CompactBadgeView.swift; sourceTree = "<group>"; };
 		4509D356293FFB5200952DAD /* CashAppPayCheckout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CashAppPayCheckout.swift; sourceTree = "<group>"; };
 		4509D358294017C500952DAD /* CashAppSigningResponse.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CashAppSigningResponse.swift; sourceTree = "<group>"; };
 		4509D35A2940192400952DAD /* JWT.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JWT.swift; sourceTree = "<group>"; };
@@ -228,6 +230,7 @@
 				66EE9BD624DCEC3D00A81C19 /* LinkTextView.swift */,
 				661CFDB52570E7F000D8A1E8 /* PaymentButton.swift */,
 				66483F3A24D7A164000BE6B5 /* PriceBreakdownView.swift */,
+				4509D350293473F500952DAD /* CompactBadgeView.swift */,
 				4288AB7527BC8C84009C9B69 /* LayeredImageView.swift */,
 				4288AB7727BCB578009C9B69 /* PaymentButtonUIView.swift */,
 				45144E6F27FCEFA30061EBE8 /* LockupView.swift */,
@@ -624,6 +627,7 @@
 				666D334C24A48F5C00FCD464 /* ObjcWrapper.swift in Sources */,
 				55432830263A61C4005512E4 /* CombineWrapper.swift in Sources */,
 				42DA4F9826E0740500204E75 /* IntroText.swift in Sources */,
+				4509D351293473F500952DAD /* CompactBadgeView.swift in Sources */,
 				45D406D127FE4B67009AA4EE /* LogoView.swift in Sources */,
 				157E88D125CBCA49007E54C4 /* Result+Fold.swift in Sources */,
 				55A2D307261BB36C00D8E23A /* Money.swift in Sources */,

Example/Example/Components/ComponentsViewController.swift

@@ -178,7 +178,7 @@ private final class ContentStackViewController: UIViewController, PriceBreakdown
       priceBreakdown2.showInterestFreeText = false
       priceBreakdown2.logoColorScheme = .dynamic(lightPalette: .blackOnMint, darkPalette: .whiteOnBlack)
       priceBreakdown2.moreInfoOptions = MoreInfoOptions(modalLinkStyle: .moreInfoText)
-      priceBreakdown2.logoType = .lockup
+      priceBreakdown2.logoType = .compactBadge
       stack.addArrangedSubview(priceBreakdown2)
 
       let priceBreakdown3 = PriceBreakdownView()

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-afterpay-black-on-mint.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-afterpay-black-on-mint.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-afterpay-black-on-white.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-afterpay-black-on-white.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-afterpay-mint-on-black.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-afterpay-mint-on-black.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-afterpay-white-on-black.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-afterpay-white-on-black.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-clearpay-black-on-mint.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-clearpay-black-on-mint.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-clearpay-black-on-white.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-clearpay-black-on-white.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-clearpay-mint-on-black.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-clearpay-mint-on-black.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Resources/Assets.xcassets/images/compact-badge/compact-badge-clearpay-white-on-black.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "compact-badge-clearpay-white-on-black.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/Afterpay/Views/CompactBadgeView.swift

@@ -0,0 +1,33 @@
+//
+//  BadgeView.swift
+//  Afterpay
+//
+//  Created by Adam Campbell on 31/7/20.
+//  Copyright © 2020 Afterpay. All rights reserved.
+//
+
+import Foundation
+import UIKit
+
+public class CompactBadgeView: AfterpayLogo {
+  override public init(colorScheme: ColorScheme = .static(.blackOnMint)) {
+    super.init(colorScheme: colorScheme)
+  }
+
+  required init?(coder: NSCoder) {
+    super.init(coder: coder)
+  }
+
+  override internal func getImageName(brand: String, color: String) -> String {
+    return "compact-badge-\(brand)-\(color)"
+  }
+
+  override internal func getImageColor() -> String {
+    var color = colorScheme.lightPalette.slug
+    if traitCollection.userInterfaceStyle == .dark {
+      color = colorScheme.darkPalette.slug
+    }
+
+    return color
+  }
+}

Sources/Afterpay/Views/PriceBreakdownView.swift

@@ -80,13 +80,16 @@ public final class PriceBreakdownView: UIView {
   public enum LogoType {
     case badge
     case lockup
+    case compactBadge
 
     var heightMultiplier: Double {
       switch self {
       case .badge:
         return 1.8
       case .lockup:
         return 1
+      case .compactBadge:
+        return 1
       }
     }
 
@@ -96,6 +99,8 @@ public final class PriceBreakdownView: UIView {
         return 1
       case .lockup:
         return 1.2
+      case .compactBadge:
+        return 1.2
       }
     }
   }
@@ -176,10 +181,13 @@ public final class PriceBreakdownView: UIView {
     self.isHidden = !Afterpay.enabled
 
     let logoView: AfterpayLogo
-    if logoType == .lockup {
+    switch logoType {
+    case .lockup:
       logoView = LockupView(colorScheme: logoColorScheme)
-    } else {
+    case .badge:
       logoView = BadgeView(colorScheme: logoColorScheme)
+    case .compactBadge:
+      logoView = CompactBadgeView(colorScheme: logoColorScheme)
     }
 
     let font: UIFont = fontProvider(traitCollection)

docs/src/ui-components/price-breakdown.md

@@ -82,7 +82,7 @@ Given the above, the price breakdown text will be rendered `or 4 payments of $##
 ## Logo Type
 Setting `logoType` is optional, will default to `.badge` and must be of type `LogoType`.
 
-Can be either of `.badge` or `.lockup`.
+Can be one of `.badge`, `.lockup` or `.compactBadge`.
 When setting color scheme on logo type of `.lockup`, only the foreground color will be applied. (See example)
 
 ```swift