Feature/sbb header sbb footer

SBBDesignSystemMobileSwiftUI.xcodeproj/project.pbxproj

@@ -7,6 +7,13 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		000742102B7DFF2000BB7A79 /* SBBHeaderBox.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0007420F2B7DFF2000BB7A79 /* SBBHeaderBox.swift */; };
+		000742122B7E06F600BB7A79 /* HeaderBoxDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 000742112B7E06F600BB7A79 /* HeaderBoxDemo.swift */; };
+		000742142B7E1BB400BB7A79 /* SBBHeaderBoxTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 000742132B7E1BB400BB7A79 /* SBBHeaderBoxTests.swift */; };
+		000742162B7E207C00BB7A79 /* SBBFooterBox.swift in Sources */ = {isa = PBXBuildFile; fileRef = 000742152B7E207C00BB7A79 /* SBBFooterBox.swift */; };
+		000742182B7E251100BB7A79 /* FooterBoxDemo.swift in Sources */ = {isa = PBXBuildFile; fileRef = 000742172B7E251100BB7A79 /* FooterBoxDemo.swift */; };
+		0007421A2B7E328C00BB7A79 /* SBBFooterModifier.swift in Sources */ = {isa = PBXBuildFile; fileRef = 000742192B7E328C00BB7A79 /* SBBFooterModifier.swift */; };
+		0007421D2B7E378C00BB7A79 /* SBBFooterBoxTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0007421C2B7E378C00BB7A79 /* SBBFooterBoxTests.swift */; };
 		001F37D7279EBECC000DED95 /* SBBTabViewTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 001F37D6279EBECC000DED95 /* SBBTabViewTests.swift */; };
 		0021DD5C2B5A855F00DD7E3E /* SBBNotification.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0021DD5B2B5A855E00DD7E3E /* SBBNotification.swift */; };
 		003C23522A3CA15D0095C31A /* SBBPromotionBox.swift in Sources */ = {isa = PBXBuildFile; fileRef = 003C23512A3CA15D0095C31A /* SBBPromotionBox.swift */; };
