Add the ability to customize the NUXButton styles on the Login Prologue

WordPressAuthenticator.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name          = "WordPressAuthenticator"
-  s.version       = "1.37.0-beta.2"
+  s.version       = "1.37.0-beta.3"
 
   s.summary       = "WordPressAuthenticator implements an easy and elegant way to authenticate your WordPress Apps."
   s.description   = <<-DESC

WordPressAuthenticator/Authenticator/WordPressAuthenticatorStyles.swift

@@ -88,6 +88,18 @@ public struct WordPressAuthenticatorStyle {
     ///
     public let prologueTitleColor: UIColor
 
+    /// Style: primary button on the prologue view (continue)
+    /// When `nil` it will use the primary styles defined here
+    /// Defaults to `nil`
+    ///
+    public let prologuePrimaryButtonStyle: NUXButtonStyle?
+
+    /// Style: secondary button on the prologue view (site address)
+    /// When `nil` it will use the secondary styles defined here
+    /// Defaults to `nil`
+    ///
+    public let prologueSecondaryButtonStyle: NUXButtonStyle?
+
     /// Style: prologue top container child view controller
     /// When nil, `LoginProloguePageViewController` is displayed in the top container
     ///
@@ -128,6 +140,8 @@ public struct WordPressAuthenticatorStyle {
                 navButtonTextColor: UIColor = .white,
                 prologueBackgroundColor: UIColor = WPStyleGuide.wordPressBlue(),
                 prologueTitleColor: UIColor = .white,
+                prologuePrimaryButtonStyle: NUXButtonStyle? = nil,
+                prologueSecondaryButtonStyle: NUXButtonStyle? = nil,
                 prologueTopContainerChildViewController: @autoclosure @escaping () -> UIViewController? = nil,
                 statusBarStyle: UIStatusBarStyle = .lightContent) {
         self.primaryNormalBackgroundColor = primaryNormalBackgroundColor
@@ -159,6 +173,8 @@ public struct WordPressAuthenticatorStyle {
         self.navButtonTextColor = navButtonTextColor
         self.prologueBackgroundColor = prologueBackgroundColor
         self.prologueTitleColor = prologueTitleColor
+        self.prologuePrimaryButtonStyle = prologuePrimaryButtonStyle
+        self.prologueSecondaryButtonStyle = prologueSecondaryButtonStyle
         self.prologueTopContainerChildViewController = prologueTopContainerChildViewController
         self.statusBarStyle = statusBarStyle
     }

WordPressAuthenticator/NUX/NUXButton.swift

@@ -3,16 +3,41 @@ import WordPressShared
 import WordPressUI
 import WordPressKit
 
+public struct NUXButtonStyle {
+    public let normal: ButtonStyle
+    public let highlighted: ButtonStyle
+    public let disabled: ButtonStyle
+
+    public struct ButtonStyle {
+        public let backgroundColor: UIColor
+        public let borderColor: UIColor
+        public let titleColor: UIColor
+
+        public init(backgroundColor: UIColor, borderColor: UIColor, titleColor: UIColor) {
+            self.backgroundColor = backgroundColor
+            self.borderColor = borderColor
+            self.titleColor = titleColor
+        }
+    }
+
+    public init(normal: ButtonStyle, highlighted: ButtonStyle, disabled: ButtonStyle) {
+        self.normal = normal
+        self.highlighted = highlighted
+        self.disabled = disabled
+    }
+}
 /// A stylized button used by Login controllers. It also can display a `UIActivityIndicatorView`.
 @objc open class NUXButton: UIButton {
     @objc var isAnimating: Bool {
         return activityIndicator.isAnimating
     }
 
+    var buttonStyle: NUXButtonStyle?
+
     open override var isEnabled: Bool {
         didSet {
             if #available(iOS 13, *) {
-                activityIndicator.color = isEnabled ? style.primaryTitleColor : style.disabledButtonActivityIndicatorColor
+                activityIndicator.color = activityIndicatorColor(isEnabled: isEnabled)
             }
         }
     }
@@ -24,7 +49,7 @@ import WordPressKit
         } else {
             indicator = UIActivityIndicatorView(style: .white)
         }
-        indicator.color = WordPressAuthenticator.shared.style.primaryTitleColor
+
         indicator.hidesWhenStopped = true
         return indicator
     }()
@@ -106,15 +131,12 @@ import WordPressKit
         }
     }
 
