added border width param to modals and alert

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/ModalPreview+Helpers.swift

@@ -65,6 +65,7 @@ struct ModalPreviewHelpers {
           Text("Warning Background").tag(ComponentColor.warning.background)
           Text("Danger Background").tag(ComponentColor.danger.background)
         }
+        BorderWidthPicker(selection: self.$model.borderWidth)
         Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
           .disabled(self.footer == nil)
         Picker("Outer Paddings", selection: self.$model.outerPaddings) {

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift

@@ -32,6 +32,21 @@ struct AutocapitalizationPicker: View {
   }
 }
 
+// MARK: - BorderWidthPicker
+
+struct BorderWidthPicker: View {
+  @Binding var selection: BorderWidth
+  
+  var body: some View {
+    Picker("Border Width", selection: self.$selection) {
+      Text("None").tag(BorderWidth.none)
+      Text("Small").tag(BorderWidth.small)
+      Text("Medium").tag(BorderWidth.medium)
+      Text("Large").tag(BorderWidth.large)
+    }
+  }
+}
+
 // MARK: - ComponentColorPicker
 
 struct ComponentColorPicker: View {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift

@@ -89,6 +89,7 @@ struct AlertPreview: View {
             Text("Warning Background").tag(ComponentColor.warning.background)
             Text("Danger Background").tag(ComponentColor.danger.background)
           }
+          BorderWidthPicker(selection: self.$model.borderWidth)
           Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
           Picker("Content Paddings", selection: self.$model.contentPaddings) {
             Text("12px").tag(Paddings(padding: 12))

Sources/ComponentsKit/Components/Alert/Models/AlertVM.swift

@@ -21,6 +21,11 @@ public struct AlertVM: ComponentVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the alert.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `false`.
@@ -56,6 +61,7 @@ extension AlertVM {
   var modalVM: CenterModalVM {
     return CenterModalVM {
       $0.backgroundColor = self.backgroundColor
+      $0.borderWidth = self.borderWidth
       $0.closesOnOverlayTap = self.closesOnOverlayTap
       $0.contentPaddings = self.contentPaddings
       $0.cornerRadius = self.cornerRadius

Sources/ComponentsKit/Components/Modal/Models/BottomModalVM.swift

@@ -5,6 +5,11 @@ public struct BottomModalVM: ModalVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the modal.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `true`.

Sources/ComponentsKit/Components/Modal/Models/CenterModalVM.swift

@@ -5,6 +5,11 @@ public struct CenterModalVM: ModalVM {
   /// The background color of the modal.
   public var backgroundColor: UniversalColor?
 
+  /// The border thickness of the modal.
+  ///
+  /// Defaults to `.small`.
+  public var borderWidth: BorderWidth = .small
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   ///
   /// Defaults to `true`.

Sources/ComponentsKit/Components/Modal/Models/ModalVM.swift

@@ -5,6 +5,9 @@ public protocol ModalVM: ComponentVM {
   /// The background color of the modal.
   var backgroundColor: UniversalColor? { get set }
 
+  /// The border thickness of the modal.
+  var borderWidth: BorderWidth { get set }
+
   /// A Boolean value indicating whether the modal should close when tapping on the overlay.
   var closesOnOverlayTap: Bool { get set }
 

Sources/ComponentsKit/Components/Modal/SwiftUI/ModalContent.swift

@@ -60,9 +60,11 @@ struct ModalContent<VM: ModalVM, Header: View, Body: View, Footer: View>: View {
     .frame(maxWidth: self.model.size.maxWidth, alignment: .leading)
     .background(self.model.preferredBackgroundColor.color)
     .background(UniversalColor.background.color)
-    .clipShape(RoundedRectangle(
-      cornerRadius: self.model.cornerRadius.value
-    ))
+    .clipShape(RoundedRectangle(cornerRadius: self.model.cornerRadius.value))
+    .overlay(
+      RoundedRectangle(cornerRadius: self.model.cornerRadius.value)
+        .stroke(UniversalColor.divider.color, lineWidth: self.model.borderWidth.value)
+    )
     .padding(self.model.outerPaddings.edgeInsets)
   }
 

Sources/ComponentsKit/Components/Modal/UIKit/UKModalController.swift

@@ -212,6 +212,8 @@ extension UKModalController {
       view.backgroundColor = model.preferredBackgroundColor.uiColor
       view.layer.cornerRadius = model.cornerRadius.value
       view.clipsToBounds = true
+      view.layer.borderColor = UniversalColor.divider.cgColor
+      view.layer.borderWidth = model.borderWidth.value
     }
     static func bodyWrapper(_ scrollView: UIScrollView) {
       scrollView.delaysContentTouches = false

Sources/ComponentsKit/Shared/Types/BorderWidth.swift

@@ -2,6 +2,8 @@ import Foundation
 
 /// An enumeration that defines border thickness for components.
 public enum BorderWidth: Hashable {
+  /// No border.
+  case none
   /// A small border width.
   case small
   /// A medium border width.
@@ -14,6 +16,8 @@ extension BorderWidth {
   /// The numeric value of the border width as a `CGFloat`.
   public var value: CGFloat {
     switch self {
+    case .none:
+      return 0.0
     case .small:
       return ComponentsKitConfig.shared.layout.borderWidth.small
     case .medium: