[#26] [iOS] [UI] As a user, I can see Survey Detail - Question

iosApp/Survey.xcodeproj/project.pbxproj

@@ -118,6 +118,12 @@
 		09D09DD529682CBF009F88AF /* ViewId+SurveyDetail.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DBD2967EA5F009F88AF /* ViewId+SurveyDetail.swift */; };
 		09D09DFA296E4B85009F88AF /* ResetPasswordSpec.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DF9296E4B85009F88AF /* ResetPasswordSpec.swift */; };
 		09D09E0C296EBA20009F88AF /* TimeInterval+Constants.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09C2F4012934588400F44818 /* TimeInterval+Constants.swift */; };
+		09D09DFD296E6B35009F88AF /* SurveyQuestionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DFC296E6B35009F88AF /* SurveyQuestionView.swift */; };
+		09D09DFF296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DFE296E7BFD009F88AF /* ViewId+SurveyQuestion.swift */; };
+		09D09E00296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DFE296E7BFD009F88AF /* ViewId+SurveyQuestion.swift */; };
+		09D09E01296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09DFE296E7BFD009F88AF /* ViewId+SurveyQuestion.swift */; };
+		09D09E05296E7CF9009F88AF /* SurveyQuestionSpec.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09E02296E7CF9009F88AF /* SurveyQuestionSpec.swift */; };
+		09D09E09296E7D55009F88AF /* SurveyQuestionScreen.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09D09E06296E7D55009F88AF /* SurveyQuestionScreen.swift */; };
 		09E6ABF32951D105007F1EE3 /* KIF+Swift.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09E6ABF12951D103007F1EE3 /* KIF+Swift.swift */; };
 		09E6ABFD2951D32F007F1EE3 /* ViewId.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09636B1428D8148C00A5CB97 /* ViewId.swift */; };
 		09E6ABFE2951D333007F1EE3 /* ViewId+General.swift in Sources */ = {isa = PBXBuildFile; fileRef = 09636B2F28D8267D00A5CB97 /* ViewId+General.swift */; };
@@ -305,6 +311,10 @@
 		09D09DCD29682B78009F88AF /* SurveyItemOverlayView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyItemOverlayView.swift; sourceTree = "<group>"; };
 		09D09DD129682C98009F88AF /* SurveyDetailScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyDetailScreen.swift; sourceTree = "<group>"; };
 		09D09DF9296E4B85009F88AF /* ResetPasswordSpec.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ResetPasswordSpec.swift; sourceTree = "<group>"; };
+		09D09DFC296E6B35009F88AF /* SurveyQuestionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyQuestionView.swift; sourceTree = "<group>"; };
+		09D09DFE296E7BFD009F88AF /* ViewId+SurveyQuestion.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "ViewId+SurveyQuestion.swift"; sourceTree = "<group>"; };
+		09D09E02296E7CF9009F88AF /* SurveyQuestionSpec.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyQuestionSpec.swift; sourceTree = "<group>"; };
+		09D09E06296E7D55009F88AF /* SurveyQuestionScreen.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurveyQuestionScreen.swift; sourceTree = "<group>"; };
 		09E6ABE42951CF3E007F1EE3 /* SurveyKIFUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = SurveyKIFUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		09E6ABF12951D103007F1EE3 /* KIF+Swift.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "KIF+Swift.swift"; sourceTree = "<group>"; };
 		09E6AC0B2951D5DD007F1EE3 /* AccountSpec.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AccountSpec.swift; sourceTree = "<group>"; };
@@ -593,6 +603,7 @@
 				09495F6728FF97490036BDFB /* ViewId+Splash.swift */,
 				09495F7728FFF2D50036BDFB /* ViewId+SurveySelection.swift */,
 				09495F9B290A35BA0036BDFB /* ViewId+Account.swift */,
+				09D09DFE296E7BFD009F88AF /* ViewId+SurveyQuestion.swift */,
 			);
 			path = ViewId;
 			sourceTree = "<group>";
@@ -734,6 +745,7 @@
 				09A9F8DA2952B54F009DE583 /* SurveyScreen.swift */,
 				09A9F8DD2952B582009DE583 /* AccountScreen.swift */,
 				09D09DD129682C98009F88AF /* SurveyDetailScreen.swift */,
+				09D09E06296E7D55009F88AF /* SurveyQuestionScreen.swift */,
 				09A9F8D72952B42D009DE583 /* GenericScreen.swift */,
 			);
 			path = Screens;
@@ -867,6 +879,7 @@
 			children = (
 				09D09DBB2967E843009F88AF /* SurveyDetailView.swift */,
 				09D09DC7296817E2009F88AF /* SurveyDetailImage.swift */,
+				09D09DFB296E6B24009F88AF /* SurveyQuestion */,
 			);
 			path = SurveyDetail;
 			sourceTree = "<group>";
@@ -880,6 +893,14 @@
 			path = SurveyItem;
 			sourceTree = "<group>";
 		};
+		09D09DFB296E6B24009F88AF /* SurveyQuestion */ = {
+			isa = PBXGroup;
+			children = (
+				09D09DFC296E6B35009F88AF /* SurveyQuestionView.swift */,
+			);
+			path = SurveyQuestion;
+			sourceTree = "<group>";
+		};
 		09E6ABE52951CF3E007F1EE3 /* SurveyKIFUITests */ = {
 			isa = PBXGroup;
 			children = (
@@ -946,6 +967,7 @@
 				09D09DF9296E4B85009F88AF /* ResetPasswordSpec.swift */,
 				09D09DB1295C56A1009F88AF /* SurveySelectionSpec.swift */,
 				09D09DCB29682965009F88AF /* SurveyDetailSpec.swift */,
+				09D09E02296E7CF9009F88AF /* SurveyQuestionSpec.swift */,
 			);
 			path = Module;
 			sourceTree = "<group>";
@@ -1839,6 +1861,9 @@
 				09E6ABFF2951D333007F1EE3 /* ViewId+SurveySelection.swift in Sources */,
 				09D09E0C296EBA20009F88AF /* TimeInterval+Constants.swift in Sources */,
 				09D09DB2295C56A1009F88AF /* SurveySelectionSpec.swift in Sources */,
+				09D09E05296E7CF9009F88AF /* SurveyQuestionSpec.swift in Sources */,
+				09D09E01296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */,
+				09D09E09296E7D55009F88AF /* SurveyQuestionScreen.swift in Sources */,
 				09D09DD429682CBC009F88AF /* ViewId+SurveyDetail.swift in Sources */,
 				09E6AC042951D333007F1EE3 /* ViewId+Splash.swift in Sources */,
 				09E6ABF32951D105007F1EE3 /* KIF+Swift.swift in Sources */,
@@ -1857,6 +1882,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				09D09DFD296E6B35009F88AF /* SurveyQuestionView.swift in Sources */,
 				0982A80729278E9000FC1976 /* SurveyHeaderLoading.swift in Sources */,
 				09FE26D3294C1906005A7F85 /* ViewDidLoadModifier.swift in Sources */,
 				09CE772728E2C44D00EAA9EE /* View+BackButton.swift in Sources */,
@@ -1881,6 +1907,7 @@
 				0982A80629278E9000FC1976 /* SurveyItemLoading.swift in Sources */,
 				09A9F8F329544F5E009DE583 /* AccountView+DataSource.swift in Sources */,
 				09495F0928E410A00036BDFB /* PageControlView.swift in Sources */,
+				09D09DFF296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */,
 				09636AFD28D484CA00A5CB97 /* R+SwiftUI.swift in Sources */,
 				09495FCB291107760036BDFB /* Image+Constants.swift in Sources */,
 				09D09DC02968039F009F88AF /* ScreenParameters.swift in Sources */,
@@ -1944,6 +1971,7 @@
 				09D09DD529682CBF009F88AF /* ViewId+SurveyDetail.swift in Sources */,
 				0982A79E2921DF7E00FC1976 /* SurveySelectionSpec.swift in Sources */,
 				09C2F4032934588B00F44818 /* TimeInterval+Constants.swift in Sources */,
+				09D09E00296E7BFD009F88AF /* ViewId+SurveyQuestion.swift in Sources */,
 				0964B1CA294051CE00946FA1 /* ArgumentedXCUIApplication.swift in Sources */,
 				09C2F40A29346A8800F44818 /* XCUIElement+Label.swift in Sources */,
 				09495FB1290A93650036BDFB /* XCUIApplication+.swift in Sources */,

iosApp/Survey/Resources/Assets/Assets.xcassets/CloseButton.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "Close Icon.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true
+  }
+}

iosApp/Survey/Sources/Constants/Double+AnimationDuration.swift

