Skip to content

Commit

Permalink
feat: add component tokens for check and radio (#421)
Browse files Browse the repository at this point in the history
Closes #421

Assisted-by: GPT-4o-mini (Dinootoo)
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
  • Loading branch information
pylapp committed Jan 28, 2025
1 parent d59a28b commit eb3638a
Show file tree
Hide file tree
Showing 12 changed files with 289 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

### Added

- [Library] Checkbox and radio button component tokens ([#421](https://github.com/Orange-OpenSource/ouds-ios/issues/421))
- [Library] Badge component tokens (partial implementation) ([#420](https://github.com/Orange-OpenSource/ouds-ios/issues/420))
- [Library] Input text component tokens ([#418](https://github.com/Orange-OpenSource/ouds-ios/issues/418))
- [Library] Bullet list component tokens ([#417](https://github.com/Orange-OpenSource/ouds-ios/issues/417))
Expand Down
4 changes: 4 additions & 0 deletions OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme.swift
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,9 @@ open class OUDSTheme: @unchecked Sendable {
/// All components tokens related to badge components like `OUDSBadge`
public let badge: AllBadgeComponentTokensProvider

/// All components tokens related to radio button and checbkxoes components like `OUDSRadioButton` and `OUDSCheckboxe`
public let checkRadio: AllCheckRadioComponentTokensProvider

// NOTE: Add new component tokens provider here

// MARK: - Initializers
Expand Down Expand Up @@ -145,6 +148,7 @@ open class OUDSTheme: @unchecked Sendable {
bulletList = tokensProviders.get()
inputText = tokensProviders.get()
badge = tokensProviders.get()
checkRadio = tokensProviders.get()

// NOTE: Add new component tokens provider here

Expand Down
7 changes: 7 additions & 0 deletions OUDS/Core/OUDS/Sources/OUDSTheme/TokensProviders.swift
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ public protocol AllInputTextComponentTokensProvider: TokensProvider, InputTextCo
/// Something which provides all component tokens of badge
public protocol AllBadgeComponentTokensProvider: TokensProvider, BadgeComponentTokens { }

/// Something which provides all component tokens of checkboxes and radio buttons
public protocol AllCheckRadioComponentTokensProvider: TokensProvider, CheckRadioComponentTokens { }

// NOTE: Add new definitions of protocols here

// MARK: - Tokens Providers Wrapper
Expand Down Expand Up @@ -194,6 +197,10 @@ extension Array where Element == TokensProvider {
missingProviders.append("AllBadgeComponentTokensProvider")
}

if !assertAvailability(of: AllCheckRadioComponentTokensProvider.self) {
missingProviders.append("AllCheckRadioComponentTokensProvider")
}

// NOTE: Add new component tokens providers here if mandatory
return missingProviders
}
Expand Down
2 changes: 2 additions & 0 deletions OUDS/Core/Themes/Orange/Sources/OrangeTheme.swift
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
OrangeThemeBulletListComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeInputTextComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeBadgeComponentTokensProvider(sizes: sizes),
OrangeThemeCheckRadioComponentTokensProvider(sizes: sizes),

// NOTE: Add here new component tokens providers
]
Expand Down Expand Up @@ -168,6 +169,7 @@ open class OrangeTheme: OUDSTheme, @unchecked Sendable {
OrangeThemeBulletListComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeInputTextComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeBadgeComponentTokensProvider(sizes: sizes),
OrangeThemeCheckRadioComponentTokensProvider(sizes: sizes),

// NOTE: Add here new component tokens providers
]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
//
// 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 OUDSFoundations
import OUDSTokensSemantic

// swiftlint:disable type_name

/// A class which wraps all **component tokens of check radio** for *radio button* and *checkboxes* objects
/// like `OUDSRadioButton` or `OUDSCheckbox`.
/// 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 `AllCheckRadioComponentTokensProvider` 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 ``OrangeThemeCheckRadioComponentTokensProvider`` and apply the provider they need.
/// It implements also the protocol `CheckRadioComponentTokens` so as to expose the component tokens for *radio button*
/// and *checkboxes* through any `OUDSTheme`.
/// *Radio button* and *checkboxes* components tokens are defined with raw and semantic tokens of sizes (from `AllSizeSemanticTokensProvider`),
/// and dimensions (`DimensionRawTokens`). These components share the same type of tokens which are all gather here.
///
/// ```swift
/// // Define your own provider for radio / check component tokens
/// // by inheriting from existing provider
/// class CustomCheckRadioComponentTokensProvider: OrangeThemeCheckRadioComponentTokensProvider {
///
/// // Then override the radio / check component tokens you want.
///
/// override var checkRadioSize: SizeSemanticToken { sizes.sizeIconWithLabelLargeSizeXl }
///
/// override var checkRadioSizeMaxHeightAssetsContainer: DimensionRawToken { DimensionRawTokens.dimension1000 }
///
/// // ...
/// }
///
/// // Or define your own provider from scratch
/// class CustomCheckRadioComponentTokensProvider: CheckRadioComponentTokens {
///
/// // And implement hunders of tokens.
/// // You are allowed to give semantic tokens providers if you want to define values.
/// }
/// ```
///
/// Then, you can give this `CustomCheckRadioComponentTokensProvider` to your own theme implementation:
///
/// ```swift
/// class LocalTheme: OrangeTheme {
///
/// override init() {
/// super.init(tokensProviders: [ CustomCheckRadioComponentTokensProvider(), ... ])
/// }
/// }
/// ```
///
/// or to an already existing theme for example:
///
/// ```swift
/// OrangeTheme(tokensProviders: [ CustomCheckRadioComponentTokensProvider(), ... ])
/// ```
///
/// - Since: 0.10.0
open class OrangeThemeCheckRadioComponentTokensProvider: AllCheckRadioComponentTokensProvider {

/// Provider of size semantic tokens to use for check / radio sizes
public let sizes: AllSizeSemanticTokensProvider

/// Defines a provider of component tokens dedicated to `OUDSChip`
/// - Parameter sizes: Provider for size semantic tokens
public init(sizes: AllSizeSemanticTokensProvider) {
OL.debug("Init of OrangeThemeCheckRadioComponentTokensProvider")
self.sizes = sizes
}

deinit { }

// ଘ( ・ω・)_/゚・:*:・。☆
// Note: So as to help the integration of generated code produced by the tokenator
// the implemention of CheckRadioComponentTokens is not here but in Core/Themes/Orange/Values/ComponentTokens/OrangeTheme+CheckRadioComponentTokens.swift
// This declaration of OrangeThemeCheckRadioComponentTokensProvider is here also to allow to write documentation.
}

// swiftlint:enable type_name
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
//
// 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 OUDSTokensRaw
import OUDSTokensSemantic

// ଘ( ・ω・)_/゚・:*:・。☆
// [File to generate with the tokenator]
// Values are not the expected ones, manual fixes have been added
// Create an issue for update https://github.com/Orange-OpenSource/ouds-ios/issues/new?template=token_update.yml

extension OrangeThemeCheckRadioComponentTokensProvider: CheckRadioComponentTokens {
@objc open var checkRadioSize: SizeSemanticToken { sizes.sizeIconWithLabelLargeSizeSm }
@objc open var checkRadioSizeMinHeightSelectorOnly: DimensionRawToken { DimensionRawTokens.dimension600 }
@objc open var checkRadioSizeMinWidthSelectorOnly: DimensionRawToken { DimensionRawTokens.dimension600 }
@objc open var checkRadioSizeMaxHeightSelectorOnly: DimensionRawToken { DimensionRawTokens.dimension600 }
@objc open var checkRadioSizeMaxHeightAssetsContainer: DimensionRawToken { DimensionRawTokens.dimension1200 }
}
2 changes: 2 additions & 0 deletions OUDS/Core/Themes/Orange/Tests/TestTokensProviders.swift
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ final class TestTokensProviders: XCTestCase {
assertMissingTokensProviderIsFound(byType: AllBulletListComponentTokensProvider.self, "AllBulletListComponentTokensProvider")
assertMissingTokensProviderIsFound(byType: AllInputTextComponentTokensProvider.self, "AllInputTextComponentTokensProvider")
assertMissingTokensProviderIsFound(byType: AllBadgeComponentTokensProvider.self, "AllBadgeComponentTokensProvider")
assertMissingTokensProviderIsFound(byType: AllCheckRadioComponentTokensProvider.self, "AllCheckRadioComponentTokensProvider")

// NOTE: Add tests for new component tokens provider here
}
Expand Down Expand Up @@ -101,6 +102,7 @@ final class TestTokensProviders: XCTestCase {
OrangeThemeBulletListComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeInputTextComponentTokensProvider(sizes: sizes, colors: colors, spaces: spaces),
OrangeThemeBadgeComponentTokensProvider(sizes: sizes),
OrangeThemeCheckRadioComponentTokensProvider(sizes: sizes),

// NOTE: Add new component tokens providers here
]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
//
// 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 OUDS
import OUDSThemesOrange
import OUDSTokensComponent
import OUDSTokensRaw
import OUDSTokensSemantic

// swiftlint:disable required_deinit
// swiftlint:disable type_name

final class MockThemeCheckRadioComponentTokenProvider: OrangeThemeCheckRadioComponentTokensProvider {

// MARK: - Mocks and setup

static let mockThemeCheckRadioSize: SizeSemanticToken = 118_218
static let mockThemeCheckRadioDimension: DimensionRawToken = 1_312

override public init(sizes: AllSizeSemanticTokensProvider) {
super.init(sizes: sizes)
}

// MARK: - Badge component tokens

override public var checkRadioSize: SizeSemanticToken { Self.mockThemeCheckRadioSize }
override public var checkRadioSizeMinHeightSelectorOnly: DimensionRawToken { Self.mockThemeCheckRadioDimension }
override public var checkRadioSizeMinWidthSelectorOnly: DimensionRawToken { Self.mockThemeCheckRadioDimension }
override public var checkRadioSizeMaxHeightSelectorOnly: DimensionRawToken { Self.mockThemeCheckRadioDimension }
override public var checkRadioSizeMaxHeightAssetsContainer: DimensionRawToken { Self.mockThemeCheckRadioDimension }
}

// swiftlint:enable required_deinit
// swiftlint:enable type_name
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
//
// 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 TestThemeOverrideOfCheckRadioComponentTokens: XCTestCase {

private var abstractTheme: OUDSTheme!
private var inheritedTheme: OUDSTheme!

override func setUp() async throws {
abstractTheme = OrangeTheme()
inheritedTheme = MockTheme()
}

// MARK: - Sizes

func testInheritedThemeCanOverrideCheckRadioComponentTokenSize() throws {
XCTAssertNotEqual(inheritedTheme.checkRadio.checkRadioSize, abstractTheme.checkRadio.checkRadioSize)
XCTAssertTrue(inheritedTheme.checkRadio.checkRadioSize == MockThemeCheckRadioComponentTokenProvider.mockThemeCheckRadioSize)
}

// MARK: - Dimensions

func testInheritedThemeCanOverrideCheckRadioComponentTokenSizeMinHeightSelectorOnly() throws {
XCTAssertNotEqual(inheritedTheme.checkRadio.checkRadioSizeMinHeightSelectorOnly, abstractTheme.checkRadio.checkRadioSizeMinHeightSelectorOnly)
XCTAssertTrue(inheritedTheme.checkRadio.checkRadioSizeMinHeightSelectorOnly == MockThemeCheckRadioComponentTokenProvider.mockThemeCheckRadioDimension)
}

func testInheritedThemeCanOverrideCheckRadioComponentTokenSizeMinWidthSelectorOnly() throws {
XCTAssertNotEqual(inheritedTheme.checkRadio.checkRadioSizeMinWidthSelectorOnly, abstractTheme.checkRadio.checkRadioSizeMinWidthSelectorOnly)
XCTAssertTrue(inheritedTheme.checkRadio.checkRadioSizeMinWidthSelectorOnly == MockThemeCheckRadioComponentTokenProvider.mockThemeCheckRadioDimension)
}

func testInheritedThemeCanOverrideCheckRadioComponentTokenSizeMaxHeightSelectorOnly() throws {
XCTAssertNotEqual(inheritedTheme.checkRadio.checkRadioSizeMaxHeightSelectorOnly, abstractTheme.checkRadio.checkRadioSizeMaxHeightSelectorOnly)
XCTAssertTrue(inheritedTheme.checkRadio.checkRadioSizeMaxHeightSelectorOnly == MockThemeCheckRadioComponentTokenProvider.mockThemeCheckRadioDimension)
}

func testInheritedThemeCanOverrideCheckRadioComponentTokenSizeMaxHeightAssetsContainer() throws {
XCTAssertNotEqual(inheritedTheme.checkRadio.checkRadioSizeMaxHeightAssetsContainer, abstractTheme.checkRadio.checkRadioSizeMaxHeightAssetsContainer)
XCTAssertTrue(inheritedTheme.checkRadio.checkRadioSizeMaxHeightAssetsContainer == MockThemeCheckRadioComponentTokenProvider.mockThemeCheckRadioDimension)
}
}

// swiftlint:enable required_deinit
// swiftlint:enable implicitly_unwrapped_optional
// swiftlint:enable type_name
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ final class MockTheme: OUDSTheme, @unchecked Sendable {
MockThemeBulletListComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces),
MockThemeInputTextComponentTokenProvider(sizes: sizes, colors: colors, spaces: spaces),
MockThemeBadgeComponentTokenProvider(sizes: sizes),
MockThemeCheckRadioComponentTokenProvider(sizes: sizes),

// NOTE: Add here new component tokens provider
]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
//
// 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 OUDSTokensRaw
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 radio button and checkboxes components like `OUDSRadioButton` and `OUDSCheckbox`.
/// Use for tokens providers like `OrangeThemeCheckRadioComponentTokensProvider`.
///
/// - Since: 0.10.0
public protocol CheckRadioComponentTokens {

// MARK: - Sizes

var checkRadioSize: SizeSemanticToken { get }

// MARK: - Dimensions

var checkRadioSizeMinHeightSelectorOnly: DimensionRawToken { get }
var checkRadioSizeMinWidthSelectorOnly: DimensionRawToken { get }
var checkRadioSizeMaxHeightSelectorOnly: DimensionRawToken { get }
var checkRadioSizeMaxHeightAssetsContainer: DimensionRawToken { get }
}

// swiftlint:enable missing_docs
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ struct DesignToolbox: App {
- ``BulletListComponentTokens``
- ``BreadcrumbComponentTokens``
- ``ButtonComponentTokens``
- ``CheckRadioComponentTokens``
- ``ChipComponentTokens``
- ``InputTextComponentTokens``
- ``LinkComponentTokens``
Expand Down

0 comments on commit eb3638a

Please sign in to comment.