Merge pull request #591 from kiwicom/587-create-coupon-component

Added `Coupon` component

Sources/Orbit/Components/Coupon.swift

@@ -0,0 +1,66 @@
+import SwiftUI
+
+/// Orbit component that highlights promo codes.
+///
+/// - Note: [Orbit definition](https://orbit.kiwi/components/visuals/coupon/)
+public struct Coupon: View {
+
+    let label: String
+    let size: Text.Size
+
+    public var body: some View {
+        Text(label, size: size, isSelectable: true)
+            .fontWeight(.medium)
+            .kerning(0.75)
+            .padding(.horizontal, .xxSmall)
+            .padding(.vertical, .xxxSmall)
+            .overlay(
+                RoundedRectangle(cornerRadius: BorderRadius.desktop)
+                    .stroke(style: StrokeStyle(lineWidth: 1, dash: [2]))
+                    .foregroundColor(.cloudDark)
+            )
+    }
+}
+
+// MARK: - Inits
+public extension Coupon {
+
+    /// Creates Orbit Coupon component.
+    init(_ label: String = "", size: Text.Size = .normal) {
+        self.label = label
+        self.size = size
+    }
+}
+
+// MARK: - Previews
+struct CouponPreviews: PreviewProvider {
+
+    static var previews: some View {
+        PreviewWrapper {
+            standalone
+            mix
+        }
+        .previewLayout(.sizeThatFits)
+    }
+
+    static var standalone: some View {
+        VStack(spacing: 0) {
+            Coupon("COUPONCODE")
+            Coupon()    // EmptyView
+            Coupon("")  // EmptyView
+        }
+        .padding(.medium)
+        .previewDisplayName()
+    }
+
+    static var mix: some View {
+        HStack(alignment: .firstTextBaseline, spacing: .small) {
+            Coupon("HXT3B81F", size: .small)
+                .textColor(.blueDark)
+                .previewDisplayName()
+
+            Text("PROMOCODE", size: .small)
+        }
+        .padding(.medium)
+    }
+}

Sources/OrbitStorybook/Detail/Items/StorybookCoupon.swift

@@ -0,0 +1,29 @@
+import SwiftUI
+import Orbit
+
+struct StorybookCoupon {
+
+    static var basic: some View {
+        VStack(alignment: .leading, spacing: .medium) {
+            Coupon("COUPONCODE")
+
+            HStack(alignment: .firstTextBaseline, spacing: .xSmall) {
+                Coupon("HXT3B81F", size: .small)
+                    .textColor(.blueDark)
+                    .previewDisplayName()
+
+                Text("PROMOCODE", size: .small)
+            }
+        }
+        .previewDisplayName()
+    }
+}
+
+struct StorybookCouponPreviews: PreviewProvider {
+
+    static var previews: some View {
+        OrbitPreviewWrapper {
+            StorybookCoupon.basic
+        }
+    }
+}

Sources/OrbitStorybook/Detail/StorybookDetail.swift

@@ -111,6 +111,7 @@ struct StorybookDetail: View {
             case (.choiceTile, 2):          StorybookChoiceTile.mix
             case (.collapse, _):            StorybookCollapse.basic
             case (.countryFlag, _):         StorybookCountryFlag.basic
+            case (.coupon, _):              StorybookCoupon.basic
             case (.dialog, _):              StorybookDialog.basic
             case (.emptyState, _):          StorybookEmptyState.basic
             case (.heading, _):             StorybookTypography.storybookHeading

Sources/OrbitStorybook/Storybook+Items.swift

@@ -88,6 +88,7 @@ extension Storybook {
                 case .choiceTile:           return ["Basic", "Centered", "Mix"]
                 case .collapse:             return ["Basic"]
                 case .countryFlag:          return ["Basic"]
+                case .coupon:               return ["Basic"]
                 case .dialog:               return ["Basic"]
                 case .emptyState:           return ["Basic"]
                 case .heading:              return ["Basic"]
@@ -137,6 +138,7 @@ extension Storybook {
                 case .choiceTile:           return "rectangle.badge.checkmark"
                 case .collapse:             return "chevron.down"
                 case .countryFlag:          return "flag.fill"
+                case .coupon:               return "textformat.abc.dottedunderline"
                 case .dialog:               return "text.bubble.fill"
                 case .emptyState:           return "icloud.slash"
                 case .heading:              return "textformat.size.larger"

Tests/SnapshotTests/Components/CouponTests.swift

@@ -0,0 +1,9 @@
+import XCTest
+@testable import Orbit
+
+class CouponTests: SnapshotTestCase {
+
+    func testCoupons() {
+        assert(CouponPreviews.standalone)
+    }
+}

component-status.yaml

@@ -18,6 +18,8 @@
   ios: Released
 - component: CountryFlag
   ios: Released
+- component: Coupon
+  ios: Released
 - component: Dialog
   ios: Released
 - component: EmptyState