chore: more work on layouts

Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
Orange-OpenSource · Feb 3, 2025 · b6db833 · b6db833
1 parent 8220e65
commit b6db833
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 25 deletions.
diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxPage.swift
@@ -20,12 +20,39 @@ import SwiftUI
 
 // TODO: #264 - Update page
 
+// swiftlint:disable accessibility_label_for_image
 struct CheckboxPage: View {
 
     var body: some View {
 
         VStack(spacing: 2) {
 
+            // Enabled
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .selected, style: .default) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .unselected, style: .default) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .undeterminate, style: .default) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorSelected, style: .default) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorUnselected, style: .default) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorUndeterminate, style: .default) { }
+
+            // Disabled
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .selected, style: .default) { }.disabled(true)
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .unselected, style: .default) { }.disabled(true)
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .undeterminate, style: .default) { }.disabled(true)
+
+            // Enabled
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .selected, style: .default) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .unselected, style: .default) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .undeterminate, style: .default) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorSelected, style: .default) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorUnselected, style: .default) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorUndeterminate, style: .default) { }
+
+            // Disabled
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .selected, style: .default) { }.disabled(true)
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .unselected, style: .default) { }.disabled(true)
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .undeterminate, style: .default) { }.disabled(true)
+
             // Enabled
             OUDSCheckbox(label: "Hello", helper: "World", status: .selected, style: .default) { }
             OUDSCheckbox(label: "Hello", helper: "World", status: .unselected, style: .default) { }
@@ -67,3 +94,4 @@ struct CheckboxPage: View {
         }
     }
 }
