[KOA-5082] Nudger swiftui (#1627)

* nudger swiftui

* typo in readme

Backpack-SwiftUI/Nudger/Classes/BPKNudger.swift

@@ -0,0 +1,108 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SwiftUI
+
+public struct BPKNudger: View {
+
+    @State private var canIncrement = true
+    @State private var canDecrement = true
+    @Binding private var value: Int
+
+    private var minValue: Int
+    private var maxValue: Int
+    private var step: Int
+
+    /// Creates a `BPKNudger`.
+    /// - Parameters:
+    ///   - value: The value of the `BPKNudger`.
+    ///     Must be between `min` and `max`.
+    ///     If changed, the value will be clamped to be between `min` and `max`.
+    ///   - min: The minimum value of the `BPKNudger`.
+    ///     Must be less than `max`.
+    ///   - max: The maximum value of the `BPKNudger`.
+    ///     Must be greater than `min`.
+    ///   - step: The step value of the `BPKNudger`.
+    ///     Defaults to `1`.
+    public init(value: Binding<Int>, min: Int, max: Int, step: Int = 1) {
+        minValue = min
+        maxValue = max
+        self.step = step
+        self._value = value
+    }
+
+    public var body: some View {
+        HStack(spacing: BPKSpacing.md.value) {
+            BPKButton(icon: .minus, accessibilityLabel: "", enabled: $canDecrement, action: decrement)
+                .buttonStyle(.secondary)
+            BPKText("\(value)", style: .heading5)
+                .frame(minWidth: minWidth)
+            BPKButton(icon: .plus, accessibilityLabel: "", enabled: $canIncrement, action: increment)
+                .buttonStyle(.secondary)
+        }
+        .accessibilityElement()
+        .accessibilityValue(Text(String(value)))
+        .accessibilityAdjustableAction { direction in
+            switch direction {
+            case .increment: increment()
+            case .decrement: decrement()
+            @unknown default: break
+            }
+        }
+        .onAppear {
+            if value < minValue || value > maxValue {
+                value = max(min(value, maxValue), minValue)
+            }
+            updateButtonStates()
+        }
+    }
+
+    private var minWidth: CGFloat {
+        // Reserve space for 2 digits. 9 is one of the widest digits
+        // in Relative so 99 is one of the widest two digit numbers possible
+        let width = "99".size(withAttributes: [NSAttributedString.Key.font: BPKFontStyle.heading5.font]).width
+
+        // Round the value up to the nearest value that aligns to our spacing grid:
+        return ceil(width / BPKSpacing.md.value) * BPKSpacing.md.value
+    }
+
+    private func updateButtonStates() {
+        canIncrement = value < maxValue
+        canDecrement = value > minValue
+    }
+
+    private func increment() {
+        value = min(value + step, maxValue)
+        updateButtonStates()
+    }
+
+    private func decrement() {
+        value = max(value - step, minValue)
+        updateButtonStates()
+    }
+}
+
+struct BPKNudger_Previews: PreviewProvider {
+    static var previews: some View {
+        VStack {
+            BPKNudger(value: .constant(0), min: 0, max: 10)
+            BPKNudger(value: .constant(5), min: 0, max: 10)
+            BPKNudger(value: .constant(10), min: 0, max: 10)
+        }
+    }
+}

Backpack-SwiftUI/Nudger/README.md

@@ -0,0 +1,22 @@
+# Backpack-SwiftUI/Nudger
+
+[![Cocoapods](https://img.shields.io/cocoapods/v/Backpack-SwiftUI.svg?style=flat)](hhttps://cocoapods.org/pods/Backpack-SwiftUI)
+[![class reference](https://img.shields.io/badge/Class%20reference-iOS-blue)](https://backpack.github.io/ios/versions/latest/swiftui/Structs/BPKNudger.html)
+[![view on Github](https://img.shields.io/badge/Source%20code-GitHub-lightgrey)](https://github.com/Skyscanner/backpack-ios/tree/main/Backpack-SwiftUI/Nudger)
+
+## Default
+
+| Day | Night |
+| --- | --- |
+| <img src="https://raw.githubusercontent.com/Skyscanner/backpack-ios/main/screenshots/iPhone-swiftui_nudger___default_lm.png" alt="" width="375" /> |<img src="https://raw.githubusercontent.com/Skyscanner/backpack-ios/main/screenshots/iPhone-swiftui_nudger___default_dm.png" alt="" width="375" /> |
+
+# Usage
+
+an adjustable control that allows a user to select a numerical value between a min/max determined by the consumer.
+
+```swift
+@State var value = 0
+
+BPKNudger(value: $value, min: 1, max: 10, step: 1)
+    .accessibilityLabel("Passenger")
+```

Backpack-SwiftUI/Tests/Nudger/BPKNudgerTests.swift

@@ -0,0 +1,42 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import XCTest
+import SwiftUI
+@testable import Backpack_SwiftUI
+
+class BPKNudgerTests: XCTestCase {
+
+    func test_validValue() {
+        assertSnapshot(
+            BPKNudger(value: .constant(1), min: 0, max: 10, step: 1)
+        )
+    }
+
+    func test_minValue() {
+        assertSnapshot(
+            BPKNudger(value: .constant(0), min: 0, max: 10, step: 1)
+        )
+    }
+
+    func test_maxValue() {
+        assertSnapshot(
+            BPKNudger(value: .constant(10), min: 0, max: 10, step: 1)
+        )
+    }
+}

Example/Backpack Screenshot/SwiftUIScreenshots.swift

@@ -181,5 +181,11 @@ class SwiftUIScreenshots: BackpackSnapshotTestCase {
             switchTab(title: "SwiftUI")
             saveScreenshot(component: "panel", scenario: "default", userInterfaceStyle: userInterfaceStyle)
         }
+
+        navigate(title: "Nudger") {
+            switchTab(title: "SwiftUI")
+            saveScreenshot(component: "nudger", scenario: "default",
+                           userInterfaceStyle: userInterfaceStyle)
+        }
     }
 }

Example/Backpack.xcodeproj/project.pbxproj

@@ -21,6 +21,7 @@
 		532BE2A428340BDA0023B0CF /* SwitchExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 532BE2A328340BDA0023B0CF /* SwitchExampleView.swift */; };
 		532E03572831B64000DA9FC0 /* ButtonsPlaygroundView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 532E03562831B64000DA9FC0 /* ButtonsPlaygroundView.swift */; };
 		5346071C29C1CCDA00BBD044 /* OverlayExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5346071B29C1CCDA00BBD044 /* OverlayExampleView.swift */; };
+		53524A0329DB4C6100DF7EB2 /* NudgerExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53524A0229DB4C6100DF7EB2 /* NudgerExampleView.swift */; };
 		537ED1A5282C36E700032105 /* IconsExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 537ED1A4282C36E700032105 /* IconsExampleView.swift */; };
 		537ED1AF282D65A300032105 /* ShadowTokensView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 537ED1AE282D65A300032105 /* ShadowTokensView.swift */; };
 		538B6EC22832B4D10084C721 /* CardExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 538B6EC12832B4D10084C721 /* CardExampleView.swift */; };