@@ -2638,6 +2645,13 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		0007420F2B7DFF2000BB7A79 /* SBBHeaderBox.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBHeaderBox.swift; sourceTree = "<group>"; };
+		000742112B7E06F600BB7A79 /* HeaderBoxDemo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HeaderBoxDemo.swift; sourceTree = "<group>"; };
+		000742132B7E1BB400BB7A79 /* SBBHeaderBoxTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBHeaderBoxTests.swift; sourceTree = "<group>"; };
+		000742152B7E207C00BB7A79 /* SBBFooterBox.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBFooterBox.swift; sourceTree = "<group>"; };
+		000742172B7E251100BB7A79 /* FooterBoxDemo.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FooterBoxDemo.swift; sourceTree = "<group>"; };
+		000742192B7E328C00BB7A79 /* SBBFooterModifier.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBFooterModifier.swift; sourceTree = "<group>"; };
+		0007421C2B7E378C00BB7A79 /* SBBFooterBoxTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBFooterBoxTests.swift; sourceTree = "<group>"; };
 		001F37D6279EBECC000DED95 /* SBBTabViewTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBTabViewTests.swift; sourceTree = "<group>"; };
 		0021DD5B2B5A855E00DD7E3E /* SBBNotification.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SBBNotification.swift; sourceTree = "<group>"; };
 		003C23512A3CA15D0095C31A /* SBBPromotionBox.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SBBPromotionBox.swift; sourceTree = "<group>"; };
@@ -5281,6 +5295,15 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		0007421B2B7E32E800BB7A79 /* SBBFooterBox */ = {
+			isa = PBXGroup;
+			children = (
+				000742152B7E207C00BB7A79 /* SBBFooterBox.swift */,
+				000742192B7E328C00BB7A79 /* SBBFooterModifier.swift */,
+			);
+			path = SBBFooterBox;
+			sourceTree = "<group>";
+		};
 		005DC8C82799D0B2009C5CEA /* TabBarEntry */ = {
 			isa = PBXGroup;
 			children = (
@@ -7950,8 +7973,10 @@
 				7C2B7E7023D9F8940012CF62 /* ColorsView.swift */,
 				7C2DFE4525B5DC5300030342 /* DialogueDemo.swift */,
 				7C64548A2403F690005997AB /* DividerViewDemo.swift */,
+				000742172B7E251100BB7A79 /* FooterBoxDemo.swift */,
 				A7F54687243B5BED0068B542 /* FormGroupView.swift */,
 				7CEF769224DA905600AFD5EB /* IconDemo.swift */,
+				000742112B7E06F600BB7A79 /* HeaderBoxDemo.swift */,
 				7C9C46D824CB046200C22E97 /* InfoViewDemo.swift */,
 				7C624899247E3DA100F54C9D /* ListItemDemo.swift */,
 				7C62489D247E48A400F54C9D /* ListItemDetailDemo.swift */,
@@ -8001,6 +8026,7 @@
 				7C609469274F9088001ABF67 /* SBBDialogueTests.swift */,
 				92995BAB259373C20042B5C5 /* SBBDividerTests.swift */,
 				7C60946B274F9652001ABF67 /* SBBFormGroupTests.swift */,
+				000742132B7E1BB400BB7A79 /* SBBHeaderBoxTests.swift */,
 				7C60946D274F9776001ABF67 /* SBBInfoViewTests.swift */,
 				7C60946F274F97E7001ABF67 /* SBBListItemTests.swift */,
 				7C609471274F9976001ABF67 /* SBBLoadingIndicatorTests.swift */,
@@ -8023,6 +8049,7 @@
 				7C609487274FB917001ABF67 /* SBBTextFieldTests.swift */,
 				7C609489274FBA00001ABF67 /* SBBToastTests.swift */,
 				2D92C01A2A1BC2FD001FE5B7 /* SBBUpDnCounterTests.swift */,
+				0007421C2B7E378C00BB7A79 /* SBBFooterBoxTests.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -8048,7 +8075,6 @@
 			isa = PBXGroup;
 			children = (
 				00D0962B2A6AA8E5009E02B1 /* SBBDatePicker */,
-				00FB8193278ED4E300F07D30 /* SBBTabView */,
 				7C595E5625A5FD2E0015B0FC /* CheckBoxAndRadioButtonContainerType.swift */,
 				7C595E4C25A5F5B20015B0FC /* CheckboxAndRadioButtonContainerView.swift */,
 				7CA464DE2445F31100118D7B /* SBBAccordion.swift */,
@@ -8057,7 +8083,9 @@
 				7CE7BD4F25B16A84000ADF6B /* SBBChip.swift */,
 				7C2DFE3B25B5BF7900030342 /* SBBDialogue.swift */,
 				7C6454882403F50A005997AB /* SBBDivider.swift */,
+				0007421B2B7E32E800BB7A79 /* SBBFooterBox */,
 				A74C8B70243757E400BF26E3 /* SBBFormGroup.swift */,
+				0007420F2B7DFF2000BB7A79 /* SBBHeaderBox.swift */,
 				7C9C46D624CB034000C22E97 /* SBBInfoView.swift */,
 				7C624894247E2ACB00F54C9D /* SBBListItem.swift */,
 				7CC3FACF25AED16B00D227D4 /* SBBLoadingIndicator.swift */,
@@ -8074,6 +8102,7 @@
 				7CC5F4B926B03D230028161D /* SBBRadioButtonGroup.swift */,
 				7C43038823FD86110033865F /* SBBSegmentedPicker.swift */,
 				00C731CE2AC5742E009D5DCA /* SBBStatus.swift */,
+				00FB8193278ED4E300F07D30 /* SBBTabView */,
 				A7EDCA362434951500753AE1 /* SBBTextArea.swift */,
 				A73734892436135B00E34716 /* SBBTextField.swift */,
 				7CE19B1D25B98D7700FEFC1E /* SBBToast */,
@@ -10803,9 +10832,11 @@
 				92B4A0C125592694005F4F06 /* SBBBundle.swift in Sources */,
 				7C624895247E2ACB00F54C9D /* SBBListItem.swift in Sources */,
 				2D804EAD23D9D1FE00CC9C0C /* SBBColors.swift in Sources */,
+				000742162B7E207C00BB7A79 /* SBBFooterBox.swift in Sources */,
 				00B773C42A3C4BB7002BDB85 /* SBBMessage.swift in Sources */,
 				005DC8D8279B08BA009C5CEA /* TabBarParameters.swift in Sources */,
 				005DC8D6279AC91E009C5CEA /* TabButtonView.swift in Sources */,
+				000742102B7DFF2000BB7A79 /* SBBHeaderBox.swift in Sources */,
 				7C28871A24BF266E00EDBD27 /* OnboardingViewModel.swift in Sources */,
 				00D0962F2A6ACC31009E02B1 /* SBBPickerWrapper.swift in Sources */,
 				7CDBA68F24C174AB002289EE /* SBBIconButtonStyle.swift in Sources */,
@@ -10831,6 +10862,7 @@
 				2DCEC918253D83B7008EDD15 /* SBBColorName.swift in Sources */,
 				7CE19B1F25B98D8300FEFC1E /* SBBToast.swift in Sources */,
 				7C1A846225F787D4008B66D3 /* SBBNavigationBarSBBIcon.swift in Sources */,
+				0007421A2B7E328C00BB7A79 /* SBBFooterModifier.swift in Sources */,
 				7CAFE99F23DEE515001ADBE8 /* SBBAppearance.swift in Sources */,
 				7C106D2E25DAA74D00B89ECD /* SBBToastContainerViewModifier.swift in Sources */,
 				A706C156243715060029BD8D /* SBBCheckBox.swift in Sources */,
@@ -10917,7 +10949,9 @@
 				7CE7BD5425B17CCB000ADF6B /* ChipDemo.swift in Sources */,
 				7C43038723FD72610033865F /* SegmentedPickerViewDemo.swift in Sources */,
 				7CA0555A2660C43B00513F00 /* OnboardingViewModel.swift in Sources */,
+				000742122B7E06F600BB7A79 /* HeaderBoxDemo.swift in Sources */,
 				7C595E5B25A5FDD20015B0FC /* RadioButtonView.swift in Sources */,
+				000742182B7E251100BB7A79 /* FooterBoxDemo.swift in Sources */,
 				2DCEC9022539E34A008EDD15 /* TypographyUIKitView.swift in Sources */,
 				A7F54688243B5BED0068B542 /* FormGroupView.swift in Sources */,
 				A75AAE2024373C0C0054B54A /* CheckBoxView.swift in Sources */,
@@ -10971,11 +11005,13 @@
 				7C60949E274FC3FA001ABF67 /* SBBEnvironmentBannerTests.swift in Sources */,
 				7C6094A0274FC67B001ABF67 /* SBBSliderExtensionTests.swift in Sources */,
 				7C609468274F8FC8001ABF67 /* SBBChipTests.swift in Sources */,
+				000742142B7E1BB400BB7A79 /* SBBHeaderBoxTests.swift in Sources */,
 				00B773C82A3C6CC8002BDB85 /* SBBMessageTests.swift in Sources */,
 				92995BA42593739F0042B5C5 /* SBBBubbleViewTests.swift in Sources */,
 				92995BAC259373C20042B5C5 /* SBBDividerTests.swift in Sources */,
 				7C609480274FB4FC001ABF67 /* SBBRadioButtonTests.swift in Sources */,
 				7C609472274F9976001ABF67 /* SBBLoadingIndicatorTests.swift in Sources */,
+				0007421D2B7E378C00BB7A79 /* SBBFooterBoxTests.swift in Sources */,
 				001F37D7279EBECC000DED95 /* SBBTabViewTests.swift in Sources */,
 				7C60948A274FBA00001ABF67 /* SBBToastTests.swift in Sources */,
 				7C60946A274F9088001ABF67 /* SBBDialogueTests.swift in Sources */,

SBBDesignSystemMobileSwiftUI/Resources/Assets.xcassets/SemanticColors/modalBackground.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.965",
-          "green" : "0.965",
-          "red" : "0.965"
+          "blue" : "0xF6",
+          "green" : "0xF6",
+          "red" : "0xF6"
         }
       },
       "idiom" : "universal"
