Skip to content

Commit 77bfc8e

Browse files
authored
feat: add skeleton component tokens (#388) (#389)
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
1 parent b945e46 commit 77bfc8e

File tree

11 files changed

+256
-8
lines changed

11 files changed

+256
-8
lines changed

CHANGELOG.md

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
88

99
### Added
1010

11+
- [Library] Skeleton component tokens ([#388](https://github.com/Orange-OpenSource/ouds-ios/issues/388))
1112
- [Library] Select component tokens ([#386](https://github.com/Orange-OpenSource/ouds-ios/issues/386))
1213
- [Library] Link component tokens ([#384](https://github.com/Orange-OpenSource/ouds-ios/issues/384))
1314

OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift

+10-4
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ open class OUDSTheme: @unchecked Sendable {
7373
/// All components tokens related to select components like `OUDSSelect`
7474
public let select: AllSelectComponentTokensProvider
7575

76+
/// All components tokens related to skeleotn components like `OUDSSkeleton`
77+
public let skeleton: AllSkeletonComponentTokensProvider
78+
7679
// MARK: - Initializers
7780

7881
/// Defines a basic kind of abstract theme to subclass then.
@@ -86,9 +89,10 @@ open class OUDSTheme: @unchecked Sendable {
8689
/// - opacities: An object providing all the opacity semantic tokens, as `AllOpacitySemanticTokensProvider` implementation
8790
/// - sizes: An object providing all the size semantic tokens, as `AllSizeSemanticTokens` implementation
8891
/// - spaces: An object providing all the space semantic tokens, as `AllSpaceSemanticTokensProvider` implementation
89-
/// - button: An object providing all the component tokens for buttons
90-
/// - link: An object providing all the component tokens for links
91-
/// - select: An object providing all the component tokens for select
92+
/// - button: An object providing all the component tokens for button component
93+
/// - link: An object providing all the component tokens for links component
94+
/// - select: An object providing all the component tokens for select component
95+
/// - skeleton: An object providing all the component tokens for skeleton component
9296
public init(colors: AllColorSemanticTokensProvider,
9397
borders: AllBorderSemanticTokensProvider,
9498
elevations: AllElevationSemanticTokensProvider,
@@ -100,7 +104,8 @@ open class OUDSTheme: @unchecked Sendable {
100104
spaces: AllSpaceSemanticTokensProvider,
101105
button: AllButtonComponentTokensProvider,
102106
link: AllLinkComponentTokensProvider,
103-
select: AllSelectComponentTokensProvider) {
107+
select: AllSelectComponentTokensProvider,
108+
skeleton: AllSkeletonComponentTokensProvider) {
104109
self.colors = colors
105110
self.borders = borders
106111
self.elevations = elevations
@@ -113,6 +118,7 @@ open class OUDSTheme: @unchecked Sendable {
113118
self.button = button
114119
self.link = link
115120
self.select = select
121+
self.skeleton = skeleton
116122
}
117123

118124
deinit { }

OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift

+6-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
7878
spaces: AllSpaceSemanticTokensProvider = OrangeThemeSpaceSemanticTokensProvider(),
7979
button: AllButtonComponentTokensProvider,
8080
link: AllLinkComponentTokensProvider,
81-
select: AllSelectComponentTokensProvider) {
81+
select: AllSelectComponentTokensProvider,
82+
skeleton: AllSkeletonComponentTokensProvider) {
8283
OUDSLogger.debug("Init of OrangeTheme")
8384
super.init(colors: colors,
8485
borders: borders,
@@ -91,7 +92,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
9192
spaces: spaces,
9293
button: button,
9394
link: link,
94-
select: select)
95+
select: select,
96+
skeleton: skeleton)
9597
}
9698

9799
/// Initializes the `OrangeTheme` and lets children classes to user their own tokens implementations.
@@ -127,7 +129,8 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
127129
spaces: spaces,
128130
button: OrangeThemeButtonComponentTokensProvider(sizes: sizes, borders: borders, colors: colors, spaces: spaces),
129131
link: OrangeThemeLinkComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
130-
select: OrangeThemeSelectComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces))
132+
select: OrangeThemeSelectComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
133+
skeleton: OrangeThemeSkeletonComponentTokensProvider(colors: colors))
131134
}
132135

133136
deinit { }
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
//
2+
// Software Name: OUDS iOS
3+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
// SPDX-License-Identifier: MIT
5+
//
6+
// This software is distributed under the MIT license,
7+
// the text of which is available at https://opensource.org/license/MIT/
8+
// or see the "LICENSE" file for more details.
9+
//
10+
// Authors: See CONTRIBUTORS.txt
11+
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
12+
//
13+
14+
import OUDSFoundations
15+
import OUDSTokensSemantic
16+
17+
// swiftlint:disable type_name
18+
19+
/// A class which wraps all **component tokens of skeleton** for skeleton objects like `OUDSSkeleton`.
20+
/// Contains also references to semantic tokens providers so as to be able to use them to define the component tokens.
21+
/// This provider should be integrated as a `AllSkeletonComponentTokensProvider` implementation inside `OUDSTheme` so as to provide
22+
/// all tokens to the users. It helps users to override some of the tokens and assign them to an `OUDSTheme` implementation to use.
23+
/// Custom themes can use subclass of ``OrangeThemeSkeletonComponentTokensProvider`` and apply the provider they need.
24+
/// It implements also the protocol `SkeletonComponentTokens` so as to expose the component tokens for links through any `OUDSTheme`.
25+
/// Skeleton components tokens are defined with semantic tokens of colors (from `AllColorSemanticTokensProvider`).
26+
///
27+
/// ```swift
28+
/// // Define your own provider for skeleton component tokens
29+
/// // by inheriting from existing provider
30+
/// class CustomSkeletonComponentTokensProvider: OrangeThemeSkeletonComponentTokensProvider {
31+
///
32+
/// // Then override the skeleton component tokens you want.
33+
///
34+
/// override var skeletonColorGradientMiddle: MultipleColorSemanticTokens { colors.colorRepositoryOpacityBlackHigher }
35+
///
36+
/// // ...
37+
/// }
38+
///
39+
/// // Or define your own provider from scratch
40+
/// class CustomSkeletonComponentTokensProvider: SkeletonComponentTokens {
41+
///
42+
/// // And implement maybe hundreds of tokens.
43+
/// // You are allowed to use semantic tokens providers if you want to define values.
44+
/// }
45+
/// ```
46+
///
47+
/// Then, you can give this `CustomSkeletonComponentTokensProvider` to your own theme implementation:
48+
///
49+
/// ```swift
50+
/// class LocalTheme: OrangeTheme {
51+
///
52+
/// override init() {
53+
/// super.init(skeleton: CustomSkeletonComponentTokensProvider())
54+
/// }
55+
/// }
56+
/// ```
57+
///
58+
/// or to an already existing theme for example:
59+
///
60+
/// ```swift
61+
/// OrangeTheme(skeleton: CustomSkeletonComponentTokensProvider())
62+
/// ```
63+
///
64+
/// - Since: 0.9.0
65+
open class OrangeThemeSkeletonComponentTokensProvider {
66+
67+
/// Provider of color semantic tokens to use for link colors
68+
public let colors: AllColorSemanticTokensProvider
69+
70+
/// Defines a provider of component tokens dedicated to `OUDSSkeleton`
71+
/// - Parameter colors: Provider for color semantic tokens
72+
public init(colors: AllColorSemanticTokensProvider) {
73+
OUDSLogger.debug("Init of OrangeThemeSkeletonComponentTokensProvider")
74+
self.colors = colors
75+
}
76+
77+
deinit { }
78+
79+
// ଘ( ・ω・)_/゚・:*:・。☆
80+
// Note: So as to help the integration of generated code produced by the tokenator
81+
// the implemention of SkeletonComponentTokens is not here but in Core/Themes/Orange/Values/ComponentTokens/OrangeTheme+SkeletonComponentTokens.swift
82+
// This declaration of OrangeThemeSkeletonComponentTokensProvider is here also to allow to write documentation.
83+
}
84+
85+
// swiftlint:enable type_name
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
//
2+
// Software Name: OUDS iOS
3+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
// SPDX-License-Identifier: MIT
5+
//
6+
// This software is distributed under the MIT license,
7+
// the text of which is available at https://opensource.org/license/MIT/
8+
// or see the "LICENSE" file for more details.
9+
//
10+
// Authors: See CONTRIBUTORS.txt
11+
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
12+
//
13+
14+
import Foundation
15+
import OUDSTokensComponent
16+
import OUDSTokensSemantic
17+
18+
extension OrangeThemeSkeletonComponentTokensProvider: SkeletonComponentTokens {
19+
@objc open var skeletonColorBg: MultipleColorSemanticTokens { colors.colorOpacityLowest }
20+
@objc open var skeletonColorGradientMiddle: MultipleColorSemanticTokens { colors.colorOpacityLower }
21+
@objc open var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { colors.colorOpacityTransparent }
22+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
//
2+
// Software Name: OUDS iOS
3+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
// SPDX-License-Identifier: MIT
5+
//
6+
// This software is distributed under the MIT license,
7+
// the text of which is available at https://opensource.org/license/MIT/
8+
// or see the "LICENSE" file for more details.
9+
//
10+
// Authors: See CONTRIBUTORS.txt
11+
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
12+
//
13+
14+
import Foundation
15+
import OUDSThemesOrange
16+
import OUDSTokensComponent
17+
import OUDSTokensRaw
18+
import OUDSTokensSemantic
19+
20+
// swiftlint:disable required_deinit
21+
22+
final class MockThemeSkeletonComponentTokenProvider: OrangeThemeSkeletonComponentTokensProvider {
23+
24+
// MARK: - Mocks and setup
25+
26+
static let mockThemeSkeletonColor = MultipleColorSemanticTokens("#00FF00")
27+
28+
override public init(colors: AllColorSemanticTokensProvider) {
29+
super.init(colors: colors)
30+
}
31+
32+
// MARK: - Skeleton component tokens
33+
34+
override public var skeletonColorBg: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor }
35+
override public var skeletonColorGradientMiddle: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor }
36+
override public var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { Self.mockThemeSkeletonColor }
37+
}
38+
39+
// swiftlint:enable required_deinit
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
//
2+
// Software Name: OUDS iOS
3+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
// SPDX-License-Identifier: MIT
5+
//
6+
// This software is distributed under the MIT license,
7+
// the text of which is available at https://opensource.org/license/MIT/
8+
// or see the "LICENSE" file for more details.
9+
//
10+
// Authors: See CONTRIBUTORS.txt
11+
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
12+
//
13+
14+
import OUDS
15+
import OUDSThemesOrange
16+
import XCTest
17+
18+
// swiftlint:disable required_deinit
19+
// swiftlint:disable implicitly_unwrapped_optional
20+
// swiftlint:disable type_name
21+
22+
final class TestThemeOverrideOfSkeletonComponentTokens: XCTestCase {
23+
24+
private var abstractTheme: OUDSTheme!
25+
private var inheritedTheme: OUDSTheme!
26+
27+
override func setUp() async throws {
28+
abstractTheme = OrangeTheme()
29+
inheritedTheme = MockTheme()
30+
}
31+
32+
func testInheritedThemeCanOverrideSkeletonComponentTokenColorBg() throws {
33+
XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorBg, abstractTheme.skeleton.skeletonColorBg)
34+
XCTAssertTrue(inheritedTheme.skeleton.skeletonColorBg == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor)
35+
}
36+
37+
func testInheritedThemeCanOverrideSkeletonComponentTokenColorGradientMiddle() throws {
38+
XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorGradientMiddle, abstractTheme.skeleton.skeletonColorGradientMiddle)
39+
XCTAssertTrue(inheritedTheme.skeleton.skeletonColorGradientMiddle == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor)
40+
}
41+
42+
func testInheritedThemeCanOverrideSkeletonComponentTokenColorGradientStartEnd() throws {
43+
XCTAssertNotEqual(inheritedTheme.skeleton.skeletonColorGradientStartEnd, abstractTheme.skeleton.skeletonColorGradientStartEnd)
44+
XCTAssertTrue(inheritedTheme.skeleton.skeletonColorGradientStartEnd == MockThemeSkeletonComponentTokenProvider.mockThemeSkeletonColor)
45+
}
46+
}
47+
48+
// swiftlint:enable required_deinit
49+
// swiftlint:enable implicitly_unwrapped_optional
50+
// swiftlint:enable type_name

OUDS/Core/Themes/Orange/Tests/Values/SemanticTokens/MockTheme/MockTheme.swift

+2-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ final class MockTheme: OUDSTheme, @unchecked Sendable {
5151
spaces: spaces,
5252
button: MockThemeButtonComponentTokenProvider(sizes: sizes, borders: borders, colors: colors, spaces: spaces),
5353
link: MockThemeLinkComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces),
54-
select: MockThemeSelectComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces))
54+
select: MockThemeSelectComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces),
55+
skeleton: MockThemeSkeletonComponentTokenProvider(colors: colors))
5556
}
5657

