[#917] Component update add component tag input

CHANGELOG.md

@@ -6,18 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-ios-design-system-toolbox/compare/0.20.0...develop)
 
-### Changed
-
-- [Library] Provide predefined icons for `OUDSTag` components (Orange-OpenSource/ouds-ios#912)
-- [Library] Update `OUDSTag` to 1.4 version (Orange-OpenSource/ouds-ios#1037)
-- [Library] Update `OUDSTag` to 1.3 version (Orange-OpenSource/ouds-ios#945)
-
 ### Added
 
+- [Library] `input tag` component (Orange-OpenSource/ouds-ios#917)
 - [Library] Swift DocC tutorial (Orange-OpenSource/ouds-ios#919)
 
 ### Changed
 
+- [Library] Provide predefined icons for `OUDSTag` components (Orange-OpenSource/ouds-ios#912)
+- [Library] Update `OUDSTag` to 1.4 version (Orange-OpenSource/ouds-ios#1037)
+- [Library] Update `OUDSTag` to 1.3 version (Orange-OpenSource/ouds-ios#945)
 - [Library] Expose dimensions for pickers components (Orange-OpenSource/ouds-ios#1080)
 - [DesignToolbox] Use `OUDSTextInput` in components configuration sections (Orange-OpenSource/ouds-ios#1059)
 - [DesignToolbox] Update `link` component version (Orange-OpenSource/ouds-ios#1035)

DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj

@@ -452,6 +452,14 @@
 		6DFC20C22CE3D39D00F2EC33 /* accessibility_result.xml in Resources */ = {isa = PBXBuildFile; fileRef = 6DFC20C02CE3D39D00F2EC33 /* accessibility_result.xml */; };
 		6DFC20C52CE3D9AE00F2EC33 /* DeclarationAccessibility in Frameworks */ = {isa = PBXBuildFile; productRef = 6DFC20C42CE3D9AE00F2EC33 /* DeclarationAccessibility */; };
 		A5E69629240B3A88C139F084 /* Pods_DesignToolbox.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = A8ECF213874016985FA405A3 /* Pods_DesignToolbox.framework */; };
+		FCA849142E9FF00500DBCE76 /* InputTagElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849122E9FF00500DBCE76 /* InputTagElement.swift */; };
+		FCA849152E9FF00500DBCE76 /* InputTagConfigurationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849112E9FF00500DBCE76 /* InputTagConfigurationView.swift */; };
+		FCA849162E9FF00500DBCE76 /* InputTagPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849132E9FF00500DBCE76 /* InputTagPage.swift */; };
+		FCA849172E9FF00500DBCE76 /* InputTagElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849122E9FF00500DBCE76 /* InputTagElement.swift */; };
+		FCA849182E9FF00500DBCE76 /* InputTagConfigurationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849112E9FF00500DBCE76 /* InputTagConfigurationView.swift */; };
+		FCA849192E9FF00500DBCE76 /* InputTagPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA849132E9FF00500DBCE76 /* InputTagPage.swift */; };
+		FCA8491C2E9FF35700DBCE76 /* TagElements.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA8491B2E9FF35700DBCE76 /* TagElements.swift */; };
+		FCA8491D2E9FF35700DBCE76 /* TagElements.swift in Sources */ = {isa = PBXBuildFile; fileRef = FCA8491B2E9FF35700DBCE76 /* TagElements.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -779,6 +787,10 @@
 		BF4130905502F287757622E2 /* Pods-DemoApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DemoApp.debug.xcconfig"; path = "Target Support Files/Pods-DemoApp/Pods-DemoApp.debug.xcconfig"; sourceTree = "<group>"; };
 		E4EBC0F46BFFE3801998F6B0 /* Pods-Showcase.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Showcase.release.xcconfig"; path = "Target Support Files/Pods-Showcase/Pods-Showcase.release.xcconfig"; sourceTree = "<group>"; };
 		F98488CF05532E8CD405A8F8 /* Pods-Showcase.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Showcase.debug.xcconfig"; path = "Target Support Files/Pods-Showcase/Pods-Showcase.debug.xcconfig"; sourceTree = "<group>"; };
+		FCA849112E9FF00500DBCE76 /* InputTagConfigurationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputTagConfigurationView.swift; sourceTree = "<group>"; };
+		FCA849122E9FF00500DBCE76 /* InputTagElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputTagElement.swift; sourceTree = "<group>"; };
+		FCA849132E9FF00500DBCE76 /* InputTagPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = InputTagPage.swift; sourceTree = "<group>"; };
+		FCA8491B2E9FF35700DBCE76 /* TagElements.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TagElements.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -981,20 +993,20 @@
 			path = ControlItem;
 			sourceTree = "<group>";
 		};
-		076227602DA90C65009C3632 /* Common */ = {
+		076227602DA90C65009C3632 /* Dividers */ = {
 			isa = PBXGroup;
 			children = (
 				0762275D2DA90C65009C3632 /* DividerConfiguration.swift */,
 				0762275E2DA90C65009C3632 /* DividerElement.swift */,
 				0762275F2DA90C65009C3632 /* DividerPage.swift */,
 			);
-			path = Common;
+			path = Dividers;
 			sourceTree = "<group>";
 		};
 		076227622DA90C65009C3632 /* Divider */ = {
 			isa = PBXGroup;
 			children = (
-				076227602DA90C65009C3632 /* Common */,
+				076227602DA90C65009C3632 /* Dividers */,
 				076227612DA90C65009C3632 /* DividerElements.swift */,
 			);
 			path = Divider;
@@ -1208,14 +1220,14 @@
 			path = NamedSpace;
 			sourceTree = "<group>";
 		};
-		07FB2A2C2E454D4E00361ECA /* Tag */ = {
+		07FB2A2C2E454D4E00361ECA /* Tags */ = {
 			isa = PBXGroup;
 			children = (
-				07FB2A2D2E454D7900361ECA /* TagConfigurationView.swift */,
-				07FB2A2E2E454D7900361ECA /* TagElement.swift */,
-				07FB2A2F2E454D7900361ECA /* TagPage.swift */,
+				FCA849102E9FEFF600DBCE76 /* InputTag */,
+				FCA8491A2E9FF33900DBCE76 /* Tag */,
+				FCA8491B2E9FF35700DBCE76 /* TagElements.swift */,
 			);
-			path = Tag;
+			path = Tags;
 			sourceTree = "<group>";
 		};
 		07FDCD882C296A500009AA13 = {
@@ -1752,7 +1764,7 @@
 			isa = PBXGroup;
 			children = (
 				07EB46FC2E1801BB00B94EC2 /* Badge */,
-				07FB2A2C2E454D4E00361ECA /* Tag */,
+				07FB2A2C2E454D4E00361ECA /* Tags */,
 			);
 			path = Indicators;
 			sourceTree = "<group>";
@@ -2144,6 +2156,26 @@
 			path = Pods;
 			sourceTree = "<group>";
 		};
+		FCA849102E9FEFF600DBCE76 /* InputTag */ = {
+			isa = PBXGroup;
+			children = (
+				FCA849112E9FF00500DBCE76 /* InputTagConfigurationView.swift */,
+				FCA849122E9FF00500DBCE76 /* InputTagElement.swift */,
+				FCA849132E9FF00500DBCE76 /* InputTagPage.swift */,
+			);
+			path = InputTag;
+			sourceTree = "<group>";
+		};
+		FCA8491A2E9FF33900DBCE76 /* Tag */ = {
+			isa = PBXGroup;
+			children = (
+				07FB2A2D2E454D7900361ECA /* TagConfigurationView.swift */,
+				07FB2A2E2E454D7900361ECA /* TagElement.swift */,
+				07FB2A2F2E454D7900361ECA /* TagPage.swift */,
+			);
+			path = Tag;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -2627,6 +2659,10 @@
 				515EE98D2E21329B00A60E96 /* SuggestionChipElement.swift in Sources */,
 				51A2175F2E325ED500562BE0 /* OrangeBusinessToolsTheme+CheckboxUITests.swift in Sources */,
 				515EE98E2E21329B00A60E96 /* SuggestionChipPage.swift in Sources */,
+				FCA849142E9FF00500DBCE76 /* InputTagElement.swift in Sources */,
+				FCA849152E9FF00500DBCE76 /* InputTagConfigurationView.swift in Sources */,
+				FCA849162E9FF00500DBCE76 /* InputTagPage.swift in Sources */,
+				FCA8491D2E9FF35700DBCE76 /* TagElements.swift in Sources */,
 				51A217812E325FE600562BE0 /* WireframeTheme+TokensElevationUITests.swift in Sources */,
 				515EE98F2E21329B00A60E96 /* ChipElements.swift in Sources */,
 				51417C1F2E1BF4FB000266C8 /* TokensElevationUITestsTestCase.swift in Sources */,
@@ -2705,6 +2741,7 @@
 				5180FE6E2DBBC2FA0062E489 /* CheckboxPickerPage.swift in Sources */,
 				5180FE6F2DBBC2FA0062E489 /* CheckboxPickerConfiguration.swift in Sources */,
 				5180FE702DBBC2FA0062E489 /* CheckboxPickerElement.swift in Sources */,
+				FCA8491C2E9FF35700DBCE76 /* TagElements.swift in Sources */,
 				51A906012E842834003F3E0E /* ColorSchemeSelectionButton.swift in Sources */,
 				519251F02D020BA6003FD1F6 /* DesignToolboxElementsPage.swift in Sources */,
 				519251EE2D020B8A003FD1F6 /* DesignToolboxElement.swift in Sources */,
@@ -2773,6 +2810,9 @@
 				51952A742D3F9D850068B807 /* DesignToolboxTokenIllustrationBackground.swift in Sources */,
 				51087A7B2C46DF9F00160CCF /* Bundle+extension.swift in Sources */,
 				0765B4962CC159F600E69359 /* NamedColor+Action.swift in Sources */,
+				FCA849172E9FF00500DBCE76 /* InputTagElement.swift in Sources */,
+				FCA849182E9FF00500DBCE76 /* InputTagConfigurationView.swift in Sources */,
+				FCA849192E9FF00500DBCE76 /* InputTagPage.swift in Sources */,
 				077CCE572CB426090059CC28 /* SpaceTokenElement.swift in Sources */,
 				076227672DA90C65009C3632 /* DividerConfiguration.swift in Sources */,
 				076227682DA90C65009C3632 /* DividerElement.swift in Sources */,
@@ -3335,7 +3375,7 @@
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/Orange-OpenSource/ouds-ios";
 			requirement = {
-				branch = develop;
+				branch = "917-component-update-add-component-tag-input";
 				kind = branch;
 			};
 		};

DesignToolbox/DesignToolbox/Pages/Components/Indicators/Tags/InputTag/InputTagConfigurationView.swift

@@ -0,0 +1,66 @@
+//
+// Software Name: OUDS iOS
+// SPDX-FileCopyrightText: Copyright (c) Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license,
+// the text of which is available at https://opensource.org/license/MIT/
+// or see the "LICENSE" file for more details.
+//
+// Authors: See CONTRIBUTORS.txt
+// Software description: A SwiftUI components library with code examples for Orange Unified Design System
+//
+
+import OUDSComponents
+import SwiftUI
+
+// MARK: - Input Tag Configuration Model
+
+/// The model shared between `InputTagPageConfiguration` view and `InputTagPageComponent` view.
+final class InputTagConfigurationModel: ComponentConfiguration {
+
+    @Published var enabled: Bool {
+        didSet { updateCode() }
+    }
+
+    @Published var label: String {
+        didSet { updateCode() }
+    }
+
+    override init() {
+        enabled = true
+        label = String(localized: "app_components_common_label_label")
+    }
+
+    deinit {}
+
+    override func updateCode() {
+        code = """
+        OUDSInputTag(label: \"\(label)\") {}
+        \(disabledPattern)
+        """
+    }
+
+    private var disabledPattern: String {
+        enabled ? "" : ".disabled(true)"
+    }
+}
+
+// MARK: - InputTag Configuration View
+
+struct InputTagConfigurationView: View {
+
+    @StateObject var configurationModel: InputTagConfigurationModel
+
+    @Environment(\.theme) private var theme
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: theme.spaces.spaceFixedNone) {
+            OUDSSwitchItem("app_common_enabled_label", isOn: $configurationModel.enabled)
+
+            DesignToolboxEditContentDisclosure {
+                DesignToolboxTextField(text: $configurationModel.label, label: "app_components_common_label_label")
+            }
+        }
+    }
+}

DesignToolbox/DesignToolbox/Pages/Components/Indicators/Tags/InputTag/InputTagElement.swift

@@ -0,0 +1,32 @@
+//
+// Software Name: OUDS iOS
+// SPDX-FileCopyrightText: Copyright (c) Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license,
+// the text of which is available at https://opensource.org/license/MIT/
+// or see the "LICENSE" file for more details.
+//
+// Authors: See CONTRIBUTORS.txt
+// Software description: A SwiftUI components library with code examples for Orange Unified Design System
+//
+
+import OUDS
+import OUDSComponents
+import SwiftUI
+
+struct InputTagElement: DesignToolboxElement {
+    let name: String
+    let illustration: AnyView
+    let pageDescription: AnyView
+
+    init() {
+        name = "app_components_tag_inputTag_label".localized()
+        illustration = AnyView(OUDSTag(label: "Label", status: .neutral(), appearance: .emphasized, shape: .rounded, size: .default))
+        pageDescription = AnyView(DesignToolboxElementPage(
+            name: name,
+            description: "app_components_inoputTag_description_text",
+            version: OUDSVersions.componentTagVersion,
+            demoScreen: AnyView(InputTagPage())))
+    }
+}

DesignToolbox/DesignToolbox/Pages/Components/Indicators/Tags/InputTag/InputTagPage.swift

@@ -0,0 +1,56 @@
+//
+// Software Name: OUDS iOS
+// SPDX-FileCopyrightText: Copyright (c) Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license,
+// the text of which is available at https://opensource.org/license/MIT/
+// or see the "LICENSE" file for more details.
+//
+// Authors: See CONTRIBUTORS.txt
+// Software description: A SwiftUI components library with code examples for Orange Unified Design System
+//
+
+import OUDS
+import OUDSComponents
+import SwiftUI
+
+// MARK: Input Tag page
+
+struct InputTagPage: View {
+
+    @StateObject private var configurationModel: InputTagConfigurationModel
+
+    init() {
+        _configurationModel = StateObject(wrappedValue: InputTagConfigurationModel())
+    }
+
+    var body: some View {
+        ComponentConfigurationView(configuration: configurationModel) {
+            InputTagDemo(configurationModel: configurationModel)
+        } configurationView: {
+            InputTagConfigurationView(configurationModel: configurationModel)
+        }
+    }
+}
+
+// MARK: - Input Tag Demo
+
+struct InputTagDemo: View {
+
+    @StateObject var configurationModel: InputTagConfigurationModel
+
+    @Environment(\.theme) private var theme
+
+    var body: some View {
+        HStack(alignment: .center) {
+            Spacer()
+
+            OUDSInputTag(label: configurationModel.label) {}
+                .disabled(!configurationModel.enabled)
+
+            Spacer()
+        }
+        .padding(.all, theme.spaces.spaceFixedMedium)
+    }
+}