+// swiftlint:enable accessibility_label_for_image
diff --git a/OUDS/Core/Components/Sources/Checkbox/Internal/Checkbox.swift b/OUDS/Core/Components/Sources/Checkbox/Internal/Checkbox.swift
@@ -21,6 +21,7 @@ struct Checkbox: View {
     private let selectorOnly: Bool
     private let label: String?
     private let helper: String?
+    private let icon: Image?
     private let hasDivider: Bool
     private let status: OUDSCheckbox.Status
     private let action: () -> Void
@@ -34,6 +35,7 @@ struct Checkbox: View {
         selectorOnly = true
         label = nil
         helper = nil
+        icon = nil
         hasDivider = false
         self.status = status
         self.action = action
@@ -46,6 +48,7 @@ struct Checkbox: View {
         selectorOnly = false
         self.label = label
         helper = nil
+        icon = nil
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
@@ -59,6 +62,36 @@ struct Checkbox: View {
         selectorOnly = false
         self.label = label
         self.helper = helper
+        icon = nil
+        self.hasDivider = hasDivider
+        self.status = status
+        self.action = action
+    }
+
+    init(label: String,
+         icon: Image,
+         status: OUDSCheckbox.Status,
+         hasDivider: Bool = false,
+         action: @escaping () -> Void) {
+        selectorOnly = false
+        self.label = label
+        helper = nil
+        self.icon = icon
+        self.hasDivider = hasDivider
+        self.status = status
+        self.action = action
+    }
+
+    init(label: String,
+         helper: String,
+         icon: Image,
+         status: OUDSCheckbox.Status,
+         hasDivider: Bool = false,
+         action: @escaping () -> Void) {
+        selectorOnly = false
+        self.label = label
+        self.helper = helper
+        self.icon = icon
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
@@ -68,12 +101,14 @@ struct Checkbox: View {
 
     var body: some View {
         appliedLayout()
+            .padding(theme.select.selectSpacePaddingInset)
             .frame(minWidth: theme.listItem.listItemSizeMinWidth,
                    minHeight: theme.listItem.listItemSizeMinHeight)
             .accessibilityAddTraits(.isButton)
             .onTapGesture {
                 action()
             }
+            .border(Color.black, width: 1) // NOTE: #264 - Debug
     }
 
     // MARK: - Layouts
@@ -118,6 +153,14 @@ struct Checkbox: View {
                     .typeLabelDefaultLarge(theme)
                     .modifier(OUDSCheckboxStyle(status: status, item: .label))
             }
+
+            if let icon {
+                Spacer()
+
+                icon
+                    .frame(maxHeight: theme.checkRadio.checkRadioSizeMaxHeightAssetsContainer)
+                    .accessibilityHidden(true)
+            }
         }
     }
     // swiftlint:enable force_unwrapping

diff --git a/OUDS/Core/Components/Sources/Checkbox/Internal/CheckboxSelector.swift b/OUDS/Core/Components/Sources/Checkbox/Internal/CheckboxSelector.swift
@@ -13,7 +13,7 @@
 
 import SwiftUI
 
-/// The square with the tick or not, i.e. the checkbox selector depending to the given `OUDSCheckbox.Status`
+/// The square with the tick or not, i.e. the checkbox selector depending to the given ``OUDSCheckbox.Status``
 struct CheckboxSelector: View {
 
     let isAlone: Bool
@@ -27,41 +27,41 @@ struct CheckboxSelector: View {
             tickImage(name: "checkmark")
         } else if status == .undeterminate || status == .errorUndeterminate {
             tickImage(name: "minus")
-        } else {
+        } else { // .unselected and .errorUnselected cases
             Color.clear
-                .frame(minWidth: appliedMinWidth,
-                       maxWidth: appliedMaxWidth,
-                       minHeight: appliedMinHeight,
-                       maxHeight: appliedMaxHeight)
-                .padding(4)
+                .modifier(SelectorFrameModifier(isAlone: isAlone))
         }
     }
 
     private func tickImage(name: String) -> some View {
         Image(systemName: name)
             .resizable()
             .scaledToFit()
-            .frame(minWidth: appliedMinWidth,
-                   maxWidth: appliedMaxWidth,
-                   minHeight: appliedMinHeight,
-                   maxHeight: appliedMaxHeight)
-            .padding(4)
+            .modifier(SelectorFrameModifier(isAlone: isAlone))
             .accessibilityHidden(true)
     }
+}
 
-    private var appliedMinWidth: CGFloat {
-        isAlone ? theme.checkRadio.checkRadioSizeMinWidthSelectorOnly : theme.checkRadio.checkRadioSizeSelector // TODO: #264 - No token for min width!
-    }
-
-    private var appliedMaxWidth: CGFloat {
-        isAlone ? theme.checkRadio.checkRadioSizeMinWidthSelectorOnly : theme.checkRadio.checkRadioSizeMinWidthSelectorOnly // TODO: #264 - No token for max width!
-    }
+/// `ViewModifier` for the checbkox slector to define the tokens to use depending to if the checkkox is alone or not
+private struct SelectorFrameModifier: ViewModifier {
 
-    private var appliedMinHeight: CGFloat {
-        isAlone ? theme.checkRadio.checkRadioSizeMinHeightSelectorOnly : theme.listItem.listItemSizeIcon
-    }
+    let isAlone: Bool
+    @Environment(\.theme) private var theme
 
-    private var appliedMaxHeight: CGFloat {
-        isAlone ? theme.checkRadio.checkRadioSizeMaxHeightSelectorOnly : theme.checkRadio.checkRadioSizeMaxHeightAssetsContainer
+    // TODO: #264 - Ensure the rules for min/xax height/width are the good ones in Figma
+    func body(content: Content) -> some View {
+        content
+            .frame(width: theme.listItem.listItemSizeIcon,
+                   height: theme.listItem.listItemSizeIcon)
+//        if isAlone {
+//            content
+//                .frame(minWidth: theme.checkRadio.checkRadioSizeMinWidthSelectorOnly,
+//                       minHeight: theme.checkRadio.checkRadioSizeMinHeightSelectorOnly,
+//                       maxHeight: theme.checkRadio.checkRadioSizeMaxHeightSelectorOnly)
+//        } else {
+//            content
+//                .frame(minHeight: theme.listItem.listItemSizeIcon,
+//                       maxHeight: theme.checkRadio.checkRadioSizeMaxHeightAssetsContainer)
+//        }
     }
 }
diff --git a/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift b/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift
@@ -295,7 +295,11 @@ public struct OUDSCheckbox: View {
             Checkbox(label: label, status: status, action: action)
         case let .labelAndHelper(label, helper):
             Checkbox(label: label, helper: helper, status: status, action: action)
-        // TODO: #264 - Implment other cases
+        case let .labelAndHelperAndIcon(label: label, helper: helper, icon: icon):
+            Checkbox(label: label, helper: helper, icon: icon, status: status, action: action)
+        case let .labelAndIcon(label, icon):
+            Checkbox(label: label, icon: icon, status: status, action: action)
+        // TODO: #264 - Implement other cases
         default:
             Text("Not implemented yet")
         }