diff --git a/DesignToolbox/DesignToolbox.xcworkspace/xcuserdata/xhrs0459.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist b/DesignToolbox/DesignToolbox.xcworkspace/xcuserdata/xhrs0459.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist index 42f14aa71..48d5dd34f 100644 --- a/DesignToolbox/DesignToolbox.xcworkspace/xcuserdata/xhrs0459.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist +++ b/DesignToolbox/DesignToolbox.xcworkspace/xcuserdata/xhrs0459.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist @@ -3,22 +3,4 @@ uuid = "B4A15A02-0B7C-4A17-81BE-9CA389B02C0B" type = "0" version = "2.0"> - - - - - - diff --git a/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxConfiguration.swift b/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxConfiguration.swift index 25cef881e..d6d7a6bc7 100644 --- a/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxConfiguration.swift +++ b/DesignToolbox/DesignToolbox/Pages/Components/Checkbox/CheckboxConfiguration.swift @@ -53,6 +53,10 @@ final class CheckboxConfigurationModel: ComponentConfiguration { @Published var helperTextContent: String + private var isReadOnly: Bool { + status == .readOnly + } + // MARK: - Internal types enum DesignToolboxCheckboxStatus: CaseIterable, CustomStringConvertible { // CheckboxInternalState is not accessible @@ -123,7 +127,7 @@ final class CheckboxConfigurationModel: ComponentConfiguration { } else { code = """ - OUDSCheckbox(state: $state, label: \"Label\"\(helperTextPatern)\(iconPatern)\(isInversedPattern)\(isErrorPattern)\(dividerPatern)) + OUDSCheckbox(state: $state, label: \"Label\"\(helperTextPatern)\(iconPatern)\(isInversedPattern)\(isErrorPattern)\(isReadOnlyPattern)\(dividerPatern)) \(disableCode)) """ } @@ -154,13 +158,21 @@ final class CheckboxConfigurationModel: ComponentConfiguration { } private var isErrorPattern: String { - if isError && status == .enabled { + if isError && status == .enabled && !isReadOnly { return ", isError: true" } else { return "" } } + private var isReadOnlyPattern: String { + if isReadOnly && !isError { + return ", isReadOnly: true" + } else { + return "" + } + } + private var dividerPatern: String { divider ? ", divider: true" : "" } diff --git a/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings b/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings index e90c90242..fc370a0b2 100644 --- a/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings +++ b/DesignToolbox/DesignToolbox/Resources/en.lproj/Localizable.strings @@ -147,7 +147,7 @@ // TODO: #264 - Update wording "app_components_checkbox_label" = "Checkbox"; -"app_components_checkbox_description_text" = "A checkbox is a component that allows the user to toggle between two or three states, typically \"on\", \"off\" or \"undeterminate\". It is often represented as a square whichc an be ticked or not and color to indicate the current state. Checkboxes are used to select things like features, options, or settings in an intuitive and visual manner."; +"app_components_checkbox_description_text" = "A checkbox is a component that allows the user to toggle between two or three states, typically \"on\", \"off\" or \"undeterminate\". It is often represented as a square which can be ticked or not, and the square may vary with different colors and border widths to indicate the current state. Checkboxes are used to select things like features, options, or settings in an intuitive and visual manner."; "app_components_checkbox_label_text" = "Label"; "app_components_checkbox_switchOnly_label" = "Checkbox only"; "app_components_checkbox_helperText_text" = "Helper Text"; diff --git a/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift b/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift index ebb5c1862..e0bf4dabb 100644 --- a/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift +++ b/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxLabel.swift @@ -12,6 +12,7 @@ // import OUDS +import OUDSFoundations import OUDSTokensSemantic import SwiftUI @@ -60,7 +61,7 @@ struct OUDSCheckboxLabel: View { Text(LocalizedStringKey(items.label)) .typeLabelDefaultLarge(theme) .multilineTextAlignment(.leading) - .foregroundStyle(labelColor) + .foregroundStyle(labelTextColor) .frame(maxWidth: .infinity, alignment: .leading) if let helperText = items.helperText { @@ -91,13 +92,26 @@ struct OUDSCheckboxLabel: View { // MARK: - Colors - private var labelColor: Color { - switch internalState { - case .enabled, .pressed, .hover, .readOnly: - (items.isError ? theme.colors.colorContentStatusNegative : theme.colors.colorContentDefault) - .color(for: colorScheme) - case .disabled: - theme.colors.colorContentDisabled.color(for: colorScheme) + private var labelTextColor: Color { + if items.isError { + switch internalState { + case .enabled: + return theme.colors.colorActionNegativeEnabled.color(for: colorScheme) + case .hover: + return theme.colors.colorActionNegativeHover.color(for: colorScheme) + case .pressed: + return theme.colors.colorActionNegativePressed.color(for: colorScheme) + case .readOnly, .disabled: + OL.fatal("An OUDSCheckbox with a disabled state and an error situation has been detected, which is not allowed." + + " Only non-error situation are allowed to have a disabled state.") + } + } else { + switch internalState { + case .enabled, .hover, .pressed, .readOnly: + return theme.colors.colorContentDefault.color(for: colorScheme) + case .disabled: + return theme.colors.colorContentDisabled.color(for: colorScheme) + } } } diff --git a/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxSelectorButton.swift b/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxSelectorButton.swift index a334f2f59..88fc3bf2a 100644 --- a/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxSelectorButton.swift +++ b/OUDS/Core/Components/Sources/Checkbox/Internal/OUDSCheckboxSelectorButton.swift @@ -56,6 +56,34 @@ struct OUDSCheckboxSelectorButton: View { .scaledToFit() .modifier(SelectorFrameModifier()) .accessibilityHidden(true) + .foregroundColor(appliedColor.color(for: colorScheme)) + } + + private var appliedColor: MultipleColorSemanticTokens { + if isError { + switch internalState { + case .enabled: + return theme.checkRadio.checkRadioColorContentAssetErrorEnabled + case .hover: + return theme.checkRadio.checkRadioColorContentAssetErrorHover + case .pressed: + return theme.checkRadio.checkRadioColorContentAssetErrorPressed + case .disabled, .readOnly: + OL.fatal("An OUDSCheckbox with a disabled state and an error situation has been detected, which is not allowed" + + " Only non-error situation are allowed to have a disabled state.") + } + } else { + switch internalState { + case .enabled: + return theme.checkRadio.checkRadioColorContentAssetSelected + case .hover: + return theme.checkRadio.checkRadioColorContentAssetHover + case .pressed: + return theme.checkRadio.checkRadioColorContentAssetPressed + case .disabled, .readOnly: + return theme.checkRadio.checkRadioColorContentAssetDisabled + } + } } } diff --git a/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift b/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift index 0b4f4e1ca..112c0b420 100644 --- a/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift +++ b/OUDS/Core/Components/Sources/Checkbox/OUDSCheckbox.swift @@ -35,6 +35,14 @@ import SwiftUI /// - **unselected**: the checkbox is empty, does not contain a tick, the user has made the action to unselect or did not select yet the checkbox /// - **undeterminate**: mike a prefilled or preticked checkbox, the user did not do anything on it yet /// +/// ## Particular cases +/// +/// An ``OUDSCheckbox`` can be related to an error situation, for example troubles for a formular. +/// A dedicated look and feel is implemented for that if the `isError` flag is risen. +/// In addition, the ``OUDSCheckbox`` can be in read only mode, i.e. the user cannot interact with the component yet but this component must not be considered +/// as disabled. +/// However the design kit does not manage the case where the component is both in read only mode and in an error context, this is forbidden by design. +/// /// ## Code samples /// /// ```swift @@ -132,6 +140,7 @@ public struct OUDSCheckbox: View { // MARK: - Initializers /// Creates a checkbox with no label. + /// **The design system does not allow to have both an error situation and a read only mode for the component.** /// /// - Parameters: /// - state: A binding to a property that determines wether the selector is ticked, unticked or preticked. @@ -140,11 +149,15 @@ public struct OUDSCheckbox: View { public init(state: Binding, isError: Bool = false, isReadOnly: Bool = false) { + if isError && isReadOnly { + OL.fatal("It is forbidden by design to have an OUDSCheckbox in an error context and in read only mode") + } self._state = state self.layout = .selectorOnly(isError, isReadOnly) } /// Creates a checkbox with label and optional helper text, icon, divider. + /// **The design system does not allow to have both an error situation and a read only mode for the component.** /// /// - Parameters: /// - state: A binding to a property that determines wether the selector is ticked, unticker or preticked. @@ -163,6 +176,9 @@ public struct OUDSCheckbox: View { isError: Bool = false, isReadOnly: Bool = false, divider: Bool = false) { + if isError && isReadOnly { + OL.fatal("It is forbidden by design to have an OUDSCheckbox in an error context and in read only mode") + } self._state = state if isInversed { self.layout = .inverse(.init(label: label,