fix(POM-215): UI components size (#115)

According to Apple's HIG minimal touch area dimension should be
44pt, this fix addresses that for text fields, buttons, radio buttons
etc.

Example/Example/Sources/UI/Modules/AlternativePayment/Methods/Router/AlternativePaymentMethodsRouter.swift

@@ -29,6 +29,7 @@ final class AlternativePaymentMethodsRouter: RouterType {
  }
  .with(configuration: configuration)
  .build()
+ viewController.isModalInPresentation = true
  self.viewController?.present(viewController, animated: true)
  case let .alternativePayment(request):
  let viewController = POAlternativePaymentMethodViewControllerBuilder()

Sources/ProcessOut/Sources/UI/Modules/NativeAlternativePaymentMethod/View/Buttons/NativeAlternativePaymentMethodButtonsView.swift

@@ -36,17 +36,19 @@ final class NativeAlternativePaymentMethodButtonsView: UIView {
  guard actions.primary != nil || actions.secondary != nil else {
  return 0
  }
- let buttonsHeight: CGFloat
+ let numberOfActions: Int
  switch style.axis {
  case .horizontal:
- buttonsHeight = Constants.buttonHeight
+ numberOfActions = 1
  case .vertical:
- let numberOfActions = [actions.primary, actions.secondary].compactMap { $0 }.count
- return CGFloat(numberOfActions) * Constants.buttonHeight + Constants.spacing * CGFloat(numberOfActions - 1)
+ numberOfActions = [actions.primary, actions.secondary].compactMap { $0 }.count
  @unknown default:
  assertionFailure("Unexpected axis.")
- return 0
+ numberOfActions = 1
  }
+ let buttonsHeight =
+ Constants.buttonHeight * CGFloat(numberOfActions) +
+ Constants.spacing * CGFloat(numberOfActions - 1)
  return Constants.verticalInset * 2 + buttonsHeight
  }
 
@@ -59,7 +61,7 @@ final class NativeAlternativePaymentMethodButtonsView: UIView {
  private enum Constants {
  static let spacing: CGFloat = 16
  static let verticalInset: CGFloat = 16
- static let buttonHeight: CGFloat = 40
+ static let buttonHeight: CGFloat = 44
  static let separatorHeight: CGFloat = 1
  }
 

Sources/ProcessOut/Sources/UI/Modules/NativeAlternativePaymentMethod/View/NativeAlternativePaymentMethodViewController.swift

@@ -199,6 +199,15 @@ final class NativeAlternativePaymentMethodViewController<ViewModel: NativeAltern
  return sectionInset
  }
 
+ func collectionView(
+ _ collectionView: UICollectionView, layout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int
+ ) -> CGFloat {
+ if let identifier = collectionViewDataSource.sectionIdentifier(for: section), identifier.isTight {
+ return Constants.tightLineSpacing
+ }
+ return Constants.lineSpacing
+ }
+
  // MARK: - Scroll View Delegate
 
  func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
@@ -259,12 +268,7 @@ final class NativeAlternativePaymentMethodViewController<ViewModel: NativeAltern
  return collectionView
  }()
 
