Add text field for link component

Orange-OpenSource · Feb 3, 2025 · 88b6bd3 · 88b6bd3
1 parent e8ba996
commit 88b6bd3
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 27 deletions.
diff --git a/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj b/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj
@@ -65,6 +65,8 @@
 		0784B2732CCB8CC800299C10 /* NamedSize+IconDecorative.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0784B2722CCB8CC800299C10 /* NamedSize+IconDecorative.swift */; };
 		07AB45872D4D08080001D237 /* DesignToolboxChoicePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */; };
 		07AB45882D4D08080001D237 /* DesignToolboxChoicePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */; };
+		07AB458A2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */; };
+		07AB458B2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */; };
 		07B3CCB12D40E34700DBB10A /* LinkConfiguration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCAE2D40E34700DBB10A /* LinkConfiguration.swift */; };
 		07B3CCB22D40E34700DBB10A /* LinkElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCAF2D40E34700DBB10A /* LinkElement.swift */; };
 		07B3CCB32D40E34700DBB10A /* LinkPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 07B3CCB02D40E34700DBB10A /* LinkPage.swift */; };
@@ -257,6 +259,7 @@
 		0784B26F2CCB86C500299C10 /* NamedSize+IconWithTypography.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconWithTypography.swift"; sourceTree = "<group>"; };
 		0784B2722CCB8CC800299C10 /* NamedSize+IconDecorative.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconDecorative.swift"; sourceTree = "<group>"; };
 		07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignToolboxChoicePicker.swift; sourceTree = "<group>"; };
+		07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DesignToolboxTextField.swift; sourceTree = "<group>"; };
 		07B3CCAE2D40E34700DBB10A /* LinkConfiguration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkConfiguration.swift; sourceTree = "<group>"; };
 		07B3CCAF2D40E34700DBB10A /* LinkElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkElement.swift; sourceTree = "<group>"; };
 		07B3CCB02D40E34700DBB10A /* LinkPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LinkPage.swift; sourceTree = "<group>"; };
@@ -415,6 +418,7 @@
 				6DCC57E12CEB984D000F35F8 /* DesignToolboxCode.swift */,
 				07F0AFE72CFE0FBD00D334DD /* DesignToolboxConfiguration.swift */,
 				07B3CCB42D40F36C00DBB10A /* DesignToolboxColoredBackgroundModifier.swift */,
+				07AB45892D50CB9B0001D237 /* DesignToolboxTextField.swift */,
 			);
 			path = Utils;
 			sourceTree = "<group>";
@@ -1145,6 +1149,7 @@
 				6DB260DC2CD0F0000091F72E /* DesignToolboxSectionHeaderStyle.swift in Sources */,
 				6DB260DB2CD0EFD90091F72E /* NamedSize+IconWithTypography.swift in Sources */,
 				6DB260DA2CD0EF9D0091F72E /* NamedSize+IconDecorative.swift in Sources */,
+				07AB458A2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */,
 				51952A8C2D3FA22A0068B807 /* OUDSTokensFontUITests.swift in Sources */,
 				6D17A2352CCF8DC300C00512 /* NamedColor.swift in Sources */,
 				6D17A22C2CCBF12B00C00512 /* NamedColor+Action.swift in Sources */,
@@ -1190,6 +1195,7 @@
 			files = (
 				51952A672D3F9B9E0068B807 /* DesignToolboxConfiguration.swift in Sources */,
 				51952A682D3F9B9E0068B807 /* NamedColor+Opacity.swift in Sources */,
+				07AB458B2D50CB9B0001D237 /* DesignToolboxTextField.swift in Sources */,
 				51952A692D3F9B9E0068B807 /* NamedColor+Overlay.swift in Sources */,
 				51952A6A2D3F9B9E0068B807 /* NamedColor+Repository.swift in Sources */,
 				51952A6B2D3F9B9E0068B807 /* NamedColor+Surface.swift in Sources */,

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift
@@ -197,18 +197,7 @@ struct ButtonConfiguration: View {
             }
 
             if model.layout == .iconAndText || model.layout == .textOnly {
-                VStack(alignment: .leading) {
-                    Text(LocalizedStringKey("app_component_common_userText_label"))
-                        .typeHeadingMedium(theme)
-                        .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
-
-                    TextField(text: $model.text) {
-                        Text("app_component_common_userText_prompt")
-                    }
-                }
-                .accessibilityElement(children: .combine)
-                .accessibilityLabel(Text("app_component_common_userText_prompt"))
-                .accessibilityValue(model.text)
+                DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
             }
         }
     }

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Link/LinkConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Link/LinkConfiguration.swift
@@ -29,7 +29,7 @@ final class LinkConfigurationModel: ComponentConfiguration {
         didSet { updateCode() }
     }
 
