diff --git a/CHANGELOG.md b/CHANGELOG.md index 138f3de237..ecfe45f811 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- [Library] Skeleton component tokens ([#388](https://github.com/Orange-OpenSource/ouds-ios/issues/388)) - [Library] Select component tokens ([#386](https://github.com/Orange-OpenSource/ouds-ios/issues/386)) - [Library] Link component tokens ([#384](https://github.com/Orange-OpenSource/ouds-ios/issues/384)) diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift index 46d8eb7a57..9cfdb34180 100644 --- a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift @@ -73,6 +73,9 @@ open class OUDSTheme: @unchecked Sendable { /// All components tokens related to select components like `OUDSSelect` public let select: AllSelectComponentTokensProvider + /// All components tokens related to skeleotn components like `OUDSSkeleton` + public let skeleton: AllSkeletonComponentTokensProvider + // MARK: - Initializers /// Defines a basic kind of abstract theme to subclass then. @@ -86,9 +89,10 @@ open class OUDSTheme: @unchecked Sendable { /// - opacities: An object providing all the opacity semantic tokens, as `AllOpacitySemanticTokensProvider` implementation /// - sizes: An object providing all the size semantic tokens, as `AllSizeSemanticTokens` implementation /// - spaces: An object providing all the space semantic tokens, as `AllSpaceSemanticTokensProvider` implementation - /// - button: An object providing all the component tokens for buttons - /// - link: An object providing all the component tokens for links - /// - select: An object providing all the component tokens for select + /// - button: An object providing all the component tokens for button component + /// - link: An object providing all the component tokens for links component + /// - select: An object providing all the component tokens for select component + /// - skeleton: An object providing all the component tokens for skeleton component public init(colors: AllColorSemanticTokensProvider, borders: AllBorderSemanticTokensProvider, elevations: AllElevationSemanticTokensProvider, @@ -100,7 +104,8 @@ open class OUDSTheme: @unchecked Sendable { spaces: AllSpaceSemanticTokensProvider, button: AllButtonComponentTokensProvider, link: AllLinkComponentTokensProvider, - select: AllSelectComponentTokensProvider) { + select: AllSelectComponentTokensProvider, + skeleton: AllSkeletonComponentTokensProvider) { self.colors = colors self.borders = borders self.elevations = elevations @@ -113,6 +118,7 @@ open class OUDSTheme: @unchecked Sendable { self.button = button self.link = link self.select = select + self.skeleton = skeleton } deinit { } diff --git a/OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift b/OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift index 6fe1261b7b..1ec79c036c 100644 --- a/OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift +++ b/OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift @@ -78,7 +78,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable { spaces: AllSpaceSemanticTokensProvider = OrangeThemeSpaceSemanticTokensProvider(), button: AllButtonComponentTokensProvider, link: AllLinkComponentTokensProvider, - select: AllSelectComponentTokensProvider) { + select: AllSelectComponentTokensProvider, + skeleton: AllSkeletonComponentTokensProvider) { OUDSLogger.debug("Init of OrangeTheme") super.init(colors: colors, borders: borders, @@ -91,7 +92,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable { spaces: spaces, button: button, link: link, - select: select) + select: select, + skeleton: skeleton) } /// Initializes the `OrangeTheme` and lets children classes to user their own tokens implementations. @@ -127,7 +129,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable { spaces: spaces, button: OrangeThemeButtonComponentTokensProvider(sizes: sizes, borders: borders, colors: colors, spaces: spaces), link: OrangeThemeLinkComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces), - select: OrangeThemeSelectComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces)) + select: OrangeThemeSelectComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces), + skeleton: OrangeThemeSkeletonComponentTokensProvider(colors: colors)) } deinit { } diff --git a/OUDS/Core/Themes/Orange/Sources/Providers/ComponentTokens/OrangeThemeSkeletonComponentTokensProvider.swift b/OUDS/Core/Themes/Orange/Sources/Providers/ComponentTokens/OrangeThemeSkeletonComponentTokensProvider.swift new file mode 100644 index 0000000000..ab2476813d --- /dev/null +++ b/OUDS/Core/Themes/Orange/Sources/Providers/ComponentTokens/OrangeThemeSkeletonComponentTokensProvider.swift @@ -0,0 +1,85 @@ +// +// Software Name: OUDS iOS +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Authors: See CONTRIBUTORS.txt +// Software description: A SwiftUI components library with code examples for Orange Unified Design System +// + +import OUDSFoundations +import OUDSTokensSemantic + +// swiftlint:disable type_name + +/// A class which wraps all **component tokens of skeleton** for skeleton objects like `OUDSSkeleton`. +/// Contains also references to semantic tokens providers so as to be able to use them to define the component tokens. +/// This provider should be integrated as a `AllSkeletonComponentTokensProvider` implementation inside `OUDSTheme` so as to provide +/// all tokens to the users. It helps users to override some of the tokens and assign them to an `OUDSTheme` implementation to use. +/// Custom themes can use subclass of ``OrangeThemeSkeletonComponentTokensProvider`` and apply the provider they need. +/// It implements also the protocol `SkeletonComponentTokens` so as to expose the component tokens for links through any `OUDSTheme`. +/// Skeleton components tokens are defined with semantic tokens of colors (from `AllColorSemanticTokensProvider`). +/// +/// ```swift +/// // Define your own provider for skeleton component tokens +/// // by inheriting from existing provider +/// class CustomSkeletonComponentTokensProvider: OrangeThemeSkeletonComponentTokensProvider { +/// +/// // Then override the skeleton component tokens you want. +/// +/// override var skeletonColorGradientMiddle: MultipleColorSemanticTokens { colors.colorRepositoryOpacityBlackHigher } +/// +/// // ... +/// } +/// +/// // Or define your own provider from scratch +/// class CustomSkeletonComponentTokensProvider: SkeletonComponentTokens { +/// +/// // And implement maybe hundreds of tokens. +/// // You are allowed to use semantic tokens providers if you want to define values. +/// } +/// ``` +/// +/// Then, you can give this `CustomSkeletonComponentTokensProvider` to your own theme implementation: +/// +/// ```swift +/// class LocalTheme: OrangeTheme { +/// +/// override init() { +/// super.init(skeleton: CustomSkeletonComponentTokensProvider()) +/// } +/// } +/// ``` +/// +/// or to an already existing theme for example: +/// +/// ```swift +/// OrangeTheme(skeleton: CustomSkeletonComponentTokensProvider()) +/// ``` +/// +/// - Since: 0.9.0 +open class OrangeThemeSkeletonComponentTokensProvider { + + /// Provider of color semantic tokens to use for link colors + public let colors: AllColorSemanticTokensProvider + + /// Defines a provider of component tokens dedicated to `OUDSSkeleton` + /// - Parameter colors: Provider for color semantic tokens + public init(colors: AllColorSemanticTokensProvider) { + OUDSLogger.debug("Init of OrangeThemeSkeletonComponentTokensProvider") + self.colors = colors + } + + deinit { } + + // ଘ( ･ω･)_/ﾟ･:*:･｡☆ + // Note: So as to help the integration of generated code produced by the tokenator + // the implemention of SkeletonComponentTokens is not here but in Core/Themes/Orange/Values/ComponentTokens/OrangeTheme+SkeletonComponentTokens.swift + // This declaration of OrangeThemeSkeletonComponentTokensProvider is here also to allow to write documentation. +} + +// swiftlint:enable type_name diff --git a/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+SkeletonComponentTokens.swift b/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+SkeletonComponentTokens.swift new file mode 100644 index 0000000000..21ca8464c2 --- /dev/null +++ b/OUDS/Core/Themes/Orange/Sources/Values/ComponentTokens/OrangeTheme+SkeletonComponentTokens.swift @@ -0,0 +1,22 @@ +// +// Software Name: OUDS iOS +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Authors: See CONTRIBUTORS.txt +// Software description: A SwiftUI components library with code examples for Orange Unified Design System +// + +import Foundation +import OUDSTokensComponent +import OUDSTokensSemantic + +extension OrangeThemeSkeletonComponentTokensProvider: SkeletonComponentTokens { + @objc open var skeletonColorBg: MultipleColorSemanticTokens { colors.colorOpacityLowest } + @objc open var skeletonColorGradientMiddle: MultipleColorSemanticTokens { colors.colorOpacityLower } + @objc open var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { colors.colorOpacityTransparent } +} diff --git a/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/MockTheme/MockTheme+AllSkeletonComponentTokens.swift b/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/MockTheme/MockTheme+AllSkeletonComponentTokens.swift new file mode 100644 index 0000000000..462716d56a --- /dev/null +++ b/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/MockTheme/MockTheme+AllSkeletonComponentTokens.swift @@ -0,0 +1,39 @@ +// +// Software Name: OUDS iOS +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Authors: See CONTRIBUTORS.txt +// Software description: A SwiftUI components library with code examples for Orange Unified Design System +// + +import Foundation +import OUDSThemesOrange +import OUDSTokensComponent +import OUDSTokensRaw +import OUDSTokensSemantic + +// swiftlint:disable required_deinit + +final class MockThemeSkeletonComponentTokenProvider: OrangeThemeSkeletonComponentTokensProvider { + + // MARK: - Mocks and setup + + static let mockThemeSkeletonColor = MultipleColorSemanticTokens("#00FF00") + + override public init(colors: AllColorSemanticTokensProvider) { + super.init(colors: colors) + } + + // MARK: - Skeleton component tokens + + override public var skeletonColorBg: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor } + override public var skeletonColorGradientMiddle: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor } + override public var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor } +} + +// swiftlint:enable required_deinit diff --git a/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/TestThemeOverrideOfSkeletonComponentTokens.swift b/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/TestThemeOverrideOfSkeletonComponentTokens.swift new file mode 100644 index 0000000000..c688efaa5d --- /dev/null +++ b/OUDS/Core/Themes/Orange/Tests/Values/ComponentTokens/TestThemeOverrideOfSkeletonComponentTokens.swift @@ -0,0 +1,50 @@ +// +// Software Name: OUDS iOS +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Authors: See CONTRIBUTORS.txt +// Software description: A SwiftUI components library with code examples for Orange Unified Design System +// + +import OUDS +import OUDSThemesOrange +import XCTest + +// swiftlint:disable required_deinit +// swiftlint:disable implicitly_unwrapped_optional +// swiftlint:disable type_name + +final class TestThemeOverrideOfSkeletonComponentTokens: XCTestCase { + + private var abstractTheme: OUDSTheme! + private var inheritedTheme: OUDSTheme! + + override func setUp() async throws { + abstractTheme = OrangeTheme() + inheritedTheme = MockTheme() + } + + func testInheritedThemeCanOverrideSkeletonComponentTokenColorBg() throws { + XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorBg, abstractTheme.skeleton.skeletonColorBg) + XCTAssertTrue(inheritedTheme.skeleton.skeletonColorBg == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor) + } + + func testInheritedThemeCanOverrideSkeletonComponentTokenColorGradientMiddle() throws { + XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorGradientMiddle, abstractTheme.skeleton.skeletonColorGradientMiddle) + XCTAssertTrue(inheritedTheme.skeleton.skeletonColorGradientMiddle == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor) + } + + func testInheritedThemeCanOverrideSkeletonComponentTokenColorGradientStartEnd() throws { + XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorGradientStartEnd, abstractTheme.skeleton.skeletonColorGradientStartEnd) + XCTAssertTrue(inheritedTheme.skeleton.skeletonColorGradientStartEnd == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor) + } +} + +// swiftlint:enable required_deinit +// swiftlint:enable implicitly_unwrapped_optional +// swiftlint:enable type_name diff --git a/OUDS/Core/Themes/Orange/Tests/Values/SemanticTokens/MockTheme/MockTheme.swift b/OUDS/Core/Themes/Orange/Tests/Values/SemanticTokens/MockTheme/MockTheme.swift index d0c1f6ab38..d3226be85e 100644 --- a/OUDS/Core/Themes/Orange/Tests/Values/SemanticTokens/MockTheme/MockTheme.swift +++ b/OUDS/Core/Themes/Orange/Tests/Values/SemanticTokens/MockTheme/MockTheme.swift @@ -51,7 +51,8 @@ final class MockTheme: OUDSTheme, @unchecked Sendable { spaces: spaces, button: MockThemeButtonComponentTokenProvider(sizes: sizes, borders: borders, colors: colors, spaces: spaces), link: MockThemeLinkComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces), - select: MockThemeSelectComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces)) + select: MockThemeSelectComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces), + skeleton: MockThemeSkeletonComponentTokenProvider(colors: colors)) } deinit { } diff --git a/OUDS/Core/Tokens/ComponentTokens/Sources/Providers/ComponentTokensProviders+TypeAliases.swift b/OUDS/Core/Tokens/ComponentTokens/Sources/Providers/ComponentTokensProviders+TypeAliases.swift index 130ae90b31..5056b91929 100644 --- a/OUDS/Core/Tokens/ComponentTokens/Sources/Providers/ComponentTokensProviders+TypeAliases.swift +++ b/OUDS/Core/Tokens/ComponentTokens/Sources/Providers/ComponentTokensProviders+TypeAliases.swift @@ -25,3 +25,8 @@ public typealias AllLinkComponentTokensProvider = LinkComponentTokens /// merging several protocols. /// For example `OrangeThemeSelectComponentTokensProvider` matches this type alias. public typealias AllSelectComponentTokensProvider = SelectComponentTokens + +/// A type alias only for ``SkeletonComponentTokens`` so as to keep consistency with other type aliases +/// merging several protocols. +/// For example `OrangeThemeSkeletonComponentTokensProvider` matches this type alias. +public typealias AllSkeletonComponentTokensProvider = SkeletonComponentTokens diff --git a/OUDS/Core/Tokens/ComponentTokens/Sources/Values/SkeletonComponentTokens.swift b/OUDS/Core/Tokens/ComponentTokens/Sources/Values/SkeletonComponentTokens.swift new file mode 100644 index 0000000000..7d3067c695 --- /dev/null +++ b/OUDS/Core/Tokens/ComponentTokens/Sources/Values/SkeletonComponentTokens.swift @@ -0,0 +1,35 @@ +// +// Software Name: OUDS iOS +// SPDX-FileCopyrightText: Copyright (c) Orange SA +// SPDX-License-Identifier: MIT +// +// This software is distributed under the MIT license, +// the text of which is available at https://opensource.org/license/MIT/ +// or see the "LICENSE" file for more details. +// +// Authors: See CONTRIBUTORS.txt +// Software description: A SwiftUI components library with code examples for Orange Unified Design System +// + +import OUDSTokensSemantic + +// [File not generated by the tokenator] +// WARNING: Not synchronized anymore with the Figjam / Figma by developers team +// Create an issue for update https://github.com/Orange-OpenSource/ouds-ios/issues/new?template=token_update.yml + +// swiftlint:disable missing_docs + +/// Declares all component tokens for links components like `OUDSSkeleton` +/// Use for tokens providers like `OrangeThemeSkeletonComponentTokensProvider`. +/// +/// - Since: 0.10.0 +public protocol SkeletonComponentTokens { + + // MARK: - Color + + var skeletonColorBg: MultipleColorSemanticTokens { get } + var skeletonColorGradientMiddle: MultipleColorSemanticTokens { get } + var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { get } +} + +// swiftlint:enable missing_docs diff --git a/OUDS/Core/Tokens/ComponentTokens/Sources/_OUDSTokensComponent.docc/OUDSTokensComponent.md b/OUDS/Core/Tokens/ComponentTokens/Sources/_OUDSTokensComponent.docc/OUDSTokensComponent.md index ca9b0e3a03..988ab0c36f 100644 --- a/OUDS/Core/Tokens/ComponentTokens/Sources/_OUDSTokensComponent.docc/OUDSTokensComponent.md +++ b/OUDS/Core/Tokens/ComponentTokens/Sources/_OUDSTokensComponent.docc/OUDSTokensComponent.md @@ -126,3 +126,4 @@ struct Showcase: App { - ``ButtonComponentTokens`` - ``LinkComponentTokens`` - ``SelectComponentTokens`` +- ``SkeletonComponentTokens``