diff --git a/.swiftlint.yml b/.swiftlint.yml index 32e27f92c4d..5bd524e46df 100644 --- a/.swiftlint.yml +++ b/.swiftlint.yml @@ -28,7 +28,8 @@ included: # ======== excluded: -- OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial +- OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery +- OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding # ============== # Disabled rules diff --git a/CHANGELOG.md b/CHANGELOG.md index a28cbb3a6e2..9613a98d943 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Tutorial for onboardings and meetups (Orange-OpenSource/ouds-ios#1336) - View helpers to use scaled spaces tokens to add padding and for HStack/VStack (Orange-OpenSource/ouds-ios#1324) - GitHub Copilot instructions file for maintainers and contributors (Orange-OpenSource/ouds-ios#1314) - Helper to apply grid margin on views (Orange-OpenSource/ouds-ios#1317) diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Themes.md b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Themes.md index 0de267fae2a..bb57276c98c 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Themes.md +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Themes.md @@ -114,7 +114,7 @@ You must consider the tokens provider you need (to inherit from for overriding, - font tokens are in `OrangeThemeFontSemanticTokensProvider` - and same logic for component tokens -Find bellow some example +Find below some example ```swift // Token provider for spaces diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-1-ouds-swift-package.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-1-ouds-swift-package.png deleted file mode 100644 index ffd9cb61fdc..00000000000 Binary files a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-1-ouds-swift-package.png and /dev/null differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/OUDS-Discovery-Tutorial.zip b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/OUDS-Discovery-Tutorial.zip new file mode 100644 index 00000000000..234a0831217 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/OUDS-Discovery-Tutorial.zip differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-1-ouds-libraries.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-1-ouds-libraries.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-1-ouds-libraries.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-1-ouds-libraries.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-1-ouds-swift-package.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-1-ouds-swift-package.png new file mode 100644 index 00000000000..59b7ebfa422 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-1-ouds-swift-package.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-2-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-2-1.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-2-1.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-2-1.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-2-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-2-2.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-2-2.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-2-2.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-2.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-2.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-2.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-3.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-3.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-3.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-4.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-4.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-4.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-4.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-5.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-5.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-5.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-5.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-6.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-6.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-6.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-6.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-7.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-7.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-3-7.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-3-7.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-1.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-1.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-1.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-2.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-2.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-2.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-3.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-3.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-3.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-4.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-4.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-4-4.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-4-4.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-1.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-1.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-1.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-10.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-10.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-10.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-10.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-2.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-2.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-2.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-3.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-3.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-3.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-4.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-4.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-4.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-4.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-5.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-5.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-5.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-5.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-6.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-6.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-6.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-6.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-7.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-7.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-7.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-7.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-8.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-8.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-8.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-8.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-9.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-9.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-5-9.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-5-9.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-1.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-1.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-1.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-2.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-2.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-2.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-3.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-3.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-3.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-4.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-4.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-4.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-4.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-5.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-5.png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-6-5.png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-6-5.png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-dark (result).png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-dark (result).png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-dark (result).png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-dark (result).png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-light (result).png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-light (result).png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-light (result).png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-light (result).png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-light-dark (result).png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-light-dark (result).png similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/images/tutorial-light-dark (result).png rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/images/tutorial-discovery-light-dark (result).png diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial (solution).swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery (solution).swift similarity index 95% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial (solution).swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery (solution).swift index 7ae1f30ae89..93c82aae935 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial (solution).swift +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery (solution).swift @@ -19,12 +19,12 @@ import SwiftUI @main struct OUDSTutorialSandboxApp: App { - let themeTuning = Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true) + static let themeTuning = Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true) let myTheme = OrangeTheme(borders: MyOwnProviderOfBorderTokens(), colors: MyOwnProviderOfColorTokens(), fontFamily: "Menlo", - tuning: themeTuning) + tuning: Self.themeTuning) var body: some Scene { WindowGroup { @@ -165,7 +165,7 @@ struct ContentView: View { // MARK: - Custom tokens providers // WARNING: Can have side effects, use with care! -class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { +nonisolated class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { /// Some tokens have light and dark values used according to color scheme override var actionEnabledLight: ColorSemanticToken { @@ -178,7 +178,7 @@ class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { } } -class MyOwnProviderOfBorderTokens: OrangeThemeBorderSemanticTokensProvider { +nonisolated class MyOwnProviderOfBorderTokens: OrangeThemeBorderSemanticTokensProvider { override var widthThin: BorderWidthSemanticToken { BorderRawTokens.width75 diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-2-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-2-1.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-2-1.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-2-1.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-2-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-2-2.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-2-2.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-2-2.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-1.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-1.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-1.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-2.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-2.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-2.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-3.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-3.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-3.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-3.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-4.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-4.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-4.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-4.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-5.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-5.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-5.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-5.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-6.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-6.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-6.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-6.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-7.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-7.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-3-7.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-3-7.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-1.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-1.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-1.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-2.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-2.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-2.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-3.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-3.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-3.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-3.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-4.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-4.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-4-4.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-4-4.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-1.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-1.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-1.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-10.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-10.swift similarity index 85% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-10.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-10.swift index 452dded4218..115d23b71ab 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-10.swift +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-10.swift @@ -17,11 +17,11 @@ import SwiftUI @main struct OUDSTutorialSandboxApp: App { - let themeTuning = Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true) + static let themeTuning = Tuning(hasRoundedButtons: true, hasRoundedTextInputs: true, hasRoundedAlertMessages: true) let myTheme = OrangeTheme(borders: MyOwnProviderOfBorderTokens(), colors: MyOwnProviderOfColorTokens(), fontFamily: "Menlo", - tuning: themeTuning) + tuning: Self.themeTuning) var body: some Scene { WindowGroup { @@ -35,7 +35,7 @@ struct OUDSTutorialSandboxApp: App { /// Change the provider of semantic tokens of colors for the Orange theme /// Keep in mind colors are used everywhere in plenty of components /// so your changes can impact other elements -class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { +nonisolated class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { /// Some tokens have light and dark values used according to color scheme override var actionEnabledLight: ColorSemanticToken { @@ -51,7 +51,7 @@ class MyOwnProviderOfColorTokens: OrangeThemeColorSemanticTokensProvider { /// Change the provider of semantic tokens of border for the Orange theme /// Keep in mind borders are used everywhere in plenty of components /// so your changes can impact other elements -class MyOwnProviderOfBorderTokens: OrangeThemeBorderSemanticTokensProvider { +nonisolated class MyOwnProviderOfBorderTokens: OrangeThemeBorderSemanticTokensProvider { override var widthThin: BorderWidthSemanticToken { BorderRawTokens.width75 diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-2.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-2.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-2.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-3.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-3.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-3.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-3.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-4.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-4.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-4.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-4.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-5.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-5.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-5.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-5.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-6.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-6.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-6.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-6.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-7.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-7.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-7.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-7.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-8.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-8.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-8.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-8.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-9.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-9.swift similarity index 100% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/swift-samples/tutorial-5-9.swift rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Resources/swift-samples/tutorial-discovery-5-9.swift diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/Table Of Contents.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Table Of Contents (discovery).tutorial similarity index 76% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/Table Of Contents.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Table Of Contents (discovery).tutorial index b64aee6797a..f6fdcc5f8c0 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/Table Of Contents.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/Table Of Contents (discovery).tutorial @@ -1,5 +1,5 @@ @Tutorials(name: "Orange Unified Design System") { - @Intro(title: "Swift Package iOS Tutorial") { + @Intro(title: "Swift Package Discovery Tutorial") { Discovering a new framework can be exciting and scary. Learn how you can embed and use OUDS Swift Package. With this tutorial you will learn fundamental concepts of Orange Unified Design System and discover the layers of this framework. Theme, components, tokens... everything will be introduced! @@ -9,11 +9,11 @@ @Chapter(name: "Import of the Swift Package and choose its librairies") { In this chapter you will learn how to import the OUDS iOS Swift Package and which librairies it provides - you should choose for your needs + you should choose for your needs. @Image(source: "ic_unified_ds", alt: "Logo of OUDS") - @TutorialReference(tutorial: "doc:tutorial-1-package-and-librairies") + @TutorialReference(tutorial: "doc:tutorial-discovery-1-package-and-librairies") } @Chapter(name: "Preparation of the theme") { @@ -21,7 +21,7 @@ @Image(source: "ic_theme_intro", alt: "OUDS themes logo") - @TutorialReference(tutorial: "doc:tutorial-2-instanciate-theme") + @TutorialReference(tutorial: "doc:tutorial-discovery-2-instanciate-theme") } @Chapter(name: "Use of first components provided by OUDS") { @@ -29,7 +29,7 @@ @Image(source: "ic_component_intro", alt: "OUDS components logo") - @TutorialReference(tutorial: "doc:tutorial-3-use-first-components") + @TutorialReference(tutorial: "doc:tutorial-discovery-3-use-first-components") } @Chapter(name: "Richer and more original components of OUDS") { @@ -37,7 +37,7 @@ @Image(source: "ic_component_intro", alt: "Logo of OUDS") - @TutorialReference(tutorial: "doc:tutorial-4-use-other-components") + @TutorialReference(tutorial: "doc:tutorial-discovery-4-use-other-components") } @Chapter(name: "Typography, view modifiers and tokens") { @@ -45,7 +45,7 @@ @Image(source: "ic_design_token_intro", alt: "OUDS tokens logo") - @TutorialReference(tutorial: "doc:tutorial-5-styling-things") + @TutorialReference(tutorial: "doc:tutorial-discovery-5-styling-things") } @Chapter(name: "Go further with more ressources") { @@ -53,7 +53,7 @@ @Image(source: "ic_unified_ds", alt: "Logo of OUDS") - @TutorialReference(tutorial: "doc:tutorial-6-going-further") + @TutorialReference(tutorial: "doc:tutorial-discovery-6-going-further") } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-1-package-and-librairies.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-1-package-and-librairies.tutorial new file mode 100644 index 00000000000..62c21bd52b7 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-1-package-and-librairies.tutorial @@ -0,0 +1,104 @@ +@Tutorial(time: 10, projectFiles: "OUDS-Discovery-Tutorial.zip") { + @Intro(title: "Swift Package integration") { + OUDS iOS is exposed through an open source Swift Package hosted on GitHub, and provides several librairies for your needs. + These librairies help to split products and make users able to select only what they need. + SwiftUI is the only official supported framework for Apple platforms. + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + } + + @XcodeRequirement(title: "Xcode 26.2", destination: "https://developer.apple.com/download/") + + @Section(title: "Import the Swift Package and the libraries") { + + @ContentAndMedia { + OUDS for iOS is an open source Swift Package available on GitHub under MIT license. + The package and the librairies must be added through Xcode. + } + + @Steps { + @Step { + Using Xcode, in your **project package dependencies**, add a new **dependency**. + Search with the GitHub repository URL (https://github.com/Orange-OpenSource/ouds-ios), and select the *ouds-ios* dependency. + You can then choose the **dependency rule** you want. + 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) + and also the [GitHub releases](https://github.com/Orange-OpenSource/ouds-ios/releases). + Let's say you will use some beta version today, e.g. the version1.3.0-beta.2 + + @Image(source: "tutorial-discovery-1-ouds-swift-package", alt: "Description by Xcode of the OUDS Swift Package with its README preview") + } + + @Step { + Once you downloaded the package, you will see several librairies are available. + They can be embeded inside your **target** librairies. + Things are separated to let users integrate only what they need and embed the abre minimum of content. + The *OUDSThemesContract* library provides the main elements like the `OUDSThemeableView`. The theme contract is defined inside it. + *OUDSThemesOrange* provides the theme implementation for the Orange products, and contains also assets and all tokens for this theme. + *OUDSThemesSosh* provides the theme implementation for the Sosh products, and contains also assets and all tokens for this theme. + *OUDSThemesWireframe* provides the theme implementation for the Wireframe theme, which is a theme dedicated to mockups and prototypes. + *OUDSThemesOrangeCompact* provides the theme implementation for the Orange products but with constraints of sizes and spaces. + *OUDSComponents* contains the SwiftUI OUDS components defined with the Figma specifications, and also useful view modifers. + *OUDSTokensRaw*, *OUDSTokensSemantic* and *OUDSTokensComponents* are librairies defining and providing the tokens for low level (raw), + middle level (semantic) or component levels (high level). + *OUDSModules* is for modules or rich components with extra logic. + *OUDSFoundations* is dedicated to some utilities and shared logic. + + Add for example only the umbrella product merging all products mentioned above: *OUDSSwiftUI* + + @Image(source: "tutorial-discovery-1-ouds-libraries.png", alt: "Embed librairies inside target") + } + } + } + + @Assessments { + @MultipleChoice { + Which of these choices is correct? + + @Choice(isCorrect: true) { + I can contribute to OUDS using pull request + + @Justification(reaction: "That's right!") { + OUDS is open source, under MIT license, and hosted on GitHub. Of course you can contribute! + } + } + + @Choice(isCorrect: false) { + OUDS supports officialy all Apple OS like visionOS, tvOS, watchOS, iPadOS, iOS and also CarPlay. + + @Justification(reaction: "Try again!") { + The main supported targets are iOS / iPadOS. However we do our best to support macOS, visionOS, tvOS and watchOS. + CarPlay specific cases are not scoped yet. + } + } + + @Choice(isCorrect: false) { + OUDS provides UIKit components + + @Justification(reaction: "Try again!") { + OUDS supports only SwiftUI. + } + } + } + + @MultipleChoice { + Which imports of the OUDS Swift Package products can I choose? + + @Choice(isCorrect: true) { + Some of the available products depending to my needs, or only `OUDSSwiftUI` if I am very lazy and don't care about my app size. + + @Justification(reaction: "Correct!") { + You can import all products provided by the Swift Package, and tailor your choice to keep only the ones needed. + Even if we recommend to choose only the atomic products you need, the `OUDSSwiftUI` product wraps all of them. + } + } + + @Choice(isCorrect: false) { + None, only the Swift package dependency matter. + + @Justification(reaction: "Try again!") { + You need to chose the products the Swift package provides. + } + } + } + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-2-instanciate-theme.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-2-instanciate-theme.tutorial similarity index 83% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-2-instanciate-theme.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-2-instanciate-theme.tutorial index d89393c2df0..789ee0180f8 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-2-instanciate-theme.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-2-instanciate-theme.tutorial @@ -1,4 +1,4 @@ -@Tutorial(time: 15) { +@Tutorial(time: 15, projectFiles: "OUDS-Discovery-Tutorial.zip") { @Intro(title: "Instanciate and inject a theme") { The theme is exposed as one object which will be injected inside your SwiftUI view. The theme provides all tokens which defines in the end the rendering of everything. @@ -22,8 +22,8 @@ @Step { Define a basic `App` object using *SwiftUI*. Add inside a simple text - @Code(name: "Tutorial.swift", file: "tutorial-2-1.swift") { - @Image(source: "tutorial-2-1.png", alt: "A text displaying the \"Hello OUDS!\" message") + @Code(name: "Tutorial.swift", file: "tutorial-discovery-2-1.swift") { + @Image(source: "tutorial-discovery-2-1.png", alt: "A text displaying the \"Hello OUDS!\" message") } } @@ -34,8 +34,8 @@ Project must compile then. This is until today (API 0.20.0) the only way to instanciated and inject a theme. - @Code(name: "Tutorial.swift", file: "tutorial-2-2.swift") { - @Image(source: "tutorial-2-2.png", alt: "A text displaying the \"Hello OUDS!\" message") + @Code(name: "Tutorial.swift", file: "tutorial-discovery-2-2.swift") { + @Image(source: "tutorial-discovery-2-2.png", alt: "A text displaying the \"Hello OUDS!\" message") } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-3-use-first-components.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-3-use-first-components.tutorial similarity index 77% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-3-use-first-components.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-3-use-first-components.tutorial index f5a183ecaa6..76f9f3a7451 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-3-use-first-components.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-3-use-first-components.tutorial @@ -1,4 +1,4 @@ -@Tutorial(time: 30) { +@Tutorial(time: 30, projectFiles: "OUDS-Discovery-Tutorial.zip") { @Intro(title: "Use your first OUDS components") { OUDS provides components ready to be used, specified in Figma assets and preventing users to handle tokens. They are rendered thanks to the theme in use. @@ -19,7 +19,7 @@ @Step { First, prepare the `ContentView` by adding inside it a `ScrollView`. - @Code(name: "Tutorial.swift", file: "tutorial-3-1.swift", previousFile: "tutorial-2-2.swift") + @Code(name: "Tutorial.swift", file: "tutorial-discovery-3-1.swift", previousFile: "tutorial-discovery-2-2.swift") } @Step { @@ -31,8 +31,8 @@ Add such picker with three items inside. - @Code(name: "Content.swift", file: "tutorial-3-2.swift") { - @Image(source: "tutorial-3-2.png", alt: "A radio picker") + @Code(name: "Content.swift", file: "tutorial-discovery-3-2.swift") { + @Image(source: "tutorial-discovery-3-2.png", alt: "A radio picker") } } @@ -43,8 +43,8 @@ Add a checkbox item with only two states. - @Code(name: "Content.swift", file: "tutorial-3-3.swift") { - @Image(source: "tutorial-3-3.png", alt: "A radio picker and a checkbox item") + @Code(name: "Content.swift", file: "tutorial-discovery-3-3.swift") { + @Image(source: "tutorial-discovery-3-3.png", alt: "A radio picker and a checkbox item") } } @@ -54,8 +54,8 @@ Choose to add an instance of `OUDSHorizontalDivider`. - @Code(name: "Content.swift", file: "tutorial-3-4.swift") { - @Image(source: "tutorial-3-4.png", alt: "A radio picker, an horizontal divider and a checkbox item") + @Code(name: "Content.swift", file: "tutorial-discovery-3-4.swift") { + @Image(source: "tutorial-discovery-3-4.png", alt: "A radio picker, an horizontal divider and a checkbox item") } } @@ -66,8 +66,8 @@ Add a switch item, it will be used as a trick to force the change of the color scheme for the view for our future operations. You will then be able to see the automatic changes of colors when you switch the color scheme. - @Code(name: "Content.swift", file: "tutorial-3-5.swift") { - @Image(source: "tutorial-3-5.png", alt: "A radio picker, an horizontal divider, a checkbox item and a switch item") + @Code(name: "Content.swift", file: "tutorial-discovery-3-5.swift") { + @Image(source: "tutorial-discovery-3-5.png", alt: "A radio picker, an horizontal divider, a checkbox item and a switch item") } } @@ -76,8 +76,8 @@ Add an `OUDSLink` in the app and make it open the iOS documentation OUDS website. - @Code(name: "Content.swift", file: "tutorial-3-6.swift") { - @Image(source: "tutorial-3-6.png", alt: "A radio picker, an horizontal divider, a checkbox item, a switch item and a link") + @Code(name: "Content.swift", file: "tutorial-discovery-3-6.swift") { + @Image(source: "tutorial-discovery-3-6.png", alt: "A radio picker, an horizontal divider, a checkbox item, a switch item and a link") } } @@ -88,8 +88,8 @@ Let's add a button with some rules: if checkbox is not checked it is disabled. When tapped, change the style of the button during 5 seconds. - @Code(name: "Content.swift", file: "tutorial-3-7.swift") { - @Image(source: "tutorial-3-7.png", alt: "A radio picker, an horizontal divider, a checkbox item, a switch item, a link and a button") + @Code(name: "Content.swift", file: "tutorial-discovery-3-7.swift") { + @Image(source: "tutorial-discovery-3-7.png", alt: "A radio picker, an horizontal divider, a checkbox item, a switch item, a link and a button") } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-4-use-other-components.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-4-use-other-components.tutorial similarity index 83% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-4-use-other-components.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-4-use-other-components.tutorial index 882b69edf0d..234954abcba 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-4-use-other-components.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-4-use-other-components.tutorial @@ -1,4 +1,4 @@ -@Tutorial(time: 30) { +@Tutorial(time: 30, projectFiles: "OUDS-Discovery-Tutorial.zip") { @Intro(title: "Add more OUDS components") { Components can be similar to iOS native components, or can also be original and strongly related to Orange Unified Design System needs. @@ -20,8 +20,8 @@ Add three tags thanks to `OUDSTag` object. - @Code(name: "Content.swift", file: "tutorial-4-1.swift", previousFile: "tutorial-3-7.swift") { - @Image(source: "tutorial-4-1.png", alt: "Tags in top of formular") + @Code(name: "Content.swift", file: "tutorial-discovery-4-1.swift", previousFile: "tutorial-discovery-3-7.swift") { + @Image(source: "tutorial-discovery-4-1.png", alt: "Tags in top of formular") } } @@ -33,8 +33,8 @@ Add a group of chips for some topics the user must select. The picker is populated by an array of data, and the one we use as a `Binding` of array. The user can select all of the items. - @Code(name: "Content.swift", file: "tutorial-4-2.swift") { - @Image(source: "tutorial-4-2.png", alt: "Chips are now integrated inside a picker") + @Code(name: "Content.swift", file: "tutorial-discovery-4-2.swift") { + @Image(source: "tutorial-discovery-4-2.png", alt: "Chips are now integrated inside a picker") } } @@ -45,8 +45,8 @@ Add two text inputs: one to get the user name with a delete action, and one for an email address. Their values are exposed through `Binding` of `String`. - @Code(name: "Content.swift", file: "tutorial-4-3.swift") { - @Image(source: "tutorial-4-3.png", alt: "Texts inputs are very rich and available in lot of apps and formulars") + @Code(name: "Content.swift", file: "tutorial-discovery-4-3.swift") { + @Image(source: "tutorial-discovery-4-3.png", alt: "Texts inputs are very rich and available in lot of apps and formulars") } } @@ -58,8 +58,8 @@ Add a `OUDSColoredSurface` gathering the link, the button and the switch item. You will need to get the theme object for your first time so as to choose the color of the surface! The import of *OUDSTokensSemantic* is also necessary. Once your code is updated, compare the difference for the switch, the link and the button. Their style has changed! - @Code(name: "Content.swift", file: "tutorial-4-4.swift") { - @Image(source: "tutorial-4-4.png", alt: "The colored surfce changes the styles of some components") + @Code(name: "Content.swift", file: "tutorial-discovery-4-4.swift") { + @Image(source: "tutorial-discovery-4-4.png", alt: "The colored surfce changes the styles of some components") } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-5-styling-things.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-5-styling-things.tutorial similarity index 85% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-5-styling-things.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-5-styling-things.tutorial index 78534dbc945..e80c062ee0b 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-5-styling-things.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-5-styling-things.tutorial @@ -1,4 +1,4 @@ -@Tutorial(time: 30) { +@Tutorial(time: 30, projectFiles: "OUDS-Discovery-Tutorial.zip") { @Intro(title: "Styling things") { Even if components increase the identity of your apps, it is not enough. Typography, fonts and tokens are here to improve that. @@ -20,8 +20,8 @@ @Step { Get the new source code for this chapter. - @Code(name: "Tutorial.swift", file: "tutorial-5-1.swift") { - @Image(source: "tutorial-5-1.png", alt: "Cleaned source code for tutorial") + @Code(name: "Tutorial.swift", file: "tutorial-discovery-5-1.swift") { + @Image(source: "tutorial-discovery-5-1.png", alt: "Cleaned source code for tutorial") } } @@ -38,8 +38,8 @@ Try to apply spacings and sizes in the app. - @Code(name: "ContentView.swift", file: "tutorial-5-2.swift", previousFile: "tutorial-5-1.swift") { - @Image(source: "tutorial-5-2.png", alt: "Things are better with spacings and sizes") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-2.swift", previousFile: "tutorial-discovery-5-1.swift") { + @Image(source: "tutorial-discovery-5-2.png", alt: "Things are better with spacings and sizes") } } @@ -49,8 +49,8 @@ Try to apply a raw token of color to a text field. - @Code(name: "ContentView.swift", file: "tutorial-5-3.swift") { - @Image(source: "tutorial-5-3.png", alt: "Raw tokens can be used, even if not recommended") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-3.swift") { + @Image(source: "tutorial-discovery-5-3.png", alt: "Raw tokens can be used, even if not recommended") } } } @@ -69,8 +69,8 @@ Try to change these colors in the title of the view and the formular. - @Code(name: "ContentView.swift", file: "tutorial-5-4.swift", previousFile: "tutorial-5-3.swift") { - @Image(source: "tutorial-5-4.png", alt: "Using OUDS view modifiers prevents developers to manage light and dark color scheme") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-4.swift", previousFile: "tutorial-discovery-5-3.swift") { + @Image(source: "tutorial-discovery-5-4.png", alt: "Using OUDS view modifiers prevents developers to manage light and dark color scheme") } } @@ -79,8 +79,8 @@ Try to apply an elevation to the formular. - @Code(name: "ContentView.swift", file: "tutorial-5-5.swift") { - @Image(source: "tutorial-5-5.png", alt: "Elevations can be lovely effects on cards or square-shaped items") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-5.swift") { + @Image(source: "tutorial-discovery-5-5.png", alt: "Elevations can be lovely effects on cards or square-shaped items") } } @@ -89,8 +89,8 @@ Let's add a border effect to the formular. - @Code(name: "ContentView.swift", file: "tutorial-5-6.swift") { - @Image(source: "tutorial-5-6.png", alt: "Borders are useful to make things more visible") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-6.swift") { + @Image(source: "tutorial-discovery-5-6.png", alt: "Borders are useful to make things more visible") } } @@ -99,8 +99,8 @@ Choose some view modifiers of typography and apply them. - @Code(name: "ContentView.swift", file: "tutorial-5-7.swift") { - @Image(source: "tutorial-5-7.png", alt: "Typography makes things more profesional") + @Code(name: "ContentView.swift", file: "tutorial-discovery-5-7.swift") { + @Image(source: "tutorial-discovery-5-7.png", alt: "Typography makes things more profesional") } } @@ -109,8 +109,8 @@ These elements must be defined during the theme initialization, let's try it! - @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-5-8.swift", previousFile: "tutorial-5-1.swift") { - @Image(source: "tutorial-5-8.png", alt: "Rounded corners are often appreciated") + @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-discovery-5-8.swift", previousFile: "tutorial-discovery-5-1.swift") { + @Image(source: "tutorial-discovery-5-8.png", alt: "Rounded corners are often appreciated") } } @@ -122,8 +122,8 @@ Let's use *Menlo* for the app, which is available in iOS. - @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-5-9.swift") { - @Image(source: "tutorial-5-9.png", alt: "Fonts can be fun!") + @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-discovery-5-9.swift") { + @Image(source: "tutorial-discovery-5-9.png", alt: "Fonts can be fun!") } } } @@ -141,7 +141,7 @@ Do not hesitate to test new API and integrate other components! - @Image(source: "tutorial-light-dark (result).png", alt: "Tutorial app in light and dark mode") + @Image(source: "tutorial-discovery-light-dark (result).png", alt: "Tutorial app in light and dark mode") } } } @@ -162,8 +162,8 @@ Then, override the tokens you want (read the documentation to find where they are), and apply the providers at theme init. Change for exemple tokens of borders and colors, and compare what are the changes and where. - @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-5-10.swift", previousFile: "tutorial-5-9.swift") { - @Image(source: "tutorial-5-10.png", alt: "Change tokens, break everything, here is the artist life!") + @Code(name: "OUDSTutorialSandboxApp.swift", file: "tutorial-discovery-5-10.swift", previousFile: "tutorial-discovery-5-9.swift") { + @Image(source: "tutorial-discovery-5-10.png", alt: "Change tokens, break everything, here is the artist life!") } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-6-going-further.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-6-going-further.tutorial similarity index 80% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-6-going-further.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-6-going-further.tutorial index 50e6a15ad57..1f7c4b78661 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-6-going-further.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery/tutorial-discovery-6-going-further.tutorial @@ -1,6 +1,6 @@ @Tutorial(time: 10) { @Intro(title: "Going further with more resources") { - 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. + Since you have learned how OUDS works with theme, themeable view, components, tuning and view modifiers, it is time now to discover some online resources. @Image(source: "ic_theme_intro", alt: "OUDS themes logo") } @@ -20,7 +20,7 @@ You can get it at [ios.unified-design-system.orange.com](https://ios.unified-design-system.orange.com/) - @Image(source: "tutorial-6-1.png", alt: "Apple-fashioned technical user documentation") + @Image(source: "tutorial-discovery-6-1.png", alt: "Apple-fashioned technical user documentation") } @Step { @@ -29,7 +29,7 @@ Go to the website and learn things at [unified-design-system.orange.com](https://unified-design-system.orange.com/) - @Image(source: "tutorial-6-2.png", alt: "OUDS official web site") + @Image(source: "tutorial-discovery-6-2.png", alt: "OUDS official web site") } @Step { @@ -37,7 +37,7 @@ Have a look [on the wiki](https://github.com/Orange-OpenSource/ouds-ios/wiki) to discover how OUDS works. - @Image(source: "tutorial-6-3.png", alt: "The wiki with plenty of details about processes, releases, API and technical choices") + @Image(source: "tutorial-discovery-6-3.png", alt: "The wiki with plenty of details about processes, releases, API and technical choices") } @Step { @@ -45,7 +45,7 @@ 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) - @Image(source: "tutorial-6-4.png", alt: "The repository of the design system toolbox app") + @Image(source: "tutorial-discovery-6-4.png", alt: "The repository of the design system toolbox app") } @Step { @@ -53,7 +53,7 @@ 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)! - @Image(source: "tutorial-6-5.png", alt: "We love write things and discuss, come say hi and chat about anything!") + @Image(source: "tutorial-discovery-6-5.png", alt: "We love write things and discuss, come say hi and chat about anything!") } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/OUDS-Onboarding-Tutorial.zip b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/OUDS-Onboarding-Tutorial.zip new file mode 100644 index 00000000000..90f05d90fb1 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/OUDS-Onboarding-Tutorial.zip differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-libraries.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-libraries.png new file mode 100644 index 00000000000..696865536e1 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-libraries.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-swift-package.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-swift-package.png new file mode 100644 index 00000000000..59b7ebfa422 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-1-ouds-swift-package.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-1.png new file mode 100644 index 00000000000..4c244a03e81 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-1.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-3.png new file mode 100644 index 00000000000..81737e56d77 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-3.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-4.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-4.png new file mode 100644 index 00000000000..8fa49da447b Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-4.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-5.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-5.png new file mode 100644 index 00000000000..7593839ddcb Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-5.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-6.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-6.png new file mode 100644 index 00000000000..d80c00afd89 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-6.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-7.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-7.png new file mode 100644 index 00000000000..2e64deb72df Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-7.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-8.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-8.png new file mode 100644 index 00000000000..a0d498766ee Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-2-8.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-1.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-1.png new file mode 100644 index 00000000000..c8b405a23af Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-1.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-2.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-2.png new file mode 100644 index 00000000000..dc389cefd7b Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-2.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-3.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-3.png new file mode 100644 index 00000000000..2bf3e8c043c Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-3.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-6.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-6.png new file mode 100644 index 00000000000..9b6e12006f7 Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-6.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-7.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-7.png new file mode 100644 index 00000000000..b0a82c1b35b Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-7.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-8-LiquidGlass.png b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-8-LiquidGlass.png new file mode 100644 index 00000000000..0531cd6b98a Binary files /dev/null and b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/images/tutorial-onboarding-3-8-LiquidGlass.png differ diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding (solution).swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding (solution).swift new file mode 100644 index 00000000000..7958c21d1eb --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding (solution).swift @@ -0,0 +1,292 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +// MARK: - Info Card + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + @Environment(\.theme) private var theme + @Environment(\.horizontalSizeClass) private var horizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + + var body: some View { + VStack(alignment: .leading, spacing: theme.spaces.fixedNone) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + .frame(maxWidth: .infinity, alignment: .leading) + .headingMedium(theme) + .oudsForegroundColor(theme.colors.contentBrandPrimary) + .padding(.top, theme.gridMargin(for: oudsHorizontalSizeClass)) + + Text(subtitle) + .headingXLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + .padding(.vertical, theme.spaces.scaled2xsmall.dimension(for: horizontalSizeClass ?? .regular)) + + Text(description) + .bodyDefaultLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + + Spacer(minLength: theme.spaces.scaledLarge.dimension(for: verticalSizeClass ?? .regular)) + + OUDSButton(text: buttonLabel, appearance: .strong) {} + + Spacer(minLength: theme.spaces.fixedMedium) + } + .oudsGridMargin(.horizontal) + } +} + +/* + #Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() + } + */ + +// MARK: - Component Showcase + +struct ComponentShowcase: View { + + @State private var selectedComponentGroup: ComponentGroup = .control + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + VStack(spacing: theme.spaces.scaledMedium.dimension(for: verticalSizeClass ?? .regular)) { + Text("Explore some OUDS components") + .frame(maxWidth: .infinity, alignment: .leading) + .headingLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + .padding(.horizontal, gridMargin) + + CategorySelector(selectedComponentGroup: $selectedComponentGroup) + } + .padding(.vertical, gridMargin) + .oudsBackground(theme.colors.bgSecondary) + + // Use opacity to reserve space vertically, otherwise height change when changing group + ZStack { + let controlOpacity = selectedComponentGroup == .control ? 1.0 : 0.0 + let indicatorOpacity = selectedComponentGroup == .indicator ? 1.0 : 0.0 + let navigationOpacity = selectedComponentGroup == .navigation ? 1.0 : 0.0 + + Control().opacity(controlOpacity) + Indicator().opacity(indicatorOpacity) + Navigation().opacity(navigationOpacity) + } + .padding(.all, gridMargin) + } + } + + private var gridMargin: Double { + theme.gridMargin(for: oudsHorizontalSizeClass) + } +} + +enum ComponentGroup: CaseIterable, CustomStringConvertible { + case control, indicator, navigation + + var description: String { + switch self { + case .control: "Control" + case .indicator: "Indicator" + case .navigation: "Navigation" + } + } +} + +struct CategorySelector: View { + + @Binding var selectedComponentGroup: ComponentGroup + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + + var body: some View { + ScrollView(.horizontal, showsIndicators: false) { + HStack(spacing: theme.spaces.fixedSmall) { + ForEach(ComponentGroup.allCases, id: \.self) { group in + OUDSFilterChip(text: group.description, selected: group == selectedComponentGroup) { + selectedComponentGroup = group + } + } + } + .padding(.horizontal, theme.gridMargin(for: oudsHorizontalSizeClass)) + } + } +} + +struct Control: View { + + @State private var text: String = "" + @State private var isOn: Bool = true + @Environment(\.theme) private var theme + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + OUDSCheckboxItem("Checkbox item", isOn: $isOn) + OUDSRadioItem("Radio button item", isOn: $isOn) + OUDSSwitchItem("Switch item", isOn: $isOn) + OUDSTextInput(label: "Text input", text: $text) + OUDSPasswordInput(label: "Password input", password: $text) + } + } +} + +struct Indicator: View { + + @Environment(\.theme) private var theme + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.scaledMedium.dimension(for: verticalSizeClass ?? .regular)) { + HStack(spacing: theme.spaces.fixedSmall) { + OUDSBadge(accessibilityLabel: "Badge positive", status: .positive, size: .large) + OUDSBadge(count: 1, accessibilityLabel: "Badge Count", status: .negative, size: .large) + OUDSBadge(status: .info, accessibilityLabel: "Badge Info", size: .large) + } + } + } +} + +struct Navigation: View { + + @Environment(\.theme) private var theme + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + OUDSLink(text: "Link", indicator: .next) {} + OUDSLink(text: "Link", indicator: .back) {} + OUDSLink(text: "Read OUDS Documentation") { + UIApplication.shared.open(URL(string: "https://unified-design-system.orange.com")!) + } + } + } +} + +/* + #Preview { + ScrollView { + ComponentShowcase().orangePreview() + } + } + */ + +// MARK: - Home Screen + +struct HomeScreen: View { + + @Environment(\.colorScheme) private var colorScheme: ColorScheme + @Environment(\.theme) private var theme + + var body: some View { + ScrollView { + VStack { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + + InfoCard( + assetName: "Picture1", + title: "Large Public Institutions", + subtitle: "Grow your company with", + description: "The Orange Polska Group is in the TOP 3 of ICT service leaders in Poland according to the 2000 Computerworld report. See how we can .- -Work together.", + buttonLabel: "Contact us") + .environment(\.colorScheme, .dark) + .oudsBackground(theme.colors.bgInverseLow) + } + + ComponentShowcase() + } + .oudsBackground(theme.colors.bgPrimary) + } +} + +/* + #Preview { + HomeScreen().orangePreview() + } + */ + +// MARK: - Content View + +struct ContentView: View { + + private let theme = OrangeTheme() + + var body: some View { + OUDSThemeableView(theme: theme) { + // Initializer for iOS 18- compatibility + // Images are available in project assets + // Tags allow to make the binding and display the selected tab indicator for iOS 18- + OUDSTabBar(selected: 0, count: 3) { + HomeScreen().tabItem { + Label("Home", image: "Home") + } + .tag(0) + + Text("E shop Screen").tabItem { + Label("E-Shop", image: "E-Shop") + } + .tag(1) + + Text("Contact Screen").tabItem { + Label("Contact", image: "Contact") + } + .tag(2) + } + } + } +} + +/* + #Preview { + ContentView() + .orangePreview() + } + */ + +// MARK: App + +@main +struct OUDS_Onboarding_TutorialApp: App { + var body: some Scene { + WindowGroup { + ContentView() + } + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-1.swift new file mode 100644 index 00000000000..2da9a724d2b --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-1.swift @@ -0,0 +1,36 @@ +// +// 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 SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + var body: some View { + EmptyView() + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-2.swift new file mode 100644 index 00000000000..0e198736656 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-2.swift @@ -0,0 +1,38 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + var body: some View { + EmptyView() + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-3.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-3.swift new file mode 100644 index 00000000000..380fe39f07a --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-3.swift @@ -0,0 +1,48 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + var body: some View { + VStack(alignment: .leading) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + + Text(subtitle) + + Text(description) + } + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-4.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-4.swift new file mode 100644 index 00000000000..7d95b3a1b0b --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-4.swift @@ -0,0 +1,54 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + @Environment(\.theme) private var theme + + var body: some View { + VStack(alignment: .leading) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + .frame(maxWidth: .infinity, alignment: .leading) + .headingMedium(theme) + + Text(subtitle) + .headingXLarge(theme) + + Text(description) + .bodyDefaultLarge(theme) + } + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-5.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-5.swift new file mode 100644 index 00000000000..78f5996a295 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-5.swift @@ -0,0 +1,57 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + @Environment(\.theme) private var theme + + var body: some View { + VStack(alignment: .leading) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + .frame(maxWidth: .infinity, alignment: .leading) + .headingMedium(theme) + .oudsForegroundColor(theme.colors.contentBrandPrimary) + + Text(subtitle) + .headingXLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + + Text(description) + .bodyDefaultLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + } + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-6.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-6.swift new file mode 100644 index 00000000000..74513f922b2 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-6.swift @@ -0,0 +1,59 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + @Environment(\.theme) private var theme + + var body: some View { + VStack(alignment: .leading) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + .frame(maxWidth: .infinity, alignment: .leading) + .headingMedium(theme) + .oudsForegroundColor(theme.colors.contentBrandPrimary) + + Text(subtitle) + .headingXLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + + Text(description) + .bodyDefaultLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + + OUDSButton(text: buttonLabel, appearance: .strong) {} + } + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-7.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-7.swift new file mode 100644 index 00000000000..780b935f20a --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-7.swift @@ -0,0 +1,69 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct InfoCard: View { + + let assetName: String + let title: String + let subtitle: String + let description: String + let buttonLabel: String + + @Environment(\.theme) private var theme + @Environment(\.horizontalSizeClass) private var horizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + + var body: some View { + VStack(alignment: .leading, spacing: theme.spaces.fixedNone) { + Image(assetName, bundle: .main) + .resizable() + .aspectRatio(contentMode: .fit) + + Text(title) + .frame(maxWidth: .infinity, alignment: .leading) + .headingMedium(theme) + .oudsForegroundColor(theme.colors.contentBrandPrimary) + .padding(.top, theme.gridMargin(for: oudsHorizontalSizeClass)) + + Text(subtitle) + .headingXLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + .padding(.vertical, theme.spaces.scaled2xsmall.dimension(for: horizontalSizeClass ?? .regular)) + + Text(description) + .bodyDefaultLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + + Spacer(minLength: theme.spaces.scaledLarge.dimension(for: verticalSizeClass ?? .regular)) + + OUDSButton(text: buttonLabel, appearance: .strong) {} + + Spacer(minLength: theme.spaces.fixedMedium) + } + .oudsGridMargin(.horizontal) + } +} + +#Preview { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-8.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-8.swift new file mode 100644 index 00000000000..aa9771627dd --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-2-8.swift @@ -0,0 +1,47 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct HomeScreen: View { + + @Environment(\.colorScheme) private var colorScheme: ColorScheme + @Environment(\.theme) private var theme + + var body: some View { + ScrollView { + VStack { + InfoCard( + assetName: "Picture2", + title: "Orange for the sector", + subtitle: "A complete offer for Institutions", + description: "Our experience as a partner in the digital transformation of companies and institutions guarantees the high efficiency of the services provided.", + buttonLabel: "Transmission") + + InfoCard( + assetName: "Picture1", + title: "Large Public Institutions", + subtitle: "Grow your company with", + description: "The Orange Polska Group is in the TOP 3 of ICT service leaders in Poland according to the 2000 Computerworld report. See how we can .- -Work together.", + buttonLabel: "Contact us") + .environment(\.colorScheme, .dark) + .oudsBackground(theme.colors.bgInverseLow) + } + } + } +} + +#Preview { + HomeScreen().orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-1.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-1.swift new file mode 100644 index 00000000000..f3a19a1ec22 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-1.swift @@ -0,0 +1,36 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct Control: View { + + @State private var text: String = "" + @State private var isOn: Bool = true + @Environment(\.theme) private var theme + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + OUDSCheckboxItem("Checkbox item", isOn: $isOn) + OUDSRadioItem("Radio button item", isOn: $isOn) + OUDSSwitchItem("Switch item", isOn: $isOn) + OUDSTextInput(label: "Text input", text: $text) + OUDSPasswordInput(label: "Password input", password: $text) + } + } +} + +#Preview { + Control().orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-2.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-2.swift new file mode 100644 index 00000000000..ae17a7eef76 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-2.swift @@ -0,0 +1,37 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct Indicator: View { + + @Environment(\.theme) private var theme + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.scaledMedium.dimension(for: verticalSizeClass ?? .regular)) { + HStack(spacing: theme.spaces.fixedSmall) { + OUDSBadge(accessibilityLabel: "Badge positive", status: .positive, size: .large) + OUDSBadge(count: 1, accessibilityLabel: "Badge Count", status: .negative, size: .large) + OUDSBadge(status: .info, accessibilityLabel: "Badge Info", size: .large) + } + } + } +} + +#Preview { + ScrollView { + Indicator().orangePreview() + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-3.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-3.swift new file mode 100644 index 00000000000..47542d30281 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-3.swift @@ -0,0 +1,37 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct Navigation: View { + + @Environment(\.theme) private var theme + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + OUDSLink(text: "Link", indicator: .next) {} + OUDSLink(text: "Link", indicator: .back) {} + OUDSLink(text: "Read OUDS Documentation") { + UIApplication.shared.open(URL(string: "https://unified-design-system.orange.com")!) + } + } + } +} + +#Preview { + ScrollView { + Navigation().orangePreview() + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-4.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-4.swift new file mode 100644 index 00000000000..1dc33bf0b13 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-4.swift @@ -0,0 +1,26 @@ +// +// 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 SwiftUI + +enum ComponentGroup: CaseIterable, CustomStringConvertible { + case control, indicator, navigation + + var description: String { + switch self { + case .control: "Control" + case .indicator: "Indicator" + case .navigation: "Navigation" + } + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-5.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-5.swift new file mode 100644 index 00000000000..2939c2ee6e5 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-5.swift @@ -0,0 +1,47 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +enum ComponentGroup: CaseIterable, CustomStringConvertible { + case control, indicator, navigation + + var description: String { + switch self { + case .control: "Control" + case .indicator: "Indicator" + case .navigation: "Navigation" + } + } +} + +struct CategorySelector: View { + + @Binding var selectedComponentGroup: ComponentGroup + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + + var body: some View { + ScrollView(.horizontal, showsIndicators: false) { + HStack(spacing: theme.spaces.fixedSmall) { + ForEach(ComponentGroup.allCases, id: \.self) { group in + OUDSFilterChip(text: group.description, selected: group == selectedComponentGroup) { + selectedComponentGroup = group + } + } + } + .padding(.horizontal, theme.gridMargin(for: oudsHorizontalSizeClass)) + } + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-6.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-6.swift new file mode 100644 index 00000000000..37a933e3199 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-6.swift @@ -0,0 +1,93 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +enum ComponentGroup: CaseIterable, CustomStringConvertible { + case control, indicator, navigation + + var description: String { + switch self { + case .control: "Control" + case .indicator: "Indicator" + case .navigation: "Navigation" + } + } +} + +struct CategorySelector: View { + + @Binding var selectedComponentGroup: ComponentGroup + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + + var body: some View { + ScrollView(.horizontal, showsIndicators: false) { + HStack(spacing: theme.spaces.fixedSmall) { + ForEach(ComponentGroup.allCases, id: \.self) { group in + OUDSFilterChip(text: group.description, selected: group == selectedComponentGroup) { + selectedComponentGroup = group + } + } + } + .padding(.horizontal, theme.gridMargin(for: oudsHorizontalSizeClass)) + } + } +} + +struct ComponentShowcase: View { + + @State private var selectedComponentGroup: ComponentGroup = .control + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var oudsHorizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + + var body: some View { + VStack(spacing: theme.spaces.fixedNone) { + VStack(spacing: theme.spaces.scaledMedium.dimension(for: verticalSizeClass ?? .regular)) { + Text("Explore some OUDS components") + .frame(maxWidth: .infinity, alignment: .leading) + .headingLarge(theme) + .oudsForegroundColor(theme.colors.contentDefault) + .padding(.horizontal, gridMargin) + + CategorySelector(selectedComponentGroup: $selectedComponentGroup) + } + .padding(.vertical, gridMargin) + .oudsBackground(theme.colors.bgSecondary) + + // Use opacity to reserve space vertically, otherwise height change when changing group + ZStack { + let controlOpacity = selectedComponentGroup == .control ? 1.0 : 0.0 + let indicatorOpacity = selectedComponentGroup == .indicator ? 1.0 : 0.0 + let navigationOpacity = selectedComponentGroup == .navigation ? 1.0 : 0.0 + + Control().opacity(controlOpacity) + Indicator().opacity(indicatorOpacity) + Navigation().opacity(navigationOpacity) + } + .padding(.all, gridMargin) + } + } + + private var gridMargin: Double { + theme.gridMargin(for: oudsHorizontalSizeClass) + } +} + +#Preview { + ScrollView { + ComponentShowcase().orangePreview() + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-7.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-7.swift new file mode 100644 index 00000000000..010927c1f02 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-7.swift @@ -0,0 +1,31 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct ContentView: View { + + private let theme = OrangeTheme() + + var body: some View { + OUDSThemeableView(theme: theme) { + HomeScreen() + } + } +} + +#Preview { + ContentView() + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-8.swift b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-8.swift new file mode 100644 index 00000000000..9dab98647af --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Resources/swift-samples/tutorial-onboarding-3-8.swift @@ -0,0 +1,46 @@ +// +// 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 OUDSSwiftUI +import SwiftUI + +struct ContentView: View { + + private let theme = OrangeTheme() + + var body: some View { + OUDSThemeableView(theme: theme) { + OUDSTabBar(selected: 0, count: 3) { + HomeScreen().tabItem { + Label("Home", image: "Home") + } + .tag(0) + + Text("E shop Screen").tabItem { + Label("E-Shop", image: "E-Shop") + } + .tag(1) + + Text("Contact Screen").tabItem { + Label("Contact", image: "Contact") + } + .tag(2) + } + } + } +} + +#Preview { + ContentView() + .orangePreview() +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Table Of Contents (onboarding).tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Table Of Contents (onboarding).tutorial new file mode 100644 index 00000000000..18d685ae6fc --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/Table Of Contents (onboarding).tutorial @@ -0,0 +1,43 @@ +@Tutorials(name: "Orange Unified Design System") { + @Intro(title: "Swift Package Onboarding Tutorial") { + Discovering a new framework can be exciting and scary. + With this tutorial, you will learn how to embed OUDS Swift Package and define views tailored for your brand. + It has beend esigned for local events and meetups. + Let's play! + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + } + + @Chapter(name: "Import of the Swift Package and choose its librairies") { + In this chapter you will learn how to import the OUDS iOS Swift Package and which librairies it provides + you should choose for your needs. + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + + @TutorialReference(tutorial: "doc:tutorial-onboarding-1-package-and-librairies") + } + + @Chapter(name: "Define information cards") { + 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. + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + + @TutorialReference(tutorial: "doc:tutorial-onboarding-2-nice-and-clear-view") + } + + @Chapter(name: "Components showcases") { + Since you discovered tokens, colors, spacings, and view modifiers, now it's time to integrate and play with some components! + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + + @TutorialReference(tutorial: "doc:tutorial-onboarding-3-components-showcase") + } + + @Chapter(name: "Go further with more ressources") { + You can have questions and issues, and there are resources online. Let's see that together. + + @Image(source: "ic_unified_ds", alt: "Logo of OUDS") + + @TutorialReference(tutorial: "doc:tutorial-onboarding-4-going-further") + } +} diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-1-package-and-librairies.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-1-package-and-librairies.tutorial similarity index 90% rename from OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-1-package-and-librairies.tutorial rename to OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-1-package-and-librairies.tutorial index 01a4e0a0f1e..c8c232242d8 100644 --- a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial/tutorial-1-package-and-librairies.tutorial +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-1-package-and-librairies.tutorial @@ -1,8 +1,8 @@ -@Tutorial(time: 10) { +@Tutorial(time: 10, projectFiles: "OUDS-Onboarding-Tutorial.zip") { @Intro(title: "Swift Package integration") { OUDS iOS is exposed through an open source Swift Package hosted on GitHub, and provides several librairies for your needs. These librairies help to split products and make users able to select only what they need. - SwiftUI is the only official supported framework. + SwiftUI is the only official supported framework for Apple platforms. @Image(source: "ic_unified_ds", alt: "Logo of OUDS") } @@ -23,8 +23,10 @@ You can then choose the **dependency rule** you want. 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) and also the [GitHub releases](https://github.com/Orange-OpenSource/ouds-ios/releases). + + Let's say you will use the some beta version, here 1.3.0-beta.2 - @Image(source: "tutorial-1-ouds-swift-package", alt: "Description by Xcode of the OUDS Swift Package woth its README preview") + @Image(source: "tutorial-onboarding-1-ouds-swift-package", alt: "Description by Xcode of the OUDS Swift Package with its README preview") } @Step { @@ -44,7 +46,7 @@ Add for example only the umbrella product merging all products mentioned above: *OUDSSwiftUI* - @Image(source: "tutorial-1-ouds-libraries.png", alt: "Embed librairies inside target") + @Image(source: "tutorial-onboarding-1-ouds-libraries.png", alt: "Embed librairies inside target") } } } @@ -92,10 +94,10 @@ } @Choice(isCorrect: false) { - None, only the Swift package dependency matter + None, only the Swift package dependency matter. @Justification(reaction: "Try again!") { - You need to chose the products the Swift package provides + You need to chose the products the Swift package provides. } } } diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-2-nice-and-clear-view.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-2-nice-and-clear-view.tutorial new file mode 100644 index 00000000000..7f50b7b0ffe --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-2-nice-and-clear-view.tutorial @@ -0,0 +1,145 @@ +@Tutorial(time: 45, projectFiles: "OUDS-Onboarding-Tutorial.zip") { + @Intro(title: "Define information cards") { + Let's suppose we want to define a view for corporate apps with headings, texts, buttons and images. + How can we do that? + + @Image(source: "ic_theme_intro", alt: "OUDS themes logo") + } + + @XcodeRequirement(title: "Xcode 26.2", destination: "https://developer.apple.com/download/") + + @Section(title: "Define the view basics") { + + @ContentAndMedia { + Before designing awesome SwiftUI view with OUDS, we need to write before the properties of such view. + } + + @Steps { + @Step { + Define a basic `InfoCard` `View`, it must have an asset name to load as image, a title, a subtitle, a description and a label for the button. + Add also the Xcode `#Preview` macro to display the view, here of course it will be empty. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-1.swift") { + @Image(source: "tutorial-onboarding-2-1.png", alt: "An empty view previewed in Xcode") + } + } + + @Step { + OUDS library provides view modifiers to be used in Xcode previews macros. + It allows to apply the theme you want in the view + + Supposing we will work with Orange theme here, apply the `orangePreview()` view modifier. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-2.swift") { + @Image(source: "tutorial-onboarding-2-1.png", alt: "An empty view previewed in Xcode") + } + } + + @Step { + Now, use the properties you defined in the Xcode preview, and display them in your `InfoCard` `View`. + + Use a `VStack` containing `Image` and `Text` `View` objects. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-3.swift") { + @Image(source: "tutorial-onboarding-2-3.png", alt: "A view with image and texts without styles") + } + } + + @Step { + You may want to apply typography on texts. These effects will show most important content and bring meanings. + You can have a look on the [available typography view modifiers](https://ios.unified-design-system.orange.com/documentation/oudscomponents/swiftuicore/view), which can be applied on `View` object. + + For the *title* with want a *medium heading*, an *XL heading* for the *subtitle* and a *large default body* for the *description*. You will need to get the *theme* object throw the dedicated environment variable to give it to the view modifiers. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-4.swift") { + @Image(source: "tutorial-onboarding-2-4.png", alt: "A view with image and texts with typography styles") + } + } + + @Step { + 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*. + + For all texts, change the *foreground color*: apply *contentBrandPrimary* for the *title*, *contentDefault* for the subtitle and also the *description*. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-5.swift") { + @Image(source: "tutorial-onboarding-2-5.png", alt: "A view with image and texts with typography styles and colors") + } + } + + @Step { + 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*. + + 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. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-6.swift") { + @Image(source: "tutorial-onboarding-2-6.png", alt: "A view with image, texts and a strong button") + } + } + + @Step { + 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). + 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`. + In addition, OUDS provides view modifiers to define *grid margins* on a view depending to a *size class*. + + 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*. + + @Code(name: "InfoCard.swift", file: "tutorial-onboarding-2-7.swift") { + @Image(source: "tutorial-onboarding-2-7.png", alt: "A view with image, texts, button and spacings") + } + } + + @Step { + It is possible to force the *color scheme* of your view with *SwiftUI* and apply a *color token* as background which will vary depending to this scheme. + + Define an `HomeView` with two `InfoCard` `View` objects. For the second view, for to *dark color scheme* and apply `theme.colors.bgInverseLow` background color. + + @Code(name: "HomeView.swift", file: "tutorial-onboarding-2-8.swift") { + @Image(source: "tutorial-onboarding-2-8.png", alt: "Cards with ligh and dark color schemes") + } + } + } + } + + @Assessments { + @MultipleChoice { + Where can I find tokens? + + @Choice(isCorrect: true) { + Inside tokens providers exposed by the theme + + @Justification(reaction: "That's right!") { + Yes! Get the theme through environment variable and use its providers + } + } + + @Choice(isCorrect: false) { + Nowhere, I must define my own + + @Justification(reaction: "Try again!") { + Nope! All tokens are defined and provided through OUDS library + } + } + } + + @MultipleChoice { + How can I get the theme to apply? + + @Choice(isCorrect: false) { + I must instanciate it every time I need + + @Justification(reaction: "False!") { + The theme is provided through an environment object, instanciated thanks to a preview view modifier or specific view. + } + } + + @Choice(isCorrect: true) { + Using an environment value + + @Justification(reaction: "Congrats!") { + Theme is exposed as environment object, available within views for example. + } + } + } + } +} + diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-3-components-showcase.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-3-components-showcase.tutorial new file mode 100644 index 00000000000..0910b94fbda --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-3-components-showcase.tutorial @@ -0,0 +1,174 @@ +@Tutorial(time: 60, projectFiles: "OUDS-Onboarding-Tutorial.zip") { + @Intro(title: "Components showcase") { + Now you are ready to use more components than a simple button! + + @Image(source: "ic_theme_intro", alt: "OUDS themes logo") + } + + @XcodeRequirement(title: "Xcode 26.2", destination: "https://developer.apple.com/download/") + + @Section(title: "Discover main components") { + + @ContentAndMedia { + 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). + For exemple, in *control* family you will find *checkboxes*, *radio buttons*, *switch items* and some *inputs* fields. + *Layouts* provides *dividers*, *buttons* are in *actions* group, *bullet lists* in *display* family. + } + + @Steps { + @Step { + Define a basic `Control` `View` with in its *body* a `VStack` with *theme.spaces.fixedNone* spacing. + 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). + Do not forget the Xcode preview. + + @Code(name: "Control.swift", file: "tutorial-onboarding-3-1.swift") { + @Image(source: "tutorial-onboarding-3-1.png", alt: "A simple view with some component inside") + } + } + + @Step { + OUDS provides also components as *indicators* like *badges* and *tags*. + 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. + Add inside [badges](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbadge/): do not hesitate to change their *status* and *size*. + Make your tests with the Xcode preview. + + @Code(name: "Indicator.swift", file: "tutorial-onboarding-3-2.swift") { + @Image(source: "tutorial-onboarding-3-2.png", alt: "Colored badges displayed in white blank view") + } + } + + @Step { + There are also *navigation* components in OUDS like *links* and *tab bars*. + 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. + + Use a `VStack` containing `Image` and `Text` `View` objects. + + @Code(name: "Navigation.swift", file: "tutorial-onboarding-3-3.swift") { + @Image(source: "tutorial-onboarding-3-3.png", alt: "Three links with chevrons or underlined text") + } + } + } + } + + @Section(title: "Merge components in a richer view") { + + @ContentAndMedia { + Some components can be used to define richer views. Let's try to merge all the ones we have and provide a more interesting thing. + The aim here is display a big title, a pack of filter chips, and according to the selected chip one of the view we defined earlier. + } + + @Steps { + @Step { + First, define the components groups we need as an enumeration. We will provide views for *control* components, *indicator* components and *navigation* components. The *enum* to define must conform to *CaseIterable* and *CustomStringConvertible* + + @Code(name: "ComponentGroup.swift", file: "tutorial-onboarding-3-4.swift") + } + + @Step { + 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. + + @Code(name: "CategorySelector.swift", file: "tutorial-onboarding-3-5.swift") + } + + @Step { + In the end, define the main view, the `ComponentShowcase` `View`. In the top of it, display a welcoming text with *heading large* typography and *contentDefault* foreground color. Just below add the `CategorySelector` and pack them in a `VStack` using a *scaledMedium* spacing for *vertical size class*. Apply *bgSecondary* background color to this `VStack`. + Then add the views for components inside a `ZStack` and use the *selected component group* to apply opacity on the suitable view. + + @Code(name: "ComponentShowcase.swift", file: "tutorial-onboarding-3-6.swift") + } + } + } + + @Section(title: "Navigations and themeable view, a step further") { + + @ContentAndMedia { + Now you master the components and the tokens, you can use *navigation* components and a specific view to inject your theme everywhere. Time to complete your first app! + } + + @Steps { + @Step { + 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. + Define a `ContentView` `View`, add in its *body* the `OUDSThemeableView` with an instance of `OrangeTheme`, and add inside your previously defined `HomeScreen` `View`. + + @Code(name: "ContentView.swift", file: "tutorial-onboarding-3-7.swift") { + @Image(source: "tutorial-onboarding-3-7.png", alt: "A view with images and texts") + } + } + + @Step { + 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). + 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. + + You can see how it looks like with other themes like `SoshTheme`, `WireframeTheme` or `OrangeCompactTheme`. + + @Code(name: "ContentView.swift", file: "tutorial-onboarding-3-8.swift") { + @Image(source: "tutorial-onboarding-3-8-LiquidGlass.png", alt: "A view with a tab bar in the bottom") + } + } + } + } + + + @Assessments { + @MultipleChoice { + Which thing defines the theme to use everywhere? + + @Choice(isCorrect: true) { + The `OUDSThemeableView` + + @Justification(reaction: "That's right!") { + Yes! One view to rule them all! + } + } + + @Choice(isCorrect: false) { + Any other view + + @Justification(reaction: "Try again!") { + Nope! You must ust the dedicated OUDS view to inject in subviews the theme + } + } + } + + @MultipleChoice { + Can you mix SwiftUI and OUDS components? + + @Choice(isCorrect: true) { + Yes, of course! + + @Justification(reaction: "Yes!") { + Of course you can mix views from SwiftUI and OUDS + } + } + + @Choice(isCorrect: false) { + No, not possible + + @Justification(reaction: "Try again!") { + Feel free to mix components! If you have some bugs, submit us issues on GitHub ❤️ + } + } + } + + @MultipleChoice { + Components have all the same rendering whatever is the OS version + + @Choice(isCorrect: false) { + Yes, because OUDS is cohesive + + @Justification(reaction: "Try again!") { + OUDS iOS Swift Package provide some components with rendering depending to the OS (e.g. tab bars) + } + } + + @Choice(isCorrect: true) { + No, Liquid Glass can be applied + + @Justification(reaction: "Correct!") { + Liquid Glass is applied on navigation elements like tab bar + } + } + } + } +} + diff --git a/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-4-going-further.tutorial b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-4-going-further.tutorial new file mode 100644 index 00000000000..1f7c4b78661 --- /dev/null +++ b/OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding/tutorial-onboarding-4-going-further.tutorial @@ -0,0 +1,61 @@ +@Tutorial(time: 10) { + @Intro(title: "Going further with more resources") { + Since you have learned how OUDS works with theme, themeable view, components, tuning and view modifiers, it is time now to discover some online resources. + + @Image(source: "ic_theme_intro", alt: "OUDS themes logo") + } + + @Section(title: "More resources") { + + @ContentAndMedia { + Xcode can use the Swift DocC documentation of OUDS, and this documentation is used to build a static web site. + + But there are also other resources which can be useful for you. + } + + @Steps { + @Step { + The iOS technical documentation is available online. It has been generated from all the Swift DocC documentation written in the Swift Package. + You will find several catalogs (as many as librairies) with details about everyhting: components, tokens, themes, providers, etc. + + You can get it at [ios.unified-design-system.orange.com](https://ios.unified-design-system.orange.com/) + + @Image(source: "tutorial-discovery-6-1.png", alt: "Apple-fashioned technical user documentation") + } + + @Step { + The whole design system is documented and available online. You can find everything about components, tokens, guidelines and principles of OUDS. + The *icon finder* is also available there to get icons for your projects. + + Go to the website and learn things at [unified-design-system.orange.com](https://unified-design-system.orange.com/) + + @Image(source: "tutorial-discovery-6-2.png", alt: "OUDS official web site") + } + + @Step { + 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. + + Have a look [on the wiki](https://github.com/Orange-OpenSource/ouds-ios/wiki) to discover how OUDS works. + + @Image(source: "tutorial-discovery-6-3.png", alt: "The wiki with plenty of details about processes, releases, API and technical choices") + } + + @Step { + 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. + + 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) + + @Image(source: "tutorial-discovery-6-4.png", alt: "The repository of the design system toolbox app") + } + + @Step { + 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. + + 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)! + + @Image(source: "tutorial-discovery-6-5.png", alt: "We love write things and discuss, come say hi and chat about anything!") + } + } + } +} + diff --git a/fastlane/Fastfile b/fastlane/Fastfile index 5435cdf8562..4b46d6b6a85 100644 --- a/fastlane/Fastfile +++ b/fastlane/Fastfile @@ -37,7 +37,7 @@ platform :ios do puts "👉 Run Swift Format to format sources" template = '\\nSoftware Name: OUDS iOS\\nSPDX-FileCopyrightText: Copyright (c) Orange SA\\nSPDX-License-Identifier: MIT\\n\\nThis software is distributed under the MIT license,\\nthe text of which is available at https://opensource.org/license/MIT/\\nor see the \\"LICENSE\\" file for more details.\\n\\nAuthors: See CONTRIBUTORS.txt\\nSoftware description: A SwiftUI components library with code examples for Orange Unified Design System\\n' - sh "cd .. && swiftformat . --exclude OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial --header \"#{template}\"" + sh "cd .. && swiftformat . --exclude OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_discovery --exclude OUDS/Core/ThemesContract/Sources/_ThemesContract.docc/Tutorial_onboarding --header \"#{template}\"" end # ------------------------------------------------------------ @@ -103,4 +103,4 @@ platform :ios do sh "cd .. && swift test" end -end \ No newline at end of file +end