feat: add tab bar component (#1135) (#1202)

Add tab bar for iOS, iPadOS, visionOS and macOS platforms

Closes #1135

Tested-by: Benoit Suzanne <benoit.suzanne@orange.com>
Tested-by: Jérôme Régnier <jerome.regnier@orange.com>
Tested-by: Maxime Tonnerre <maxime.tonnerre@orange.com>
Reviewed-by: Ludovic Pinel <ludovic.pinel@orange.com>
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>

Author: pylapp

AGENTS.md

@@ -681,4 +681,60 @@ OUDSLink(text: "Text", indicator: .back, size: .default) { /* the action to proc
 or with an image:
 ```swift
 OUDSLink(text: "Text", icon: Image("image_name"), size: .default) { /* the action to process */ }
-```
+```
+
+##### Tab bar
+
+Tab bar is a navigation component, based a lot on the iOS native component, and displays tabs to the user which redirect to views and journeys.
+Its documentation is [available online](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudstabbar).
+
+If iOS lower than 26 is managed, a selected tab indicator must be displayed, thus the component must know the number of items to display and get
+a selected item info associated to a tag:
+
+```swift
+OUDSTabBar(selected: 0, count: 3) {
+
+    // Add the views with the SwiftUI tab item and labels
+    // No need to define colors, everything is done inside OUDSTabBar
+    // Image must be in 26 x 26
+    // Tag value must be used in "selected" parameter
+    SomeView()
+        .tabItem {
+            Label("Label 1", image: "image_1")
+        }
+        .tag(0)
+    OtherView()
+        .tabItem {
+            Label("Label 2", image: "image_2")
+        }
+        .tag(1)
+    LastView()
+        .tabItem {
+            Label("Label 3", image: "image_3")
+        }
+        .tag(2)
+}
+```
+
+If the user targets iOS 26 and greater, prefer this definition of tab bar:
+```swift
+OUDSTabBar {
+
+    // Add the views with the SwiftUI tab item and labels
+    // No need to define colors, everything is done inside OUDSTabBar
+    // Image must be in 26 x 26
+    SomeView()
+        .tabItem {
+            Label("Label 1", image: "image_1")
+        }
+    OtherView()
+        .tabItem {
+            Label("Label 2", image: "image_2")
+        }
+    LastView()
+        .tabItem {
+            Label("Label 3", image: "image_3")
+        }
+}
+```
+

CHANGELOG.md

@@ -9,13 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- `tab bar` component (Orange-OpenSource/ouds-ios#1135)
 - `constrainedMaxWidth` parameter to control items and text input components (Orange-OpenSource/ouds-ios#1211)
 
 ### Changed
 
+- Define timeout of 1 hour for all GitHub Actions workflows
 - Color semantic tokens (Orange-OpenSource/ouds-ios#1206)
 - Update wording keys and translations (Orange-OpenSource/ouds-ios#1200)
-- Define timeout of 2 hours for all GitHub Actions workflows
 - Update icons to v1.4.0 (Orange-OpenSource/ouds-ios#1193)
 - References to DSM documentation (Orange-OpenSource/ouds-ios#1210) (Orange-OpenSource/ouds-ios#1212)
 - Update `switch` components to v1.5.0 (Orange-OpenSource/ouds-ios#1138)

OUDS/Core/Components/Sources/Actions/Button/OUDSButton.swift

@@ -102,19 +102,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A button component in light and dark mode with Orange theme](component_button_Orange)
+/// ![A button component in light and dark modes with Orange theme](component_button_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A button component in light and dark mode with Orange Business Tools theme](component_button_OrangeBusinessTools)
+/// ![A button component in light and dark modes with Orange Business Tools theme](component_button_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A button component in light and dark mode with Sosh theme](component_button_Sosh)
+/// ![A button component in light and dark modes with Sosh theme](component_button_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A button component in light and dark mode with Wireframe theme](component_button_Wireframe)
+/// ![A button component in light and dark modes with Wireframe theme](component_button_Wireframe)
 ///
 /// - Version: 3.2.0 (Figma component design version)
 /// - Since: 0.10.0

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckbox.swift

@@ -73,19 +73,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A checkbox component in light and dark mode with Orange theme](component_checkbox_Orange)
+/// ![A checkbox component in light and dark modes with Orange theme](component_checkbox_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A checkbox component in light and dark mode with Orange Business Tools theme](component_checkbox_OrangeBusinessTools)
+/// ![A checkbox component in light and dark modes with Orange Business Tools theme](component_checkbox_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A checkbox component in light and dark mode with Sosh theme](component_checkbox_Sosh)
+/// ![A checkbox component in light and dark modes with Sosh theme](component_checkbox_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A checkbox component in light and dark mode with Wireframe theme](component_checkbox_Wireframe)
+/// ![A checkbox component in light and dark modes with Wireframe theme](component_checkbox_Wireframe)
 ///
 /// - Version: 2.4.0 (Figma component design version)
 /// - Since: 0.12.0

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckboxIndeterminate.swift

@@ -74,19 +74,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A checkbox component in light and dark mode with Orange theme](component_checkbox_Orange)
+/// ![A checkbox component in light and dark modes with Orange theme](component_checkbox_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A checkbox component in light and dark mode with Orange Business Tools theme](component_checkbox_OrangeBusinessTools)
+/// ![A checkbox component in light and dark modes with Orange Business Tools theme](component_checkbox_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A checkbox component in light and dark mode with Sosh theme](component_checkbox_Sosh)
+/// ![A checkbox component in light and dark modes with Sosh theme](component_checkbox_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A checkbox component in light and dark mode with Wireframe theme](component_checkbox_Wireframe)
+/// ![A checkbox component in light and dark modes with Wireframe theme](component_checkbox_Wireframe)
 ///
 /// - Version: 2.4.0 (Figma component design version)
 /// - Since: 0.12.0

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckboxItem.swift

@@ -128,19 +128,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A checkbox item component in light and dark mode with Orange theme](component_checkboxItem_Orange)
+/// ![A checkbox item component in light and dark modes with Orange theme](component_checkboxItem_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A checkbox item component in light and dark mode with Orange Business Tools theme](component_checkboxItem_OrangeBusinessTools)
+/// ![A checkbox item component in light and dark modes with Orange Business Tools theme](component_checkboxItem_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A checkbox item component in light and dark mode with Sosh theme](component_checkboxItem_Sosh)
+/// ![A checkbox item component in light and dark modes with Sosh theme](component_checkboxItem_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A checkbox item component in light and dark mode with Wireframe theme](component_checkboxItem_Wireframe)
+/// ![A checkbox item component in light and dark modes with Wireframe theme](component_checkboxItem_Wireframe)
 ///
 /// - Version: 2.4.0 (Figma component design version)
 /// - Since: 0.12.0

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckboxItemIndeterminate.swift

@@ -134,19 +134,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A checkbox item component in light and dark mode with Orange theme](component_checkboxItem_Orange)
+/// ![A checkbox item component in light and dark modes with Orange theme](component_checkboxItem_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A checkbox item component in light and dark mode with Orange Business Tools theme](component_checkboxItem_OrangeBusinessTools)
+/// ![A checkbox item component in light and dark modes with Orange Business Tools theme](component_checkboxItem_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A checkbox item component in light and dark mode with Sosh theme](component_checkboxItem_Sosh)
+/// ![A checkbox item component in light and dark modes with Sosh theme](component_checkboxItem_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A checkbox item component in light and dark mode with Wireframe theme](component_checkboxItem_Wireframe)
+/// ![A checkbox item component in light and dark modes with Wireframe theme](component_checkboxItem_Wireframe)
 ///
 /// - Version: 2.4.0 (Figma component design version)
 /// - Since: 0.12.0

OUDS/Core/Components/Sources/Controls/CheckboxPicker/OUDSCheckboxPicker.swift

@@ -89,7 +89,7 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A checkbox picker component in light and dark mode with Orange theme](component_checkboxPicker_Orange)
+/// ![A checkbox picker component in light and dark modes with Orange theme](component_checkboxPicker_Orange)
 ///
 /// - Since: 0.14.0
 @available(iOS 15, macOS 15, visionOS 1, *)

OUDS/Core/Components/Sources/Controls/Chip/OUDSFilterChip.swift

@@ -40,19 +40,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A filter chip component in light and dark mode with Orange theme](component_filterChip_Orange)
+/// ![A filter chip component in light and dark modes with Orange theme](component_filterChip_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A filter chip component in light and dark mode with Orange Business Tools theme](component_filterChip_OrangeBusinessTools)
+/// ![A filter chip component in light and dark modes with Orange Business Tools theme](component_filterChip_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A filter chip component in light and dark mode with Sosh theme](component_filterChip_Sosh)
+/// ![A filter chip component in light and dark modes with Sosh theme](component_filterChip_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A filter chip component in light and dark mode with Wireframe theme](component_filterChip_Wireframe)
+/// ![A filter chip component in light and dark modes with Wireframe theme](component_filterChip_Wireframe)
 ///
 /// - Version: 1.3.0
 /// - Since: 0.17.0

OUDS/Core/Components/Sources/Controls/Chip/OUDSSuggestionChip.swift

@@ -47,19 +47,19 @@ import SwiftUI
 ///
 /// ### Orange
 ///
-/// ![A suggestion chip component in light and dark mode with Orange theme](component_suggestionChip_Orange)
+/// ![A suggestion chip component in light and dark modes with Orange theme](component_suggestionChip_Orange)
 ///
 /// ### Orange Business Tools
 ///
-/// ![A suggestion chip component in light and dark mode with Orange Business Tools theme](component_suggestionChip_OrangeBusinessTools)
+/// ![A suggestion chip component in light and dark modes with Orange Business Tools theme](component_suggestionChip_OrangeBusinessTools)
 ///
 /// ### Sosh
 ///
-/// ![A suggestion chip component in light and dark mode with Sosh theme](component_suggestionChip_Sosh)
+/// ![A suggestion chip component in light and dark modes with Sosh theme](component_suggestionChip_Sosh)
 ///
 /// ### Wireframe
 ///
-/// ![A suggestion chip component in light and dark mode with Wireframe theme](component_suggestionChip_Wireframe)
+/// ![A suggestion chip component in light and dark modes with Wireframe theme](component_suggestionChip_Wireframe)
 ///
 /// - Version: 1.3.0
 /// - Since: 0.17.0