Merge pull request #241 from paypal/button-sizes

Update Button Sizes

CHANGELOG.md

@@ -12,21 +12,23 @@
   * Add `PayPalVaultResult` type to return vault result
   * Add `PayPalVaultDelegate` to handle results from vault flow
   * Add `PayPalWebCheckoutClientError.paypalVaultResponseError` for missing or invalid response from vaulting
-<<<<<<< HEAD
 * PaymentButtons
+  * Add new `PaymentButtonSize` case `.standard`
   * Add `custom` case for `PaymentButtonEdges`
   * Support VoiceOver by adding button accessibility labels
   * Add new `PaymentButtonSize` case `.miniWithWordmark`
   * Add new `PayPalButton.Labels` cases: `.addMoneyWith`, `.bookWith`, `.buyWith`, `.buyNowWith`,
   `.checkoutWith`, `.continueWith`, `.contributeWith`, `.orderWith`, `.payLaterWith`, `.payWith`,
   `.reloadWith`, `.rentWith`, `.reserveWith`, `.subscribeWith`, `.supportWith`, `.tipWith`,
   `.topUpWith`
+  * `PayPalButtonSize` `.mini` changed to rectangular button to meet brand guidelines
   * Font typeface changed to "PayPalOpen" to meet brand guidelines
 * Breaking Changes
   * PaymentButtons
     * Remove `PayPalButton.Labels` cases: `.checkout`, `.buyNow`, `.payLater`
     * Remove `PaymentButtonColor` `.black`, `.silver`, `.blue`, and `.darkBlue`
     * Add `PaymentButtonColor.gold` for `PayPalCreditButton`
+    * Remove `PaymentButtonSize` cases: `.miniWithWordmark`, `.collapsed`, `.expanded`, `.full`
 
 ## 1.1.0 (2023-11-16)
 * PayPalNativePayments

Demo/Demo/Extensions/PaymentButtonEnums+Extension.swift

