Merge pull request #40 from componentskit/ukcard

UKCard

Author: mikhailChelbaev

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

@@ -82,12 +82,8 @@ struct ModalPreviewHelpers {
           Text("16px").tag(Paddings(padding: 16))
           Text("20px").tag(Paddings(padding: 20))
         }
-        Picker("Corner Radius", selection: self.$model.cornerRadius) {
-          Text("None").tag(ModalRadius.none)
-          Text("Small").tag(ModalRadius.small)
-          Text("Medium").tag(ModalRadius.medium)
-          Text("Large").tag(ModalRadius.large)
-          Text("Custom 30px").tag(ModalRadius.custom(30))
+        ContainerRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom 30px").tag(ContainerRadius.custom(30))
         }
         Picker("Overlay Style", selection: self.$model.overlayStyle) {
           Text("Blurred").tag(ModalOverlayStyle.blurred)

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

@@ -75,7 +75,7 @@ struct ComponentOptionalColorPicker: View {
 
 // MARK: - CornerRadiusPicker
 
-struct CornerRadiusPicker<Custom: View>: View {
+struct ComponentRadiusPicker<Custom: View>: View {
   @Binding var selection: ComponentRadius
   @ViewBuilder var custom: () -> Custom
 
@@ -91,6 +91,21 @@ struct CornerRadiusPicker<Custom: View>: View {
   }
 }
 
+struct ContainerRadiusPicker<Custom: View>: View {
+  @Binding var selection: ContainerRadius
+  @ViewBuilder var custom: () -> Custom
+
+  var body: some View {
+    Picker("Corner Radius", selection: self.$selection) {
+      Text("None").tag(ContainerRadius.none)
+      Text("Small").tag(ContainerRadius.small)
+      Text("Medium").tag(ContainerRadius.medium)
+      Text("Large").tag(ContainerRadius.large)
+      self.custom()
+    }
+  }
+}
+
 // MARK: - FontPickers
 
 struct BodyFontPicker: View {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -19,7 +19,7 @@ struct ButtonPreview: View {
       Form {
         AnimationScalePicker(selection: self.$model.animationScale)
         ComponentOptionalColorPicker(selection: self.$model.color)
-        CornerRadiusPicker(selection: self.$model.cornerRadius) {
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         ButtonFontPicker(selection: self.$model.font)

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

@@ -0,0 +1,67 @@
+import ComponentsKit
+import SwiftUI
+import UIKit
+
+struct CardPreview: View {
+  @State private var model = CardVM()
+
+  var body: some View {
+    VStack {
+      PreviewWrapper(title: "UIKit") {
+        UKCard(model: self.model, content: cardContent)
+          .preview
+      }
+      Form {
+        Picker("Background Color", selection: self.$model.backgroundColor) {
+          Text("Default").tag(Optional<UniversalColor>.none)
+          Text("Secondary Background").tag(UniversalColor.secondaryBackground)
+          Text("Accent Background").tag(ComponentColor.accent.background)
+          Text("Success Background").tag(ComponentColor.success.background)
+          Text("Warning Background").tag(ComponentColor.warning.background)
+          Text("Danger Background").tag(ComponentColor.danger.background)
+        }
+        Picker("Content Paddings", selection: self.$model.contentPaddings) {
+          Text("12px").tag(Paddings(padding: 12))
+          Text("16px").tag(Paddings(padding: 16))
+          Text("20px").tag(Paddings(padding: 20))
+        }
+        ContainerRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom 4px").tag(ContainerRadius.custom(4))
+        }
+        Picker("Shadow", selection: self.$model.shadow) {
+          Text("None").tag(Shadow.none)
+          Text("Small").tag(Shadow.small)
+          Text("Medium").tag(Shadow.medium)
+          Text("Large").tag(Shadow.large)
+          Text("Custom").tag(Shadow.custom(20.0, .zero, ComponentColor.accent.background))
+        }
+      }
+    }
+  }
+}
+
+#Preview {
+  CardPreview()
+}
+
+// MARK: - Helpers
+
+private func cardContent() -> UIView {
+  let titleLabel = UILabel()
+  titleLabel.text = "Card"
+  titleLabel.font = UniversalFont.mdHeadline.uiFont
+  titleLabel.textColor = UniversalColor.foreground.uiColor
+  titleLabel.numberOfLines = 0
+
+  let subtitleLabel = UILabel()
+  subtitleLabel.text = "Card is a container for text, images, and other content."
+  subtitleLabel.font = UniversalFont.mdBody.uiFont
+  subtitleLabel.textColor = UniversalColor.secondaryForeground.uiColor
+  subtitleLabel.numberOfLines = 0
+
+  let stackView = UIStackView(arrangedSubviews: [titleLabel, subtitleLabel])
+  stackView.axis = .vertical
+  stackView.spacing = 8
+
+  return stackView
+}

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CheckboxPreview.swift

@@ -31,7 +31,7 @@ struct CheckboxPreview: View {
           Text("Long").tag("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
         }
         ComponentColorPicker(selection: self.$model.color)
-        CornerRadiusPicker(selection: self.$model.cornerRadius) {
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 2px").tag(ComponentRadius.custom(2))
         }
         BodyFontPicker(selection: self.$model.font)

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

@@ -35,7 +35,7 @@ struct InputFieldPreview: View {
         AutocapitalizationPicker(selection: self.$model.autocapitalization)
         Toggle("Autocorrection Enabled", isOn: self.$model.isAutocorrectionEnabled)
         ComponentOptionalColorPicker(selection: self.$model.color)
-        CornerRadiusPicker(selection: self.$model.cornerRadius) {
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/SegmentedControlPreview.swift

@@ -42,7 +42,7 @@ struct SegmentedControlPreview: View {
       }
       Form {
         ComponentOptionalColorPicker(selection: self.$model.color)
-        CornerRadiusPicker(selection: self.$model.cornerRadius) {
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 4px").tag(ComponentRadius.custom(4))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/TextInputPreview.swift

@@ -35,7 +35,7 @@ struct TextInputPreviewPreview: View {
         AutocapitalizationPicker(selection: self.$model.autocapitalization)
         Toggle("Autocorrection Enabled", isOn: self.$model.isAutocorrectionEnabled)
         ComponentOptionalColorPicker(selection: self.$model.color)
-        CornerRadiusPicker(selection: self.$model.cornerRadius) {
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)

Examples/DemosApp/DemosApp/Core/App.swift

@@ -9,6 +9,9 @@ struct App: View {
           NavigationLinkWithTitle("Button") {
             ButtonPreview()
           }
+          NavigationLinkWithTitle("Card") {
+            CardPreview()
+          }
           NavigationLinkWithTitle("Checkbox") {
             CheckboxPreview()
           }

Sources/ComponentsKit/Components/Card/CardVM.swift

@@ -0,0 +1,33 @@
+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?
+
+  /// The padding applied to the card's content area.
+  ///
+  /// Defaults to a padding value of `16` for all sides.
+  public var contentPaddings: Paddings = .init(padding: 16)
+
+  /// The corner radius of the card.
+  ///
+  /// Defaults to `.medium`.
+  public var cornerRadius: ContainerRadius = .medium
+
+  /// The shadow of the card.
+  ///
+  /// Defaults to `.medium`.
+  public var shadow: Shadow = .medium
+
+  /// Initializes a new instance of `CardVM` with default values.
+  public init() {}
+}
+
+// MARK: - Helpers
+
+extension CardVM {
+  var preferredBackgroundColor: UniversalColor {
+    return self.backgroundColor ?? .background
+  }
+}