Orange-OpenSource · pylapp · Apr 24, 2025 · Apr 18, 2025 · Apr 18, 2025 · Mar 21, 2025
@@ -8,8 +8,10 @@ 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))
 - [Tool] New system to generate, build ad upload documentation ([#628](https://github.com/Orange-OpenSource/ouds-ios/issues/628))
 - [Library] Add divider component ([#511](https://github.com/Orange-OpenSource/ouds-ios/issues/511))
+- [Library] Add divider component ([#511](https://github.com/Orange-OpenSource/ouds-ios/issues/511))
 - [Library] Let control-item-based component flip the icons programatically or not ([#556](https://github.com/Orange-OpenSource/ouds-ios/issues/556))
 - [Library] Radio picker component ([#586](https://github.com/Orange-OpenSource/ouds-ios/issues/586))
 - [Library] Let control-item-based component flip the icons programatically or not ([#556](https://github.com/Orange-OpenSource/ouds-ios/issues/556))
@@ -19,7 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [DesignToolbox] Udpate language translations ([#622](https://github.com/Orange-OpenSource/ouds-ios/issues/622))
 - [Tool] Fix Gitleaks configuration file and update documentation about version in use
 - [Library] Renaming of API ([#608](https://github.com/Orange-OpenSource/ouds-ios/issues/608))
-- [DesignToolbox] Order of components and tokens in design toolbox component page ([#585](https://github.com/Orange-OpenSource/ouds-ios/issues/585))
+- [DesignToolbox] Order of OCHAcomponents and tokens in design toolbox component page ([#585](https://github.com/Orange-OpenSource/ouds-ios/issues/585))
 - [Library] Default hierarchy and style for button component ([#609](https://github.com/Orange-OpenSource/ouds-ios/issues/609))
 - [DesignToolbox] Rename checkbox and radio button entries ([#584](https://github.com/Orange-OpenSource/ouds-ios/issues/584))
 - [DesignToolbox] Rename the radio buton component ([#583](https://github.com/Orange-OpenSource/ouds-ios/issues/583))
@@ -28,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [DesignToolbox] Fixed code samples for disabled cases of components
 - [DesignToolbox] Name of layouts for control item components ([#588](https://github.com/Orange-OpenSource/ouds-ios/issues/588))
 - [DesignToolbox] Add illustration for link component in RTL mode checkbox and radio button entries ([#555](https://github.com/Orange-OpenSource/ouds-ios/issues/555))
 

@@ -60,7 +60,7 @@ final class ButtonConfigurationModel: ComponentConfiguration {
 
     private var disableCode: String {
         if case .`default` = style {
-            ".disable(\(enabled ? "false" : "true"))"
+            ".disabled(\(enabled ? "false" : "true"))"
         } else {
             ""
         }

@@ -55,7 +55,7 @@ final class CheckboxConfigurationModel: ComponentConfiguration {
     }
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var isErrorPattern: String {

@@ -55,7 +55,7 @@ final class CheckboxIndeterminateConfigurationModel: ComponentConfiguration {
     }
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var isErrorPattern: String {

@@ -97,7 +97,7 @@ final class CheckboxItemConfigurationModel: ComponentConfiguration {
     // swiftlint:enable line_length
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var helperTextPattern: String {

@@ -99,7 +99,7 @@ final class CheckboxItemIndeterminateConfigurationModel: ComponentConfiguration
     // swiftlint:enable line_length
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var helperTextPattern: String {

@@ -91,7 +91,7 @@ final class CheckboxItemConfigurationModel: ComponentConfiguration {
     // swiftlint:enable line_length
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var helperTextPatern: String {

@@ -24,6 +24,7 @@ struct ComponentsPage: View {
         DividerElements(),
         LinkElement(),
         RadioElements(),
+        SwitchElements(),
     ]
 
     var body: some View {

@@ -58,7 +58,7 @@ final class LinkConfigurationModel: ComponentConfiguration {
     }
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     override func updateCode() {

@@ -54,7 +54,7 @@ final class RadioConfigurationModel: ComponentConfiguration {
     }
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var isErrorPattern: String {

@@ -111,7 +111,7 @@ final class RadioItemConfigurationModel: ComponentConfiguration {
     // swiftlint:enable line_length
 
     private var disableCode: String {
-        ".disable(\(enabled ? "false" : "true"))"
+        ".disabled(\(enabled ? "false" : "true"))"
     }
 
     private var additionalLabelTextPattern: String {

@@ -0,0 +1,76 @@
+//
+// 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: - Switch Configuration Model
+
+/// The model shared between `SwitchConfiguration` view and `SwitchPage` view.
+final class SwitchConfigurationModel: ComponentConfiguration {
+
+    // MARK: - Properties
+
+    @Published var enabled: Bool {
+        didSet { updateCode() }
+    }
+
+    @Published var selection: Bool {
+        didSet { updateCode() }
+    }
+
+    // MARK: - Initializer
+
+    override init() {
+        selection = true
+        enabled = true
+    }
+
+    deinit { }
+
+    // MARK: - Component Configuration
+
+    override func updateCode() {
+        code =
+          """
+          OUDSSwitch(isOn: $isOn, accessibilityLabel: "A label for accessibility")
+          \(disableCode)
+          """
+    }
+
+    private var disableCode: String {
+        ".disabled(\(enabled ? "false" : "true"))"
+    }
+}
+
+// MARK: - Switch Configuration View
+
+struct SwitchConfiguration: View {
+
+    @ObservedObject var model: SwitchConfigurationModel
+
+    @Environment(\.theme) private var theme
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: theme.spaces.spaceFixedMedium) {
+            Toggle("app_components_switch_selection_label", isOn: $model.selection)
+                .typeHeadingMedium(theme)
+                .oudsForegroundStyle(theme.colors.colorContentDefault)
+                .disabled(!model.enabled)
+
+            Toggle("app_common_enabled_label", isOn: $model.enabled)
+                .typeHeadingMedium(theme)
+                .oudsForegroundStyle(theme.colors.colorContentDefault)
+        }
+    }
+}
@@ -0,0 +1,30 @@
+//
+// 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 SwiftUI
+
+struct SwitchElement: DesignToolboxElement {
+    let name: String
+    let image: Image
+    let pageDescription: AnyView
+
+    init() {
+        name = "app_components_switch_selectorOnly_label".localized()
+        image = Image(decorative: "il_component_switch").renderingMode(.original)
+        pageDescription = AnyView(DesignToolboxElementPage(
+            name: name,
+            image: nil,
+            description: "app_components_switch_description_text",
+            illustration: AnyView(SwitchPage())))
+    }
+}
@@ -0,0 +1,86 @@
+//
+// 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: - Switch Page
+
+struct SwitchPage: View {
+
+    @StateObject private var configuration: SwitchConfigurationModel
+
+    init() {
+        _configuration = StateObject(wrappedValue: SwitchConfigurationModel())
+    }
+
+    var body: some View {
+        ComponentConfigurationView(
+            configuration: configuration,
+            componentView: componentView,
+            configurationView: configurationView
+        )
+    }
+
+    @ViewBuilder
+    private func componentView(with configuration: ComponentConfiguration) -> some View {
+        if let model = configuration as? SwitchConfigurationModel {
+            SwitchIllustration(model: model)
+        }
+    }
+
+    @ViewBuilder
+    private func configurationView(with configuration: ComponentConfiguration) -> some View {
+        if let model = configuration as? SwitchConfigurationModel {
+            SwitchConfiguration(model: model)
+        }
+    }
+}
+
+// MARK: - Switch Illustration
+
+private struct SwitchIllustration: View {
+
+    let model: SwitchConfigurationModel
+    @Environment(\.colorScheme) private var colorScheme
+
+    var body: some View {
+        VStack(alignment: .center) {
+            // TODO: Build a modifier to inverse colorscheme or force to a colorscheme
+            SwitchDemo(model: model)
+            SwitchDemo(model: model)
+                .colorScheme(colorScheme == .dark ? .light : .dark)
+        }
+    }
+}
+
+// MARK: - Switch Demo
+
+private struct SwitchDemo: View {
+
+    @ObservedObject var model: SwitchConfigurationModel
+    @Environment(\.theme) private var theme
+
+    var body: some View {
+        HStack(alignment: .center) {
+            Spacer()
+            OUDSSwitch(isOn: $model.selection,
+                       accessibilityLabel: "app_components_switch_hint_a11y".localized()) // No LocalizedStringKey tpe inference in the component
+                .disabled(!model.enabled)
+            Spacer()
+        }
+        .padding(.all, theme.spaces.spaceFixedMedium)
+        .designToolboxColoredSurface(false)
+    }
+}
@@ -0,0 +1,38 @@
+//
+// 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 OUDSThemesOrange
+import SwiftUI
+
+struct SwitchElements: DesignToolboxElement {
+    let name: String
+    let image: Image
+    let pageDescription: AnyView
+
+    init() {
+        let variants: [DesignToolboxElement] = [
+            SwitchElement(),
+            SwitchItemElement(),
+        ]
+
+        name = "app_components_switch_label".localized()
+        image = Image(decorative: "il_component_switch").renderingMode(.original)
+        pageDescription = AnyView(DesignToolboxElementPage(
+            name: name,
+            image: Image(decorative: "il_component_switch").renderingMode(.original),
+            description: "app_components_switch_description_text",
+            illustration: AnyView(DesignToolboxVariantElement(elements: variants))))
+    }
+}