feat: add link component (#400) (#401)

Closes #400 Tested-by: Benoit Suzanne <[email protected]> Tested-by: Maxime Tonnerre <[email protected]> Tested-by: Pierre-Yves Ayoul <[email protected]> Reviewed-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Pierre-Yves Lapersonne <[email protected]> Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Orange-OpenSource · Jan 31, 2025 · 3db0aaa · 3db0aaa
1 parent 2c79e5a
commit 3db0aaa
Show file tree

Hide file tree

Showing 328 changed files with 1,411 additions and 93 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ 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
+
+- [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
 
 ### Added

diff --git a/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj b/DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj
diff --git a/DesignToolbox/DesignToolbox.xcworkspace/xcshareddata/swiftpm/Package.resolved b/DesignToolbox/DesignToolbox.xcworkspace/xcshareddata/swiftpm/Package.resolved
@@ -1,5 +1,5 @@
 {
-  "originHash" : "83401976e6d5078c716d3d81b7069a9a115aa96085292549b781eb6d5bfe69b2",
+  "originHash" : "4958997d028ec0467bfc12b899aa509b9b9301311c84850262a1935095ba73d5",
   "pins" : [
     {
       "identity" : "accessibility-statement-lib-ios",

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift
@@ -21,10 +21,16 @@ final class ButtonConfigurationModel: ComponentConfiguration {
 
     // MARK: Published properties
 
-    @Published var enabled: Bool = true {
+    @Published var enabled: Bool {
         didSet { updateCode() }
     }
 
+    @Published var onColoredSurface: Bool {
+        didSet { updateCode() }
+    }
+
+    @Published var longText: Bool
+
     @Published var layout: ButtonLayout {
         didSet { updateCode() }
     }
@@ -40,10 +46,12 @@ final class ButtonConfigurationModel: ComponentConfiguration {
     // MARK: Initializer
 
     override init() {
-        self.enabled = true
-        self.layout = .textOnly
-        self.hierarchy = .default
-        self.style = .`default`
+        enabled = true
+        onColoredSurface = false
+        longText = false
+        layout = .textOnly
+        hierarchy = .default
+        style = .`default`
     }
 
     deinit { }
@@ -58,25 +66,32 @@ final class ButtonConfigurationModel: ComponentConfiguration {
         }
     }
 
+    private var coloredSurfaceCodeModifier: String {
+        onColoredSurface ? ".oudsColoredSurface(color: Color.orange)" : ""
+    }
+
     override func updateCode() {
         switch layout {
         case .textOnly:
             code =
             """
           OUDSButton(text: \"Button\", hierarchy: .\(hierarchy.description.lowercased()), style: \(style.description.lowercased())) {}
-          \(disableCode))
+          \(disableCode)
+          \(coloredSurfaceCodeModifier)
           """
         case .iconOnly:
             code =
             """
           OUDSButton(icon: Image(\"ic_heart\"), hierarchy: .\(hierarchy.description.lowercased()), style: \(style.description.lowercased()) {}
-          \(disableCode))
+          \(disableCode)
+          \(coloredSurfaceCodeModifier)
           """
         case .iconAndText:
             code =
             """
           OUDSButton(icon: Image(\"ic_heart\", text: \"Button\"), hierarchy: .\(hierarchy.description.lowercased()), style: \(style.description.lowercased()) {}
-          \(disableCode))
+          \(disableCode)
+          \(coloredSurfaceCodeModifier)
           """
         }
     }
@@ -92,9 +107,9 @@ enum ButtonLayout: CaseIterable, CustomStringConvertible {
     var description: String {
         switch self {
         case .textOnly:
-            "app_components_button_textOnlyLayout_label"
+            "app_components_common_textOnlyLayout_label"
         case .iconAndText:
-            "app_components_button_iconAndTextLayout_label"
+            "app_components_common_iconAndTextLayout_label"
         case .iconOnly:
             "app_components_button_iconOnlyLayout_label"
         }
@@ -159,40 +174,31 @@ struct ButtonConfiguration: View {
                 .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
                 .disabled(model.style != .`default`)
 
-            VStack(alignment: .leading) {
-                Text(LocalizedStringKey("app_components_button_hierarchy_label"))
-                    .typeHeadingMedium(theme)
-                    .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
-                Picker("app_components_button_hierarchy_label", selection: $model.hierarchy) {
-                    ForEach(OUDSButton.Hierarchy.allCases, id: \.id) { hierarchy in
-                        Text(LocalizedStringKey(hierarchy.description)).tag(hierarchy)
-                    }
+            Toggle("app_components_common_onColoredBackground_label", isOn: $model.onColoredSurface)
+                .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))
+                .disabled(model.layout == .iconOnly)
+
+            DesignToolboxChoicePicker(title: "app_components_button_hierarchy_label", selection: $model.hierarchy) {
+                ForEach(OUDSButton.Hierarchy.allCases, id: \.id) { hierarchy in
+                    Text(LocalizedStringKey(hierarchy.description)).tag(hierarchy)
                 }
-                .pickerStyle(.segmented)
             }
 
-            VStack(alignment: .leading) {
-                Text(LocalizedStringKey("app_components_button_style_label"))
-                    .typeHeadingMedium(theme)
-                    .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
-                Picker("app_components_button_style_label", selection: $model.style) {
-                    ForEach(OUDSButton.Style.allCases, id: \.id) { style in
-                        Text(LocalizedStringKey(style.description)).tag(style)
-                    }
+            DesignToolboxChoicePicker(title: "app_components_common_style_label", selection: $model.style) {
+                ForEach(OUDSButton.Style.allCases, id: \.id) { style in
+                    Text(LocalizedStringKey(style.description)).tag(style)
                 }
-                .pickerStyle(.segmented)
             }
 
-            VStack(alignment: .leading) {
-                Text(LocalizedStringKey("app_components_button_layout_label"))
-                    .typeHeadingMedium(theme)
-                    .foregroundStyle(theme.colors.colorContentDefault.color(for: colorScheme))
-                Picker("app_components_button_layout_label", selection: $model.layout) {
-                    ForEach(ButtonLayout.allCases, id: \.id) { layout in
-                        Text(LocalizedStringKey(layout.description)).tag(layout)
-                    }
+            DesignToolboxChoicePicker(title: "app_components_common_layout_label", selection: $model.layout) {
+                ForEach(ButtonLayout.allCases, id: \.id) { layout in
+                    Text(LocalizedStringKey(layout.description)).tag(layout)
                 }
-                .pickerStyle(.segmented)
             }
         }
     }

diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift
@@ -49,34 +49,18 @@ struct ButtonPage: View {
 struct ButtonIllustration: View {
 
     @Environment(\.colorScheme) private var colorScheme
-
-    let model: ButtonConfigurationModel
+    @ObservedObject var model: ButtonConfigurationModel
 
     var body: some View {
         VStack(alignment: .center) {
-            ButtonDemo(model: model, coloredSurface: false)
-            // TODO: Build a modifier to inverse colorscheme or force to a colorscheme
-            ButtonDemo(model: model, coloredSurface: false)
-                .colorScheme(colorScheme == .dark ? .light : .dark)
-            ButtonDemo(model: model, coloredSurface: true)
-        }
-    }
-}
-
-// MARK: - Backgroud Modifier
-
-private struct BackgroundModifier: ViewModifier {
-
-    @Environment(\.theme) private var theme
-    @Environment(\.colorScheme) private var colorScheme
-
-    let coloredSurface: Bool
-
-    func body(content: Content) -> some View {
-        if coloredSurface {
-            content.oudsColoredSurface(color: theme.colors.colorSurfaceBrandPrimary.color(for: colorScheme))
-        } else {
-            content.background(theme.colors.colorBgSecondary.color(for: colorScheme))
+            if model.onColoredSurface {
+                ButtonDemo(model: model)
+            } else {
+                ButtonDemo(model: model)
+                // TODO: Build a modifier to inverse colorscheme or force to a colorscheme
+                ButtonDemo(model: model)
+                    .colorScheme(colorScheme == .dark ? .light : .dark)
+            }
         }
     }
 }
@@ -88,30 +72,33 @@ private struct ButtonDemo: View {
     @Environment(\.theme) private var theme
 
     @StateObject var model: ButtonConfigurationModel
-    let coloredSurface: Bool
 
     var body: some View {
         HStack(alignment: .center) {
             Spacer()
 
-            // It is not allowed to place a Negative bnutton on colored surface
-            if model.hierarchy == .negative, coloredSurface == true {
+            // It is not allowed to place a Negative button on colored surface
+            if model.hierarchy == .negative, model.onColoredSurface {
                 Text("app_components_button_negative_hierary_notAllowed_text")
             } else {
                 switch model.layout {
                 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: 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: text, hierarchy: model.hierarchy, style: model.style) {}
                 }
             }
 
             Spacer()
         }
         .disabled(!model.enabled)
         .padding(.all, theme.spaces.spaceFixedMedium)
-        .modifier(BackgroundModifier(coloredSurface: coloredSurface))
+        .modifier(DesignToolboxColoredBackgroundModifier(coloredSurface: model.onColoredSurface))
+    }
+
+    private var text: String {
+        model.longText ? "app_components_button_longText_label" : "app_components_button_label"
     }
 }
diff --git a/DesignToolbox/DesignToolbox/Pages/Components/ComponentsPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/ComponentsPage.swift
@@ -18,7 +18,8 @@ import SwiftUI
 struct ComponentsPage: View {
 
     let componentElements: [DesignToolboxElement] = [
-        ButtonElement()
+        ButtonElement(),
+        LinkElement(),
     ]
 
     var body: some View {