Merge pull request #101 from kiwicom/keyvalue-large

Added large variant for KeyValue
kiwicom · Apr 8, 2022 · c66601a · c66601a
2 parents a6b1302 + 77d623a
commit c66601a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/Sources/Orbit/Components/KeyValue.swift b/Sources/Orbit/Components/KeyValue.swift
@@ -11,12 +11,13 @@ public struct KeyValue: View {
 
     let key: String
     let value: String
+    let size: Size
     let alignment: HorizontalAlignment
     let valueAccessibilityIdentifier: String
 
     public var body: some View {
-        KeyValueField(key, alignment: alignment) {
-            Text(value, weight: .medium, alignment: .init(alignment), isSelectable: true)
+        KeyValueField(key, size: size, alignment: alignment) {
+            Text(value, size: size.valueSize, weight: .medium, alignment: .init(alignment), isSelectable: true)
                 .accessibility(identifier: valueAccessibilityIdentifier)
         }
     }
@@ -29,22 +30,48 @@ extension KeyValue {
     public init(
         _ key: String = "",
         value: String = "",
+        size: Size = .normal,
         alignment: HorizontalAlignment = .leading,
         valueAccessibilityIdentifier: String = ""
     ) {
         self.key = key
         self.value = value
+        self.size = size
         self.alignment = alignment
         self.valueAccessibilityIdentifier = valueAccessibilityIdentifier
     }
 }
 
+// MARK: - Types
+extension KeyValue {
+
+    public enum Size {
+        case normal
+        case large
+
+        var keySize: Text.Size {
+            switch self {
+                case .normal:   return .small
+                case .large:    return .normal
+            }
+        }
+
+        var valueSize: Text.Size {
+            switch self {
+                case .normal:   return .normal
+                case .large:    return .large
+            }
+        }
+    }
+}
+
 // MARK: - Previews
 struct KeyValuePreviews: PreviewProvider {
 
     static var previews: some View {
         PreviewWrapper {
             standalone
+            standaloneLarge
             keyOnly
             valueOnly
             trailing
@@ -59,6 +86,10 @@ struct KeyValuePreviews: PreviewProvider {
         KeyValue("Key", value: "Value")
     }
 
+    static var standaloneLarge: some View {
+        KeyValue("Key", value: "Value", size: .large)
+    }
+
     static var keyOnly: some View {
         KeyValue("Key")
             .border(Color.cloudNormal)

diff --git a/Sources/Orbit/Support/Forms/KeyValueField.swift b/Sources/Orbit/Support/Forms/KeyValueField.swift
@@ -10,12 +10,13 @@ import SwiftUI
 public struct KeyValueField<Content: View>: View {
 
     let key: String
+    let size: KeyValue.Size
     let content: () -> Content
     let alignment: HorizontalAlignment
 
     public var body: some View {
         VStack(alignment: alignment, spacing: 0) {
-            Text(key, size: .small, color: .inkLight, alignment: .init(alignment))
+            Text(key, size: size.keySize, color: .inkLight, alignment: .init(alignment))
 
             content()
         }
@@ -28,10 +29,12 @@ extension KeyValueField {
     /// Creates Orbit KeyValue component.
     public init(
         _ key: String = "",
+        size: KeyValue.Size = .normal,
         alignment: HorizontalAlignment = .leading,
         @ViewBuilder content: @escaping () -> Content
     ) {
         self.key = key
+        self.size = size
         self.alignment = alignment
         self.content = content
     }
@@ -44,6 +47,10 @@ struct KeyValueFieldPreviews: PreviewProvider {
         PreviewWrapper {
             standalone
 
+            KeyValueField("Key", size: .large) {
+                Text("Value")
+            }
+
             KeyValueField("Trailing", alignment: .trailing) {
                 customContentPlaceholder
             }