Add text field for Button

Orange-OpenSource · Feb 3, 2025 · 61011bd · 61011bd
1 parent 2c79e5a
commit 61011bd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-ios/compare/0.10.0...develop)
 
+### Added
+- [DesignToolbox] Add Text field in component configuration to customize text ([#436](https://github.com/Orange-OpenSource/ouds-ios/issues/436))
+
 ## [0.10.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.9.0...0.10.0) - 2025-01-30
 
 ### Added

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift
@@ -25,6 +25,10 @@ final class ButtonConfigurationModel: ComponentConfiguration {
         didSet { updateCode() }
     }
 
+    @Published var text: String {
+        didSet { updateCode() }
+    }
+
     @Published var layout: ButtonLayout {
         didSet { updateCode() }
     }
@@ -41,6 +45,7 @@ final class ButtonConfigurationModel: ComponentConfiguration {
 
     override init() {
         self.enabled = true
+        self.text = String(localized: "app_components_button_label")
         self.layout = .textOnly
         self.hierarchy = .default
         self.style = .`default`
@@ -194,6 +199,21 @@ struct ButtonConfiguration: View {
                 }
                 .pickerStyle(.segmented)
             }
+
+            if model.layout == .iconAndText || model.layout == .textOnly {
+                VStack(alignment: .leading) {
+                    Text(LocalizedStringKey("app_component_common_userText_text"))
+                        .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)
+            }
         }
     }
 }
diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift
@@ -102,9 +102,9 @@ private struct ButtonDemo: View {
                 case .iconOnly:
                     OUDSButton(icon: Image(decorative: "ic_heart"), hierarchy: model.hierarchy, style: model.style) {}
                 case .textOnly:
-                    OUDSButton(text: "app_components_button_label", hierarchy: model.hierarchy, style: model.style) {}
+                    OUDSButton(text: model.text, hierarchy: model.hierarchy, style: model.style) {}
                 case .iconAndText:
-                    OUDSButton(icon: Image(decorative: "ic_heart"), text: "app_components_button_label", hierarchy: model.hierarchy, style: model.style) {}
+                    OUDSButton(icon: Image(decorative: "ic_heart"), text: model.text, hierarchy: model.hierarchy, style: model.style) {}
                 }
             }
 

diff --git a/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings b/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings
@@ -88,7 +88,8 @@
 
 "app_component_emptyContent_text" = "No content";
 "app_component_emptyContent_description_text" = "This content is under construction and will be available very soon";
-
+"app_component_common_userText_prompt" = "Enter a text";
+"app_component_common_userText_text" = "Text";
 
 // MARK: Components: button
 "app_components_button_label" = "Button";