@@ -23,9 +23,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.082",
-          "green" : "0.082",
-          "red" : "0.082"
+          "blue" : "0x15",
+          "green" : "0x15",
+          "red" : "0x15"
         }
       },
       "idiom" : "universal"

SBBDesignSystemMobileSwiftUI/Views/SBBBubbleView.swift

@@ -259,7 +259,7 @@ public struct SBBBubbleView<ExpandableContent, SubtitleContent, FixedContent>: V
                     .padding(.vertical, horizontalSizeClass == .compact ? 16 : 8)
                     .background(Color.sbbColor(.viewBackground))
                     .cornerRadius(16)
-                    .shadow(color: Color.black.opacity(0.1), radius: 5)
+                    .shadow(color: Color.sbbColor(.tabshadow), radius: 5)
                     .accentColor(.sbbColor(.textBlack))
                     .onTapGesture {
                         withAnimation{

SBBDesignSystemMobileSwiftUI/Views/SBBFooterBox/SBBFooterBox.swift

@@ -0,0 +1,68 @@
+//
+// Copyright (C) Schweizerische Bundesbahnen SBB, 2024.
+//
+
+import SwiftUI
+
+/**
+ A  View that is used to display a footer.
+
+ ## Overview
+ You create a SBBFooterBox by providing a custom Content. You can also specify the footer is used with a tab bar or not
+ ```swift
+ var body: some View {
+    SBBFooterBox(content: {
+            VStack(alignment: .leading) {
+                Text("Title")
+                Text("This is some information.")
+            }
+        }, hasTabBar = false)
+    }
+ ```
+ ![SBBFooterBox](SBBFooterBox)
+ */
+public struct SBBFooterBox<Content: View>: View {
+
+    private let content: Content
+    private let hasTabBar: Bool
+
+    @Environment(\.horizontalSizeClass) var horizontalSizeClass
+    @Environment(\.verticalSizeClass) var verticalSizeClass
+
+    public init(@ViewBuilder content: @escaping () -> Content, hasTabBar: Bool = true) {
+        self.content = content()
+        self.hasTabBar = hasTabBar
+    }
+
+    public var body: some View {
+        HStack {
+            content
+                .frame(maxWidth: .infinity, minHeight: 24, alignment: .leading)
+                .padding(16)
+                .padding(.bottom, hasTabBar ? horizontalSizeClass == .compact && verticalSizeClass == .regular ? 75 + 36 : 38 + 24 : 24)
+        }
+        .background(Color.sbbColor(.modalBackground))
+        .cornerRadius(16, corners: [.topLeft, .topRight])
+        .shadow(color: Color.sbbColor(.tabshadow), radius: 5)
+    }
+}
+
+
+struct SBBFooterBox_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            SBBFooterBox(content: {
+                Rectangle()
+                    .foregroundColor(.purple)
+                    .frame(height: 24)
+            }, hasTabBar: true)
+            .previewDisplayName("With tab bar padding")
+            SBBFooterBox(content: {
+                Rectangle()
+                    .foregroundColor(.purple)
+                    .frame(height: 24)
+            }, hasTabBar: false)
+            .previewDisplayName("Without tab bar padding")
+        }
+    }
+}

