Merge pull request #4810 from wikimedia/onboarding-refactor

Onboarding View: Pin button stack to bottom and updating item spacing
wikimedia · Apr 16, 2024 · 88622cb · 88622cb
2 parents 7775d5b + 8ae830f
commit 88622cb
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 32 deletions.
diff --git a/Components/Sources/Components/Components/Onboarding/WKOnboardingCell.swift b/Components/Sources/Components/Components/Onboarding/WKOnboardingCell.swift
@@ -11,7 +11,7 @@ struct WKOnboardingCell: View {
     // MARK: - Lifecycle
 
     var body: some View {
-        HStack {
+		HStack(alignment: .top) {
             VStack {
                 if let icon = viewModel.icon {
                     if viewModel.fillIconBackground {
@@ -49,3 +49,8 @@ struct WKOnboardingCell: View {
         }
     }
 }
+
+#Preview {
+	WKOnboardingCell(viewModel: .init(icon: .checkmark, title: "Title 1", subtitle: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))
+		.frame(width: 300, height: 100)
+}
diff --git a/Components/Sources/Components/Components/Onboarding/WKOnboardingView.swift b/Components/Sources/Components/Components/Onboarding/WKOnboardingView.swift
@@ -15,40 +15,57 @@ public struct WKOnboardingView: View {
     var sizeClassPadding: CGFloat {
         horizontalSizeClass == .regular ? 64 : 32
     }
+
+    @ScaledMetric var scrollViewBottomInset = 125.0
 
     // MARK: - Lifecycle
 
-    public var body: some View {
-        ZStack {
-            Color(appEnvironment.theme.paperBackground)
-                .ignoresSafeArea()
-            ScrollView(showsIndicators: true) {
-                VStack {
-                    Text(viewModel.title)
-                        .font(Font(WKFont.for(.boldTitle1)))
-                        .foregroundColor(Color(appEnvironment.theme.text))
-                        .padding([.bottom, .top], 44)
-                        .multilineTextAlignment(.center)
-                    ForEach(1...viewModel.cells.count, id:\.self) { cell in
-                        VStack {
-                            WKOnboardingCell(viewModel: viewModel.cells[cell - 1])
-                                .padding([.bottom, .trailing], 20)
-                        }
-                    }
-                    Spacer()
-
-                    WKLargeButton(configuration: .primary, title: viewModel.primaryButtonTitle, action: primaryButtonAction)
-                        .padding([.top], 16)
-
-                    VStack {
-                        if let secondaryTitle = viewModel.secondaryButtonTitle {
-                            let configuration = WKSmallButton.Configuration(style: .quiet)
-                            WKSmallButton(configuration: configuration, title: secondaryTitle, action: secondaryButtonAction)
-                        }
-                    }
+	var content: some View {
+        ZStack(alignment: .bottom, content: {
+			ScrollView(showsIndicators: true) {
+				VStack {
+					Text(viewModel.title)
+						.font(Font(WKFont.for(.boldTitle1)))
+						.foregroundColor(Color(appEnvironment.theme.text))
+                        .padding(.bottom, 44)
+                        .padding(.top, 44 + sizeClassPadding)
+						.multilineTextAlignment(.center)
+					ForEach(1...viewModel.cells.count, id:\.self) { cell in
+						VStack {
+							WKOnboardingCell(viewModel: viewModel.cells[cell - 1])
+								.padding(.bottom, 24)
+								.padding(.trailing, 20)
+						}
+					}
+				}
+                .padding(EdgeInsets(top: 0, leading: sizeClassPadding, bottom: scrollViewBottomInset, trailing: sizeClassPadding))
+			}
+            VStack(spacing: 20) {
+                WKLargeButton(configuration: .primary, title: viewModel.primaryButtonTitle, action: primaryButtonAction)
+                    .padding([.top], 16)
+
+                if let secondaryTitle = viewModel.secondaryButtonTitle {
+                    let configuration = WKSmallButton.Configuration(style: .quiet)
+                    WKSmallButton(configuration: configuration, title: secondaryTitle, action: secondaryButtonAction)
                 }
-                .padding(sizeClassPadding)
             }
-        }
+            .padding(EdgeInsets(top: 12, leading: sizeClassPadding, bottom: 24, trailing: sizeClassPadding))
+            .background {
+                Color(appEnvironment.theme.paperBackground).ignoresSafeArea()
+            }
+        })
+
+	}
+
+    public var body: some View {
+        content
+            .background {
+                Color(appEnvironment.theme.paperBackground).ignoresSafeArea()
+            }
     }
+
+}
+
+#Preview {
+	WKOnboardingView(viewModel: .init(title: "Onboarding View", cells: [.init(icon: .add, title: "Title 1", subtitle: "Subtitle 1"), .init(icon: .checkmark, title: "Title 2", subtitle: "Subtitle 2")], primaryButtonTitle: "Primary Button", secondaryButtonTitle: "Secondary Button"))
 }
diff --git a/...mponents/Suggested Edits/Image Recommendations/WKImageRecommendationsViewController.swift b/...mponents/Suggested Edits/Image Recommendations/WKImageRecommendationsViewController.swift
@@ -24,7 +24,6 @@ fileprivate final class WKImageRecommendationsHostingViewController: WKComponent
     required init?(coder aDecoder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
-
 }
 
 public final class WKImageRecommendationsViewController: WKCanvasViewController {