feat: inverse layout (#264)

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

Hide file tree

Showing 3 changed files with 86 additions and 25 deletions.
diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxPage.swift b/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxPage.swift
@@ -21,12 +21,39 @@ import SwiftUI
 // TODO: #264 - Update page
 
 // swiftlint:disable accessibility_label_for_image
+// swiftlint:disable closure_body_length
 struct CheckboxPage: View {
 
     var body: some View {
 
         VStack(spacing: 2) {
 
+            // Enabled
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .selected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .unselected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .undeterminate, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorSelected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorUnselected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .errorUndeterminate, style: .default, layout: .inverse) { }
+
+            // Disabled
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .selected, style: .default, layout: .inverse) { }.disabled(true)
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .unselected, style: .default, layout: .inverse) { }.disabled(true)
+            OUDSCheckbox(label: "Hello world", icon: Image(systemName: "heart"), status: .undeterminate, style: .default, layout: .inverse) { }.disabled(true)
+
+            // Enabled
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .selected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .unselected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .undeterminate, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorSelected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorUnselected, style: .default, layout: .inverse) { }
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .errorUndeterminate, style: .default, layout: .inverse) { }
+
+            // Disabled
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .selected, style: .default, layout: .inverse) { }.disabled(true)
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .unselected, style: .default, layout: .inverse) { }.disabled(true)
+            OUDSCheckbox(label: "Hello", helper: "World", icon: Image(systemName: "heart"), status: .undeterminate, style: .default, layout: .inverse) { }.disabled(true)
+
             // 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) { }
@@ -95,3 +122,4 @@ struct CheckboxPage: View {
     }
 }
 // swiftlint:enable accessibility_label_for_image
+// swiftlint:enable closure_body_length
diff --git a/OUDS/Core/Components/Sources/Checkbox/Internal/Checkbox.swift b/OUDS/Core/Components/Sources/Checkbox/Internal/Checkbox.swift
@@ -22,6 +22,7 @@ struct Checkbox: View {
     private let label: String?
     private let helper: String?
     private let icon: Image?
+    private let isInversed: Bool
     private let hasDivider: Bool
     private let status: OUDSCheckbox.Status
     private let action: () -> Void
@@ -36,47 +37,54 @@ struct Checkbox: View {
         label = nil
         helper = nil
         icon = nil
+        isInversed = false
         hasDivider = false
         self.status = status
         self.action = action
     }
 
     init(label: String,
+         isInversed: Bool,
          status: OUDSCheckbox.Status,
          hasDivider: Bool = false,
          action: @escaping () -> Void) {
         selectorOnly = false
         self.label = label
         helper = nil
         icon = nil
+        self.isInversed = isInversed
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
     }
 
     init(label: String,
          helper: String,
+         isInversed: Bool,
          status: OUDSCheckbox.Status,
          hasDivider: Bool = false,
          action: @escaping () -> Void) {
         selectorOnly = false
         self.label = label
         self.helper = helper
         icon = nil
+        self.isInversed = isInversed
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
     }
 
     init(label: String,
          icon: Image,
+         isInversed: Bool,
          status: OUDSCheckbox.Status,
          hasDivider: Bool = false,
          action: @escaping () -> Void) {
         selectorOnly = false
         self.label = label
         helper = nil
         self.icon = icon
+        self.isInversed = isInversed
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
@@ -85,13 +93,15 @@ struct Checkbox: View {
     init(label: String,
          helper: String,
          icon: Image,
+         isInversed: Bool,
          status: OUDSCheckbox.Status,
          hasDivider: Bool = false,
          action: @escaping () -> Void) {
         selectorOnly = false
         self.label = label
         self.helper = helper
         self.icon = icon
+        self.isInversed = isInversed
         self.hasDivider = hasDivider
         self.status = status
         self.action = action
@@ -132,36 +142,59 @@ struct Checkbox: View {
     }
 
     // We are sure here label can be uwnrapped because of precondition above (selectorOnly)
-    // swiftlint:disable force_unwrapping
+    @ViewBuilder
     private func defaultLayout() -> some View {
         HStack(spacing: theme.listItem.listItemSpaceColumnGap) {
-            CheckboxSelector(isAlone: false, status: status)
-                .modifier(OUDSCheckboxStyle(status: status, item: .checkbox))
-
-            if let helper {
-                VStack(spacing: theme.listItem.listItemSpaceRowGap) {
-                    Text(label!)
-                        .typeLabelDefaultLarge(theme)
-                        .modifier(OUDSCheckboxStyle(status: status, item: .label))
-
-                    Text(helper)
-                        .typeLabelDefaultMedium(theme)
-                        .modifier(OUDSCheckboxStyle(status: status, item: .helper))
+            if isInversed {
+                if icon != nil {
+                    Spacer()
+                    image()
                 }
+                texts()
+                selector()
             } else {
+                selector()
+                texts()
+                if icon != nil {
+                    Spacer()
+                    image()
+                }
+            }
+        }
+    }
+
+    private func selector() -> some View {
+        CheckboxSelector(isAlone: false, status: status)
+            .modifier(OUDSCheckboxStyle(status: status, item: .checkbox))
+    }
+
+    // swiftlint:disable force_unwrapping
+    @ViewBuilder
+    private func texts() -> some View {
+        if let helper {
+            VStack(spacing: theme.listItem.listItemSpaceRowGap) {
                 Text(label!)
                     .typeLabelDefaultLarge(theme)
                     .modifier(OUDSCheckboxStyle(status: status, item: .label))
-            }
 
-            if let icon {
-                Spacer()
-
-                icon
-                    .frame(maxHeight: theme.checkRadio.checkRadioSizeMaxHeightAssetsContainer)
-                    .accessibilityHidden(true)
+                Text(helper)
+                    .typeLabelDefaultMedium(theme)
+                    .modifier(OUDSCheckboxStyle(status: status, item: .helper))
             }
+        } else {
+            Text(label!)
+                .typeLabelDefaultLarge(theme)
+                .modifier(OUDSCheckboxStyle(status: status, item: .label))
         }
     }
     // swiftlint:enable force_unwrapping
+
+    // swiftlint:disable force_unwrapping
+    @ViewBuilder
+    private func image() -> some View {
+        icon!
+        .frame(maxHeight: theme.checkRadio.checkRadioSizeMaxHeightAssetsContainer)
+        .accessibilityHidden(true)
+    }
+    // swiftlint:enable force_unwrapping
 }
diff --git a/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift b/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift
@@ -292,14 +292,14 @@ public struct OUDSCheckbox: View {
         case .selectorOnly:
             Checkbox(status: status, action: action)
         case .label(let label):
-            Checkbox(label: label, status: status, action: action)
+            Checkbox(label: label, isInversed: layout == .inverse, status: status, action: action)
         case let .labelAndHelper(label, helper):
-            Checkbox(label: label, helper: helper, status: status, action: action)
+            Checkbox(label: label, helper: helper, isInversed: layout == .inverse, status: status, action: action)
         case let .labelAndHelperAndIcon(label: label, helper: helper, icon: icon):
-            Checkbox(label: label, helper: helper, icon: icon, status: status, action: action)
+            Checkbox(label: label, helper: helper, icon: icon, isInversed: layout == .inverse, status: status, action: action)
         case let .labelAndIcon(label, icon):
-            Checkbox(label: label, icon: icon, status: status, action: action)
-        // TODO: #264 - Implement other cases
+            Checkbox(label: label, icon: icon, isInversed: layout == .inverse, status: status, action: action)
+        // TODO: #264 - Implement other cases (divider)
         default:
             Text("Not implemented yet")
         }