Refactor FXIOS-8979 [Onboarding Customization] Fix button layout for …

…null second button (mozilla-mobile#19825)

* Update rounded Button

* Consolidate & simplify view

* Minor nits

BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButton.swift

@@ -28,23 +28,22 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable {
 
         configuration = UIButton.Configuration.filled()
         titleLabel?.adjustsFontForContentSizeCategory = true
+        isUserInteractionEnabled = true
+        isAccessibilityElement = true
     }
 
     required init?(coder aDecoder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
 
     override public func updateConfiguration() {
-        guard var updatedConfiguration = configuration else {
-            return
-        }
+        guard var updatedConfiguration = configuration else { return }
 
         updatedConfiguration.background.backgroundColor = switch state {
-        case [.highlighted]:
-            highlightedBackgroundColor
-        default:
-            normalBackgroundColor
+        case [.highlighted]: highlightedBackgroundColor
+        default: normalBackgroundColor
         }
+
         updatedConfiguration.baseForegroundColor = foregroundColor
 
         let transformer = UIConfigurationTextAttributesTransformer { [weak foregroundColor] incoming in
@@ -60,9 +59,7 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable {
     }
 
     public func configure(viewModel: SecondaryRoundedButtonViewModel) {
-        guard var updatedConfiguration = configuration else {
-            return
-        }
+        guard var updatedConfiguration = configuration else { return }
 
         updatedConfiguration.contentInsets = UX.contentInsets
         updatedConfiguration.title = viewModel.title
@@ -79,13 +76,38 @@ public class SecondaryRoundedButton: ResizableButton, ThemeApplicable {
         configuration = updatedConfiguration
     }
 
-    // MARK: ThemeApplicable
+    /// To keep alignment && spacing consistent between the buttons on pages,
+    /// we must make the secondary button invisible if there is no
+    /// secondary button in the configuration.
+    public func makeButtonInvisible() {
+        guard var updatedConfiguration = configuration else { return }
 
-    public func applyTheme(theme: Theme) {
-        highlightedBackgroundColor = theme.colors.actionSecondaryHover
-        normalBackgroundColor = theme.colors.actionSecondary
-        foregroundColor = theme.colors.textPrimary
+        isUserInteractionEnabled = false
+        isAccessibilityElement = false
+        normalBackgroundColor = .clear
+        highlightedBackgroundColor = .clear
+        foregroundColor = .clear
+
+        // In order to have a proper height, the button needs some text. This
+        // is invisible, but something sensible is used as a placeholder.
+        updatedConfiguration.title = "Skip"
+
+        configuration = updatedConfiguration
 
         setNeedsUpdateConfiguration()
     }
+
+    // MARK: ThemeApplicable
+
+    public func applyTheme(theme: Theme) {
+        if configuration?.title == nil || !isUserInteractionEnabled {
+            makeButtonInvisible()
+        } else {
+            highlightedBackgroundColor = theme.colors.actionSecondaryHover
+            normalBackgroundColor = theme.colors.actionSecondary
+            foregroundColor = theme.colors.textPrimary
+
+            setNeedsUpdateConfiguration()
+        }
+    }
 }

BrowserKit/Sources/ComponentLibrary/Buttons/SecondaryRoundedButtonViewModel.swift

@@ -6,10 +6,10 @@ import Foundation
 
 /// The view model used to configure a `SecondaryRoundedButton`
 public struct SecondaryRoundedButtonViewModel {
-    public let title: String
+    public let title: String?
     public let a11yIdentifier: String
 
-    public init(title: String, a11yIdentifier: String) {
+    public init(title: String?, a11yIdentifier: String) {
         self.title = title
         self.a11yIdentifier = a11yIdentifier
     }

firefox-ios/Client/Frontend/Onboarding/Protocols/OnboardingCardViewController.swift

@@ -4,17 +4,105 @@
 
 import UIKit
 import Common
+import ComponentLibrary
 
 class OnboardingCardViewController: UIViewController, Themeable {
+    // MARK: - Common UX Elements
+    struct SharedUX {
+        static let topStackViewSpacing: CGFloat = 24
+        static let titleFontSize: CGFloat = UIDevice.current.userInterfaceIdiom == .pad ? 28 : 22
+        static let descriptionFontSize: CGFloat = 17
+
+        // small device
+        static let smallTitleFontSize: CGFloat = 20
+        static let smallStackViewSpacing: CGFloat = 8
+        static let smallScrollViewVerticalPadding: CGFloat = 20
+    }
+
     let windowUUID: WindowUUID
     var currentWindowUUID: UUID? { windowUUID }
+
+    // Adjusting layout for devices with height lower than 667
+    // including now iPhone SE 2nd generation and iPad
+    var shouldUseSmallDeviceLayout: Bool {
+        return view.frame.height <= 667 || UIDevice.current.userInterfaceIdiom == .pad
+    }
+
+    // Adjusting layout for tiny devices (iPhone SE 1st generation)
+    var shouldUseTinyDeviceLayout: Bool {
+        return UIDevice().isTinyFormFactor
+    }
+
+    // MARK: - Common UI Elements
+    lazy var scrollView: UIScrollView = .build { view in
+        view.backgroundColor = .clear
+    }
+
+    lazy var containerView: UIView = .build { view in
+        view.backgroundColor = .clear
+    }
+
+    lazy var contentContainerView: UIView = .build { stack in
+        stack.backgroundColor = .clear
+    }
+
+    lazy var topStackView: UIStackView = .build { stack in
+        stack.backgroundColor = .clear
+        stack.alignment = .center
+        stack.distribution = .fill
+        stack.spacing = SharedUX.topStackViewSpacing
+        stack.axis = .vertical
+    }
+
+    lazy var contentStackView: UIStackView = .build { stack in
+        stack.backgroundColor = .clear
+        stack.alignment = .center
+        stack.distribution = .equalSpacing
+        stack.axis = .vertical
+    }
+    lazy var imageView: UIImageView = .build { imageView in
+        imageView.contentMode = .scaleAspectFit
+        imageView.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)ImageView"
+    }
+
+    lazy var titleLabel: UILabel = .build { label in
+        label.numberOfLines = 0
+        label.textAlignment = .center
+        let fontSize = self.shouldUseSmallDeviceLayout ? SharedUX.smallTitleFontSize : SharedUX.titleFontSize
+        label.font = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .largeTitle,
+                                                                size: fontSize)
+        label.adjustsFontForContentSizeCategory = true
+        label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)TitleLabel"
+        label.accessibilityTraits.insert(.header)
+    }
+
+    lazy var descriptionLabel: UILabel = .build { label in
+        label.numberOfLines = 0
+        label.textAlignment = .center
+        label.font = DefaultDynamicFontHelper.preferredFont(
+            withTextStyle: .body,
+            size: SharedUX.descriptionFontSize
+        )
+        label.adjustsFontForContentSizeCategory = true
+        label.accessibilityIdentifier = "\(self.viewModel.a11yIdRoot)DescriptionLabel"
+    }
+
+    lazy var primaryButton: PrimaryRoundedButton = .build { button in
+        button.addTarget(self, action: #selector(self.primaryAction), for: .touchUpInside)
+    }
+
+    lazy var secondaryButton: SecondaryRoundedButton = .build { button in
+        button.addTarget(self, action: #selector(self.secondaryAction), for: .touchUpInside)
+    }
+
     // MARK: - Themeable
     var themeManager: Common.ThemeManager
     var themeObserver: NSObjectProtocol?
     var notificationCenter: Common.NotificationProtocol
 
     var viewModel: OnboardingCardInfoModelProtocol
 
+    // MARK: - Initializers
     init(
         viewModel: OnboardingCardInfoModelProtocol,
         windowUUID: WindowUUID,
@@ -33,5 +121,44 @@ class OnboardingCardViewController: UIViewController, Themeable {
         fatalError("init(coder:) has not been implemented")
     }
 
+    func currentTheme() -> Theme {
+        return themeManager.currentTheme(for: windowUUID)
+    }
+
+    func updateLayout() {
+        titleLabel.text = viewModel.title
+        descriptionLabel.text = viewModel.body
+        imageView.image = viewModel.image
+
+        setupPrimaryButton()
+        setupSecondaryButton()
+    }
+
+    @objc
+    func primaryAction() { }
+
+    @objc
+    func secondaryAction() { }
+
+    func setupPrimaryButton() {
+        let buttonViewModel = PrimaryRoundedButtonViewModel(
+            title: viewModel.buttons.primary.title,
+            a11yIdentifier: "\(self.viewModel.a11yIdRoot)PrimaryButton"
+        )
+
+        primaryButton.configure(viewModel: buttonViewModel)
+        primaryButton.applyTheme(theme: themeManager.currentTheme(for: windowUUID))
+    }
+
+    func setupSecondaryButton() {
+        let buttonViewModel = SecondaryRoundedButtonViewModel(
+            title: viewModel.buttons.secondary?.title,
+            a11yIdentifier: "\(self.viewModel.a11yIdRoot)SecondaryButton"
+        )
+
+        secondaryButton.configure(viewModel: buttonViewModel)
+        secondaryButton.applyTheme(theme: currentTheme())
+    }
+
     func applyTheme() { }
 }