add borderColor param to CardVM

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -16,13 +16,22 @@ struct CardPreview: View {
       }
       Form {
         Picker("Background Color", selection: self.$model.backgroundColor) {
-          Text("Default").tag(Optional<UniversalColor>.none)
+          Text("Background").tag(UniversalColor.background)
           Text("Secondary Background").tag(UniversalColor.secondaryBackground)
           Text("Accent Background").tag(UniversalColor.accentBackground)
           Text("Success Background").tag(UniversalColor.successBackground)
           Text("Warning Background").tag(UniversalColor.warningBackground)
           Text("Danger Background").tag(UniversalColor.dangerBackground)
         }
+        Picker("Border Color", selection: self.$model.borderColor) {
+          Text("Divider").tag(UniversalColor.divider)
+          Text("Primary").tag(UniversalColor.primary)
+          Text("Accent").tag(UniversalColor.accent)
+          Text("Success").tag(UniversalColor.success)
+          Text("Warning").tag(UniversalColor.warning)
+          Text("Danger").tag(UniversalColor.danger)
+          Text("Custom").tag(UniversalColor.universal(.uiColor(.systemPurple)))
+        }
         BorderWidthPicker(selection: self.$model.borderWidth)
         Picker("Content Paddings", selection: self.$model.contentPaddings) {
           Text("12px").tag(Paddings(padding: 12))

Sources/ComponentsKit/Components/Card/Models/CardVM.swift

@@ -3,7 +3,10 @@ import Foundation
 /// A model that defines the appearance properties for a card component.
 public struct CardVM: ComponentVM {
   /// The background color of the card.
-  public var backgroundColor: UniversalColor?
+  public var backgroundColor: UniversalColor = .background
+
+  /// The border color of the card.
+  public var borderColor: UniversalColor = .divider
 
   /// The border thickness of the card.
   ///
@@ -28,11 +31,3 @@ public struct CardVM: ComponentVM {
   /// Initializes a new instance of `CardVM` with default values.
   public init() {}
 }
-
-// MARK: - Helpers
-
-extension CardVM {
-  var preferredBackgroundColor: UniversalColor {
-    return self.backgroundColor ?? .background
-  }
-}

Sources/ComponentsKit/Components/Card/SUCard.swift

@@ -39,11 +39,14 @@ public struct SUCard<Content: View>: View {
   public var body: some View {
     self.content()
       .padding(self.model.contentPaddings.edgeInsets)
-      .background(self.model.preferredBackgroundColor.color)
+      .background(self.model.backgroundColor.color)
       .cornerRadius(self.model.cornerRadius.value)
       .overlay(
         RoundedRectangle(cornerRadius: self.model.cornerRadius.value)
-          .stroke(UniversalColor.divider.color, lineWidth: self.model.borderWidth.value)
+          .stroke(
+            self.model.borderColor.color,
+            lineWidth: self.model.borderWidth.value
+          )
       )
       .shadow(self.model.shadow)
   }

Sources/ComponentsKit/Components/Card/UKCard.swift

@@ -130,10 +130,10 @@ open class UKCard<Content: UIView>: UIView, UKComponent {
 extension UKCard {
   fileprivate enum Style {
     static func mainView(_ view: UIView, model: Model) {
-      view.backgroundColor = model.preferredBackgroundColor.uiColor
+      view.backgroundColor = model.backgroundColor.uiColor
       view.layer.cornerRadius = model.cornerRadius.value
       view.layer.borderWidth = model.borderWidth.value
-      view.layer.borderColor = UniversalColor.divider.cgColor
+      view.layer.borderColor = model.borderColor.cgColor
       view.shadow(model.shadow)
     }
   }