diff --git a/Sources/Orbit/Components/KeyValue.swift b/Sources/Orbit/Components/KeyValue.swift index 52e7286c450..8916e7e9324 100644 --- 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 index c65b506c775..ac7445e89a3 100644 --- a/Sources/Orbit/Support/Forms/KeyValueField.swift +++ b/Sources/Orbit/Support/Forms/KeyValueField.swift @@ -10,12 +10,13 @@ import SwiftUI public struct KeyValueField: 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 }