SBBDesignSystemMobileSwiftUI/Views/SBBFooterBox/SBBFooterModifier.swift

@@ -0,0 +1,46 @@
+//
+// Copyright (C) Schweizerische Bundesbahnen SBB, 2024.
+//
+
+import SwiftUI
+
+public extension View {
+
+    /**
+     Shows a custom View (typically ``SBBFooterBox``) above the entire screen while blurring the View behind.
+
+     - Parameters:
+        - isPresented: The state controlling whether the custom View passed as content is currently presented or hidden.
+        - content: The custom content to be shown when presented (typically a ``SBBFooterBox`).
+
+     - Returns: A View containing the passed View with added presentable content above it.
+     */
+    func footer<Content: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> Content) -> some View {
+        FooterContainer(isPresented: isPresented, content: content, presentingView: self)
+    }
+}
+
+fileprivate struct FooterContainer<PresentingView: View, ModalViewContent: View>: View {
+
+    @Binding var isPresented: Bool
+    let content: () -> ModalViewContent
+    let presentingView: PresentingView
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            presentingView
+                .accessibilityHidden(isPresented ? true : false)
+
+            if isPresented {
+                Rectangle()
+                    .foregroundColor(Color.sbbColor(.iron).opacity(0.2)).edgesIgnoringSafeArea(.horizontal)
+                    .accessibilityHidden(true)
+                    .onTapGesture {
+                        isPresented = false
+                    }
+                content()
+            }
+        }
+        .edgesIgnoringSafeArea(.bottom)
+    }
+}