Skip to content

Commit 47ccd0d

Browse files
committed
docs: improve documentation with components illustrations (#666) (#918)
Not possible today to define images for catalogs headers. Not that much possible to change the look and feel in a very rpecise and fine way. But possible to add illustrations of components in cmponents and themes pages. Update also generation script with maangement of images and details about time. Closes #666 Signed-off-by: Pierre-Yves Lapersonne <[email protected]>
1 parent 1bffdd9 commit 47ccd0d

File tree

106 files changed

+797
-33
lines changed

Some content is hidden

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

106 files changed

+797
-33
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
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+
- Illustrations in documentation (Orange-OpenSource/ouds-ios#666)
1112
- Tag component (Orange-OpenSource/ouds-ios#408)
1213

1314
### Changed

OUDS/Core/Components/Sources/Actions/Button/OUDSButton.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,28 @@ import SwiftUI
9797
///
9898
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/48a788-button)
9999
///
100+
/// ## Themes rendering
101+
///
102+
/// ### Orange
103+
///
104+
/// ![A button component in light and dark mode with Orange theme](component_button_enabled_strong_Orange)
105+
///
106+
/// ### Orange Business Tools
107+
///
108+
/// ![A button component in light and dark mode with Orange Business Tools theme](component_button_enabled_strong_OrangeBusinessTools)
109+
///
110+
/// ### Orange Inverse
111+
///
112+
/// ![A button component in light and dark mode with Orange Inverse theme](component_button_enabled_strong_OrangeInverse)
113+
///
114+
/// ### Sosh
115+
///
116+
/// ![A button component in light and dark mode with Sosh theme](component_button_enabled_strong_Sosh)
117+
///
118+
/// ### Wireframe
119+
///
120+
/// ![A button component in light and dark mode with Wireframe theme](component_button_enabled_strong_Wireframe)
121+
///
100122
/// - Version: 3.0.0 (Figma component design version)
101123
/// - Since: 0.10.0
102124
public struct OUDSButton: View {

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckbox.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,28 @@ import SwiftUI
6969
///
7070
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/09d860-checkbox)
7171
///
72+
/// ## Themes rendering
73+
///
74+
/// ### Orange
75+
///
76+
/// ![A checkbox component in light and dark mode with Orange theme](component_checkbox_enabled_selected_Orange)
77+
///
78+
/// ### Orange Business Tools
79+
///
80+
/// ![A checkbox component in light and dark mode with Orange Business Tools theme](component_checkbox_enabled_selected_OrangeBusinessTools)
81+
///
82+
/// ### Orange Inverse
83+
///
84+
/// ![A checkbox component in light and dark mode with Orange Inverse theme](component_checkbox_enabled_selected_OrangeInverse)
85+
///
86+
/// ### Sosh
87+
///
88+
/// ![A checkbox component in light and dark mode with Sosh theme](component_checkbox_enabled_selected_Sosh)
89+
///
90+
/// ### Wireframe
91+
///
92+
/// ![A checkbox component in light and dark mode with Wireframe theme](component_checkbox_enabled_selected_Wireframe)
93+
///
7294
/// - Version: 2.0.0 (Figma component design version)
7395
/// - Since: 0.12.0
7496
public struct OUDSCheckbox: View {

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckboxItem.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,28 @@ import SwiftUI
114114
///
115115
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/09d860-checkbox)
116116
///
117+
/// ## Themes rendering
118+
///
119+
/// ### Orange
120+
///
121+
/// ![A checkbox item component in light and dark mode with Orange theme](component_checkbox_item_Orange)
122+
///
123+
/// ### Orange Business Tools
124+
///
125+
/// ![A checkbox item component in light and dark mode with Orange Business Tools theme](component_checkbox_item_OrangeBusinessTools)
126+
///
127+
/// ### Orange Inverse
128+
///
129+
/// ![A checkbox item component in light and dark mode with Orange Inverse theme](component_checkbox_item_OrangeInverse)
130+
///
131+
/// ### Sosh
132+
///
133+
/// ![A checkbox item component in light and dark mode with Sosh theme](component_checkbox_item_Sosh)
134+
///
135+
/// ### Wireframe
136+
///
137+
/// ![A checkbox item component in light and dark mode with Wireframe theme](component_checkbox_item_Wireframe)
138+
///
117139
/// - Version: 2.1.0 (Figma component design version)
118140
/// - Since: 0.12.0
119141
public struct OUDSCheckboxItem: View {

OUDS/Core/Components/Sources/Controls/Checkbox/OUDSCheckboxItemIndeterminate.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,28 @@ import SwiftUI
120120
///
121121
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/09d860-checkbox)
122122
///
123+
/// ## Themes rendering
124+
///
125+
/// ### Orange
126+
///
127+
/// ![A checkbox item component in light and dark mode with Orange theme](component_checkbox_item_Orange)
128+
///
129+
/// ### Orange Business Tools
130+
///
131+
/// ![A checkbox item component in light and dark mode with Orange Business Tools theme](component_checkbox_item_OrangeBusinessTools)
132+
///
133+
/// ### Orange Inverse
134+
///
135+
/// ![A checkbox item component in light and dark mode with Orange Inverse theme](component_checkbox_item_OrangeInverse)
136+
///
137+
/// ### Sosh
138+
///
139+
/// ![A checkbox item component in light and dark mode with Sosh theme](component_checkbox_item_Sosh)
140+
///
141+
/// ### Wireframe
142+
///
143+
/// ![A checkbox item component in light and dark mode with Wireframe theme](component_checkbox_item_Wireframe)
144+
///
123145
/// - Version: 2.0.0 (Figma component design version)
124146
/// - Since: 0.12.0
125147
public struct OUDSCheckboxItemIndeterminate: View {

OUDS/Core/Components/Sources/Controls/CheckboxPicker/OUDSCheckboxPicker.swift

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,12 @@ import SwiftUI
8383
///
8484
/// There is no online specification as this component is not an official OUDS one
8585
///
86+
/// ## Themes rendering
87+
///
88+
/// ### Orange
89+
///
90+
/// ![A checkbox picker component in light and dark mode with Orange theme](component_checkboxpicker_vertical_rooted_Orange)
91+
///
8692
/// - Since: 0.14.0
8793
public struct OUDSCheckboxPicker<Tag>: View where Tag: Hashable {
8894

OUDS/Core/Components/Sources/Controls/Chip/OUDSFilterChip.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,28 @@ import SwiftUI
3636
///
3737
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/73c701-components)
3838
///
39+
/// ## Themes rendering
40+
///
41+
/// ### Orange
42+
///
43+
/// ![A filter chip component in light and dark mode with Orange theme](component_filterchip_text_enabled_Orange)
44+
///
45+
/// ### Orange Business Tools
46+
///
47+
/// ![A filter chip component in light and dark mode with Orange Business Tools theme](component_filterchip_text_enabled_OrangeBusinessTools)
48+
///
49+
/// ### Orange Inverse
50+
///
51+
/// ![A filter chip component in light and dark mode with Orange Inverse theme](component_filterchip_text_enabled_OrangeInverse)
52+
///
53+
/// ### Sosh
54+
///
55+
/// ![A filter chip component in light and dark mode with Sosh theme](component_filterchip_text_enabled_Sosh)
56+
///
57+
/// ### Wireframe
58+
///
59+
/// ![A filter chip component in light and dark mode with Wireframe theme](component_filterchip_text_enabled_Wireframe)
60+
///
3961
/// - Version:1.3.0
4062
/// - Since: 0.17.0
4163
public struct OUDSFilterChip: View { // TODO: #407 - Add documentation hyperlink in doc above

OUDS/Core/Components/Sources/Controls/Chip/OUDSSuggestionChip.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,28 @@ import SwiftUI
4343
///
4444
/// [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/73c701-components)
4545
///
46+
/// ## Themes rendering
47+
///
48+
/// ### Orange
49+
///
50+
/// ![A suggestion chip component in light and dark mode with Orange theme](component_suggestionchip_text_icon_enabled_Orange)
51+
///
52+
/// ### Orange Business Tools
53+
///
54+
/// ![A suggestion chip component in light and dark mode with Orange Business Tools theme](component_suggestionchip_text_icon_enabled_OrangeBusinessTools)
55+
///
56+
/// ### Orange Inverse
57+
///
58+
/// ![A suggestion chip component in light and dark mode with Orange Inverse theme](component_suggestionchip_text_icon_enabled_OrangeInverse)
59+
///
60+
/// ### Sosh
61+
///
62+
/// ![A suggestion chip component in light and dark mode with Sosh theme](component_suggestionchip_text_icon_enabled_Sosh)
63+
///
64+
/// ### Wireframe
65+
///
66+
/// ![A suggestion chip component in light and dark mode with Wireframe theme](component_suggestionchip_text_icon_enabled_Wireframe)
67+
///
4668
/// - Version: 1.3.0
4769
/// - Since: 0.17.0
4870
public struct OUDSSuggestionChip: View { // TODO: #407 - Add documentation hyperlink in doc above

OUDS/Core/Components/Sources/Controls/ChipPicker/OUDSChipPicker.swift

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ import SwiftUI
7272
///
7373
/// There is no online specification as this component is not an official OUDS one.
7474
///
75+
/// ## Theme rendering
76+
///
77+
/// ### Orange
78+
///
79+
/// ![A chip picker component in light and dark mode with Orange theme](component_chippicker_enabled_Orange)
80+
///
7581
/// - Since: 0.17.0
7682
public struct OUDSChipPicker<Tag>: View where Tag: Hashable {
7783

OUDS/Core/Components/Sources/Controls/Radio/OUDSRadio.swift

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,28 @@ import SwiftUI
5757
///
5858
/// See [unified-design-system.orange.com](https://unified-design-system.orange.com/472794e18/p/90c467-radio-button)
5959
///
60+
/// ## Themes rendering
61+
///
62+
/// ### Orange
63+
///
64+
/// ![A radio button component in light and dark mode with Orange theme](component_radio_enabled_selected_Orange)
65+
///
66+
/// ### Orange Business Tools
67+
///
68+
/// ![A radio button component in light and dark mode with Orange Business Tools theme](component_radio_enabled_selected_OrangeBusinessTools)
69+
///
70+
/// ### Orange Inverse
71+
///
72+
/// ![A radio button component in light and dark mode with Orange Inverse theme](component_radio_enabled_selected_OrangeInverse)
73+
///
74+
/// ### Sosh
75+
///
76+
/// ![A radio button component in light and dark mode with Sosh theme](component_radio_enabled_selected_Sosh)
77+
///
78+
/// ### Wireframe
79+
///
80+
/// ![A radio button component in light and dark mode with Wireframe theme](component_radio_enabled_selected_Wireframe)
81+
///
6082
/// - Version: 1.0.0 (Figma component design version)
6183
/// - Since: 0.12.0
6284
public struct OUDSRadio: View {

0 commit comments

Comments
 (0)