-    /// Setup: shorter reference for style
-    ///
-    private let style = WordPressAuthenticator.shared.style
-
     /// Setup: Everything = [Insets, Backgrounds, titleColor(s), titleLabel]
     ///
     private func configureAppearance() {
         configureInsets()
         configureBackgrounds()
+        configureActivityIndicator()
         configureTitleColors()
         configureTitleLabel()
     }
@@ -125,31 +147,79 @@ import WordPressKit
         contentEdgeInsets = UIImage.DefaultRenderMetrics.contentInsets
     }
 
+    /// Setup: ActivityIndicator
+    ///
+    private func configureActivityIndicator() {
+        activityIndicator.color = activityIndicatorColor()
+        addSubview(activityIndicator)
+    }
+
     /// Setup: BackgroundImage
     ///
     private func configureBackgrounds() {
+        guard let buttonStyle = buttonStyle else {
+            legacyConfigureBackgrounds()
+            return
+        }
+
+        let normalImage = UIImage.renderBackgroundImage(fill: buttonStyle.normal.backgroundColor,
+                                                        border: buttonStyle.normal.borderColor)
+
+        let highlightedImage = UIImage.renderBackgroundImage(fill: buttonStyle.highlighted.backgroundColor,
+                                                             border: buttonStyle.highlighted.borderColor)
+
+        let disabledImage = UIImage.renderBackgroundImage(fill: buttonStyle.disabled.backgroundColor,
+                                                          border: buttonStyle.disabled.borderColor)
+
+        setBackgroundImage(normalImage, for: .normal)
+        setBackgroundImage(highlightedImage, for: .highlighted)
+        setBackgroundImage(disabledImage, for: .disabled)
+    }
+
+    /// Fallback method to configure the background colors based on the shared `WordPressAuthenticatorStyle`
+    ///
+    private func legacyConfigureBackgrounds() {
+        let style = WordPressAuthenticator.shared.style
+
         let normalImage: UIImage
         let highlightedImage: UIImage
-        let disabledImage = UIImage.renderBackgroundImage(fill: style.disabledBackgroundColor, border: style.disabledBorderColor)
+        let disabledImage = UIImage.renderBackgroundImage(fill: style.disabledBackgroundColor,
+                                                          border: style.disabledBorderColor)
 
         if isPrimary {
-            normalImage = UIImage.renderBackgroundImage(fill: style.primaryNormalBackgroundColor, border: style.primaryNormalBorderColor)
-            highlightedImage = UIImage.renderBackgroundImage(fill: style.primaryHighlightBackgroundColor, border: style.primaryHighlightBorderColor)
+            normalImage = UIImage.renderBackgroundImage(fill: style.primaryNormalBackgroundColor,
+                                                        border: style.primaryNormalBorderColor)
+            highlightedImage = UIImage.renderBackgroundImage(fill: style.primaryHighlightBackgroundColor,
+                                                             border: style.primaryHighlightBorderColor)
         } else {
-            normalImage = UIImage.renderBackgroundImage(fill: style.secondaryNormalBackgroundColor, border: style.secondaryNormalBorderColor)
-            highlightedImage = UIImage.renderBackgroundImage(fill: style.secondaryHighlightBackgroundColor, border: style.secondaryHighlightBorderColor)
+            normalImage = UIImage.renderBackgroundImage(fill: style.secondaryNormalBackgroundColor,
+                                                        border: style.secondaryNormalBorderColor)
+            highlightedImage = UIImage.renderBackgroundImage(fill: style.secondaryHighlightBackgroundColor,
+                                                             border: style.secondaryHighlightBorderColor)
         }
 
         setBackgroundImage(normalImage, for: .normal)
         setBackgroundImage(highlightedImage, for: .highlighted)
         setBackgroundImage(disabledImage, for: .disabled)
-
-        addSubview(activityIndicator)
     }
 
     /// Setup: TitleColor
     ///
     private func configureTitleColors() {
+        guard let buttonStyle = buttonStyle else {
+            legacyConfigureTitleColors()
+            return
+        }
+
+        setTitleColor(buttonStyle.normal.titleColor, for: .normal)
+        setTitleColor(buttonStyle.highlighted.titleColor, for: .highlighted)
+        setTitleColor(buttonStyle.disabled.titleColor, for: .disabled)
+    }
+
+    /// Fallback method to configure the title colors based on the shared `WordPressAuthenticatorStyle`
+    ///
+    private func legacyConfigureTitleColors() {
+        let style = WordPressAuthenticator.shared.style
         let titleColorNormal = isPrimary ? style.primaryTitleColor : style.secondaryTitleColor
 
         setTitleColor(titleColorNormal, for: .normal)
@@ -164,6 +234,18 @@ import WordPressKit
         titleLabel?.adjustsFontForContentSizeCategory = true
         titleLabel?.textAlignment = .center
     }