5758
deinit { }

OUDS/Core/Tokens/ComponentTokens/Sources/Providers/ComponentTokensProviders+TypeAliases.swift

+5
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,8 @@ public typealias AllLinkComponentTokensProvider = LinkComponentTokens
2525
/// merging several protocols.
2626
/// For example `OrangeThemeSelectComponentTokensProvider` matches this type alias.
2727
public typealias AllSelectComponentTokensProvider = SelectComponentTokens
28+
29+
/// A type alias only for ``SkeletonComponentTokens`` so as to keep consistency with other type aliases
30+
/// merging several protocols.
31+
/// For example `OrangeThemeSkeletonComponentTokensProvider` matches this type alias.
32+
public typealias AllSkeletonComponentTokensProvider = SkeletonComponentTokens
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//
2+
// Software Name: OUDS iOS
3+
// SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
// SPDX-License-Identifier: MIT
5+
//
6+
// This software is distributed under the MIT license,
7+
// the text of which is available at https://opensource.org/license/MIT/
8+
// or see the "LICENSE" file for more details.
9+
//
10+
// Authors: See CONTRIBUTORS.txt
11+
// Software description: A SwiftUI components library with code examples for Orange Unified Design System
12+
//
13+
14+
import OUDSTokensSemantic
15+
16+
// [File not generated by the tokenator]
17+
// WARNING: Not synchronized anymore with the Figjam / Figma by developers team
18+
// Create an issue for update https://github.com/Orange-OpenSource/ouds-ios/issues/new?template=token_update.yml
19+
20+
// swiftlint:disable missing_docs
21+
22+
/// Declares all component tokens for links components like `OUDSSkeleton`
23+
/// Use for tokens providers like `OrangeThemeSkeletonComponentTokensProvider`.
24+
///
25+
/// - Since: 0.10.0
26+
public protocol SkeletonComponentTokens {
27+
28+
// MARK: - Color
29+
30+
var skeletonColorBg: MultipleColorSemanticTokens { get }
31+
var skeletonColorGradientMiddle: MultipleColorSemanticTokens { get }
32+
var skeletonColorGradientStartEnd: MultipleColorSemanticTokens { get }
33+
}
34+
35+
// swiftlint:enable missing_docs

OUDS/Core/Tokens/ComponentTokens/Sources/_OUDSTokensComponent.docc/OUDSTokensComponent.md

+1
Original file line numberDiff line numberDiff line change
@@ -126,3 +126,4 @@ struct Showcase: App {
126126
- ``ButtonComponentTokens``
127127
- ``LinkComponentTokens``
128128
- ``SelectComponentTokens``
129+
- ``SkeletonComponentTokens``

0 commit comments

Comments
 (0)