[#283] Add code example to show how to use token in tokens page of demo app

CHANGELOG.md

@@ -8,12 +8,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [DemoApp] Add code sample for tokens usages in token pages ([#283](https://github.com/Orange-OpenSource/ouds-ios/issues/283))
 - [DemoApp] Add more UI tests on demo app ([#154](https://github.com/Orange-OpenSource/ouds-ios/issues/154))
 
-### Fixed
-
-- [Library] Warning issues for DocC catalogs ([#293](https://github.com/Orange-OpenSource/ouds-ios/issues/293))
-
 ### Changed
 
 - [Tool] Use `macos-15` runner for GitHub Actions builds ([#296](https://github.com/Orange-OpenSource/ouds-ios/issues/296))

NOTICE.txt

@@ -32,6 +32,9 @@ Any use or displaying shall constitute an infringement under intellectual proper
 ./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png
 ./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png
 ./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png
+./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-down.imageset/ic_chevron-down.png
+./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-up.imageset/ic_chevron-up.png
+./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_copy.imageset/ic_copy.png
 ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_border.imageset/ic_border.svg
 ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_dimension.imageset/ic_dimension.svg
 ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_filter_effects.imageset/ic_filter_effects.svg

Showcase/Showcase/Pages/Tokens/Border/BorderTokenPage.swift

@@ -46,9 +46,13 @@ struct BorderTokenPage: View {
     }
 
     // MARK: Body
-
     var body: some View {
         VStack(alignment: .leading, spacing: activeTheme.spaceFixedMedium) {
+            Section {
+                VStack(alignment: .leading, spacing: activeTheme.spaceFixedNone) {
+                    ShowcaseTokenCode(code: "theme.borderWidthDefault")
+                }
+            }
             Section {
                 VStack(alignment: .leading, spacing: activeTheme.spaceFixedNone) {
                     ForEach(NamedBorderWidth.allCases, id: \.rawValue) { namedWidth in

Showcase/Showcase/Pages/Tokens/Color/ColorTokenPage.swift

@@ -49,6 +49,9 @@ struct ColorTokenPage: View {
 
     var body: some View {
         Group {
+            Section {
+                ShowcaseTokenCode(code: "theme.colorBgPrimary.color(for: colorScheme)")
+            }
             Section { illustrationForBackground() } header: { header("Background") }
             Section { illustrationForAction() } header: { header("Action") }
             Section { illustrationForAlways() } header: { header("Always") }

Showcase/Showcase/Pages/Tokens/Dimension/Size/SizeTokenPage.swift

@@ -59,6 +59,9 @@ struct SizeTokenPage: View {
 
     var body: some View {
         Group {
+            Section {
+                ShowcaseTokenCode(code: "theme.sizeIconWithHeadingXLargeShort.dimension(for: horizontalSizeClass ?? .regular)")
+            }
             Section { illustrationForIconDecorative() } header: {
                 header("app_tokens_dimension_size_iconDecorative_label")
             }

Showcase/Showcase/Pages/Tokens/Dimension/Space/SpaceTokenPage.swift

@@ -81,6 +81,9 @@ struct SpaceTokenPage: View {
 
     var body: some View {
         Group {
+            Section {
+                ShowcaseTokenCode(code: "theme.spaceScaledMedium.dimension(for: horizontalSizeClass ?? .regular)")
+            }
             // Basic Space Tokens
             Section { illustrationForScaledSpaces() } header: {
                 header("app_tokens_dimension_space_scaled_label")

Showcase/Showcase/Pages/Tokens/Elevation/ElevationTokenPage.swift

@@ -51,6 +51,11 @@ struct ElevationTokenPage: View {
 
     var body: some View {
         VStack(alignment: .leading, spacing: activeTheme.spaceFixedNone) {
+            Section {
+                ShowcaseTokenCode(code: "theme.elevationNone.elevation(for: colorScheme)")
+            }
+            Spacer()
+                .frame(height: activeTheme.spaceFixedMedium)
             ForEach(NamedElevation.allCases, id: \.rawValue) { elevationName in
                 illustration(for: elevationName)
             }

Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift

@@ -41,6 +41,10 @@ struct GridTokenPage: View {
                     .background(theme.colorBgEmphasized.color(for: colorScheme))
             }
 
+            Section {
+                ShowcaseTokenCode(code: "theme.gridColumnCount(for: horizontalSizeClass)")
+            }
+
             Section { illustrationForGridTokens() } header: {
                 Text(horizontalSizeClass.rawValue)
                     .showcaseSectionHeaderStyle()

Showcase/Showcase/Pages/Tokens/Opacity/OpacityTokenPage.swift

@@ -51,6 +51,11 @@ struct OpacityTokenPage: View {
 
     var body: some View {
         VStack(alignment: .leading, spacing: activeTheme.spaceFixedNone) {
+            Section {
+                ShowcaseTokenCode(code: "theme.opacityTransparent")
+            }
+            Spacer()
+                .frame(height: activeTheme.spaceFixedMedium)
             ForEach(NamedOpacity.allCases, id: \.rawValue) { opmacityName in
                 illustration(for: opmacityName)
             }

Showcase/Showcase/Pages/Tokens/Typography/TypographyTokenPage.swift

@@ -61,6 +61,10 @@ struct TypographyTokenPage: View {
 
     var body: some View {
         VStack(alignment: .leading, spacing: activeTheme.spaceFixedNone) {
+            Section {
+                ShowcaseTokenCode(code: "theme.typeBodyStrongLarge(theme)")
+            }
+            Spacer()
             ForEach(NamedTypography.allCases, id: \.rawValue) { typographyName in
                 illustration(from: typographyName)
             }

Showcase/Showcase/Pages/Utils/ShowcaseElementPage.swift

@@ -28,7 +28,7 @@ struct ShowcaseElementPage: View {
     // MARK: Body
 
     var body: some View {
-        List {
+        ScrollView {
             VStack(alignment: .leading, spacing: theme.spaceFixedMedium) {
                 CardIllustration(icon: Image(element.imageName))
                     .accessibilityHidden(true)

Showcase/Showcase/Pages/Utils/ShowcaseTokenCode.swift

@@ -0,0 +1,107 @@
+//
+// Software Name: OUDS iOS
+// SPDX-FileCopyrightText: Copyright (c) Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license,
+// the text of which is available at https://opensource.org/license/MIT/
+// or see the "LICENSE" file for more details.
+//
+// Authors: See CONTRIBUTORS.txt
+// Software description: A SwiftUI components library with code examples for Orange Unified Design System
+//
+
+import OUDS
+import OUDSTokensSemantic
+import SwiftUI
+
+struct ShowcaseTokenCode: View {
+
+    @Environment(\.theme) private var theme
+    @Environment(\.colorScheme) private var colorScheme
+
+    @State private var isCodeVisible = true
+    var code: String
+
+    // MARK: Body
+
+    var body: some View {
+        VStack(spacing: theme.spaceFixedNone) {
+            toggleButtonSection()
+            if isCodeVisible {
+                codeTokenDisplayCodeSection()
+            }
+        }
+    }
+
+    // MARK: Private helpers
+
+    private func toggleButtonSection() -> some View {
+        VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
+            Button(action: toggle) {
+                HStack {
+                    Text("app_tokens_code_title_label")
+                        .typeBodyStrongLarge(theme)
+                        .foregroundStyle(theme.colorContentDefault.color(for: colorScheme))
+                        .padding(.vertical, theme.spacePaddingInlineShort)
+                    Image(isCodeVisible ? "ic_chevron-up" : "ic_chevron-down")
+                        .resizable()
+                        .renderingMode(.template)
+                        .foregroundColor(theme.colorBgBrandPrimary.color(for: colorScheme))
+                        .frame(width: 20, height: 20)
+                        .padding(.trailing, theme.spacePaddingInlineMedium)
+                        .accessibilityLabel("app_tokens_code_visibility_button_a11y")
+                }
+            }
+            .buttonStyle(PlainButtonStyle())
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.bottom, theme.spacePaddingBlockShort)
+    }
+
+    private func codeTokenDisplayCodeSection() -> some View {
+        HStack(alignment: .firstTextBaseline, spacing: theme.spacePaddingBlockMedium) {
+            Text(code)
+                .font(.system(.body, design: .monospaced))
+                .foregroundStyle(theme.colorContentDefault.color(for: colorScheme))
+                .padding(.vertical, theme.spacePaddingInlineShort)
+
+            Button(action: {
+                UIPasteboard.general.string = code
+            }, label: {
+                ZStack {
+                    Color.clear
+                        .frame(width: 44, height: 44)
+
+                    Image("ic_copy")
+                        .resizable()
+                        .renderingMode(.template)
+                        .foregroundColor(theme.colorContentOnBgStatusPositiveMuted.color(for: colorScheme))
+                        .frame(width: 24, height: 24)
+                        .padding(.trailing, theme.spacePaddingInlineMedium)
+                        .alignmentGuide(.firstTextBaseline) { $0[.bottom] * 0.7 }
+                        .accessibilityLabel("app_tokens_code_copy_button_a11y")
+                }
+            })
+        }
+        .frame(minWidth: 72, maxWidth: .infinity, alignment: .leading)
+        .padding(.vertical, theme.spacePaddingInlineShort)
+        .padding(.leading, theme.spacePaddingInlineMedium)
+        .background(theme.colorBgSecondary.color(for: colorScheme))
+        .accessibilityElement(children: .combine)
+        .accessibilityHint("app_tokens_code_copy_button_a11y")
+        .overlay(
+            Rectangle()
+                .opacity(theme.opacityTransparent)
+                .frame(minWidth: 40, maxWidth: .infinity, alignment: .leading)
+                .oudsBorder(style: theme.borderStyleDefault,
+                            width: theme.borderWidthThin,
+                            radius: theme.borderRadiusDefault,
+                            color: theme.colorBorderDefault)
+        )
+    }
+
+    private func toggle() {
+        isCodeVisible.toggle()
+    }
+}

Showcase/Showcase/Pages/Utils/ShowcaseVariantElement.swift

@@ -31,12 +31,19 @@ struct ShowcaseVariantElement: View {
             NavigationLink {
                 ShowcaseElementPage(element: element)
             } label: {
-                Text(LocalizedStringKey(element.name))
-                    .typeHeadingMedium(theme)
-                    .foregroundStyle(theme.colorContentDefault.color(for: colorScheme))
-                    .padding(.vertical, theme.spaceFixedShorter)
+                HStack {
+                    Text(LocalizedStringKey(element.name))
+                        .typeHeadingMedium(theme)
+                        .foregroundStyle(theme.colorContentDefault.color(for: colorScheme))
+                        .padding(.vertical, theme.spaceFixedShorter)
+                        .padding(.leading, theme.spaceFixedMedium)
+                    Spacer()
+                    Image(systemName: "chevron.right")
+                        .foregroundColor(theme.colorContentDefault.color(for: colorScheme))
+                        .padding(.trailing, theme.spaceFixedMedium)
+                        .accessibilityHidden(true)
+                }
             }
         }
-        .padding(.horizontal, theme.spaceFixedMedium)
     }
 }

Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-down.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_chevron-down.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-up.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_chevron-up.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_copy.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "ic_copy.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Showcase/Showcase/Resources/en.lproj/Localizable.strings

@@ -68,6 +68,10 @@
 "app_tokens_typography_label" = "Typography";
 "app_tokens_typography_description_text" = "Typography is our system of fonts and text styles. They enhance communication and reinforce the brand style.";
 
+"app_tokens_code_title_label" = "View token code example";
+"app_tokens_code_visibility_button_a11y" = "Toggle code visibility";
+"app_tokens_code_copy_button_a11y" = "Copy code to clipboard";
+
 // MARK: - Component Screen
 
 "app_component_emptyContent_text" = "No content";