Add wordings keys, code example and update changelog file

Orange-OpenSource · Feb 3, 2025 · a238927 · a238927
1 parent c7dcf19
commit a238927
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [Library] Switch component ([#405](https://github.com/Orange-OpenSource/ouds-ios/issues/405))
 - [Library] Link component ([#400](https://github.com/Orange-OpenSource/ouds-ios/issues/400))
 
 ## [0.10.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.9.0...0.10.0) - 2025-01-30

diff --git a/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj b/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj
@@ -420,14 +420,14 @@
 		073543142CA17244001187EA /* Utils */ = {
 			isa = PBXGroup;
 			children = (
-				079475A22D5103B30081980A /* DesignToolboxBackgroundModifier.swift */,
 				0735430F2CA15440001187EA /* Cards */,
 				0708222D2CFF617000570EC7 /* Elements */,
-				07F7533A2CC785620007450D /* DesignToolboxSectionHeaderStyle.swift */,
+				079475A22D5103B30081980A /* DesignToolboxBackgroundModifier.swift */,
 				07AB45862D4D08080001D237 /* DesignToolboxChoicePicker.swift */,
 				6DCC57E12CEB984D000F35F8 /* DesignToolboxCode.swift */,
 				07F0AFE72CFE0FBD00D334DD /* DesignToolboxConfiguration.swift */,
 				07B3CCB42D40F36C00DBB10A /* DesignToolboxColoredBackgroundModifier.swift */,
+				07F7533A2CC785620007450D /* DesignToolboxSectionHeaderStyle.swift */,
 			);
 			path = Utils;
 			sourceTree = "<group>";

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Switch/SwitchConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Switch/SwitchConfiguration.swift
@@ -21,15 +21,24 @@ final class SwitchConfigurationModel: ComponentConfiguration {
 
     // MARK: Published properties
 
-    @Published var enabled: Bool = true {
+    @Published var enabled: Bool {
+        didSet { updateCode() }
+    }
+    @Published var switchOnly: Bool {
+        didSet { updateCode() }
+    }
+    @Published var helperText: Bool {
+        didSet { updateCode() }
+    }
+    @Published var icon: Bool {
+        didSet { updateCode() }
+    }
+    @Published var onError: Bool {
+        didSet { updateCode() }
+    }
+    @Published var divider: Bool {
         didSet { updateCode() }
     }
-
-    @Published var switchOnly: Bool
-    @Published var helperText: Bool
-    @Published var icon: Bool
-    @Published var onError: Bool
-    @Published var divider: Bool
 
     // MARK: Initializer
 
@@ -46,16 +55,53 @@ final class SwitchConfigurationModel: ComponentConfiguration {
 
     // MARK: Component Configuration
 
+    override func updateCode() {
+        if switchOnly {
+            code =
+              """
+            OUDSSwitch(isOn: $isOn)
+            \(disableCode))
+            """
+        } else {
+            code =
+              """
+            OUDSSwitch(isOn: $isOn, label: \"Label\"\(helperTextPatern)\(iconPatern)\(onErrorPatern)\(dividerPatern))
+            \(disableCode))
+            """
+        }
+    }
+
     private var disableCode: String {
         ".disable(\(enabled ? "false" : "true"))"
     }
 
-    override func updateCode() {
-        code =
-            """
-          OUDSSwitch(isOn: $isOn)
-          \(disableCode))
-          """
+    private var helperTextPatern: String {
+        if helperText {
+            return ",helperText: \(String(localized: "app_components_switch_helperText_text"))"
+        } else {
+            return ""
+        }
+    }
+    private var iconPatern: String {
+        if icon {
+            return ", Image(decorative: \"ic_heart\")"
+        } else {
+            return ""
+        }
+    }
+    private var onErrorPatern: String {
+        if onError {
+            return ", onError: true"
+        } else {
+            return ""
+        }
+    }
+    private var dividerPatern: String {
+        if onError {
+            return ", divider: true"
+        } else {
+            return ""
+        }
     }
 }
 
@@ -74,26 +120,26 @@ struct SwitchConfiguration: View {
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
 
-            Toggle("switch only", isOn: $model.switchOnly)
+            Toggle("app_components_switch_switchOnly_label", isOn: $model.switchOnly)
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
 
-            Toggle("Helper Text", isOn: $model.helperText)
+            Toggle("app_components_common_helperText_label", isOn: $model.helperText)
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .disabled(model.switchOnly)
 
-            Toggle("Icon", isOn: $model.icon)
+            Toggle("app_components_common_icon_label", isOn: $model.icon)
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .disabled(model.switchOnly)
 
-            Toggle("Divider", isOn: $model.divider)
+            Toggle("app_components_common_divider_label", isOn: $model.divider)
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .disabled(model.switchOnly)
 
-            Toggle("On error", isOn: $model.onError)
+            Toggle("app_components_common_onError_label", isOn: $model.onError)
                 .typeHeadingMedium(theme)
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .disabled(model.switchOnly)

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Switch/SwitchPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Switch/SwitchPage.swift
@@ -83,7 +83,7 @@ private struct SwitchDemo: View {
                     Spacer()
                 }
             } else {
-                OUDSSwitch(isOn: $isOn, label: "Label", helperText: helperText, icon: icon, onError: model.onError, divider: model.divider)
+                OUDSSwitch(isOn: $isOn, label: "app_components_switch_label_text", helperText: helperText, icon: icon, onError: model.onError, divider: model.divider)
                     .disabled(!model.enabled)
             }
         }
@@ -94,7 +94,7 @@ private struct SwitchDemo: View {
     // MARK: Private helpers
 
     private var helperText: String? {
-        model.helperText ? "Helper Text" : nil
+        model.helperText ? "app_components_switch_helperText_text" : nil
     }
     private var icon: Image? {
         model.icon ? Image(decorative: "ic_heart") : nil

diff --git a/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings b/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings
@@ -112,6 +112,10 @@
 "app_components_common_style_label" = "Style";
 "app_components_common_onColoredBackground_label" = "On colored background";
 "app_components_common_longText_label" = "Long text";
+"app_components_common_helperText_label" = "Helper text";
+"app_components_common_icon_label" = "Icon";
+"app_components_common_divider_label" = "Divider";
+"app_components_common_onError_label" = "On error";
 
 // MARK: Components: Button
 
@@ -133,5 +137,9 @@
 "app_components_link_size_label" = "Size";
 
 // MARK: Components: Switch
+
 "app_components_switch_label" = "Switch";
 "app_components_switch_description_text" = "A switch is a component that allows the user to toggle between two states, typically \"on\" and \"off\". It is often represented as a button or a slider that changes position or color to indicate the current state. Switches are used to enable or disable features, options, or settings in an intuitive and visual manner.";
+"app_components_switch_label_text" = "Label";
+"app_components_switch_switchOnly_label" = "Switch only";
+"app_components_switch_helperText_text" = "Helper Text";