Skip to content

Commit 979044b

Browse files
committed
chore: various cleanings (#1336)
Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>
1 parent e77eb98 commit 979044b

9 files changed

+92
-23
lines changed
Loading

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-1-package-and-librairies.tutorial

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
You can then choose the **dependency rule** you want.
2424
To know which version you need, you can have a look on the [available API list](https://github.com/Orange-OpenSource/ouds-ios/wiki/01-%E2%80%90-Available-API)
2525
and also the [GitHub releases](https://github.com/Orange-OpenSource/ouds-ios/releases).
26-
Let's say you will use the last released version today, i.e. the version 1.2.0.
26+
Let's say you will use some beta version today, e.g. the version1.3.0-beta.2
2727

2828
@Image(source: "tutorial-discovery-1-ouds-swift-package", alt: "Description by Xcode of the OUDS Swift Package with its README preview")
2929
}

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-6-going-further.tutorial

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@Tutorial(time: 10, projectFiles: "OUDS-Discovery-Tutorial") {
1+
@Tutorial(time: 10) {
22
@Intro(title: "Going further with more resources") {
33
Since you have learnt how OUDS works with theme, themeable view, components, tuning and vieww modifiers, it is time now to discover some online resources.
44

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Table Of Contents (onboarding).tutorial

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
@Tutorials(name: "Orange Unified Design System") {
22
@Intro(title: "Swift Package Onboarding Tutorial") {
3-
Discovering a new framework can be exciting and scary. Learn how you can embed and use OUDS Swift Package.
4-
With this tutorial you will learn fundamental concepts of Orange Unified Design System and discover the layers of this framework.
5-
Theme, components, tokens... everything will be introduced!
3+
Discovering a new framework can be exciting and scary.
4+
With this tutorial, you will learn how to embed OUDS Swift Package and define views tailored for your brand.
5+
It has beend esigned for local events and meetups.
6+
Let's play!
67

78
@Image(source: "ic_unified_ds", alt: "Logo of OUDS")
89
}
@@ -17,7 +18,7 @@
1718
}
1819

1920
@Chapter(name: "Define information cards") {
20-
Since you prepared you Xcode project and integrated OUDS Swift Package, you can now to define a nice and clear view with headings, images and button.
21+
Since you prepared you Xcode project and integrated OUDS Swift Package, you can now define a nice and clear view with headings, images and button.
2122

2223
@Image(source: "ic_unified_ds", alt: "Logo of OUDS")
2324

@@ -31,4 +32,12 @@
3132

3233
@TutorialReference(tutorial: "doc:tutorial-onboarding-3-components-showcase")
3334
}
35+
36+
@Chapter(name: "Go further with more ressources") {
37+
You can have questions and issues, and there are resources online. Let's see that together.
38+
39+
@Image(source: "ic_unified_ds", alt: "Logo of OUDS")
40+
41+
@TutorialReference(tutorial: "doc:tutorial-onboarding-4-going-further")
42+
}
3443
}
Loading

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-1-package-and-librairies.tutorial

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
To know which version you need, you can have a look on the [available API list](https://github.com/Orange-OpenSource/ouds-ios/wiki/01-%E2%80%90-Available-API)
2525
and also the [GitHub releases](https://github.com/Orange-OpenSource/ouds-ios/releases).
2626

27-
Let's say you will use the last released version today, i.e. the version 1.2.0.
27+
Let's say you will use the some beta version, here 1.3.0-beta.2
2828

2929
@Image(source: "tutorial-onboarding-1-ouds-swift-package", alt: "Description by Xcode of the OUDS Swift Package with its README preview")
3030
}
@@ -94,7 +94,7 @@
9494
}
9595

9696
@Choice(isCorrect: false) {
97-
None, only the Swift package dependency matter .
97+
None, only the Swift package dependency matter.
9898

9999
@Justification(reaction: "Try again!") {
100100
You need to chose the products the Swift package provides.

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-2-nice-and-clear-view.tutorial

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
}
5858

5959
@Step {
60-
Now, it's time to apply colors on texts. Colors are defined with *tokens*, i.e. small atomic elements defined in the design Figma kit. The *theme* object contains tokens and provides them thanks to *providers*.
60+
Now, it's time to apply colors on texts. [Colors are defined with *tokens*](https://ios.unified-design-system.orange.com/documentation/oudstokenssemantic/colorsemantictokens), i.e. small atomic elements defined in the design Figma kit. The *theme* object contains tokens and provides them thanks to *providers*.
6161

6262
For all texts, change the *foreground color*: apply *contentBrandPrimary* for the *title*, *contentDefault* for the subtitle and also the *description*.
6363

@@ -67,17 +67,19 @@
6767
}
6868

6969
@Step {
70-
Now, it's time to add the button. OUDS provides plenty of components with properties related to notions defined in Figma kit and DSM. For example a button can have *appearance*.
70+
Now, it's time to add the [button](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbutton). OUDS provides plenty of components with properties related to notions defined in Figma kit and DSM. For example a button can have *appearance*.
7171

72-
Add a button with a *strong appearance*, using the previously defined label, and no action.
72+
Add a button with a [*strong appearance*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbutton#Appearances), using the previously defined label, and no action.
7373

7474
@Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-6.swift") {
7575
@Image(source: "tutorial-onboarding-2-6.png", alt: "A view with image, texts and a strong button")
7676
}
7777
}
7878

7979
@Step {
80-
You agree things are stucked and spacings are missing. Spacing values are defined also in tokens. Some of these tokens have unique value like `theme.spaces.fixedMedium`, but some others have several values depending to the *size class* of the view like `theme.spaces.scaled2xsmall`. In addition, OUDS provides view modifiers to define *grid margins* on a view depending to a *size class*.
80+
You agree things are stucked and spacings are missing. [Spacing values are defined also in tokens](https://ios.unified-design-system.orange.com/documentation/oudstokenssemantic/spacesemantictokens).
81+
Some of these tokens have unique value like `theme.spaces.fixedMedium`, but [some others have several values](https://ios.unified-design-system.orange.com/documentation/oudstokenssemantic/spacemultiplesemantictokens) depending to the *size class* of the view like `theme.spaces.scaled2xsmall`.
82+
In addition, OUDS provides view modifiers to define *grid margins* on a view depending to a *size class*.
8183

8284
Try to apply some spacings: *fixedNone* in the `VStack`, *fixedMedium* as a `Spacer` minimum length below the button, *top grid margin* for the *title*, *grid margin* for all the `View`, *scaled2xsmall* as *vertical padding* for the *subtitle* and *scaledLarge* as minimum length for a `Spacer` above the *button*.
8385

OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-3-components-showcase.tutorial

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111

1212
@ContentAndMedia {
1313
Components are gathered by group or families. You can find all of theme in the [online documentation](https://ios.unified-design-system.orange.com/documentation/oudscomponents).
14-
For exmeple, in *control* family you will find *checkboxes*, *radio buttons*, *switch items* and some *inputs* fields.
14+
For exemple, in *control* family you will find *checkboxes*, *radio buttons*, *switch items* and some *inputs* fields.
1515
*Layouts* provides *dividers*, *buttons* are in *actions* group, *bullet lists* in *display* family.
1616
}
1717

1818
@Steps {
1919
@Step {
2020
Define a basic `Control` `View` with in its *body* a `VStack` with *theme.spaces.fixedNone* spacing.
21-
Add inside the components you want, for exemple *checkbox item*, *radio item*, *switch item*, *text input* and *password input*.
21+
Add inside the components you want, for exemple [*checkbox item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudscheckboxitem), [*radio item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsradioitem/), [*switch item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsswitchitem), [*text input*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudstextinput) and [*password input*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudspasswordinput).
2222
Do not forget the Xcode preview.
2323

2424
@Code(name: "Control.swift", file: "tutorial-onboarding-3-1.swift") {
@@ -29,7 +29,7 @@
2929
@Step {
3030
OUDS provides also components as *indicators* like *badges* and *tags*.
3131
Define an `Indicator` `View`, with a `VStack` applying *theme.spaces.scaledMedium* spacing token for a *vertical size class*, and containing an `HStack` with a *theme.spaces.fixedSmall* spacing.
32-
Add inside badges: do not hesitate to change their *status* and *size*.
32+
Add inside [badges](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbadge/): do not hesitate to change their *status* and *size*.
3333
Make your tests with the Xcode preview.
3434

3535
@Code(name: "Indicator.swift", file: "tutorial-onboarding-3-2.swift") {
@@ -39,7 +39,7 @@
3939

4040
@Step {
4141
There are also *navigation* components in OUDS like *links* and *tab bars*.
42-
Define a `Navigation` `View` with in its body a `VStack` with *theme.spaces.fixedNone* spacing and three links: a *next"* link, a *back* link and an *informational* link opening a URL.
42+
Define a `Navigation` `View` with in its body a `VStack` with *theme.spaces.fixedNone* spacing and three [links](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudslink): a *next* link, a *back* link and an *informational* link opening a URL.
4343

4444
Use a `VStack` containing `Image` and `Text` `View` objects.
4545

@@ -65,7 +65,7 @@
6565
}
6666

6767
@Step {
68-
Then define a `CategorySelector` `View`: it must display a *filter chip* for all *ComponentGroup* cases and keep a *selected component group* as *Binding*. Use the *theme.spaces.fixedSmall* token for horizontal spacing between the chips.
68+
Then define a `CategorySelector` `View`: it must display a [*filter chip*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsfilterchip/) for all *ComponentGroup* cases and keep a *selected component group* as *Binding*. Use the *theme.spaces.fixedSmall* token for horizontal spacing between the chips.
6969

7070
@Code(name: "CategorySelector.swift", file: "tutorial-onboarding-3-5.swift")
7171
}
@@ -87,11 +87,8 @@
8787

8888
@Steps {
8989
@Step {
90-
If you want to apply a theme everywhere in your app, or on specific view, one special `View` is for you: the `OUDSThemeableView`. This object will get a theme you instanciated and apply it as environment value. It will also instanciates some environment objects the components may need.
90+
If you want to apply a theme everywhere in your app, or on specific view, one special `View` is for you: the [`OUDSThemeableView`](https://ios.unified-design-system.orange.com/documentation/oudsthemescontract/oudsthemeableview). This object will get a theme you instanciated and apply it as environment value. It will also instanciates some environment objects the components may need.
9191
Define a `ContentView` `View`, add in its *body* the `OUDSThemeableView` with an instance of `OrangeTheme`, and add inside your previously defined `HomeScreen` `View`.
92-
93-
*navigation* components like a *tab bar*. The *tab bar* is quite particular: its rendering will change depending if Liquid Glass is applied (i.e. iOS 26+) or not (i.e. until iOS 18).
94-
Add a *tab bar*, with 3 items inside it: the `HomeScreen` `View` and two fake views.
9592

9693
@Code(name: "ContentView.swift", file: "tutorial-onboarding-3-7.swift") {
9794
@Image(source: "tutorial-onboarding-3-7.png", alt: "A view with images and texts")
@@ -100,12 +97,12 @@
10097

10198
@Step {
10299
OUDS provides *navigation* components like a *tab bar*. The *tab bar* is quite particular: its rendering will change depending if Liquid Glass is applied (i.e. iOS 26+) or not (i.e. until iOS 18).
103-
Add a *tab bar*, with 3 items inside it: the `HomeScreen` `View` and two fake views.
100+
Add a [*tab bar*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudstabbar/), with 3 items inside it: the `HomeScreen` `View` and two fake views.
104101

105102
You can see how it looks like with other themes like `SoshTheme`, `WireframeTheme` or `OrangeCompactTheme`.
106103

107104
@Code(name: "ContentView.swift", file: "tutorial-onboarding-3-8.swift") {
108-
@Image(source: "tutorial-onboarding-3-8.png", alt: "A view with a tab bar in the bottom")
105+
@Image(source: "tutorial-onboarding-3-8-LiquidGlass.png", alt: "A view with a tab bar in the bottom")
109106
}
110107
}
111108
}
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@Tutorial(time: 10) {
2+
@Intro(title: "Going further with more resources") {
3+
Since you have learnt how OUDS works with theme, themeable view, components, tuning and vieww modifiers, it is time now to discover some online resources.
4+
5+
@Image(source: "ic_theme_intro", alt: "OUDS themes logo")
6+
}
7+
8+
@Section(title: "More resources") {
9+
10+
@ContentAndMedia {
11+
Xcode can use the Swift DocC documentation of OUDS, and this documentation is used to build a static web site.
12+
13+
But there are also other resources which can be useful for you.
14+
}
15+
16+
@Steps {
17+
@Step {
18+
The iOS technical documentation is available online. It has been generated from all the Swift DocC documentation written in the Swift Package.
19+
You will find several catalogs (as many as librairies) with details about everyhting: components, tokens, themes, providers, etc.
20+
21+
You can get it at [ios.unified-design-system.orange.com](https://ios.unified-design-system.orange.com/)
22+
23+
@Image(source: "tutorial-discovery-6-1.png", alt: "Apple-fashioned technical user documentation")
24+
}
25+
26+
@Step {
27+
The whole design system is documented and available online. You can find everything about components, tokens, guidelines and principles of OUDS.
28+
The *icon finder* is also available there to get icons for your projects.
29+
30+
Go to the website and learn things at [unified-design-system.orange.com](https://unified-design-system.orange.com/)
31+
32+
@Image(source: "tutorial-discovery-6-2.png", alt: "OUDS official web site")
33+
}
34+
35+
@Step {
36+
OUDS iOS provides also a wiki attached to its GitHub repository. The wiki is a public base of knowledge with plenty of things: available API, technicala architecture, tips about processes, tests, conventions and toolings.
37+
38+
Have a look [on the wiki](https://github.com/Orange-OpenSource/ouds-ios/wiki) to discover how OUDS works.
39+
40+
@Image(source: "tutorial-discovery-6-3.png", alt: "The wiki with plenty of details about processes, releases, API and technical choices")
41+
}
42+
43+
@Step {
44+
For technical reasons the [Orange-OpenSource/ouds-ios](https://github.com/Orange-OpenSource/ouds-ios) GitHub repository does not embed the source code of the *design system toolbox* app. In fact this app and all its snapshots for tests increases a lot the size of the repository.
45+
46+
To get the source code of this showcase app, go to its dedicated GitHub repository at [Orange-OpenSource/ouds-ios-design-system-toolbox](https://github.com/Orange-OpenSource/ouds-ios-design-system-toolbox)
47+
48+
@Image(source: "tutorial-discovery-6-4.png", alt: "The repository of the design system toolbox app")
49+
}
50+
51+
@Step {
52+
OUDS is open source, public and uses GitHub as forge. Thus, you will find common things inside the [Orange-OpenSource/ouds-ios](https://github.com/Orange-OpenSource/ouds-ios) GitHub repository.
53+
54+
Do not hesitate to [create issues if you spot bugs or want improvements](https://github.com/Orange-OpenSource/ouds-ios/issues) or [open or participate to discussions](https://github.com/Orange-OpenSource/ouds-ios/discussions)!
55+
56+
@Image(source: "tutorial-discovery-6-5.png", alt: "We love write things and discuss, come say hi and chat about anything!")
57+
}
58+
}
59+
}
60+
}
61+

0 commit comments

Comments
 (0)