@@ -47,7 +47,7 @@ extension PaymentButtonEdges: CaseIterable {
 extension PaymentButtonSize: CaseIterable {
 
     public static var allCases: [PaymentButtonSize] {
-        [.mini, .miniWithWordmark, .collapsed, .expanded, .full]
+        [.mini, .standard]
     }
 
     static func allCasesAsString() -> [String] {

Demo/Demo/SwiftUIComponents/PayPalWebPayments/PayPalWebButtonsView.swift

@@ -27,15 +27,15 @@ struct PayPalWebButtonsView: View {
 
                 switch selectedFundingSource {
                 case .paypalCredit:
-                    PayPalCreditButton.Representable(color: .gold, size: .full) {
+                    PayPalCreditButton.Representable(color: .gold, size: .standard) {
                         payPalWebViewModel.paymentButtonTapped(funding: .paypalCredit)
                     }
                 case .paylater:
-                    PayPalPayLaterButton.Representable(color: .silver, edges: .softEdges, size: .full) {
+                    PayPalPayLaterButton.Representable(color: .gold, edges: .softEdges, size: .standard) {
                         payPalWebViewModel.paymentButtonTapped(funding: .paylater)
                     }
                 case .paypal:
-                    PayPalButton.Representable(color: .blue, size: .full) {
+                    PayPalButton.Representable(color: .gold, size: .standard) {
                         payPalWebViewModel.paymentButtonTapped(funding: .paypal)
                     }
                 }

Demo/Demo/SwiftUIComponents/SwiftUIPaymentButtonDemo.swift

@@ -86,7 +86,18 @@ struct SwiftUIPaymentButtonDemo: View {
 
                 switch selectedFunding {
                 case .payPal:
-                    if selectedSize == .expanded || selectedSize == .full {
+                    if selectedSize == .standard {
+                        Picker("Edges", selection: $edgesIndex) {
+                            ForEach(edges.indices, id: \.self) { index in
+                                Text(edges[index])
+                            }
+                        }
+                        .pickerStyle(SegmentedPickerStyle())
+                        .onChange(of: edgesIndex) { _ in
+                            selectedEdge = PaymentButtonEdges.allCases[edgesIndex]
+                            buttonID += 1
+                        }
+
                         Picker("label", selection: $labelIndex) {
                             ForEach(labels.indices, id: \.self) { index in
                                 Text(labels[index])

Sources/PaymentButtons/ImageAsset.swift

@@ -9,24 +9,15 @@ enum ImageAsset {
 
         case .payLater:
             imageAssetString = "paypal"
-
-            if button.size == .collapsed {
-                imageAssetString = "paypal_monogram"
-            }
-
+
         case .credit:
-            if button.size == .collapsed {
-                imageAssetString = "credit_monogram"
-            } else if button.size != .miniWithWordmark && button.size != .mini {
+            if button.size != .mini {
                 imageAssetString = "credit"
             }
         }
-
-        if button.size == .mini {
-            imageAssetString = "paypal_monogram"
-        } else if button.size == .miniWithWordmark {
-            imageAssetString = "paypal_vertical"
-        }
+            if button.size == .mini {
+                imageAssetString = "paypal_vertical"
+            }
 
         return UIImage(named: imageAssetString, in: PaymentButton.bundle, compatibleWith: nil)
     }

Sources/PaymentButtons/PayPalButton.swift

@@ -91,13 +91,13 @@ public final class PayPalButton: PaymentButton {
     ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
     ///   - color: Color of the button. Default to gold if not provided.
     ///   - edges: Edges of the button. Default to softEdges if not provided.
-    ///   - size: Size of the button. Default to collapsed if not provided.
+    ///   - size: Size of the button. Default to standard if not provided.
     ///   - label: Label displayed next to the button's logo. Default to no label.
     public convenience init(
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .gold,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed,
+        size: PaymentButtonSize = .standard,
         label: Label? = nil
     ) {
         self.init(
@@ -127,13 +127,13 @@ public extension PayPalButton {
         ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
         ///   - color: Color of the button. Default to gold if not provided.
         ///   - edges: Edges of the button. Default to softEdges if not provided.
-        ///   - size: Size of the button. Default to collapsed if not provided.
+        ///   - size: Size of the button. Default to standard if not provided.
         ///   - label: Label displayed next to the button's logo. Default to no label.
         public init(
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalButton.Color = .gold,
             edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            size: PaymentButtonSize = .standard,
             label: PayPalButton.Label? = nil,
             _ action: @escaping () -> Void = { }
         ) {

Sources/PaymentButtons/PayPalCreditButton.swift

@@ -21,12 +21,12 @@ public final class PayPalCreditButton: PaymentButton {
     ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
     ///   - color: Color of the button. Default to gold if not provided.
     ///   - edges: Edges of the button. Default to softEdges if not provided.
-    ///   - size: Size of the button. Default to collapsed if not provided.
+    ///   - size: Size of the button. Default to standard if not provided.
     public convenience init(
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .gold,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed
+        size: PaymentButtonSize = .standard
     ) {
         self.init(
             fundingSource: PaymentButtonFundingSource.credit,
@@ -54,12 +54,12 @@ public extension PayPalCreditButton {
         ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
         ///   - color: Color of the button. Default to gold if not provided.
         ///   - edges: Edges of the button. Default to softEdges if not provided.
-        ///   - size: Size of the button. Default to collapsed if not provided.
+        ///   - size: Size of the button. Default to standard if not provided.
         public init(
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalCreditButton.Color = .gold,
             edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            size: PaymentButtonSize = .standard,
             _ action: @escaping () -> Void = { }
         ) {
             self.button = PayPalCreditButton(

Sources/PaymentButtons/PayPalPayLaterButton.swift

@@ -19,12 +19,12 @@ public final class PayPalPayLaterButton: PaymentButton {
     ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
     ///   - color: Color of the button. Default to gold if not provided.
     ///   - edges: Edges of the button. Default to softEdges if not provided.
-    ///   - size: Size of the button. Default to collapsed if not provided.
+    ///   - size: Size of the button. Default to standard if not provided.
     public convenience init(
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .gold,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed,
+        size: PaymentButtonSize = .standard,
         _ action: @escaping () -> Void = { }
     ) {
         self.init(
@@ -51,12 +51,12 @@ public extension PayPalPayLaterButton {
         ///   - insets: Edge insets of the button, defining the spacing of the button's edges relative to its content.
         ///   - color: Color of the button. Default to gold if not provided.
         ///   - edges: Edges of the button. Default to softEdges if not provided.
-        ///   - size: Size of the button. Default to collapsed if not provided.
+        ///   - size: Size of the button. Default to standard if not provided.
         public init(
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalPayLaterButton.Color = .gold,
             edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            size: PaymentButtonSize = .standard,
             _ action: @escaping () -> Void = { }
         ) {
             self.button = PayPalPayLaterButton(

Sources/PaymentButtons/PaymentButton.swift

@@ -112,31 +112,22 @@ public class PaymentButton: UIButton {
     public private(set) var label: PaymentButtonLabel?
 
     private var imageHeight: CGFloat {
-        // For pay later or paypal credit return different image height
         switch size {
-        case .mini:
-            return 20.0
 
-        case .miniWithWordmark:
+        case .mini:
             return 24.0
 
-        case .collapsed:
-            return 15.0
-
-        case .expanded:
+        case .standard:
             return 20.0
-
-        case .full:
-            return 26.0
         }
     }
 
     private var supportsPrefixLabel: Bool {
         switch size {
-        case .mini, .miniWithWordmark, .collapsed:
+        case .mini:
             return false
 
-        case .expanded, .full:
+        case .standard:
             if let label = label {
                 return label.position == .prefix
             }
@@ -145,15 +136,11 @@ public class PaymentButton: UIButton {
     }
 
     private var supportsSuffixLabel: Bool {
-
         switch size {
-        case .mini, .miniWithWordmark:
+        case .mini:
             return false
 
-        case .collapsed:
-            return fundingSource == .payLater
-
-        case .expanded, .full:
+        case .standard:
             if let label = label {
                 return label.position == .suffix
             }
@@ -251,9 +238,8 @@ public class PaymentButton: UIButton {
     // MARK: - Override Function
     override public func layoutSubviews() {
         super.layoutSubviews()
-        if size == .mini || size == .miniWithWordmark {
-            let minValue = min(containerView.bounds.width, containerView.bounds.height)
-            containerView.layer.cornerRadius = minValue / 2
+        if size == .mini {
+            containerView.layer.cornerRadius = 4.0
         } else {
             containerView.layer.cornerRadius = edges.cornerRadius(for: containerView)
         }
@@ -267,7 +253,7 @@ public class PaymentButton: UIButton {
 
         // Size to fit
         switch size {
-        case .mini, .miniWithWordmark:
+        case .mini:
             let maxValue = max(image.size.width, image.size.height)
             imageView.bounds = CGRect(
                 x: 0,

Sources/PaymentButtons/PaymentButtonSize.swift

@@ -3,67 +3,42 @@ import UIKit
 /// The size category which determines how the button is shown.
 public enum PaymentButtonSize: Int, CustomStringConvertible {
 
-    /// Circle shaped button similar to a floating action button will show the monogram, if `.venmo` then will show `Venmo` logo.
+    /// Smallest button size uses the primary mark, vertically stacked. This is the recommended size when displaying on screens with limited space.
     case mini
 
-    /// Collapsed will only show the wordmark.
-    case collapsed
-
-    /// Expanded shows the wordmark along with the suffix.
-    case expanded
-
-    /// Full will show the wordmark along with the prefix and suffix.
-    case full
+    /// Standard size shows the primary mark along with the prefix or suffix
+    case standard
 
     var font: UIFont {
         PaymentButtonFont.paypalPrimaryFont
     }
 
     var elementSpacing: CGFloat {
         switch self {
-        case .mini, .collapsed:
+        case .mini:
             return 4.0
 
-        case .expanded:
+        case .standard:
             return 4.5
-
-        case .full:
-            return 6.0
         }
     }
 
     var elementPadding: NSDirectionalEdgeInsets {
         switch self {
         case .mini:
             return NSDirectionalEdgeInsets(
-                top: 14.0,
-                leading: 14.0,
-                bottom: 14.0,
-                trailing: 14.0
-            )
-
-        case .collapsed:
-            return NSDirectionalEdgeInsets(
-                top: 15.0,
+                top: 9.0,
                 leading: 20.0,
-                bottom: 15.0,
+                bottom: 9.0,
                 trailing: 20.0
             )
 
-        case .expanded:
-            return NSDirectionalEdgeInsets(
-                top: 13.0,
-                leading: 24.0,
-                bottom: 13.0,
-                trailing: 24.0
-            )
-
-        case .full:
+        case .standard:
             return NSDirectionalEdgeInsets(
-                top: 15.0,
-                leading: 44.0,
-                bottom: 15.0,
-                trailing: 44.0
+                top: 10.0,
+                leading: 80.0,
+                bottom: 10.0,
+                trailing: 80.0
             )
         }
     }
@@ -73,14 +48,8 @@ public enum PaymentButtonSize: Int, CustomStringConvertible {
         case .mini:
             return "mini"
 
-        case .collapsed:
-            return "collapsed"
-
-        case .expanded:
-            return "expanded"
-
-        case .full:
-            return "full"
+        case .standard:
+            return "standard"
         }
     }
 }

UnitTests/PaymentButtonsTests/PayPalButton_Tests.swift

@@ -13,7 +13,7 @@ class PayPalButton_Tests: XCTestCase {
     func testInit_whenPayPalButtonCreated_hasDefaultUIValuess() {
         let sut = PayPalButton()
         XCTAssertEqual(sut.edges, PaymentButtonEdges.softEdges)
-        XCTAssertEqual(sut.size, PaymentButtonSize.collapsed)
+        XCTAssertEqual(sut.size, PaymentButtonSize.standard)
         XCTAssertEqual(sut.color, PaymentButtonColor.gold)
         XCTAssertNil(sut.label)
         XCTAssertNil(sut.insets)

UnitTests/PaymentButtonsTests/PayPalCreditButton_Tests.swift

@@ -13,7 +13,7 @@ class PayPalCreditButton_Tests: XCTestCase {
     func testInit_whenPayPalCreditButtonCreated_hasDefaultUIValues() {
         let sut = PayPalCreditButton()
         XCTAssertEqual(sut.edges, PaymentButtonEdges.softEdges)
-        XCTAssertEqual(sut.size, PaymentButtonSize.collapsed)
+        XCTAssertEqual(sut.size, PaymentButtonSize.standard)
         XCTAssertEqual(sut.color, PaymentButtonColor.gold)
         XCTAssertNil(sut.insets)
         XCTAssertNil(sut.label)

UnitTests/PaymentButtonsTests/PayPalPayLaterButton_Tests.swift

@@ -8,7 +8,7 @@ class PayPalPayLaterButton_Tests: XCTestCase {
     func testInit_whenPayPalPayLaterButtonCreated_hasDefaultUIValues() {
         let sut = PayPalPayLaterButton()
         XCTAssertEqual(sut.edges, PaymentButtonEdges.softEdges)
-        XCTAssertEqual(sut.size, PaymentButtonSize.collapsed)
+        XCTAssertEqual(sut.size, PaymentButtonSize.standard)
         XCTAssertEqual(sut.color, PaymentButtonColor.gold)
         XCTAssertEqual(sut.label, .payLater)
         XCTAssertNil(sut.insets)