add caption and titleFont for input fields

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift

@@ -34,6 +34,15 @@ struct InputFieldPreview: View {
       Form {
         AutocapitalizationPicker(selection: self.$model.autocapitalization)
         Toggle("Autocorrection Enabled", isOn: self.$model.isAutocorrectionEnabled)
+        Toggle("Caption", isOn: .init(
+          get: {
+            return self.model.caption != nil
+          },
+          set: { newValue in
+            self.model.caption = newValue ? Self.caption : nil
+          }
+        ))
+        CaptionFontPicker(title: "Caption Font", selection: self.$model.captionFont)
         ComponentOptionalColorPicker(selection: self.$model.color)
         ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
@@ -69,6 +78,7 @@ struct InputFieldPreview: View {
             self.model.title = newValue ? Self.title : nil
           }
         ))
+        BodyFontPicker(title: "Title Font", selection: self.$model.titleFont)
         Picker("Title Position", selection: self.$model.titlePosition) {
           Text("Inside").tag(InputFieldVM.TitlePosition.inside)
           Text("Outside").tag(InputFieldVM.TitlePosition.outside)
@@ -87,12 +97,14 @@ struct InputFieldPreview: View {
     }
   }
 
-  private static let title = "Title"
-  private static let placeholder = "Placeholder"
+  private static let title = "Email"
+  private static let placeholder = "Enter your email"
+  private static let caption = "We'll send you a verification code"
   private static var initialModel: InputFieldVM {
     return .init {
       $0.title = Self.title
       $0.placeholder = Self.placeholder
+      $0.caption = Self.caption
     }
   }
 }

Sources/ComponentsKit/Components/InputField/Models/InputFieldVM.swift

@@ -8,6 +8,10 @@ public struct InputFieldVM: ComponentVM {
   /// Defaults to `.sentences`, which capitalizes the first letter of each sentence.
   public var autocapitalization: TextAutocapitalization = .sentences
 
+  public var caption: String?
+
+  public var captionFont: UniversalFont?
+
   /// The color of the input field.
   public var color: ComponentColor?
 
@@ -69,6 +73,8 @@ public struct InputFieldVM: ComponentVM {
   /// The title displayed on the input field.
   public var title: String?
 
+  public var titleFont: UniversalFont?
+
   public var titlePosition: TitlePosition = .inside
 
   /// Initializes a new instance of `InputFieldVM` with default values.
@@ -92,6 +98,34 @@ extension InputFieldVM {
       return .lgBody
     }
   }
+  var preferredTitleFont: UniversalFont {
+    if let titleFont {
+      return titleFont
+    }
+
+    switch self.size {
+    case .small:
+      return .smBody
+    case .medium:
+      return .mdBody
+    case .large:
+      return .lgBody
+    }
+  }
+  var preferredCaptionFont: UniversalFont {
+    if let captionFont {
+      return captionFont
+    }
+
+    switch self.size {
+    case .small:
+      return .smCaption
+    case .medium:
+      return .mdCaption
+    case .large:
+      return .lgCaption
+    }
+  }
   var height: CGFloat {
     return switch self.size {
     case .small: 40
@@ -124,8 +158,7 @@ extension InputFieldVM {
     }
   }
   var foregroundColor: UniversalColor {
-    let color = self.color?.main ?? .foreground
-    return color.enabled(self.isEnabled)
+    return (self.color?.main ?? .foreground).enabled(self.isEnabled)
   }
   var placeholderColor: UniversalColor {
     if let color {
@@ -134,6 +167,9 @@ extension InputFieldVM {
       return .secondaryForeground.enabled(self.isEnabled)
     }
   }
+  var captionColor: UniversalColor {
+    return (self.color?.main ?? .secondaryForeground).enabled(self.isEnabled)
+  }
   var borderWidth: CGFloat {
     switch self.style {
     case .light:
@@ -178,7 +214,7 @@ extension InputFieldVM {
     attributedString.append(NSAttributedString(
       string: title,
       attributes: [
-        .font: self.preferredFont.uiFont,
+        .font: self.preferredTitleFont.uiFont,
         .foregroundColor: self.foregroundColor.uiColor
       ]
     ))
@@ -192,7 +228,7 @@ extension InputFieldVM {
       attributedString.append(NSAttributedString(
         string: "*",
         attributes: [
-          .font: self.preferredFont.uiFont,
+          .font: self.preferredTitleFont.uiFont,
           .foregroundColor: UniversalColor.danger.uiColor
         ]
       ))

Sources/ComponentsKit/Components/InputField/SUInputField.swift

@@ -104,6 +104,12 @@ public struct SUInputField<FocusValue: Hashable>: View {
           lineWidth: self.model.borderWidth
         )
       )
+
+      if let caption = self.model.caption, caption.isNotEmpty {
+        Text(caption)
+          .font(self.model.preferredCaptionFont.font)
+          .foregroundStyle(self.model.captionColor.color)
+      }
     }
   }
 }

Sources/ComponentsKit/Components/InputField/UKInputField.swift

@@ -34,6 +34,8 @@ open class UKInputField: UIView, UKComponent {
   public var titleLabel = UILabel()
   /// An underlying text field from the standard library.
   public var textField = UITextField()
+  /// A label that displays the caption from the model.
+  public var captionLabel = UILabel()
   /// A view that contains `horizontalStackView` and `titleLabel` whet it is outside.
   public var textFieldContainer = UIView()
   /// A stack view that contains `textField` and `titleLabel` whet it is inside.
@@ -94,6 +96,7 @@ open class UKInputField: UIView, UKComponent {
       self.verticalStackView.addArrangedSubview(self.titleLabel)
     }
     self.verticalStackView.addArrangedSubview(self.textFieldContainer)
+    self.verticalStackView.addArrangedSubview(self.captionLabel)
     self.horizontalStackView.addArrangedSubview(self.textField)
     self.textFieldContainer.addSubview(self.horizontalStackView)
 
@@ -123,6 +126,7 @@ open class UKInputField: UIView, UKComponent {
     Self.Style.verticalStackView(self.verticalStackView, model: self.model)
     Self.Style.textField(self.textField, model: self.model)
     Self.Style.titleLabel(self.titleLabel, model: self.model)
+    Self.Style.captionLabel(self.captionLabel, model: self.model)
   }
 
   // MARK: Layout
@@ -245,6 +249,15 @@ extension UKInputField {
       textField.autocorrectionType = model.autocorrectionType
       textField.autocapitalizationType = model.autocapitalization.textAutocapitalizationType
     }
+    static func captionLabel(
+      _ label: UILabel,
+      model: Model
+    ) {
+      label.text = model.caption
+      label.isVisible = model.caption.isNotNilAndEmpty
+      label.textColor = model.captionColor.uiColor
+      label.font = model.preferredCaptionFont.uiFont
+    }
     static func horizontalStackView(
       _ stackView: UIStackView,
       model: Model