- private lazy var collectionViewLayout: UICollectionViewLayout = {
- let layout = NativeAlternativePaymentMethodCollectionLayout()
- layout.minimumLineSpacing = Constants.lineSpacing
- return layout
- }()
-
+ private lazy var collectionViewLayout = NativeAlternativePaymentMethodCollectionLayout()
  private lazy var collectionReusableViewSizeProvider = CollectionReusableViewSizeProvider()
 
  private lazy var collectionViewDataSource: CollectionViewDiffableDataSource<SectionIdentifier, ItemIdentifier> = {
@@ -513,9 +517,10 @@ final class NativeAlternativePaymentMethodViewController<ViewModel: NativeAltern
 private enum Constants {
  static let animationDuration: TimeInterval = 0.25
  static let lineSpacing: CGFloat = 8
+ static let tightLineSpacing: CGFloat = 4
  static let sectionInset = UIEdgeInsets(top: 8, left: 0, bottom: 32, right: 0)
  static let contentInset = UIEdgeInsets(top: 24, left: 24, bottom: 24, right: 24)
- static let inputHeight: CGFloat = 40
+ static let inputHeight: CGFloat = 44
  static let loaderHeight: CGFloat = 256
 }
 

Sources/ProcessOut/Sources/UI/Modules/NativeAlternativePaymentMethod/ViewModel/DefaultNativeAlternativePaymentMethodViewModel.swift

@@ -7,7 +7,8 @@
 
 import Foundation
 
-// swiftlint:disable:next type_body_length
+// swiftlint:disable type_body_length file_length
+
 final class DefaultNativeAlternativePaymentMethodViewModel:
  BaseViewModel<NativeAlternativePaymentMethodViewModelState>, NativeAlternativePaymentMethodViewModel {
 
@@ -102,7 +103,7 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
 
  private func configureWithStartingState() {
  let sections = [
- State.Section(id: .init(id: nil, header: nil), items: [.loader])
+ State.Section(id: .init(id: nil, header: nil, isTight: false), items: [.loader])
  ]
  let startedState = State.Started(
  sections: sections,
@@ -113,12 +114,13 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
  state = .started(startedState)
  }
 
+ // swiftlint:disable:next function_body_length
  private func convertToState(startedState: InteractorState.Started, isSubmitting: Bool) -> State {
  let titleItem = State.TitleItem(
  text: configuration.title ?? Text.title(startedState.gatewayDisplayName)
  )
  var sections = [
- State.Section(id: .init(id: nil, header: nil), items: [.title(titleItem)])
+ State.Section(id: .init(id: nil, header: nil, isTight: false), items: [.title(titleItem)])
  ]
  let shouldCenterCodeInput = startedState.parameters.count == 1
  for (offset, parameter) in startedState.parameters.enumerated() {
@@ -137,10 +139,17 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
  if let message = value.recentErrorMessage {
  items.append(.error(State.ErrorItem(description: message, isCentered: isCentered)))
  }
+ let isTight = items.contains { item in
+ if case .radio = item {
+ return true
+ }
+ return false
+ }
  let section = State.Section(
  id: .init(
  id: parameter.key,
- header: .init(title: parameter.displayName, isCentered: isCentered)
+ header: .init(title: parameter.displayName, isCentered: isCentered),
+ isTight: isTight
  ),
  items: items
  )
@@ -180,7 +189,7 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
  )
  let startedState = State.Started(
  sections: [
- .init(id: .init(id: nil, header: nil), items: [item])
+ .init(id: .init(id: nil, header: nil, isTight: false), items: [item])
  ],
  actions: .init(primary: nil, secondary: secondaryAction),
  isEditingAllowed: false,
@@ -208,7 +217,7 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
  )
  let startedState = State.Started(
  sections: [
- .init(id: .init(id: nil, header: nil), items: [.submitted(submittedItem)])
+ .init(id: .init(id: nil, header: nil, isTight: false), items: [.submitted(submittedItem)])
  ],
  actions: .init(primary: nil, secondary: nil),
  isEditingAllowed: false,
@@ -393,3 +402,5 @@ final class DefaultNativeAlternativePaymentMethodViewModel:
  cancelActionTimers = [:]
  }
 }
+
+// swiftlint:enable type_body_length file_length

Sources/ProcessOut/Sources/UI/Modules/NativeAlternativePaymentMethod/ViewModel/NativeAlternativePaymentMethodViewModelState.swift

@@ -154,6 +154,9 @@ enum NativeAlternativePaymentMethodViewModelState {
 
  /// Section header if any.
  let header: SectionHeader?
+
+ /// Boolean value indicating whether section items should be laid out tightly.
+ let isTight: Bool
  }
 
  struct Section {

Sources/ProcessOut/Sources/UI/Shared/DesignSystem/Views/Button/Button.swift

@@ -105,7 +105,7 @@ final class Button: UIControl {
  // MARK: - Private Nested Types
 
  private enum Constants {
- static let height: CGFloat = 40
+ static let height: CGFloat = 44
  static let minimumEdgesSpacing: CGFloat = 4
  static let maximumFontSize: CGFloat = 22
  static let animationDuration: TimeInterval = 0.25

Sources/ProcessOut/Sources/UI/Shared/DesignSystem/Views/CodeTextField/CodeTextField.swift

@@ -311,7 +311,7 @@ final class CodeTextField: UIControl, UITextInput {
  // MARK: - Private Nested Types
 
  private enum Constants {
- static let height: CGFloat = 40
+ static let height: CGFloat = 44
  static let spacing: CGFloat = 8
  static let minimumSpacing: CGFloat = 6
  }

Sources/ProcessOut/Sources/UI/Shared/DesignSystem/Views/Picker/Picker.swift

@@ -58,7 +58,7 @@ final class Picker: UIControl {
  // MARK: - Private Nested Types
 
  private enum Constants {
- static let height: CGFloat = 40
+ static let height: CGFloat = 44
  static let horizontalInset: CGFloat = 12
  static let maximumFontSize: CGFloat = 22
  static let animationDuration: TimeInterval = 0.25

Sources/ProcessOut/Sources/UI/Shared/DesignSystem/Views/RadioButton/RadioButton.swift

@@ -34,7 +34,7 @@ final class RadioButton: UIControl {
  // MARK: - Private Nested Types
 
  private enum Constants {
- static let minimumHeight: CGFloat = 40
+ static let minimumHeight: CGFloat = 44
  static let knobSize: CGFloat = 18
  static let animationDuration: TimeInterval = 0.25
  static let horizontalSpacing: CGFloat = 8

Sources/ProcessOut/Sources/UI/Shared/DesignSystem/Views/TextField/TextFieldContainerView.swift

@@ -52,7 +52,7 @@ final class TextFieldContainerView: UIView {
  private enum Constants {
  static let animationDuration: TimeInterval = 0.35
  static let maximumFontSize: CGFloat = 22
- static let height: CGFloat = 40
+ static let height: CGFloat = 44
  static let horizontalInset: CGFloat = 12
  }