diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundMofifier.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundModifier.swift similarity index 86% rename from OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundMofifier.swift rename to OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundModifier.swift index 4862c2a2a8..bb8e208ecb 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundMofifier.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BackgroundModifier.swift @@ -31,27 +31,27 @@ struct ButtonBackgroundModifier: ViewModifier { // MARK: Body func body(content: Content) -> some View { - content.background(colorToken.color(for: colorScheme)) + content.background(appliedColor.color(for: colorScheme)) } // MARK: Private helpers - private var colorToken: MultipleColorSemanticTokens { + private var appliedColor: MultipleColorSemanticTokens { switch state { case .enabled: - return enabledToken + return enabledColor case .hover: - return hoverToken + return hoverColor case .pressed: - return pressedToken + return pressedColor case .loading: - return loadingToken + return loadingColor case .disabled: - return disbledToken + return disabledColor } } - private var enabledToken: MultipleColorSemanticTokens { + private var enabledColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorBgDefaultEnabledMono : theme.button.buttonColorBgDefaultEnabled @@ -64,7 +64,7 @@ struct ButtonBackgroundModifier: ViewModifier { } } - private var hoverToken: MultipleColorSemanticTokens { + private var hoverColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorBgDefaultHoverMono : theme.button.buttonColorBgDefaultHover @@ -77,7 +77,7 @@ struct ButtonBackgroundModifier: ViewModifier { } } - private var pressedToken: MultipleColorSemanticTokens { + private var pressedColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorBgDefaultPressedMono : theme.button.buttonColorBgDefaultPressed @@ -90,7 +90,7 @@ struct ButtonBackgroundModifier: ViewModifier { } } - private var loadingToken: MultipleColorSemanticTokens { + private var loadingColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorBgDefaultLoadingMono : theme.button.buttonColorBgDefaultLoading @@ -103,7 +103,7 @@ struct ButtonBackgroundModifier: ViewModifier { } } - private var disbledToken: MultipleColorSemanticTokens { + private var disabledColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorBgDefaultDisabledMono : theme.button.buttonColorBgDefaultDisabled diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderMofifier.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderModifier.swift similarity index 99% rename from OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderMofifier.swift rename to OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderModifier.swift index 8130695a68..976a4078ff 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderMofifier.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+BorderModifier.swift @@ -61,9 +61,8 @@ struct ButtonBorderModifier: ViewModifier { } } - // MARK: Private helpers - // MARK: Default hierarchy + private var defaultWidth: BorderWidthSemanticToken { switch state { case .enabled: @@ -95,6 +94,7 @@ struct ButtonBorderModifier: ViewModifier { } // MARK: Minimal hierarchy + private var minimalWidth: BorderWidthSemanticToken { switch state { case .enabled: @@ -126,6 +126,7 @@ struct ButtonBorderModifier: ViewModifier { } // MARK: Strong hierarchy + private var strongColor: MultipleColorSemanticTokens { switch state { case .enabled: diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundMofifier.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundModifier.swift similarity index 83% rename from OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundMofifier.swift rename to OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundModifier.swift index ced64a27bf..36f7864293 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundMofifier.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+ForegroundModifier.swift @@ -16,7 +16,7 @@ import OUDSTokensComponent import OUDSTokensSemantic import SwiftUI -/// Used to apply the right forgeround color associated to the hierarchy and state +/// Used to apply the right forground color associated to the hierarchy and state struct ButtonForegroundModifier: ViewModifier { @Environment(\.theme) private var theme @@ -31,29 +31,29 @@ struct ButtonForegroundModifier: ViewModifier { // MARK: Body func body(content: Content) -> some View { - content.foregroundStyle(colorToken) + content.foregroundStyle(appliedColor) } // MARK: Private helpers - private var colorToken: Color { + private var appliedColor: Color { switch state { case .enabled: - enabledToken.color(for: colorScheme) + enabledColor.color(for: colorScheme) case .hover: - hoverToken.color(for: colorScheme) + hoverColor.color(for: colorScheme) case .pressed: - pressedToken.color(for: colorScheme) + pressedColor.color(for: colorScheme) case .loading: // Hide the content because it is replaced by the loading indicator. - // However the content is nedded to get the size the button in loading state. + // However the content is needed to get the size of the button in loading state. Color.clear.opacity(0) case .disabled: - disabledToken.color(for: colorScheme) + disabledColor.color(for: colorScheme) } } - private var enabledToken: MultipleColorSemanticTokens { + private var enabledColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorContentDefaultEnabledMono : theme.button.buttonColorContentDefaultEnabled @@ -66,7 +66,7 @@ struct ButtonForegroundModifier: ViewModifier { } } - private var hoverToken: MultipleColorSemanticTokens { + private var hoverColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorContentDefaultHoverMono : theme.button.buttonColorContentDefaultHover @@ -79,7 +79,7 @@ struct ButtonForegroundModifier: ViewModifier { } } - private var pressedToken: MultipleColorSemanticTokens { + private var pressedColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorContentDefaultPressedMono : theme.button.buttonColorContentDefaultPressed @@ -92,7 +92,7 @@ struct ButtonForegroundModifier: ViewModifier { } } - private var disabledToken: MultipleColorSemanticTokens { + private var disabledColor: MultipleColorSemanticTokens { switch hierarchy { case .default: onColoredSurface ? theme.button.buttonColorContentDefaultDisabledMono : theme.button.buttonColorContentDefaultDisabled diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+LoadingModifiers.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+LoadingModifiers.swift index 388372547d..b431e0e365 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+LoadingModifiers.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+LoadingModifiers.swift @@ -16,15 +16,16 @@ import OUDSTokensComponent import OUDSTokensSemantic import SwiftUI -// MARK: Loading modifier +// MARK: - Loading indicator private struct LoagingIndicator: View { // MARK: Stored Properties - @State private var isAnimating = false let color: Color + @State private var isAnimating = false + // MARK: Body var body: some View { @@ -40,7 +41,9 @@ private struct LoagingIndicator: View { } } -/// Used to add a Progress indicator instead of conent (Text, Icon) +// MARK: - Button Loading Content Modifier + +/// Used to add a progress indicator instead of content (Text, Icon) /// As the button must keep the size of the content, the indicator is /// added as overlay on top, and the content is hidden applying an opacity. struct ButtonLoadingContentModifier: ViewModifier { diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+NormalModifier.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+NormalModifier.swift index c2ed1a7470..d4a6b2fcca 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+NormalModifier.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle+NormalModifier.swift @@ -15,16 +15,15 @@ import OUDS import OUDSTokensSemantic import SwiftUI -/// The internal state used by modifiers to handle all -/// states of the button. +/// The internal state used by modifiers to handle all states of the button. enum InternalButtonState { case enabled, hover, pressed, loading, disabled } -// MARK: - General modifier +// MARK: - Button View Modifier -/// This modifier has in charge to : -/// - compute the internal state based on `isEnabled`, `isPreessed` and `isHover` flags +/// This modifier has in charge to: +/// - compute the internal state based on `isEnabled`, `isPressed` and `isHover` flags /// - apply foreground, background colors and add a border (width, radius and color) associated to the hierarchy and according to the internal state struct ButtonViewModifier: ViewModifier { diff --git a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle.swift b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle.swift index 313204e2eb..caeb311bf3 100644 --- a/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle.swift +++ b/OUDS/Core/Components/Sources/Buttons/Internal/OUDSButtonStyle.swift @@ -15,7 +15,7 @@ import OUDS import OUDSTokensSemantic import SwiftUI -/// Used to apply the right style on a `OUDSButton` according to the `hierarchy` +/// Used to apply the right style on an ``OUDSButton`` according to the `hierarchy` /// and the `style`. /// /// Four hierarchies are proposed: @@ -29,25 +29,27 @@ import SwiftUI /// - negative: Negative buttons should be used sparingly to warn of a destructive action, for example, delete or remove, typically /// resulting in the opening of a confirmation dialog. /// -/// Three styles are available: +/// Two styles are available: /// - normal: is the normal state of a button which can be disabled, pressed, hovered or normal (i.e. enabled) /// - loading: the style used after button was clicked and probably data are requested before navigate to a next screen or get updated data. /// struct OUDSButtonStyle: ButtonStyle { + @Environment(\.isEnabled) private var isEnabled + + @State private var isHover: Bool + // MARK: Stored Properties - @Environment(\.isEnabled) private var isEnable - private let style: OUDSButton.Style private let hierarchy: OUDSButton.Hierarchy - @State private var isHover: Bool + private let style: OUDSButton.Style // MARK: Initializer /// Initialize the `OUDSButtonStyle` for the `hierarchy` /// in the `state` of the `OUDSButton`. /// - /// - Parameters: + /// - Parameters: /// - hierarchy: The button hierarchy /// - style: The button style public init(hierarchy: OUDSButton.Hierarchy, style: OUDSButton.Style) { @@ -73,8 +75,8 @@ struct OUDSButtonStyle: ButtonStyle { } } - func internalState(isPressed: Bool) -> InternalButtonState { - if !isEnable { + private func internalState(isPressed: Bool) -> InternalButtonState { + if !isEnabled { return .disabled } diff --git a/OUDS/Core/Components/Sources/Buttons/OUDSButton.swift b/OUDS/Core/Components/Sources/Buttons/OUDSButton.swift index a4a2b4c438..cb388f4d97 100644 --- a/OUDS/Core/Components/Sources/Buttons/OUDSButton.swift +++ b/OUDS/Core/Components/Sources/Buttons/OUDSButton.swift @@ -17,7 +17,7 @@ import SwiftUI /// /// ## Hierarchies /// -/// Four hieraries are proposed for all layouts: +/// Four hierarchies are proposed for all layouts: /// /// - **default**: Default buttons are used for actions which are not mandatory or essential for the user. /// @@ -28,9 +28,9 @@ import SwiftUI /// /// - **negative**: Negative buttons should be used sparingly to warn of a destructive action, /// for example, delete or remove, typically resulting in the opening of a confirmation dialog. -/// A button with [OUDSButton.Hierarchy.Negative] hierarchy is not allowed as a direct or indirect child of an [OUDSColoredSurface]. +/// A button with `OUDSButton.Hierarchy.Negative` hierarchy is not allowed as a direct or indirect child of an `OUDSColoredSurface`. /// -/// ``` +/// ```swift /// // Icon only with default hierarchy /// OUDSButton(hierarchy: .default, icon: Image("ic_heart")) {} /// @@ -39,7 +39,6 @@ import SwiftUI /// /// // Text and icon with strong hierarchy /// OUDSButton(hierarchy: .strong, icon: Image("ic_heart"), text: "Validate") {} -/// /// ``` /// /// ## Styles @@ -53,8 +52,9 @@ import SwiftUI /// /// If button is placed on colored surface using `OUDSColoredSurface`, the default colors (content, background and border) are automatically adjusted to switch to monochrom. /// -/// **Remark: Today it is not allowed to placed a Negative button on a colored surface. -/// +/// **Remark: Today it is not allowed to place a Negative button on a colored surface.** +/// +/// - Since: 0.10.0 public struct OUDSButton: View { // MARK: Stored Properties diff --git a/OUDS/Core/Components/Sources/_OUDSComponents.docc/OUDSComponents.md b/OUDS/Core/Components/Sources/_OUDSComponents.docc/OUDSComponents.md index 526953eec3..b78ecccb18 100644 --- a/OUDS/Core/Components/Sources/_OUDSComponents.docc/OUDSComponents.md +++ b/OUDS/Core/Components/Sources/_OUDSComponents.docc/OUDSComponents.md @@ -4,7 +4,24 @@ The catalog of all components provided by OUDS. It contains also `View` extensio ## Overview -❗More details coming soon.❗ +### Buttons + +The ``OUDSButton`` propose layout with text only, icon only or text and icon. +Four hierarchies are proposed for all layouts: *default*, *strong*, *minimal* and *negative*. +Two style are available: *default* and *loading*. +If button is placed on colored surface using `OUDSColoredSurface`, the default colors (content, background and border) are automatically adjusted to switch to monochrom. +A button with `OUDSButton.Hierarchy.Negative` hierarchy is not allowed as a direct or indirect child of an `OUDSColoredSurface`. + +```swift + // Icon only with default hierarchy + OUDSButton(hierarchy: .default, icon: Image("ic_heart")) {} + + // Text only with negative hierarchy + OUDSButton(hierarchy: .negative, text: "Delete") {} + + // Text and icon with strong hierarchy + OUDSButton(hierarchy: .strong, icon: Image("ic_heart"), text: "Validate") {} +``` ## Customize components @@ -85,3 +102,5 @@ The helper is available through `View`, and tokens through the provider of the t ## Topics ### Group + +- ``OUDSButton`` diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSColoredSurface.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSColoredSurface.swift index 6f0c6d29c7..2c1df4fdba 100644 --- a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSColoredSurface.swift +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSColoredSurface.swift @@ -16,13 +16,16 @@ import SwiftUI /// Used to define if a content is used on a colored surface. /// /// It applies the `color` to the background and set the `oudsOnColoredSurface` -/// environment variable to true. This variable is usefull, for example, to change +/// environment variable to *true*. This variable is usefull, for example, to change /// the style of a component according to its environment. /// +/// ```swift /// OUDSColoredSurface(color: .green) { /// OUDSButton(icon: Image("ic_heart"), hierarchy: .strong, state: .nomal) {} /// } +/// ``` /// +/// - Since: 0.10.0 public struct OUDSColoredSurface: View where Content: View { // MARK: Stored Properties @@ -37,7 +40,6 @@ public struct OUDSColoredSurface: View where Content: View { /// - Parameters: /// - color: The color applied as background on the content view /// - content: The content view builder - /// public init(color: Color, @ViewBuilder content: @escaping () -> Content) { self.color = color self.content = content @@ -53,7 +55,8 @@ public struct OUDSColoredSurface: View where Content: View { } extension View { - /// Helper to set the current view on colored surface based on `OUDSColoredSurface`. + + /// Helper to set the current view on colored surface based on ``OUDSColoredSurface``. /// /// - Parameter color: The color applied as background on the current view. public func oudsColoredSurface(color: Color) -> some View { @@ -71,8 +74,9 @@ private struct ColoredSurfaceClassEnvironmentKey: EnvironmentKey { } extension EnvironmentValues { - /// Updated by the `OUDSColoredSurface`, the value tells you if the current view is - /// on a colored surface. + + /// Updated by the ``OUDSColoredSurface``, the value tells if the current view is + /// on a colored surface or not. public var oudsOnColoredSurface: Bool { get { self[ColoredSurfaceClassEnvironmentKey.self] diff --git a/OUDS/Core/OUDS/Sources/_OUDS.docc/Components.md b/OUDS/Core/OUDS/Sources/_OUDS.docc/Components.md index dd0992110c..7103006c9f 100644 --- a/OUDS/Core/OUDS/Sources/_OUDS.docc/Components.md +++ b/OUDS/Core/OUDS/Sources/_OUDS.docc/Components.md @@ -2,10 +2,6 @@ _Components_ are the `View` objects you can add in the views of your apps, like buttons, links, cards etc. -*There is not component yet* - -❗More details coming soon❗ - ## How to use components Import the target of components, and use the component you want: @@ -24,3 +20,18 @@ Of course you must use in your root view the with ``` You can get more details about _Components_ with the [OUDSComponents documentation](https://ios.unified-design-system.orange.com/documentation/oudstokenscomponent/). + +## Available components + +### Button + +```swift + // Icon only with default hierarchy + OUDSButton(hierarchy: .default, icon: Image("ic_heart")) {} + + // Text only with negative hierarchy + OUDSButton(hierarchy: .negative, text: "Delete") {} + + // Text and icon with strong hierarchy + OUDSButton(hierarchy: .strong, icon: Image("ic_heart"), text: "Validate") {} +``` diff --git a/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+ButtonComponentTokens.swift b/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+ButtonComponentTokens.swift index f3d729dfa4..f12ee98106 100644 --- a/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+ButtonComponentTokens.swift +++ b/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+ButtonComponentTokens.swift @@ -16,9 +16,6 @@ import OUDSTokensComponent import OUDSTokensRaw import OUDSTokensSemantic -// ଘ( ･ω･)_/ﾟ･:*:･｡☆ -// [File to generate and update with the tokenator] - extension OrangeThemeButtonComponentTokensProvider: ButtonComponentTokens { @objc open var buttonSizeMaxHeight: SizeSemanticToken { DimensionRawTokens.dimension600 } @objc open var buttonSizeMinHeight: SizeSemanticToken { DimensionRawTokens.dimension600 } diff --git a/OUDS/Foundations/Sources/Extensions/Color+extensions.swift b/OUDS/Foundations/Sources/Extensions/Color+extensions.swift index 8c20512f0a..4d805dd8b9 100644 --- a/OUDS/Foundations/Sources/Extensions/Color+extensions.swift +++ b/OUDS/Foundations/Sources/Extensions/Color+extensions.swift @@ -13,7 +13,6 @@ import SwiftUI -@available(macOS 10.15, *) extension Color { /// `Color` extension to get a `Color` from its hexadecimal string representation. diff --git a/Showcase/Showcase.xcodeproj/project.pbxproj b/Showcase/Showcase.xcodeproj/project.pbxproj index 563b3131d4..d07a7c4bb9 100644 --- a/Showcase/Showcase.xcodeproj/project.pbxproj +++ b/Showcase/Showcase.xcodeproj/project.pbxproj @@ -244,10 +244,6 @@ 077CCE542CB426090059CC28 /* DimensionTokenElement.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DimensionTokenElement.swift; sourceTree = ""; }; 0784B26F2CCB86C500299C10 /* NamedSize+IconWithTypography.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconWithTypography.swift"; sourceTree = ""; }; 0784B2722CCB8CC800299C10 /* NamedSize+IconDecorative.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedSize+IconDecorative.swift"; sourceTree = ""; }; - 0784B2752CCBD9C300299C10 /* NamedFont.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NamedFont.swift; sourceTree = ""; }; - 0784B2772CCBDD8900299C10 /* View+Illustration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "View+Illustration.swift"; sourceTree = ""; }; - 0784B2752CCBD9C300299C10 /* NamedTypography.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NamedTypography.swift; sourceTree = ""; }; - 0784B2772CCBDD8900299C10 /* NamedTypography+Illustration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NamedTypography+Illustration.swift"; sourceTree = ""; }; 07CEDD802C7DB921003E1885 /* generateDoc.sh */ = {isa = PBXFileReference; lastKnownFileType = text.script.sh; name = generateDoc.sh; path = ../generateDoc.sh; sourceTree = ""; }; 07CF426A2CA30728000BD03E /* TokensPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokensPage.swift; sourceTree = ""; }; 07CF42712CA31AC3000BD03E /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; diff --git a/Showcase/Showcase/Pages/Components/Button/ButtonConfiguration.swift b/Showcase/Showcase/Pages/Components/Button/ButtonConfiguration.swift index e9e892e360..01cd6c0c91 100644 --- a/Showcase/Showcase/Pages/Components/Button/ButtonConfiguration.swift +++ b/Showcase/Showcase/Pages/Components/Button/ButtonConfiguration.swift @@ -14,9 +14,9 @@ import OUDSComponents import SwiftUI -// MARK: Button Configuration Model +// MARK: - Button Configuration Model -// The model shared between `ButtonPageConfiguration` view and `ButtonPageComponent` views. +/// The model shared between `ButtonPageConfiguration` view and `ButtonPageComponent` view. final class ButtonConfigurationModel: ComponentConfiguration { // MARK: Published properties @@ -24,12 +24,15 @@ final class ButtonConfigurationModel: ComponentConfiguration { @Published var enabled: Bool = true { didSet { updateCode() } } + @Published var layout: ButtonLayout { didSet { updateCode() } } + @Published var hierarchy: OUDSButton.Hierarchy { didSet { updateCode() } } + @Published var style: OUDSButton.Style { didSet { updateCode() } } @@ -45,7 +48,7 @@ final class ButtonConfigurationModel: ComponentConfiguration { deinit { } - // MARK: ComponentConfiguration + // MARK: Component Configuration private var disableCode: String { if case .`default` = style { @@ -56,7 +59,6 @@ final class ButtonConfigurationModel: ComponentConfiguration { } override func updateCode() { - switch layout { case .textOnly: code = @@ -80,7 +82,7 @@ final class ButtonConfigurationModel: ComponentConfiguration { } } -// MARK: Button Layout +// MARK: - Button Layout enum ButtonLayout: CaseIterable, CustomStringConvertible { case textOnly @@ -101,7 +103,7 @@ enum ButtonLayout: CaseIterable, CustomStringConvertible { var id: String { description } } -// MARK: Button Layout +// MARK: Button style extension extension OUDSButton.Style: @retroactive CaseIterable, @retroactive CustomStringConvertible { @@ -119,7 +121,7 @@ extension OUDSButton.Style: @retroactive CaseIterable, @retroactive CustomString var id: String { description } } -// MARK: Button Hierarchy extension +// MARK: Button hierarchy extension extension OUDSButton.Hierarchy: @retroactive CaseIterable, @retroactive CustomStringConvertible { nonisolated(unsafe) public static let allCases: [OUDSButton.Hierarchy] = [.default, .strong, .minimal, .negative] @@ -141,21 +143,15 @@ extension OUDSButton.Hierarchy: @retroactive CaseIterable, @retroactive CustomSt var id: String { description } } -// MARK: Button Confoguration View +// MARK: - Button Configuration View struct ButtonConfiguration: View { - // MARK: Environment properties - @Environment(\.theme) private var theme @Environment(\.colorScheme) private var colorScheme - // MARK: Stored properties - @StateObject var model: ButtonConfigurationModel - // MARK: Body - var body: some View { VStack(alignment: .leading, spacing: theme.spaces.spaceFixedMedium) { Toggle("app_common_enabled_label", isOn: $model.enabled) diff --git a/Showcase/Showcase/Pages/Components/Button/ButtonPage.swift b/Showcase/Showcase/Pages/Components/Button/ButtonPage.swift index 825c9e7a8f..8c4cd86733 100644 --- a/Showcase/Showcase/Pages/Components/Button/ButtonPage.swift +++ b/Showcase/Showcase/Pages/Components/Button/ButtonPage.swift @@ -19,12 +19,8 @@ import SwiftUI struct ButtonPage: View { - // MARK: Stored properties - private let configuration = ButtonConfigurationModel() - // MARK: Body - var body: some View { ComponentConfigurationView( configuration: configuration, @@ -33,8 +29,6 @@ struct ButtonPage: View { ) } - // MARK: Private helpers - @ViewBuilder private func componentView(with configuration: ComponentConfiguration) -> some View { if let model = configuration as? ButtonConfigurationModel { @@ -50,21 +44,14 @@ struct ButtonPage: View { } } -// MARK: Button component illustration +// MARK: Button Illustration struct ButtonIllustration: View { - // MARK: Environment properties - - @Environment(\.theme) private var theme @Environment(\.colorScheme) private var colorScheme - // MARK: Stored properties - let model: ButtonConfigurationModel - // MARK: Body - var body: some View { VStack(alignment: .center) { ButtonDemo(model: model, coloredSurface: false) @@ -76,19 +63,15 @@ struct ButtonIllustration: View { } } -private struct BackgroundModifier: ViewModifier { +// MARK: - Backgroud Modifier - // MARK: Environment properties +private struct BackgroundModifier: ViewModifier { @Environment(\.theme) private var theme @Environment(\.colorScheme) private var colorScheme - // MARK: Stored properties - let coloredSurface: Bool - // MARK: Body - func body(content: Content) -> some View { if coloredSurface { content.oudsColoredSurface(color: theme.colors.colorSurfaceBrandPrimary.color(for: colorScheme)) @@ -98,14 +81,11 @@ private struct BackgroundModifier: ViewModifier { } } -private struct ButtonDemo: View { +// MARK: - Button Demo - // MARK: Environment properties +private struct ButtonDemo: View { @Environment(\.theme) private var theme - @Environment(\.colorScheme) private var colorScheme - - // MARK: Stored properties @StateObject var model: ButtonConfigurationModel let coloredSurface: Bool @@ -118,16 +98,14 @@ private struct ButtonDemo: View { if model.hierarchy == .negative, coloredSurface == true { Text("app_components_button_negative_hierary_notAllowed_text") } else { - // swiftlint:disable accessibility_label_for_image switch model.layout { case .iconOnly: - OUDSButton(icon: Image("ic_heart"), hierarchy: model.hierarchy, style: model.style) {} + 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) {} case .iconAndText: - OUDSButton(icon: Image("ic_heart"), text: "app_components_button_label", hierarchy: model.hierarchy, style: model.style) {} + OUDSButton(icon: Image(decorative: "ic_heart"), text: "app_components_button_label", hierarchy: model.hierarchy, style: model.style) {} } - // swiftlint:enable accessibility_label_for_image } Spacer() diff --git a/Showcase/Showcase/Pages/Tokens/Dimension/Size/SizeTokenPage.swift b/Showcase/Showcase/Pages/Tokens/Dimension/Size/SizeTokenPage.swift index 4b2fe43ae5..b514b665f2 100644 --- a/Showcase/Showcase/Pages/Tokens/Dimension/Size/SizeTokenPage.swift +++ b/Showcase/Showcase/Pages/Tokens/Dimension/Size/SizeTokenPage.swift @@ -117,8 +117,6 @@ struct SizeTokenPage: View { private struct IllustrationSizeIconByTypographyCategory: View { @Environment(\.theme) private var theme - @Environment(\.colorScheme) private var colorScheme - @Environment(\.horizontalSizeClass) private var horizontalSizeClass let category: NamedSize.SizeIconByTypographyCategory