-    @Published var longText: Bool
+    @Published var text: String
 
     @Published var layout: LinkLayout {
         didSet { updateCode() }
@@ -44,7 +44,7 @@ final class LinkConfigurationModel: ComponentConfiguration {
     override init() {
         onColoredSurface = false
         enabled = true
-        longText = false
+        text = String(localized: "app_components_link_label")
         layout = .textOnly
         size = .medium
     }
@@ -155,10 +155,6 @@ struct LinkConfiguration: View {
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
 
-            Toggle("app_components_common_longText_label", isOn: $model.longText)
-                .typeHeadingMedium(theme)
-                .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
-
             DesignToolboxChoicePicker(title: "app_components_link_size_label", selection: $model.size) {
                 ForEach(OUDSLink.Size.allCases, id: \.id) { size in
                     Text(LocalizedStringKey(size.description)).tag(size)
@@ -170,6 +166,8 @@ struct LinkConfiguration: View {
                     Text(LocalizedStringKey(layout.description)).tag(layout)
                 }
             }
+
+            DesignToolboxTextField(text: $model.text, prompt: "app_component_common_userText_prompt")
         }
     }
 }
diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Link/LinkPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Link/LinkPage.swift
@@ -76,13 +76,13 @@ private struct LinkDemo: View {
 
             switch model.layout {
             case .textOnly:
-                OUDSLink(text: text, size: model.size) {}
+                OUDSLink(text: model.text, size: model.size) {}
             case .iconAndText:
-                OUDSLink(text: text, icon: Image(decorative: "ic_heart"), size: model.size) {}
+                OUDSLink(text: model.text, icon: Image(decorative: "ic_heart"), size: model.size) {}
             case .arrowBack:
-                OUDSLink(text: text, arrow: .back, size: model.size) {}
+                OUDSLink(text: model.text, arrow: .back, size: model.size) {}
             case .arrowNext:
-                OUDSLink(text: text, arrow: .next, size: model.size) {}
+                OUDSLink(text: model.text, arrow: .next, size: model.size) {}
             }
 
             Spacer()
@@ -91,8 +91,4 @@ private struct LinkDemo: View {
         .padding(.all, theme.spaces.spaceFixedMedium)
         .modifier(DesignToolboxColoredBackgroundModifier(coloredSurface: model.onColoredSurface))
     }
-
-    private var text: String {
-        model.longText ? "app_components_link_longText_label" : "app_components_link_label"
-    }
 }
diff --git a/DesignToolbox/DesignToolbox/Pages/Utils/DesignToolboxTextField.swift b/DesignToolbox/DesignToolbox/Pages/Utils/DesignToolboxTextField.swift
@@ -0,0 +1,40 @@
+//
+// 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 OUDSTokensSemantic
+import SwiftUI
+
+struct DesignToolboxTextField: View {
+
+    @Environment(\.theme) private var theme
+    @Environment(\.colorScheme) private var colorScheme
+
+    let text: Binding<String>
+    let prompt: String
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            Text("app_component_common_userText_label")
+                .typeHeadingMedium(theme)
+                .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
+
+            TextField(text: text) {
+                Text(LocalizedStringKey(prompt))
+            }
+        }
+        .accessibilityElement(children: .combine)
+        .accessibilityLabel(LocalizedStringKey(prompt))
+        .accessibilityValue(text.wrappedValue)
+    }
+}
diff --git a/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings b/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings
@@ -125,7 +125,6 @@
 // MARK: Components: Link
 
 "app_components_link_label" = "Link";
-"app_components_link_longText_label" = "This is an example of link with a chevron";
 "app_components_link_description_text" = "Links direct users to other resources or sections, whether internal (within the same application) or external (to a website or document).";
 "app_components_link_arrowBack_label" = "Back";
 "app_components_link_arrowNext_label" = "Next";