@@ -207,6 +208,7 @@
 		532BE2A328340BDA0023B0CF /* SwitchExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SwitchExampleView.swift; sourceTree = "<group>"; };
 		532E03562831B64000DA9FC0 /* ButtonsPlaygroundView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonsPlaygroundView.swift; sourceTree = "<group>"; };
 		5346071B29C1CCDA00BBD044 /* OverlayExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OverlayExampleView.swift; sourceTree = "<group>"; };
+		53524A0229DB4C6100DF7EB2 /* NudgerExampleView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = NudgerExampleView.swift; sourceTree = "<group>"; };
 		537ED1A4282C36E700032105 /* IconsExampleView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = IconsExampleView.swift; sourceTree = "<group>"; };
 		537ED1AE282D65A300032105 /* ShadowTokensView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShadowTokensView.swift; sourceTree = "<group>"; };
 		538B6EC12832B4D10084C721 /* CardExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardExampleView.swift; sourceTree = "<group>"; };
@@ -462,6 +464,14 @@
 			path = Overlay;
 			sourceTree = "<group>";
 		};
+		53524A0129DB4C6100DF7EB2 /* Nudger */ = {
+			isa = PBXGroup;
+			children = (
+				53524A0229DB4C6100DF7EB2 /* NudgerExampleView.swift */,
+			);
+			path = Nudger;
+			sourceTree = "<group>";
+		};
 		5390DB5B29098CD700F0F790 /* Tokens */ = {
 			isa = PBXGroup;
 			children = (
@@ -691,6 +701,7 @@
 		793EC5502836139A00D627F6 /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				53524A0129DB4C6100DF7EB2 /* Nudger */,
 				79033CD329CAC87000127CDC /* Panel */,
 				5346071A29C1CCC900BBD044 /* Overlay */,
 				17DD297329A3ED9200FC1354 /* Rating */,
@@ -1504,6 +1515,7 @@
 				764D003A237DE4E300FE60AC /* SnackbarSelectorViewController.swift in Sources */,
 				D643B6DE2142C36C008AB669 /* GradientViewController.swift in Sources */,
 				17068B8A299C0106000EA7F4 /* RatingGroupsProvider.swift in Sources */,
+				53524A0329DB4C6100DF7EB2 /* NudgerExampleView.swift in Sources */,
 				7914E3AC286AB05600EB9F90 /* BadgeExampleVIew.swift in Sources */,
 				AAF235DA298BF788003D8507 /* PageIndicatorViewController.swift in Sources */,
 				AA7CFD8C29965EE20023C12B /* PriceExampleViewController.swift in Sources */,

Example/Backpack/SwiftUI/Components/Nudger/NudgerExampleView.swift

@@ -0,0 +1,36 @@
+//
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright © 2022 Skyscanner Ltd. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import SwiftUI
+import Backpack_SwiftUI
+
+struct NudgerExampleView: View {
+    @State private var value = 0
+
+    var body: some View {
+        BPKNudger(value: $value, min: 1, max: 10, step: 1)
+            .accessibilityLabel("Passengers")
+    }
+}
+
+struct NudgerExampleView_Previews: PreviewProvider {
+    static var previews: some View {
+        NudgerExampleView()
+    }
+}

Example/Backpack/Utils/FeatureStories/ComponentCells.swift

@@ -202,10 +202,18 @@ extension ComponentCellsProvider {
         )
     }
     private func nudger() -> CellDataSource {
-        PresentableCellDataSource.custom(
+        ComponentCellDataSource(
             title: "Nudger",
-            customController: { NudgerViewController() },
-            showPresentable: show(presentable:)
+            tabs: [
+                .uikit(presentable: CustomPresentable(
+                    generateViewController: {
+                        NudgerViewController()
+                    })),
+                .swiftui(presentable: CustomPresentable(generateViewController: {
+                    ContentUIHostingController(NudgerExampleView())
+                }))
+            ],
+            showChildren: { showComponent(title: "Nudger", tabs: $0) }
         )
     }
     private func overlayViews() -> CellDataSource {