Update Button Sizes

CHANGELOG.md

@@ -3,13 +3,15 @@
 
 ## unreleased
 * PaymentButtons
-  * Add new `PaymentButtonSize` case `.miniWithWordmark`
+  * Add new `PaymentButtonSize` case `.regular`
   * 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
 * Breaking Changes
   * Remove `PayPalButton.Labels` cases: `.checkout`, `.buyNow`, `.payLater`
+  * 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, .regular]
     }
 
     static func allCasesAsString() -> [String] {

Demo/Demo/SwiftUIComponents/PayPalWebPayments/PayPalWebButtonsView.swift

@@ -12,15 +12,15 @@ struct PayPalWebButtonsView: View {
                     payPalWebViewModel.paymentButtonTapped(funding: .paypal)
                 }
                 .frame(maxWidth: .infinity, maxHeight: 40)
-                PayPalButton.Representable(color: .gold, size: .miniWithWordmark) {
+                PayPalButton.Representable(color: .gold, size: .mini) {
                     payPalWebViewModel.paymentButtonTapped(funding: .paypal)
                 }
                 .frame(maxWidth: .infinity, maxHeight: 40)
-                PayPalCreditButton.Representable(color: .black, edges: .softEdges, size: .expanded) {
+                PayPalCreditButton.Representable(color: .black, edges: .rounded, size: .regular) {
                     payPalWebViewModel.paymentButtonTapped(funding: .paypalCredit)
                 }
                 .frame(maxWidth: .infinity, maxHeight: 40)
-                PayPalPayLaterButton.Representable(color: .silver, edges: .rounded, size: .full) {
+                PayPalPayLaterButton.Representable(color: .silver, edges: .rounded, size: .regular) {
                     payPalWebViewModel.paymentButtonTapped(funding: .paylater)
                 }
                 .frame(maxWidth: .infinity, maxHeight: 40)

Demo/Demo/SwiftUIComponents/SwiftUIPaymentButtonDemo.swift

@@ -56,17 +56,6 @@ struct SwiftUIPaymentButtonDemo: View {
                 }
                 .id(pickerId)
 
-                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("sizes", selection: $sizesIndex) {
                     ForEach(sizes.indices, id: \.self) { index in
                         Text(sizes[index])
@@ -80,7 +69,18 @@ struct SwiftUIPaymentButtonDemo: View {
 
                 switch selectedFunding {
                 case .payPal:
-                    if selectedSize == .expanded || selectedSize == .full {
+                    if selectedSize == .regular {
+                        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

@@ -6,27 +6,18 @@ enum ImageAsset {
         switch button.fundingSource {
         case .payPal:
             imageAssetString = "paypal"
-
+            
         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

@@ -100,7 +100,7 @@ public final class PayPalButton: PaymentButton {
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .gold,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed,
+        size: PaymentButtonSize = .regular,
         label: Label? = nil
     ) {
         self.init(
@@ -136,7 +136,7 @@ public extension PayPalButton {
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalButton.Color = .gold,
             edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            size: PaymentButtonSize = .regular,
             label: PayPalButton.Label? = nil,
             _ action: @escaping () -> Void = { }
         ) {

Sources/PaymentButtons/PayPalCreditButton.swift

@@ -27,7 +27,7 @@ public final class PayPalCreditButton: PaymentButton {
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .darkBlue,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed
+        size: PaymentButtonSize = .regular
     ) {
         self.init(
             fundingSource: PaymentButtonFundingSource.credit,
@@ -59,8 +59,8 @@ public extension PayPalCreditButton {
         public init(
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalCreditButton.Color = .darkBlue,
-            edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            edges: PaymentButtonEdges = .rounded,
+            size: PaymentButtonSize = .regular,
             _ action: @escaping () -> Void = { }
         ) {
             self.button = PayPalCreditButton(

Sources/PaymentButtons/PayPalPayLaterButton.swift

@@ -27,7 +27,7 @@ public final class PayPalPayLaterButton: PaymentButton {
         insets: NSDirectionalEdgeInsets? = nil,
         color: Color = .gold,
         edges: PaymentButtonEdges = .softEdges,
-        size: PaymentButtonSize = .collapsed,
+        size: PaymentButtonSize = .regular,
         _ action: @escaping () -> Void = { }
     ) {
         self.init(
@@ -58,8 +58,8 @@ public extension PayPalPayLaterButton {
         public init(
             insets: NSDirectionalEdgeInsets? = nil,
             color: PayPalPayLaterButton.Color = .gold,
-            edges: PaymentButtonEdges = .softEdges,
-            size: PaymentButtonSize = .collapsed,
+            edges: PaymentButtonEdges = .rounded,
+            size: PaymentButtonSize = .regular,
             _ action: @escaping () -> Void = { }
         ) {
             self.button = PayPalPayLaterButton(

Sources/PaymentButtons/PaymentButton.swift

@@ -114,29 +114,21 @@ public class PaymentButton: UIButton {
     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 .regular:
             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 .regular:
             if let label = label {
                 return label.position == .prefix
             }
@@ -145,15 +137,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 .regular:
             if let label = label {
                 return label.position == .suffix
             }
@@ -239,9 +227,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)
         }
@@ -255,7 +242,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/PaymentButtonColor.swift

@@ -23,7 +23,7 @@ public enum PaymentButtonColor: String {
     var color: UIColor {
         switch self {
         case .gold:
-            return UIColor(hexString: "#FFC439")
+            return UIColor(hexString: "#FFD140")
 
         case .white:
             return UIColor(hexString: "#FFFFFF")

Sources/PaymentButtons/PaymentButtonSize.swift

@@ -3,107 +3,61 @@ import UIKit
 /// The size category which determines how the button is shown.
 public enum PaymentButtonSize: Int, CustomStringConvertible {
 
-    /// Smallest button size that will show the PayPal monogram only. Use this for screens where space is limited. The recommended size when displaying on screens with limited space `.miniWithWordmark`
+    /// Smallest button size uses the primary mark, vertically stacked. This is the recommended size when displaying on screens with limited space.
     case mini
 
-    /// Smallest button size that will show the primary mark (PayPal monogram and wordmark). This is the recommended size when displaying on screens with limited space.
-    case miniWithWordmark
-
-    /// Collapsed shows the primary mark (PayPal monogram and wordmark) along with the prefix or suffix.
-    case collapsed
-
-    /// Expanded shows the primary mark (PayPal monogram and wordmark along with the prefix or suffix
-    case expanded
-
-    /// Full will show the primary mark (PayPal monogram and wordmark along with the prefix or suffix.
-    case full
+    /// Regular size shows the primary mark along with the prefix or suffix
+    case regular
 
     var font: UIFont {
         switch self {
-        case .mini, .miniWithWordmark, .collapsed:
+        case .mini:
             return PaymentButtonFont.secondaryFont
 
-        case .expanded:
+        case .regular:
             return PaymentButtonFont.primaryFont
-
-        case .full:
-            return PaymentButtonFont.systemFont18
         }
     }
 
     var elementSpacing: CGFloat {
         switch self {
-        case .mini, .miniWithWordmark, .collapsed:
+        case .mini:
             return 4.0
 
-        case .expanded:
+        case .regular:
             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 .miniWithWordmark:
-            return NSDirectionalEdgeInsets(
-                top: 14.0,
-                leading: 14.0,
-                bottom: 14.0,
-                trailing: 14.0
-            )
-
-        case .collapsed:
+        case .mini:
             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 .regular:
             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
             )
         }
     }
 
     public var description: String {
         switch self {
+
         case .mini:
             return "mini"
 
-        case .miniWithWordmark:
-            return "mini with wordmark"
-
-        case .collapsed:
-            return "collapsed"
-
-        case .expanded:
-            return "expanded"
-
-        case .full:
-            return "full"
+        case .regular:
+            return "regular"
         }
     }
 }

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.regular)
         XCTAssertEqual(sut.color, PaymentButtonColor.gold)
         XCTAssertNil(sut.label)
         XCTAssertNil(sut.insets)