+
+    /// Returns the current color that should be used for the activity indicator
+    ///
+    private func activityIndicatorColor(isEnabled: Bool = true) -> UIColor {
+        guard let style = buttonStyle else {
+            let style = WordPressAuthenticator.shared.style
+
+            return isEnabled ? style.primaryTitleColor : style.disabledButtonActivityIndicatorColor
+        }
+
+        return isEnabled ? style.normal.titleColor : style.disabled.titleColor
+    }
 }
 
 // MARK: -

WordPressAuthenticator/NUX/NUXButtonViewController.swift

@@ -7,6 +7,7 @@ import WordPressKit
     @objc optional func tertiaryButtonPressed()
 }
 
+
 private struct NUXButtonConfig {
     typealias CallBackType = () -> Void
 
@@ -58,6 +59,10 @@ open class NUXButtonViewController: UIViewController {
     private var bottomButtonConfig: NUXButtonConfig?
     private var tertiaryButtonConfig: NUXButtonConfig?
 
+    public var topButtonStyle: NUXButtonStyle?
+    public var bottomButtonStyle: NUXButtonStyle?
+    public var tertiaryButtonStyle: NUXButtonStyle?
+
     private let style = WordPressAuthenticator.shared.style
 
     // MARK: - View
@@ -72,14 +77,14 @@ open class NUXButtonViewController: UIViewController {
     override open func viewWillAppear(_ animated: Bool) {
         super.viewWillAppear(animated)
 
-        configure(button: bottomButton, withConfig: bottomButtonConfig)
-        configure(button: topButton, withConfig: topButtonConfig)
-        configure(button: tertiaryButton, withConfig: tertiaryButtonConfig)
+        configure(button: bottomButton, withConfig: bottomButtonConfig, and: bottomButtonStyle)
+        configure(button: topButton, withConfig: topButtonConfig, and: topButtonStyle)
+        configure(button: tertiaryButton, withConfig: tertiaryButtonConfig, and: tertiaryButtonStyle)
 
         buttonHolder?.backgroundColor = backgroundColor
     }
 
-    private func configure(button: NUXButton?, withConfig buttonConfig: NUXButtonConfig?) {
+    private func configure(button: NUXButton?, withConfig buttonConfig: NUXButtonConfig?, and style: NUXButtonStyle?) {
         if let buttonConfig = buttonConfig, let button = button {
 
             if let attributedTitle = buttonConfig.attributedTitle {
@@ -91,10 +96,13 @@ open class NUXButtonViewController: UIViewController {
 
             button.accessibilityIdentifier = buttonConfig.accessibilityIdentifier ?? accessibilityIdentifier(for: buttonConfig.title)
             button.isPrimary = buttonConfig.isPrimary
+
             if buttonConfig.configureBodyFontForTitle == true {
                 button.customizeFont(WPStyleGuide.mediumWeightFont(forStyle: .body))
             }
 
+            button.buttonStyle = style
+
             button.isHidden = false
         } else {
             button?.isHidden = true
@@ -225,9 +233,9 @@ open class NUXButtonViewController: UIViewController {
     // MARK: - Dynamic type
 
     func didChangePreferredContentSize() {
-        configure(button: bottomButton, withConfig: bottomButtonConfig)
-        configure(button: topButton, withConfig: topButtonConfig)
-        configure(button: tertiaryButton, withConfig: tertiaryButtonConfig)
+        configure(button: bottomButton, withConfig: bottomButtonConfig, and: bottomButtonStyle)
+        configure(button: topButton, withConfig: topButtonConfig, and: topButtonStyle)
+        configure(button: tertiaryButton, withConfig: tertiaryButtonConfig, and: tertiaryButtonStyle)
     }
 }
 

WordPressAuthenticator/Signin/LoginPrologueViewController.swift

@@ -165,6 +165,8 @@ class LoginPrologueViewController: LoginViewController {
         buildUnifiedPrologueButtons(buttonViewController)
 
         buttonViewController.shadowLayoutGuide = view.safeAreaLayoutGuide
+        buttonViewController.topButtonStyle = WordPressAuthenticator.shared.style.prologuePrimaryButtonStyle
+        buttonViewController.bottomButtonStyle = WordPressAuthenticator.shared.style.prologueSecondaryButtonStyle
     }
 
     /// Displays the old UI prologue buttons.