@@ -12,6 +12,8 @@ extension Double {
 
     /// 0.7
     static var appearing: Self { 0.7.speedModified }
+    /// 0.01
+    static var instant: Self { 0.01.speedModified }
     /// 0.2
     static var fast: Self { 0.2.speedModified }
     /// 0.3

iosApp/Survey/Sources/Presentation/Modules/SurveyDetail/SurveyDetailView.swift

@@ -20,15 +20,22 @@ struct SurveyDetailView: View {
     let coordinator: SurveyDetailCoordinator
 
     @State var isAnimating = true
+    @State var isShowingTitle = true
+    @State var isShowingTitleNavigationBar = true
 
     var body: some View {
         ZStack {
             surveyView
         }
         .accessibilityElement(children: .contain)
         .accessibility(.surveyDetail(.view))
-        .backButton {
-            didPressBack()
+        .if(isShowingTitleNavigationBar) { view in
+            view.backButton {
+                didPressBack()
+            }
+        }
+        .if(!isShowingTitleNavigationBar) { view in
+            view.navigationBarItems(trailing: closeButton)
         }
         .onLoad {
             DispatchQueue.main.async {
@@ -43,38 +50,92 @@ struct SurveyDetailView: View {
         ZStack {
             SurveyDetailImage(isAnimating: $isAnimating, survey: survey)
 
-            VStack(alignment: .leading) {
-                Text(survey.title)
-                    .lineLimit(3)
-                    .padding(.top, .mediumPadding)
-                    .foregroundColor(.white)
-                    .font(.boldLarge)
-                    .accessibility(.surveyDetail(.titleText))
-                Text(survey.description_)
-                    .lineLimit(.max)
-                    .padding(.top, .lineSpacing)
-                    .foregroundColor(.white)
-                    .font(.regularBody)
-                    .accessibility(.surveyDetail(.detailText))
+            VStack {
+                surveyQuestionView
                 Spacer()
-                HStack {
-                    Spacer()
-                    Button {
-                        // TODO: Add action when press next
-                    } label: {
-                        Text(String.localizeId.survey_detail_start_button())
-                            .primaryButton()
-                    }
-                    .padding(.bottom, .mediumPadding)
-                    .accessibility(.surveyDetail(.startButton))
-                }
+                nextButton
             }
-            .frame(maxWidth: .infinity)
             .padding(.horizontal, .smallPadding)
             .opacity(isAnimating ? 0.0 : 1.0)
         }
     }
 
+    var surveyQuestionView: some View {
+        VStack {
+            if isShowingTitle {
+                surveyTitleView
+                    .transition(.move(edge: .leading).combined(with: .opacity))
+            } else {
+                SurveyQuestionView()
+                    .transition(.move(edge: .trailing).combined(with: .opacity))
+            }
+        }
+    }
+
+    var surveyTitleView: some View {
+        VStack(alignment: .leading) {
+            Text(survey.title)
+                .lineLimit(3)
+                .padding(.top, .mediumPadding)
+                .foregroundColor(.white)
+                .font(.boldLarge)
+                .accessibility(.surveyDetail(.titleText))
+            Text(survey.description_)
+                .lineLimit(.max)
+                .padding(.top, .lineSpacing)
+                .foregroundColor(.white)
+                .font(.regularBody)
+                .accessibility(.surveyDetail(.detailText))
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+
+    var nextButton: some View {
+        HStack {
+            Spacer()
+            if isShowingTitle {
+                Button {
+                    // TODO: Add action when press next. Move following line to real logic.
+                    isShowingTitleNavigationBar = false
+                    DispatchQueue.main.asyncAfter(deadline: .now() + .instant) {
+                        withAnimation(.easeIn(duration: .viewTransition)) {
+                            self.isShowingTitle = false
+                        }
+                    }
+                } label: {
+                    Text(String.localizeId.survey_detail_start_button())
+                        .primaryButton()
+                }
+                .padding(.bottom, .mediumPadding)
+                .accessibility(.surveyDetail(.startButton))
+            } else {
+                Button {
+                    // TODO: Add action when press next
+                } label: {
+                    Assets.nextButton
+                        .image
+                        .resizable()
+                        .frame(width: 56.0, height: 56.0)
+                }
+                .padding(.bottom, .mediumPadding)
+                .accessibility(.surveyQuestion(.nextButton))
+            }
+        }
+    }
+
+    var closeButton: some View {
+        Button {
+            // TODO: Implement close button
+            didPressBack()
+        } label: {
+            Assets.closeButton
+                .image
+                .resizable()
+                .frame(width: 28.0, height: 28.0)
+                .accessibility(.surveyQuestion(.closeButton))
+        }
+    }
+
     func didPressBack() {
         withAnimation(.easeInViewTransition) {
             isAnimating = true

iosApp/Survey/Sources/Presentation/Modules/SurveyDetail/SurveyQuestion/SurveyQuestionView.swift

@@ -0,0 +1,30 @@
+//
+//  SurveyQuestionView.swift
+//  Survey
+//
+//  Created by Bliss on 11/1/23.
+//  Copyright © 2023 Nimble. All rights reserved.
+//
+
+import SwiftUI
+
+struct SurveyQuestionView: View {
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            // TODO: Use real data
+            Text("1/5")
+                .font(.boldMedium)
+                .foregroundColor(.white)
+                .opacity(0.5)
+                .padding(.top, .largePadding)
+                .accessibility(.surveyQuestion(.detailText))
+            Text("How are you?")
+                .font(.boldLarge)
+                .foregroundColor(.white)
+                .padding(.top, .tinyPadding)
+                .accessibility(.surveyQuestion(.titleText))
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+}

iosApp/Survey/Sources/Presentation/ViewId/ViewId+SurveyQuestion.swift

@@ -0,0 +1,18 @@
+//
+//  ViewId+SurveyQuestion.swift
+//  Survey
+//
+//  Created by Bliss on 11/1/23.
+//  Copyright © 2023 Nimble. All rights reserved.
+//
+
+extension ViewId {
+
+    enum SurveyQuestion: String {
+
+        case nextButton = "survey.question.next.button"
+        case titleText = "survey.question.title.text"
+        case detailText = "survey.question.detail.text"
+        case closeButton = "survey.question.close.button"
+    }
+}

iosApp/Survey/Sources/Presentation/ViewId/ViewId.swift

@@ -18,6 +18,7 @@ enum ViewId {
     case surveySelection(SurveySelection)
     case surveyLoading(SurveyLoading)
     case surveyDetail(SurveyDetail)
+    case surveyQuestion(SurveyQuestion)
     case account(Account)
     case general(General)
 
@@ -29,6 +30,7 @@ enum ViewId {
         case let .surveySelection(surveySelection): return surveySelection.rawValue
         case let .surveyLoading(surveyLoading): return surveyLoading.rawValue
         case let .surveyDetail(surveyDetail): return surveyDetail.rawValue
+        case let .surveyQuestion(surveyQuestion): return surveyQuestion.rawValue
         case let .account(account): return account.rawValue
         case let .general(general): return general.rawValue
         }

iosApp/Survey/Sources/Supports/Extensions/SwiftUI/CGFloat+Extensions.swift

@@ -13,10 +13,14 @@ extension CGFloat {
     static var lineSpacing: CGFloat = 16.0
     /// 20.0
     static var itemSpacing: CGFloat = 20.0
+    /// 8.0
+    static var tinyPadding: CGFloat = 8.0
     /// 20.0
     static var smallPadding: CGFloat = 20.0
     /// 24.0
     static var defaultPadding: CGFloat = 24.0
     /// 26.0
     static var mediumPadding: CGFloat = 26.0
+    /// 32.0
+    static var largePadding: CGFloat = 32.0
 }

iosApp/Survey/Sources/Supports/Extensions/SwiftUI/Font+Extensions.swift

@@ -30,6 +30,9 @@ extension Font {
     /// Weight: 400, Size: 13.0
     static let regularSmall: Font = .neuzei(size: 13.0)
 
+    /// Weight: 800, Size: 15.0
+    static let boldMedium: Font = .neuzei(.bold, size: 15.0)
+
     /// Weight: 400, Size: 17.0
     static let regularBody: Font = .neuzei()
 

iosApp/SurveyKIFUITests/Sources/Screens/SurveyDetailScreen.swift

@@ -11,4 +11,8 @@ final class SurveyDetailScreen: GenericScreen {
     func waitForAppearance() {
         tester().waitForView(withAccessibilityIdentifier: ViewId.surveyDetail(.view)())
     }
+
+    func tapNextButton() {
+        tester().tapView(withAccessibilityIdentifier: ViewId.surveyDetail(.startButton)())
+    }
 }

iosApp/SurveyKIFUITests/Sources/Screens/SurveyQuestionScreen.swift

@@ -0,0 +1,18 @@
+//
+//  SurveyQuestionScreen.swift
+//  Survey
+//
+//  Created by Bliss on 11/1/23.
+//  Copyright © 2023 Nimble. All rights reserved.
+//
+
+final class SurveyQuestionScreen: GenericScreen {
+
+    func waitForAppearance() {
+        tester().waitForView(withAccessibilityIdentifier: ViewId.surveyQuestion(.titleText)())
+    }
+
+    func tapCloseButton() {
+        tester().tapView(withAccessibilityIdentifier: ViewId.surveyQuestion(.closeButton)())
+    }
+}