add spacing param to the model and rename unitsPosition to unitsStyle

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CountdownPreview.swift

@@ -13,16 +13,6 @@ struct CountdownPreview: View {
       Form {
         ComponentOptionalColorPicker(selection: self.$model.color)
         FontPicker(selection: self.$model.font)
-        SizePicker(selection: self.$model.size)
-        Picker("Units Position", selection: self.$model.unitsPosition) {
-          Text("None").tag(CountdownVM.UnitsStyle.hidden)
-          Text("Bottom").tag(CountdownVM.UnitsStyle.bottom)
-          Text("Trailing").tag(CountdownVM.UnitsStyle.trailing)
-        }
-        Picker("Style", selection: self.$model.style) {
-          Text("Plain").tag(CountdownVM.Style.plain)
-          Text("Light").tag(CountdownVM.Style.light)
-        }
         Picker("Locale", selection: self.$model.locale) {
           Text("Current").tag(Locale.current)
           Text("EN").tag(Locale(identifier: "en"))
@@ -36,6 +26,16 @@ struct CountdownPreview: View {
           Text("HI").tag(Locale(identifier: "hi"))
           Text("PT").tag(Locale(identifier: "pt"))
         }
+        SizePicker(selection: self.$model.size)
+        Picker("Style", selection: self.$model.style) {
+          Text("Plain").tag(CountdownVM.Style.plain)
+          Text("Light").tag(CountdownVM.Style.light)
+        }
+        Picker("Units Style", selection: self.$model.unitsStyle) {
+          Text("None").tag(CountdownVM.UnitsStyle.hidden)
+          Text("Bottom").tag(CountdownVM.UnitsStyle.bottom)
+          Text("Trailing").tag(CountdownVM.UnitsStyle.trailing)
+        }
         DatePicker("Until Date", selection: self.$model.until, in: Date()..., displayedComponents: [.date, .hourAndMinute])
           .datePickerStyle(.compact)
       }

Sources/ComponentsKit/Countdown/Models/CountdownVM.swift

@@ -18,10 +18,10 @@ public struct CountdownVM: ComponentVM {
   /// Defaults to `.light`.
   public var style: Style = .light
 
-  /// The position of the units relative to the countdown numbers.
+  /// The visual style of the units.
   ///
   /// Defaults to `.bottom`.
-  public var unitsPosition: UnitsStyle = .bottom
+  public var unitsStyle: UnitsStyle = .bottom
 
   /// The target date until which the countdown runs.
   public var until: Date = Date().addingTimeInterval(3600 * 85)
@@ -114,6 +114,14 @@ extension CountdownVM {
   var horizontalPadding: CGFloat {
     return 4
   }
+  var spacing: CGFloat {
+    switch self.style {
+    case .light:
+      return 10
+    case .plain:
+      return 6
+    }
+  }
 }
 
 extension CountdownVM {
@@ -160,7 +168,7 @@ extension CountdownVM {
     let formattedValue = String(format: "%02d", value)
     let result = NSMutableAttributedString(string: formattedValue, attributes: mainTextAttributes)
 
-    switch self.unitsPosition {
+    switch self.unitsStyle {
     case .hidden:
       return result
 
@@ -189,7 +197,7 @@ extension CountdownVM {
 
 extension CountdownVM {
   func shouldRecalculateWidth(_ oldModel: Self) -> Bool {
-    return self.unitsPosition != oldModel.unitsPosition
+    return self.unitsStyle != oldModel.unitsStyle
     || self.style != oldModel.style
     || self.preferredFont != oldModel.preferredFont
     || self.size != oldModel.size

Sources/ComponentsKit/Countdown/SUCountdown.swift

@@ -26,8 +26,8 @@ public struct SUCountdown: View {
   // MARK: - Body
 
   public var body: some View {
-    HStack(alignment: .top, spacing: self.model.style == .light ? 10 : 6) {
-      switch (self.model.style, self.model.unitsPosition) {
+    HStack(alignment: .top, spacing: self.model.spacing) {
+      switch (self.model.style, self.model.unitsStyle) {
       case (.plain, .bottom):
         self.styledTime(value: self.manager.days, unit: .days)
         colonView