diff --git a/Backpack-SwiftUI/HorizontalNavigation/Classes/BPKHorizontalNavigation.swift b/Backpack-SwiftUI/HorizontalNavigation/Classes/BPKHorizontalNavigation.swift new file mode 100644 index 000000000..294556b80 --- /dev/null +++ b/Backpack-SwiftUI/HorizontalNavigation/Classes/BPKHorizontalNavigation.swift @@ -0,0 +1,151 @@ +/* + * Backpack - Skyscanner's Design System + * + * Copyright 2018-2023 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 extension BPKHorizontalNavigation { + enum Size { + case `default` + case small + + var titleStyle: BPKFontStyle { + switch self { + case .default: return .label1 + case .small: return .label2 + } + } + + var verticalPadding: CGFloat { + switch self { + case .default: return 12 + case .small: return BPKSpacing.md.value + } + } + } + + struct Tab { + let title: String + let icon: BPKIcon? + + public init(title: String, icon: BPKIcon? = nil) { + self.title = title + self.icon = icon + } + } +} + +public struct BPKHorizontalNavigation: View { + let tabs: [Tab] + let size: Size + @Binding var selectedTab: Int + + public init(tabs: [Tab], size: Size = .default, selectedTab: Binding) { + self.tabs = tabs + self.size = size + _selectedTab = selectedTab + } + + public var body: some View { + ZStack(alignment: .bottom) { + HStack(spacing: BPKSpacing.none) { + ForEach(0.. CGFloat { + proxy.size.width / CGFloat(tabs.count) + } + + struct TabCellView: View { + let tab: Tab + let isSelected: Bool + let size: Size + + var body: some View { + HStack(spacing: .md) { + if let icon = tab.icon { + BPKIconView(icon) + .foregroundColor(foregroundColor) + } + BPKText(tab.title, style: size.titleStyle) + .foregroundColor(foregroundColor) + } + .frame(maxWidth: .infinity) + } + + private var foregroundColor: BPKColor { + isSelected ? .coreAccentColor : .textPrimaryColor + } + } +} + +struct BPKHorizontalNavigation_Previews: PreviewProvider { + static var previews: some View { + VStack { + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + selectedTab: .constant(1) + ) + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + selectedTab: .constant(1) + ) + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + size: .small, + selectedTab: .constant(2) + ) + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + size: .small, + selectedTab: .constant(0) + ) + } + } +} diff --git a/Backpack-SwiftUI/HorizontalNavigation/README.md b/Backpack-SwiftUI/HorizontalNavigation/README.md new file mode 100644 index 000000000..c075cdd1a --- /dev/null +++ b/Backpack-SwiftUI/HorizontalNavigation/README.md @@ -0,0 +1,56 @@ +# HorizontalNavigation + +[![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/BPKBadge.html) +[![view on Github](https://img.shields.io/badge/Source%20code-GitHub-lightgrey)](https://github.com/Skyscanner/backpack-ios/tree/main/Backpack-SwiftUI/Badge) + +## Default + +| Day | Night | +| --- | --- | +| | | + +## Usage + +```swift +@State var selectedTab: Int = 0 +BPKHorizontalNavigation( + tabs: [ + .init(title: "Flights", icon: .flight), + .init(title: "Hotels", icon: .hotel), + .init(title: "Cars", icon: .car) + ], + selectedTab: $selectedTab +) +``` + +### Setting the Size + +BPkHorizontalNavigation supports both a `default` and a `small` size. + +```swift +@State var selectedTab: Int = 0 +BPKHorizontalNavigation( + tabs: [ + .init(title: "Flights", icon: .flight), + .init(title: "Hotels", icon: .hotel), + .init(title: "Cars", icon: .car) + ], + size: .small, + selectedTab: $selectedTab +) +``` + +### Tabs withou icons + +```swift +@State var selectedTab: Int = 0 +BPKHorizontalNavigation( + tabs: [ + .init(title: "Flights"), + .init(title: "Hotels"), + .init(title: "Cars") + ], + selectedTab: $selectedTab +) +``` diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/BPKHorizontalNavigationTests.swift b/Backpack-SwiftUI/Tests/HorizontalNavigation/BPKHorizontalNavigationTests.swift new file mode 100644 index 000000000..8a97902a1 --- /dev/null +++ b/Backpack-SwiftUI/Tests/HorizontalNavigation/BPKHorizontalNavigationTests.swift @@ -0,0 +1,86 @@ +/* + * 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 BPKHorizontalNavigationTests: XCTestCase { + func test_allTabsWithoutIcon_defaultSize() { + assertSnapshot( + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + selectedTab: .constant(1) + ) + .frame(width: 400) + ) + } + + func test_allTabsWithoutIcon_smallSize() { + assertSnapshot( + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + size: .small, + selectedTab: .constant(1) + ) + .frame(width: 400) + ) + } + + func test_allTabsWithIcon_defaultSize() { + assertSnapshot( + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + selectedTab: .constant(1) + ) + .frame(width: 400) + ) + } + + func test_allTabsWithIcon_smallSize() { + assertSnapshot( + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + size: .small, + selectedTab: .constant(1) + ) + .frame(width: 400) + ) + } + + func test_accessibility() { + assertA11ySnapshot( + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + selectedTab: .constant(1) + ) + ) + } +} diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_accessibility.a11y.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_accessibility.a11y.png new file mode 100644 index 000000000..ddbb9c811 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_accessibility.a11y.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.dark-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.dark-mode.png new file mode 100644 index 000000000..e78f5ed61 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.dark-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.light-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.light-mode.png new file mode 100644 index 000000000..d5a37af5b Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.light-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.rtl.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.rtl.png new file mode 100644 index 000000000..8dc18de07 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_defaultSize.rtl.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.dark-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.dark-mode.png new file mode 100644 index 000000000..b0f0a5707 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.dark-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.light-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.light-mode.png new file mode 100644 index 000000000..77005ec0c Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.light-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.rtl.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.rtl.png new file mode 100644 index 000000000..dadef7458 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithIcon_smallSize.rtl.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.dark-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.dark-mode.png new file mode 100644 index 000000000..cbf4d5225 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.dark-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.light-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.light-mode.png new file mode 100644 index 000000000..b4ac69ebe Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.light-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.rtl.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.rtl.png new file mode 100644 index 000000000..d32f88004 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_defaultSize.rtl.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.dark-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.dark-mode.png new file mode 100644 index 000000000..611a66471 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.dark-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.light-mode.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.light-mode.png new file mode 100644 index 000000000..6470d3352 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.light-mode.png differ diff --git a/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.rtl.png b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.rtl.png new file mode 100644 index 000000000..0a08783c5 Binary files /dev/null and b/Backpack-SwiftUI/Tests/HorizontalNavigation/__Snapshots__/BPKHorizontalNavigationTests/test_allTabsWithoutIcon_smallSize.rtl.png differ diff --git a/Example/Backpack Screenshot/SwiftUIScreenshots.swift b/Example/Backpack Screenshot/SwiftUIScreenshots.swift index bc9ed6b6a..9169270c9 100644 --- a/Example/Backpack Screenshot/SwiftUIScreenshots.swift +++ b/Example/Backpack Screenshot/SwiftUIScreenshots.swift @@ -798,5 +798,10 @@ class SwiftUIScreenshots: BackpackSnapshotTestCase { saveScreenshot(component: "app-search-modal", scenario: "error", userInterfaceStyle: userInterfaceStyle) tapBackButton() } + + await navigate(title: "Horizontal navigation") { + switchTab(title: "SwiftUI") + saveScreenshot(component: "horizontal-navigation", scenario: "default", userInterfaceStyle: userInterfaceStyle) + } } } diff --git a/Example/Backpack.xcodeproj/project.pbxproj b/Example/Backpack.xcodeproj/project.pbxproj index 65fd608d0..3f10ea5e1 100644 --- a/Example/Backpack.xcodeproj/project.pbxproj +++ b/Example/Backpack.xcodeproj/project.pbxproj @@ -34,6 +34,7 @@ 5390DB612909940700F0F790 /* ColorTokensViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5390DB602909940700F0F790 /* ColorTokensViewController.swift */; }; 539897BF2BA852E500C8D939 /* ImageGalleryPreviewExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 539897BE2BA852E500C8D939 /* ImageGalleryPreviewExampleView.swift */; }; 539897C82BA8A8FF00C8D939 /* ImageGallerySlideshowExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 539897C72BA8A8FF00C8D939 /* ImageGallerySlideshowExampleView.swift */; }; + 539E51892BC84770001FB36F /* HorizontalNavigationExampleView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 539E51882BC844CA001FB36F /* HorizontalNavigationExampleView.swift */; }; 53B5822127DA3CF4004101A3 /* CalendarUITest.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53B5822027DA3CF3004101A3 /* CalendarUITest.swift */; }; 53B6DB5927FB6F930042B7C0 /* ComponentCells.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53B6DB5727FB6F930042B7C0 /* ComponentCells.swift */; }; 53B6DB5A27FB6F930042B7C0 /* TokenCells.swift in Sources */ = {isa = PBXBuildFile; fileRef = 53B6DB5827FB6F930042B7C0 /* TokenCells.swift */; }; @@ -261,6 +262,7 @@ 5390DB602909940700F0F790 /* ColorTokensViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ColorTokensViewController.swift; sourceTree = ""; }; 539897BE2BA852E500C8D939 /* ImageGalleryPreviewExampleView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ImageGalleryPreviewExampleView.swift; sourceTree = ""; }; 539897C72BA8A8FF00C8D939 /* ImageGallerySlideshowExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageGallerySlideshowExampleView.swift; sourceTree = ""; }; + 539E51882BC844CA001FB36F /* HorizontalNavigationExampleView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HorizontalNavigationExampleView.swift; sourceTree = ""; }; 53B5822027DA3CF3004101A3 /* CalendarUITest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarUITest.swift; sourceTree = ""; }; 53B6DB5727FB6F930042B7C0 /* ComponentCells.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ComponentCells.swift; sourceTree = ""; }; 53B6DB5827FB6F930042B7C0 /* TokenCells.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = TokenCells.swift; sourceTree = ""; }; @@ -525,20 +527,20 @@ path = Select; sourceTree = ""; }; - 256F76132BB479610047AD1C /* SearchInputSummary */ = { + 1AF3D2C82BB18924001623A4 /* ImageGalleryGridView */ = { isa = PBXGroup; children = ( - 256F76142BB479850047AD1C /* SearchInputSummaryExampleView.swift */, + 1AF3D2C92BB18924001623A4 /* ImageGalleryGridExampleView.swift */, ); - path = SearchInputSummary; + path = ImageGalleryGridView; sourceTree = ""; }; - 1AF3D2C82BB18924001623A4 /* ImageGalleryGridView */ = { + 256F76132BB479610047AD1C /* SearchInputSummary */ = { isa = PBXGroup; children = ( - 1AF3D2C92BB18924001623A4 /* ImageGalleryGridExampleView.swift */, + 256F76142BB479850047AD1C /* SearchInputSummaryExampleView.swift */, ); - path = ImageGalleryGridView; + path = SearchInputSummary; sourceTree = ""; }; 2A8000102AB3DC3B009FDB10 /* TextArea */ = { @@ -609,6 +611,14 @@ path = ImageGallerySlideshow; sourceTree = ""; }; + 539E51872BC844C1001FB36F /* HorizontalNavigation */ = { + isa = PBXGroup; + children = ( + 539E51882BC844CA001FB36F /* HorizontalNavigationExampleView.swift */, + ); + path = HorizontalNavigation; + sourceTree = ""; + }; 53B6DB5627FB6F930042B7C0 /* FeatureStories */ = { isa = PBXGroup; children = ( @@ -985,6 +995,7 @@ 793EC5502836139A00D627F6 /* Components */ = { isa = PBXGroup; children = ( + 539E51872BC844C1001FB36F /* HorizontalNavigation */, 1AF3D2C82BB18924001623A4 /* ImageGalleryGridView */, E2B9D19D2BB3579F0053C14C /* NavigationTabGroup */, E2B9D19C2BB357950053C14C /* NavigationTab */, @@ -1871,6 +1882,7 @@ 5318E3342AF506FA00C66D18 /* CalendarExampleSingleView.swift in Sources */, 3A7D2D47214AB9F400ECBD5B /* BPKButtonsViewController.m in Sources */, D2644E3022C0EB4E008B50C0 /* TappableLinkLabelsSelectorViewController.swift in Sources */, + 539E51892BC84770001FB36F /* HorizontalNavigationExampleView.swift in Sources */, 53C6622529EA0DAB00BF1A62 /* PanelExampleView.swift in Sources */, D24A31D5219B147A009B75E4 /* UICollectionViewMasonryFlowLayout.swift in Sources */, 53C6621C29EA0DAB00BF1A62 /* PageIndicatorExampleView.swift in Sources */, diff --git a/Example/Backpack/SwiftUI/Components/HorizontalNavigation/HorizontalNavigationExampleView.swift b/Example/Backpack/SwiftUI/Components/HorizontalNavigation/HorizontalNavigationExampleView.swift new file mode 100644 index 000000000..298d00e68 --- /dev/null +++ b/Example/Backpack/SwiftUI/Components/HorizontalNavigation/HorizontalNavigationExampleView.swift @@ -0,0 +1,62 @@ +// +/* + * Backpack - Skyscanner's Design System + * + * Copyright © 2024 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 HorizontalNavigationExampleView: View { + @State var selectedTab = 0 + + var body: some View { + VStack { + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + selectedTab: $selectedTab + ) + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + selectedTab: $selectedTab + ) + BPKHorizontalNavigation( + tabs: [.init(title: "One"), .init(title: "Two"), .init(title: "Three")], + size: .small, + selectedTab: $selectedTab + ) + BPKHorizontalNavigation( + tabs: [ + .init(title: "One", icon: .flight), + .init(title: "Two", icon: .flight), + .init(title: "Three", icon: .flight) + ], + size: .small, + selectedTab: $selectedTab + ) + } + } +} + +struct HorizontalNavigationExampleView_Previews: PreviewProvider { + static var previews: some View { + HorizontalNavigationExampleView() + } +} diff --git a/Example/Backpack/Utils/FeatureStories/ComponentCells.swift b/Example/Backpack/Utils/FeatureStories/ComponentCells.swift index 165247477..6d7861e92 100644 --- a/Example/Backpack/Utils/FeatureStories/ComponentCells.swift +++ b/Example/Backpack/Utils/FeatureStories/ComponentCells.swift @@ -219,10 +219,15 @@ extension ComponentCellsProvider { ) } private func horizontalNavigation() -> CellDataSource { - GroupCellDataSource( + ComponentCellDataSource( title: "Horizontal navigation", - groups: HorizontalNavigationGroupsProvider(showPresentable: show(presentable:)).groups(), - showChildren: { showChildren(title: "Horizontal navigation", children: $0) } + tabs: [ + .uikit(groups: HorizontalNavigationGroupsProvider(showPresentable: show(presentable:)).groups()), + .swiftui(presentable: CustomPresentable(generateViewController: { + ContentUIHostingController(HorizontalNavigationExampleView()) + })) + ], + showChildren: { showComponent(title: "Horizontal navigation", tabs: $0) } ) } private func icon() -> CellDataSource { diff --git a/screenshots/iPhone-swiftui_horizontal-navigation___default_dm.png b/screenshots/iPhone-swiftui_horizontal-navigation___default_dm.png new file mode 100644 index 000000000..4765c54aa Binary files /dev/null and b/screenshots/iPhone-swiftui_horizontal-navigation___default_dm.png differ diff --git a/screenshots/iPhone-swiftui_horizontal-navigation___default_lm.png b/screenshots/iPhone-swiftui_horizontal-navigation___default_lm.png new file mode 100644 index 000000000..0dc81e99f Binary files /dev/null and b/screenshots/iPhone-swiftui_horizontal-navigation___default_lm.png differ