[#1037] [#945] [#912] Update component tag to v1.3 and v1.4, and use of icons

CHANGELOG.md

@@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-ios-design-system-toolbox/compare/0.20.0...develop)
 
+### Changed
+
+- [Library] Provide predefined icons for `OUDSTag` components (Orange-OpenSource/ouds-ios#912)
+- [Library] Update `OUDSTag` to 1.4 version (Orange-OpenSource/ouds-ios#1037)
+- [Library] Update `OUDSTag` to 1.3 version (Orange-OpenSource/ouds-ios#945)
+
 ### Added
 
 - [Library] Swift DocC tutorial (Orange-OpenSource/ouds-ios#919)
@@ -26,7 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Library] `body moderate` and `label moderate` typography and tokens (Orange-OpenSource/ouds-ios#1003)
 - [DesignToolbox] Use `Helvetica Neue Arabic` font family if arabic (Orange-OpenSource/ouds-ios#1006)
 - [Library] Management of `Helvetica Neue Arabic` font family (Orange-OpenSource/ouds-ios#1006)
-- [DesignToolbox] Color scheme selector (Orange-OpenSource/ouds-ios#944)
+- [DesignToolbox] Color scheme selector (Orange-OpenSource/agUITesouds-ios#944)
 
 ### Changed
 

DesignToolbox/DesignToolbox/Pages/Components/Indicators/Tag/TagConfigurationView.swift

@@ -21,6 +21,10 @@ final class TagConfigurationModel: ComponentConfiguration {
 
     // MARK: Published properties
 
+    @Published var enabled: Bool {
+        didSet { updateCode() }
+    }
+
     @Published var layout: TagLayout {
         didSet { updateCode() }
     }
@@ -31,11 +35,11 @@ final class TagConfigurationModel: ComponentConfiguration {
         didSet { updateCode() }
     }
 
-    @Published var status: OUDSTag.Status {
+    @Published var statusCategory: OUDSTag.Status.Category {
         didSet { updateCode() }
     }
 
-    @Published var hierarchy: OUDSTag.Hierarchy {
+    @Published var appearance: OUDSTag.Appearance {
         didSet { updateCode() }
     }
 
@@ -54,58 +58,97 @@ final class TagConfigurationModel: ComponentConfiguration {
     // MARK: Initializer
 
     override init() {
+        enabled = true
         layout = .textOnly
         loader = false
         flipIcon = false
         label = String(localized: "app_components_common_label_label")
         size = .default
-        status = .neutral
+        statusCategory = .neutral
         shape = .rounded
-        hierarchy = .emphasized
+        appearance = .emphasized
     }
 
     deinit {}
 
+    var status: OUDSTag.Status {
+        switch statusCategory {
+        case .accent:
+            switch layout.statusLeading {
+            case .bullet:
+                .accent(bullet: true)
+            case .none:
+                .accent(bullet: false)
+            case .icon:
+                .accent(icon: Image(systemName: "figure.handball"), flipIcon: flipIcon)
+            }
+        case .neutral:
+            switch layout.statusLeading {
+            case .bullet:
+                .neutral(bullet: true)
+            case .none:
+                .neutral(bullet: false)
+            case .icon:
+                .neutral(icon: Image(systemName: "figure.handball"), flipIcon: flipIcon)
+            }
+        case .positive:
+            .positive(leading: layout.statusLeading)
+        case .warning:
+            .warning(leading: layout.statusLeading)
+        case .negative:
+            .negative(leading: layout.statusLeading)
+        case .info:
+            .info(leading: layout.statusLeading)
+        }
+    }
+
+    var enableFlipIcon: Bool {
+        !loader && (layout == .textAndIcon && (statusCategory == .accent || statusCategory == .neutral))
+    }
+
     // MARK: Component Configuration
 
     override func updateCode() {
-        code = "OUDSTag(label: \"\(label)\"\(iconPattern)\(flipIconPattern)\(hierarchyPattern)\(statusPattern)\(shapePattern)\(sizePattern)\(loaderPattern))"
+        code = """
+        OUDSTag(label: \"\(label)\"\(statusPattern)\(appearancePattern)\(shapePattern)\(sizePattern)\(loaderPattern))
+        \(disablePattern)
+        """
     }
 
-    private var iconPattern: String {
-        switch layout {
-        case .textOnly:
-            ""
-        case .textAndBullet:
-            ", icon: .bullet"
-        case .textAndIcon:
-            ", icon: .asset(Image(decorative: \"ic_heart\"))"
-        }
+    private var disablePattern: String {
+        !loader && !enabled ? ".disabled(true)" : ""
     }
 
-    private var hierarchyPattern: String {
-        ", hierarchy: .\(hierarchy.technicalDescription)"
+    private var appearancePattern: String {
+        ", appearance: \(appearance.technicalDescription)"
     }
 
     private var statusPattern: String {
-        ", status: .\(status.technicalDescription)"
+        if statusCategory != .neutral, statusCategory != .accent {
+            return ", status: \(statusCategory.technicalDescription)(leading: \(layout.statusLeading.technicalDescription))"
+        } else {
+            if layout == .textAndBullet {
+                return ", status: \(statusCategory.technicalDescription)(bullet: true)"
+            } else if layout == .textAndIcon {
+                let flipIconPattern = flipIcon ? ", flipIcon: true" : ""
+                return ", status: \(statusCategory.technicalDescription)(icon: Image(systemName: \"figure.handball\")\(flipIconPattern))"
+            } else {
+                return ", status: \(statusCategory.technicalDescription)()"
+            }
+        }
     }
 
     private var shapePattern: String {
-        ", shape: .\(shape.technicalDescription)"
+        ", shape: \(shape.technicalDescription)"
     }
 
     private var sizePattern: String {
-        ", size: .\(size.technicalDescription)"
+        ", size: \(size.technicalDescription)"
     }
 
     private var loaderPattern: String {
         loader ? ", hasLoader: true" : ""
     }
-
-    private var flipIconPattern: String {
-        flipIcon ? ", flipIcon: true" : ""
-    }
 }
 
 // MARK: - Tag Configuration View
@@ -121,16 +164,25 @@ struct TagConfigurationView: View {
 
     var body: some View {
         VStack(alignment: .leading, spacing: theme.spaces.spaceFixedNone) {
+            OUDSSwitchItem("app_common_enabled_label", isOn: $configurationModel.enabled)
+                .disabled(configurationModel.loader)
+
+            OUDSSwitchItem("app_components_common_loader_label", isOn: $configurationModel.loader)
+                .disabled(!configurationModel.enabled)
+
+            OUDSSwitchItem("app_components_controlItem_flipIcon_label", isOn: $configurationModel.flipIcon)
+                .disabled(!configurationModel.enableFlipIcon)
+
             OUDSChipPicker(title: "app_components_common_layout_label",
                            selection: $configurationModel.layout,
                            chips: TagLayout.chips)
 
-            OUDSChipPicker(title: "app_components_common_hierarchy_label",
-                           selection: $configurationModel.hierarchy,
-                           chips: OUDSTag.Hierarchy.chips)
+            OUDSChipPicker(title: "app_components_common_appearance_label",
+                           selection: $configurationModel.appearance,
+                           chips: OUDSTag.Appearance.chips)
 
             OUDSChipPicker(title: "app_components_common_status_label",
-                           selection: $configurationModel.status,
+                           selection: $configurationModel.statusCategory,
                            chips: filteredStatusChips)
 
             OUDSChipPicker(title: "app_components_tag_shape_label",
@@ -141,28 +193,14 @@ struct TagConfigurationView: View {
                            selection: $configurationModel.size,
                            chips: OUDSTag.Size.chips)
 
-            VStack(alignment: .leading, spacing: theme.spaces.spaceFixedMedium) {
-                OUDSSwitchItem("app_components_common_loader_label", isOn: $configurationModel.loader)
-                    .disabled(configurationModel.status == .disabled)
-
-                OUDSSwitchItem("app_components_controlItem_flipIcon_label", isOn: $configurationModel.flipIcon)
-                    .disabled(configurationModel.layout != .textAndIcon)
-
-                DesignToolboxEditContentDisclosure {
-                    DesignToolboxTextField(text: $configurationModel.label, label: "app_components_common_label_label")
-                }
+            DesignToolboxEditContentDisclosure {
+                DesignToolboxTextField(text: $configurationModel.label, label: "app_components_common_label_label")
             }
         }
     }
 
-    private var filteredStatusChips: [OUDSChipPickerData<OUDSTag.Status>] {
-        OUDSTag.Status.allCases.compactMap {
-            if $0 == .disabled, configurationModel.loader {
-                nil
-            } else {
-                $0.chipData
-            }
-        }
+    private var filteredStatusChips: [OUDSChipPickerData<OUDSTag.Status.Category>] {
+        OUDSTag.Status.Category.allCases.compactMap(\.chipData)
     }
 }
 
@@ -180,12 +218,7 @@ extension OUDSTag.Size: @retroactive CaseIterable, @retroactive CustomStringConv
     }
 
     public var technicalDescription: String {
-        switch self {
-        case .default:
-            "default"
-        case .small:
-            "small"
-        }
+        ".\(description.lowercased())"
     }
 
     var chipData: OUDSChipPickerData<Self> {
@@ -197,9 +230,27 @@ extension OUDSTag.Size: @retroactive CaseIterable, @retroactive CustomStringConv
     }
 }
 
-extension OUDSTag.Status: @retroactive CaseIterable, @retroactive CustomStringConvertible {
+extension OUDSTag.Status.Leading: @retroactive CustomStringConvertible {
 
-    public nonisolated(unsafe) static let allCases: [OUDSTag.Status] = [.neutral, .accent, .info, .negative, .positive, .warning, .disabled]
+    public var description: String {
+        switch self {
+        case .none:
+            "none"
+        case .bullet:
+            "bullet"
+        case .icon:
+            "icon"
+        }
+    }
+
+    public var technicalDescription: String {
+        ".\(description)"
+    }
+}
+
+extension OUDSTag.Status.Category: @retroactive CaseIterable, @retroactive CustomStringConvertible {
+
+    public nonisolated(unsafe) static let allCases: [OUDSTag.Status.Category] = [.neutral, .accent, .info, .negative, .positive, .warning]
 
     public var description: String {
         switch self {
@@ -215,23 +266,21 @@ extension OUDSTag.Status: @retroactive CaseIterable, @retroactive CustomStringCo
             "Positive"
         case .warning:
             "Warning"
-        case .disabled:
-            "Disabled"
         }
     }
 
     public var technicalDescription: String {
-        "\(description.lowercased())"
+        ".\(description.lowercased())"
     }
 
     var chipData: OUDSChipPickerData<Self> {
         OUDSChipPickerData(tag: self, layout: .text(text: description.localized()))
     }
 }
 
-extension OUDSTag.Hierarchy: @retroactive CaseIterable, @retroactive CustomStringConvertible {
+extension OUDSTag.Appearance: @retroactive CaseIterable, @retroactive CustomStringConvertible {
 
-    public nonisolated(unsafe) static let allCases: [OUDSTag.Hierarchy] = [.emphasized, .muted]
+    public nonisolated(unsafe) static let allCases: [OUDSTag.Appearance] = [.emphasized, .muted]
 
     public var description: String {
         switch self {
@@ -243,12 +292,7 @@ extension OUDSTag.Hierarchy: @retroactive CaseIterable, @retroactive CustomStrin
     }
 
     public var technicalDescription: String {
-        switch self {
-        case .emphasized:
-            "emphasized"
-        case .muted:
-            "muted"
-        }
+        ".\(description.lowercased())"
     }
 
     private var chipData: OUDSChipPickerData<Self> {
@@ -274,12 +318,7 @@ extension OUDSTag.Shape: @retroactive CaseIterable, @retroactive CustomStringCon
     }
 
     public var technicalDescription: String {
-        switch self {
-        case .rounded:
-            "rounded"
-        case .square:
-            "square"
-        }
+        ".\(description.lowercased())"
     }
 
     private var chipData: OUDSChipPickerData<Self> {
@@ -307,22 +346,22 @@ enum TagLayout: CaseIterable, CustomStringConvertible {
         }
     }
 
-    var technicalDescription: String { // NOTE: "unused" false positive by periphery (https://github.com/peripheryapp/periphery/issues/980)
-        switch self {
-        case .textOnly:
-            "textOnlyLayout"
-        case .textAndBullet:
-            "textAndBullet"
-        case .textAndIcon:
-            "textAndIcon"
-        }
-    }
-
     private var chipData: OUDSChipPickerData<Self> {
         OUDSChipPickerData(tag: self, layout: .text(text: description.localized()))
     }
 
     static var chips: [OUDSChipPickerData<Self>] {
         allCases.map(\.chipData)
     }
+
+    var statusLeading: OUDSTag.Status.Leading {
+        switch self {
+        case .textOnly:
+            .none
+        case .textAndBullet:
+            .bullet
+        case .textAndIcon:
+            .icon
+        }
+    }
 }

DesignToolbox/DesignToolbox/Pages/Components/Indicators/Tag/TagElement.swift

@@ -22,7 +22,7 @@ struct TagElement: DesignToolboxElement {
 
     init() {
         name = "app_components_tag_label".localized()
-        illustration = AnyView(OUDSTag(label: "Label", hierarchy: .emphasized, status: .positive, shape: .rounded, size: .default))
+        illustration = AnyView(OUDSTag(label: "Label", status: .positive(leading: .icon), appearance: .emphasized, shape: .rounded, size: .default))
         pageDescription = AnyView(DesignToolboxElementPage(
             name: name,
             description: "app_components_tag_description_text",