Remove description from Label component, fix icon size calculation.

kiwicom · Mar 21, 2022 · 71384c2 · 71384c2
1 parent 3e4aa30
commit 71384c2
Show file tree

Hide file tree

Showing 16 changed files with 584 additions and 328 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/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/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)
             }

diff --git a/Sources/Orbit/Components/Heading.swift b/Sources/Orbit/Components/Heading.swift
@@ -110,8 +110,14 @@ public extension Heading {
 
         public var iconSize: CGFloat {
             switch self {
+                case .display:          return 52
+                case .displaySubtitle:  return 30
+                case .title1:           return 38
+                case .title2:           return 30
+                case .title3:           return 26
                 case .title4:           return 22
-                default:                return lineHeight
+                case .title5:           return 20
+                case .title6:           return 18
             }
         }
 
@@ -130,12 +136,8 @@ struct HeadingPreviews: PreviewProvider {
     static var previews: some View {
         PreviewWrapper {
             standalone
-
-            Label("Heading", icon: .grid, titleStyle: .heading(.title1, color: nil))
-                .foregroundColor(.blueNormal)
-                .previewDisplayName("Label with color override")
-
             snapshots
+            snapshotsMultiline
         }
         .previewLayout(.sizeThatFits)
     }
@@ -160,24 +162,23 @@ struct HeadingPreviews: PreviewProvider {
     }
 
     static var snapshots: some View {
-        Group {
-            orbit
-                .padding(.vertical)
-
-            VStack(alignment: .leading, spacing: .xSmall) {
-                Label("Display title, but very very very very very very very long", icon: .circle, titleStyle: .display)
-                Label("Display subtitle, also very very very very very long", icon: .email, titleStyle: .displaySubtitle)
-                Separator()
-                Label("Title 1, also very very very very very very very verylong", icon: .circle, titleStyle: .title1)
-                Label("Title 2, but very very very very very very very very long", icon: .circle, titleStyle: .title2)
-                Label("Title 3, but very very very very very very very very long", icon: .circle, titleStyle: .title3)
-                Label("Title 4, but very very very very very very very very long", icon: .circle, titleStyle: .title4)
-                Label("Title 5, but very very very very very very very very long", icon: .circle, titleStyle: .title5)
-                Label("Title 6, but very very very very very very very very long", icon: .circle, titleStyle: .title6)
-            }
-            .padding(.vertical)
-            .previewDisplayName("Longer text with icon using Label")
+        orbit
+            .padding()
+    }
+
+    static var snapshotsMultiline: some View {
+        VStack(alignment: .leading, spacing: .xSmall) {
+            Heading("Display title, but very very very very very very very long", style: .display)
+            Heading("Display subtitle, also very very very very very long", style: .displaySubtitle)
+            Separator()
+            Heading("Title 1, also very very very very very very very verylong", style: .title1)
+            Heading("Title 2, but very very very very very very very very long", style: .title2)
+            Heading("Title 3, but very very very very very very very very long", style: .title3)
+            Heading("Title 4, but very very very very very very very very long", style: .title4)
+            Heading("Title 5, but very very very very very very very very long", style: .title5)
+            Heading("Title 6, but very very very very very very very very long", style: .title6)
         }
-        .padding(.horizontal)
+        .padding()
+        .previewDisplayName("Multiline")
     }
 }