Skip to content

Commit 3598270

Browse files
ludovic35pylappLudovic Pinel
authored
feat: colored surface component with raw and semantic color modes tokens (#521) (#597)
Update colored surface component to use the tokens picked from tokenator. Documentation and tests have been updated accordingly. WARNING: No Q/A, no review, and maybe renaming to do. Closes #521 Signed-off-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Ludovic Pinel <[email protected]>
1 parent 8cfba33 commit 3598270

File tree

52 files changed

+1089
-324
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1089
-324
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
99
### Added
1010

1111
- [Library] Raw and semantic tokens for color mode ([#599](https://github.com/Orange-OpenSource/ouds-ios/issues/599))
12+
- [DesignToolbox] Add demo screen of the OUDSColoredSurface component ([#521](https://github.com/Orange-OpenSource/ouds-ios/issues/521))
13+
- [Library] Raw and semantic tokens for color mode ([#599](https://github.com/Orange-OpenSource/ouds-ios/issues/599))
14+
- [DesignToolbox] Add demo screen of the OUDSColoredSurface component ([#521](https://github.com/Orange-OpenSource/ouds-ios/issues/521))
1215
- [Library] `Divider` component tokens (tokens library v0.9.0)
1316
- [Library] `dimension1250` raw token of dimension (tokens library v0.9.0)
1417
- [Library] Support of arabic language ([#552](https://github.com/Orange-OpenSource/ouds-ios/issues/552))
@@ -17,6 +20,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1720
### Changed
1821

1922
- [Tool] Migration to Xcode 16.3 ([#580](https://github.com/Orange-OpenSource/ouds-ios/issues/580))
23+
- [Library] Update the OUDSColoredSurface to fix color available ([#521](https://github.com/Orange-OpenSource/ouds-ios/issues/521))
24+
- [Library] Update the OUDSColoredSurface component to fix color available ([#521](https://github.com/Orange-OpenSource/ouds-ios/issues/521))
25+
- [Tool] Migration to Xcode 16.3 ([#580](https://github.com/Orange-OpenSource/ouds-ios/issues/580))
26+
- [Library] Update the OUDSColoredSurface to fix color available ([#521](https://github.com/Orange-OpenSource/ouds-ios/issues/521))
2027
- [Tool] Remove dead code and add `periphery` in CI/CD pipes
2128
- [Library] Tag component token (tokens library v0.11.0)
2229
- [Library] Chip component token (tokens library v0.11.0)

‎DesignToolbox/DesignToolbox.xcodeproj/project.pbxproj

+40-12
Large diffs are not rendered by default.

‎DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonConfiguration.swift

+2-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ final class ButtonConfigurationModel: ComponentConfiguration {
6767
}
6868

6969
private var coloredSurfaceCodeModifier: String {
70-
onColoredSurface ? ".oudsColoredSurface(color: Color.orange)" : ""
70+
onColoredSurface ? ".oudsColoredSurface(theme.colorModes.modeOnBrandPrimary)" : ""
7171
}
7272

7373
override func updateCode() {
@@ -173,7 +173,7 @@ struct ButtonConfiguration: View {
173173
.oudsForegroundStyle(theme.colors.colorContentDefault)
174174
.disabled(model.style != .`default`)
175175

176-
Toggle("app_components_common_onColoredBackground_label", isOn: $model.onColoredSurface)
176+
Toggle("app_components_common_onColoredSurface_label", isOn: $model.onColoredSurface)
177177
.typeHeadingMedium(theme)
178178
.oudsForegroundStyle(theme.colors.colorContentDefault)
179179

‎DesignToolbox/DesignToolbox/Pages/Components/Button/ButtonPage.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,6 @@ private struct ButtonDemo: View {
103103
}
104104
.disabled(!model.enabled)
105105
.padding(.all, theme.spaces.spaceFixedMedium)
106-
.modifier(DesignToolboxColoredBackgroundModifier(coloredSurface: model.onColoredSurface))
106+
.modifier(DesignToolboxColoredSurfaceModifier(coloredSurface: model.onColoredSurface))
107107
}
108108
}

‎DesignToolbox/DesignToolbox/Pages/Components/ColoredSurface/ColoredSurfaceConfiguration.swift

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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 OUDSComponents
16+
import SwiftUI
17+
18+
// MARK: - Colored Surface Configuration Model
19+
20+
/// The model shared between `ColoredSurfacePageConfiguration` view and `ColoredSurfacePageComponent` view.
21+
final class ColoredSurfaceConfigurationModel: ComponentConfiguration {
22+
23+
// MARK: Published properties
24+
25+
@Published var selectedColor: NamedColorMode {
26+
didSet { updateCode() }
27+
}
28+
29+
// MARK: Initializer
30+
31+
override init() {
32+
selectedColor = NamedColorMode.modeOnBrandPrimary
33+
}
34+
35+
deinit { }
36+
37+
// MARK: Component Configuration
38+
39+
override func updateCode() {
40+
code =
41+
"""
42+
OUDSColoredSurface(color: theme.colorModes.\(selectedColor.description)) {
43+
Text("\(selectedColor.formattedName)")
44+
.oudsForegroundColor(theme.colors.colorContentDefault)
45+
46+
OUDSButton(text: "\("app_components_button_label".localized())") {}
47+
48+
OUDSLink(text: "\("app_components_link_label".localized())", arrow: .next) {}
49+
}
50+
"""
51+
}
52+
}
53+
54+
// MARK: - Colored Surface Configuration View
55+
56+
struct ColoredSurfaceConfiguration: View {
57+
58+
@StateObject var model: ColoredSurfaceConfigurationModel
59+
@State private var isExpanded: Bool = false
60+
@Environment(\.theme) private var theme
61+
62+
var body: some View {
63+
DesignToolboxDisclosureGroup(isExpanded: $isExpanded, accessibilityLabel: "app_components_coloredSurface_color_label_a11y") {
64+
VStack(alignment: .leading) {
65+
ForEach(NamedColorMode.allCases, id: \.id) { color in
66+
Button {
67+
model.selectedColor = color
68+
} label: {
69+
ColorEntry(color: color)
70+
}
71+
}
72+
}
73+
} label: {
74+
VStack(alignment: .leading) {
75+
Text("app_components_coloredSurface_color_label")
76+
.typeHeadingMedium(theme)
77+
.oudsForegroundColor(theme.colors.colorContentDefault)
78+
79+
ColorEntry(color: model.selectedColor)
80+
81+
if isExpanded {
82+
Divider()
83+
}
84+
}
85+
}
86+
}
87+
}
88+
89+
private struct ColorEntry: View {
90+
91+
@Environment(\.theme) private var theme
92+
let color: NamedColorMode
93+
94+
var body: some View {
95+
Label {
96+
Text(color.formattedName)
97+
.oudsForegroundColor(theme.colors.colorContentDefault)
98+
} icon: {
99+
OUDSColoredSurface(color: color.toSurfaceColor(from: theme)) {
100+
Rectangle()
101+
.fill(Color.clear)
102+
.frame(width: 30, height: 30, alignment: .leading)
103+
}
104+
}
105+
.frame(maxWidth: .infinity, alignment: .leading)
106+
}
107+
}

‎DesignToolbox/DesignToolbox/Pages/Components/ColoredSurface/ColoredSurfaceElement.swift

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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 SwiftUI
15+
16+
struct ColoredSurfaceElement: DesignToolboxElement {
17+
let name: String
18+
let image: Image
19+
let pageDescription: AnyView
20+
21+
init() {
22+
name = "app_components_coloredSurface_label"
23+
image = Image(decorative: "il_components_colored_background").renderingMode(.original)
24+
pageDescription = AnyView(DesignToolboxElementPage(
25+
name: name,
26+
image: nil,
27+
description: "app_components_coloredSurface_description_text",
28+
illustration: AnyView(ColoredSurfacePage())
29+
)
30+
)
31+
}
32+
}

‎DesignToolbox/DesignToolbox/Pages/Components/ColoredSurface/ColoredSurfacePage.swift

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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 OUDSComponents
16+
import SwiftUI
17+
18+
// MARK: Colored Surface Page
19+
20+
struct ColoredSurfacePage: View {
21+
22+
private let configuration = ColoredSurfaceConfigurationModel()
23+
24+
var body: some View {
25+
ComponentConfigurationView(
26+
configuration: configuration,
27+
componentView: componentView,
28+
configurationView: configurationView
29+
)
30+
}
31+
32+
@ViewBuilder
33+
private func componentView(with configuration: ComponentConfiguration) -> some View {
34+
if let model = configuration as? ColoredSurfaceConfigurationModel {
35+
ColoredSurfaceIllustration(model: model)
36+
}
37+
}
38+
39+
@ViewBuilder
40+
private func configurationView(with configuration: ComponentConfiguration) -> some View {
41+
if let model = configuration as? ColoredSurfaceConfigurationModel {
42+
ColoredSurfaceConfiguration(model: model)
43+
}
44+
}
45+
}
46+
47+
// MARK: Colored Surface Illustration
48+
49+
struct ColoredSurfaceIllustration: View {
50+
51+
@ObservedObject var model: ColoredSurfaceConfigurationModel
52+
@Environment(\.colorScheme) private var colorScheme
53+
54+
var body: some View {
55+
VStack(alignment: .center, spacing: 0) {
56+
ColoredSurfaceDemo(model: model)
57+
// TODO: Build a modifier to inverse colorscheme or force to a colorscheme
58+
ColoredSurfaceDemo(model: model)
59+
.colorScheme(colorScheme == .dark ? .light : .dark)
60+
}
61+
}
62+
}
63+
64+
// MARK: - Colored Surface Demo
65+
66+
private struct ColoredSurfaceDemo: View {
67+
68+
@ObservedObject var model: ColoredSurfaceConfigurationModel
69+
@Environment(\.theme) private var theme
70+
71+
var body: some View {
72+
HStack(alignment: .center, spacing: theme.spaces.spaceFixedMedium) {
73+
OUDSColoredSurface(color: model.selectedColor.toSurfaceColor(from: theme)) {
74+
VStack(alignment: .center, spacing: theme.spaces.spaceFixedMedium) {
75+
Text(model.selectedColor.formattedName)
76+
.oudsForegroundColor(theme.colors.colorContentDefault)
77+
78+
OUDSButton(text: "app_components_button_label".localized(),
79+
hierarchy: .default,
80+
style: .default) {
81+
}
82+
83+
OUDSLink(text: "app_components_link_label".localized(), arrow: .next) {
84+
}
85+
}
86+
.frame(maxWidth: .infinity, alignment: .center)
87+
.padding(.all, theme.spaces.spaceFixedMedium)
88+
}
89+
}
90+
.padding(.all, theme.spaces.spaceFixedMedium)
91+
.modifier(DesignToolboxColoredSurfaceModifier(coloredSurface: false))
92+
}
93+
}

0 commit comments

Comments
 (0)