Merge pull request kiwicom#73 from kiwicom/69-implement-listitem-usin…

…g-label Implement ListItem using Label
bul-nick-al · Mar 21, 2022 · caa5550 · caa5550
2 parents ac810dd + 71384c2
commit caa5550
Show file tree

Hide file tree

Showing 30 changed files with 680 additions and 422 deletions.
diff --git a/Sources/Orbit/Components/Alert.swift b/Sources/Orbit/Components/Alert.swift
@@ -42,19 +42,17 @@ public struct Alert<Content: View>: View {
     let content: () -> Content
 
     public var body: some View {
-        VStack(alignment: .leading, spacing: .medium) {
+        HStack(alignment: .firstTextBaseline, spacing: .xSmall) {
 
-            Label(
-                title,
-                description: description,
-                iconContent: .icon(icon, color: status.color),
-                titleStyle: .text(weight: .bold),
-                descriptionStyle: .custom(.normal, color: .inkNormal, linkColor: .inkNormal),
-                descriptionSpacing: .xxSmall,
-                descriptionLinkAction: descriptionLinkAction
-            )
+            Icon(icon, size: .normal, color: status.color)
 
-            Group {
+            VStack(alignment: .leading, spacing: .medium) {
+
+                VStack(alignment: .leading, spacing: .xxSmall) {
+                    Text(title, weight: .bold)
+                    Text(description, linkColor: .inkNormal, linkAction: descriptionLinkAction)
+                }
+
                 content()
 
                 switch buttons {
@@ -65,7 +63,6 @@ public struct Alert<Content: View>: View {
                         EmptyView()
                 }
             }
-            .padding(.leading, icon == .none ? 0 : 28)
         }
         .frame(maxWidth: .infinity, alignment: .leading)
         .padding([.vertical, .trailing], .medium)

diff --git a/Sources/Orbit/Components/Badge.swift b/Sources/Orbit/Components/Badge.swift
@@ -44,6 +44,7 @@ public struct Badge: View {
                 Capsule()
                     .strokeBorder(style.outlineColor, lineWidth: BorderWidth.thin)
             )
+            .fixedSize()
         }
     }
 
@@ -89,28 +90,22 @@ public extension Badge {
 
         public var height: CGFloat {
             switch self {
-                case .default:
-                    return .large
-                case .compact:
-                    return 18
+                case .default:      return .large
+                case .compact:      return 18
             }
         }
 
         public var padding: CGFloat {
             switch self {
-                case .default:
-                    return .xSmall
-                case .compact:
-                    return 6
+                case .default:      return .xSmall
+                case .compact:      return 6
             }
         }
 
         public var spacing: CGFloat {
             switch self {
-                case .default:
-                    return 5
-                case .compact:
-                    return 3
+                case .default:      return 5
+                case .compact:      return 3
             }
         }
     }
@@ -192,14 +187,14 @@ struct BadgePreviews: PreviewProvider {
     }
 
     static var orbit: some View {
-        HStack(spacing: .xxLarge) {
-            VStack(alignment: .leading, spacing: .xxLarge) {
-                VStack(alignment: .leading, spacing: .xSmall) {
+        HStack {
+            VStack(alignment: .leading) {
+                VStack(alignment: .leading) {
                     Badge("Light", style: .light)
                     Badge("Light Inverted", style: .lightInverted)
                     Badge("Neutral", style: .neutral)
                 }
-                VStack(alignment: .leading, spacing: .xSmall) {
+                VStack(alignment: .leading) {
                     Badge("Info", style: .status(.info))
                     Badge("Info Inverted", style: .status(.info, inverted: true))
                     Badge("Success", style: .status(.success))
@@ -209,20 +204,20 @@ struct BadgePreviews: PreviewProvider {
                     Badge("Critical", style: .status(.critical))
                     Badge("Critical Inverted", style: .status(.critical, inverted: true))
                 }
-                VStack(alignment: .leading, spacing: .xSmall) {
+                VStack(alignment: .leading) {
                     Badge("Orange Gradient", icon: .check, style: .gradient(.bundleBasic))
                     Badge("Purple Gradient", icon: .accommodation, style: .gradient(.bundleMedium))
                     Badge("Ink Gradient", icon: .airplaneUp, style: .gradient(.bundleTop))
                 }
             }
 
-            VStack(alignment: .leading, spacing: .xxLarge) {
-                VStack(alignment: .leading, spacing: .xSmall) {
+            VStack(alignment: .leading) {
+                VStack(alignment: .leading) {
                     Badge("Light", icon: .sun, style: .light)
                     Badge("Light Inverted", icon: .moon, style: .lightInverted)
                     Badge("Neutral", icon: .airplaneUp, style: .neutral)
                 }
-                VStack(alignment: .leading, spacing: .xSmall) {
+                VStack(alignment: .leading) {
                     Badge("Info", icon: .wifi, style: .status(.info))
                     Badge("Info Inverted", icon: .bus, style: .status(.info, inverted: true))
                     Badge("Success", icon: .airplane, style: .status(.success))
@@ -232,7 +227,7 @@ struct BadgePreviews: PreviewProvider {
                     Badge("Critical", icon: .accommodation, style: .status(.critical))
                     Badge("Critical Inverted", icon: .accommodation, style: .status(.critical, inverted: true))
                 }
-                VStack(alignment: .leading, spacing: .xSmall) {
+                VStack(alignment: .leading) {
                     Badge("Orange Gradient", style: .gradient(.bundleBasic))
                     Badge("Purple Gradient", style: .gradient(.bundleMedium))
                     Badge("Ink Gradient", style: .gradient(.bundleTop))

diff --git a/Sources/Orbit/Components/BadgeList.swift b/Sources/Orbit/Components/BadgeList.swift
@@ -26,7 +26,7 @@ public struct BadgeList: View {
                     Icon(iconContent, size: .small)
                 )
                 .alignmentGuide(.firstTextBaseline) { size in
-                    Text.Size.small.value * Text.firstBaselineRatio + size.height / 2
+                    Text.Size.small.lineHeight * Text.firstBaselineRatio + size.height / 2
                 }
 
             Text(

diff --git a/Sources/Orbit/Components/Card.swift b/Sources/Orbit/Components/Card.swift
@@ -40,7 +40,7 @@ public struct Card<Content: View>: View {
     let contentLayout: CardContentLayout
     let contentAlignment: HorizontalAlignment
     let borderStyle: TileBorderStyle
-    let titleStyle: Label.TitleStyle
+    let titleStyle: Heading.Style
     let status: Status?
     let width: ContainerWidth
     let backgroundColor: Color?
@@ -71,16 +71,15 @@ public struct Card<Content: View>: View {
 
     @ViewBuilder var header: some View {
         if isHeaderEmpty == false {
-            HStack(alignment: .firstTextBaseline, spacing: .small) {
-
-                Label(
-                    title,
-                    description: description,
-                    iconContent: iconContent,
-                    titleStyle: titleStyle,
-                    iconSpacing: .xSmall,
-                    descriptionSpacing: .xxSmall
-                )
+            HStack(alignment: .firstTextBaseline, spacing: 0) {
+
+                Icon(iconContent, size: .heading(titleStyle))
+                    .padding(.trailing, .xSmall)
+
+                VStack(alignment: .leading, spacing: .xxSmall) {
+                    Heading(title, style: titleStyle)
+                    Text(description, color: .inkLight)
+                }
 
                 if case .expanding = width {
                     Spacer(minLength: .xxxSmall)
@@ -172,7 +171,7 @@ public extension Card {
         action: CardAction = .none,
         headerSpacing: CGFloat = .medium,
         borderStyle: TileBorderStyle = .iOS,
-        titleStyle: Label.TitleStyle = .title4,
+        titleStyle: Heading.Style = .title4,
         status: Status? = nil,
         width: ContainerWidth = .expanding(),
         backgroundColor: Color? = .white,
@@ -203,7 +202,7 @@ public extension Card {
         action: CardAction = .none,
         headerSpacing: CGFloat = .medium,
         borderStyle: TileBorderStyle = .iOS,
-        titleStyle: Label.TitleStyle = .title4,
+        titleStyle: Heading.Style = .title4,
         status: Status? = nil,
         width: ContainerWidth = .expanding(),
         backgroundColor: Color? = .white
@@ -231,7 +230,7 @@ public extension Card {
         action: CardAction = .none,
         headerSpacing: CGFloat = .medium,
         borderStyle: TileBorderStyle = .iOS,
-        titleStyle: Label.TitleStyle = .title4,
+        titleStyle: Heading.Style = .title4,
         status: Status? = nil,
         width: ContainerWidth = .expanding(),
         backgroundColor: Color? = .white,
@@ -262,7 +261,7 @@ public extension Card {
         action: CardAction = .none,
         headerSpacing: CGFloat = .medium,
         borderStyle: TileBorderStyle = .iOS,
-        titleStyle: Label.TitleStyle = .title4,
+        titleStyle: Heading.Style = .title4,
         status: Status? = nil,
         width: ContainerWidth = .expanding(),
         backgroundColor: Color? = .white
@@ -444,6 +443,7 @@ struct CardPreviews: PreviewProvider {
             Card(
                 "Very very very long and multi-line title",
                 description: "Very very very very very long and multi-line description",
+                icon: .grid,
                 action: .buttonLink("Update"),
                 borderStyle: .default,
                 status: .critical

diff --git a/Sources/Orbit/Components/Checkbox.swift b/Sources/Orbit/Components/Checkbox.swift
@@ -25,7 +25,7 @@ public struct Checkbox: View {
             },
             label: {
                 if label.isEmpty == false || description.isEmpty == false {
-                    VStack(alignment: .leading, spacing: 1) {
+                    VStack(alignment: .leading, spacing: 0) {
                         Heading(label, style: .title5, color: labelColor)
                         Text(description, size: .small, color: descriptionColor)
                     }

diff --git a/Sources/Orbit/Components/ChoiceTile.swift b/Sources/Orbit/Components/ChoiceTile.swift
@@ -103,7 +103,7 @@ public struct ChoiceTile<Content: View>: View {
     let iconContent: Icon.Content
     let illustration: Illustration.Image
     let indicator: ChoiceTileIndicator
-    let titleStyle: Label.TitleStyle
+    let titleStyle: Heading.Style
     let isSelected: Bool
     let isError: Bool
     let message: MessageType
@@ -138,20 +138,29 @@ public struct ChoiceTile<Content: View>: View {
             switch alignment {
                 case .default:
                     HStack(alignment: .firstTextBaseline, spacing: 0) {
-                        Label(title, description: description, iconContent: iconContent, titleStyle: titleStyle)
+
+                        Icon(iconContent, size: .heading(titleStyle))
+                            .padding(.trailing, .xSmall)
+
+                        VStack(alignment: .leading, spacing: .xxSmall) {
+                            Heading(title, style: titleStyle)
+                            Text(description, color: .inkLight)
+                        }
+
                         Spacer(minLength: 0)
+
                         Badge(badge, style: .status(.info))
                     }
                 case .center:
                     VStack(spacing: .xxSmall) {
                         if illustration == .none {
-                            Icon(iconContent, size: .label(titleStyle))
+                            Icon(iconContent, size: .heading(titleStyle))
                                 .padding(.bottom, .xxxSmall)
                         } else {
                             Illustration(illustration, layout: .resizeable)
                                 .frame(height: .xxLarge)
                         }
-                        centeredHeading
+                        Heading(title, style: titleStyle, alignment: .center)
                         Text(description, color: .inkLight, alignment: .center)
                         Badge(badge, style: .neutral)
                     }
@@ -160,13 +169,6 @@ public struct ChoiceTile<Content: View>: View {
         }
     }
 
-    @ViewBuilder var centeredHeading: some View {
-        switch titleStyle {
-            case .heading(let style, let color):           Heading(title, style: style, color: color, alignment: .center)
-            case .text(let size, let weight, let color):   Text(title, size: size, color: color, weight: weight)
-        }
-    }
-
     @ViewBuilder var messageView: some View {
         switch alignment {
             case .default:
@@ -222,7 +224,7 @@ public extension ChoiceTile {
         badge: String = "",
         badgeOverlay: String = "",
         indicator: ChoiceTileIndicator = .radio,
-        titleStyle: Label.TitleStyle = .title3,
+        titleStyle: Heading.Style = .title3,
         isSelected: Bool = false,
         isError: Bool = false,
         message: MessageType = .none,
@@ -255,7 +257,7 @@ public extension ChoiceTile {
         badge: String = "",
         badgeOverlay: String = "",
         indicator: ChoiceTileIndicator = .radio,
-        titleStyle: Label.TitleStyle = .title3,
+        titleStyle: Heading.Style = .title3,
         isSelected: Bool = false,
         isError: Bool = false,
         message: MessageType = .none,
@@ -427,7 +429,7 @@ struct ChoiceTilePreviews: PreviewProvider {
 
             ChoiceTile(
                 "Multiline long choice title label",
-                description: "Multiline and very long description",
+                description: "Multiline and very very very long description",
                 icon: .grid,
                 titleStyle: .title1,
                 message: .help("Helpful multiline message")
@@ -469,7 +471,7 @@ struct ChoiceTilePreviews: PreviewProvider {
 
             ChoiceTile(
                 "Multiline long choice title label",
-                description: "Multiline and very long description",
+                description: "Multiline and very very very long description",
                 icon: .grid,
                 titleStyle: .title1,
                 message: .help("Helpful multiline message"),

diff --git a/Sources/Orbit/Components/CountryFlag.swift b/Sources/Orbit/Components/CountryFlag.swift
@@ -27,11 +27,14 @@ public struct CountryFlag: View {
     }
 
     var clipShape: some InsettableShape {
+        RoundedRectangle(cornerRadius: cornerRadius)
+    }
+
+    var cornerRadius: CGFloat {
         switch border {
-            case .none:
-                return RoundedRectangle(cornerRadius: 0)
-            case .default:
-                return RoundedRectangle(cornerRadius: size.value / 10)
+            case .none:                             return 0
+            case .default(let cornerRadius?):       return cornerRadius
+            case .default:                          return size.value / 10
         }
     }
 }
@@ -40,7 +43,7 @@ public struct CountryFlag: View {
 public extension CountryFlag {
 
     /// Creates Orbit CountryFlag component.
-    init(_ countryCode: String, size: Icon.Size = .normal, border: Border = .default) {
+    init(_ countryCode: String, size: Icon.Size = .normal, border: Border = .default()) {
         self.countryCode = countryCode
         self.size = size
         self.border = border
@@ -52,7 +55,7 @@ public extension CountryFlag {
 
     enum Border {
         case none
-        case `default`
+        case `default`(cornerRadius: CGFloat? = nil)
 
         var color: Color {
             switch self {
@@ -68,7 +71,15 @@ struct CountryFlagPreviews: PreviewProvider {
 
     static var previews: some View {
         PreviewWrapper {
+            snapshots
+        }
+        .previewLayout(.sizeThatFits)
+    }
+
+    static var snapshots: some View {
+        VStack {
             CountryFlag("cz")
+            CountryFlag("cz", border: .default(cornerRadius: 10))
             CountryFlag("cz", border: .none)
             CountryFlag("sg")
             CountryFlag("jp")
@@ -78,6 +89,5 @@ struct CountryFlagPreviews: PreviewProvider {
             CountryFlag("unknown", size: .xLarge)
         }
         .padding()
-        .previewLayout(.sizeThatFits)
     }
 }
diff --git a/Sources/Orbit/Components/Dialog.swift b/Sources/Orbit/Components/Dialog.swift
@@ -20,7 +20,7 @@ public struct Dialog: View {
             }
 
             VStack(alignment: .center, spacing: .xSmall) {
-                Heading(title, style: .title3, alignment: .center)
+                Heading(title, style: .title4, alignment: .center)
 
                 Text(description, color: .inkLight, alignment: .center)
             }