[#275] Update space tokens screen in DemoApp

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

@@ -112,23 +112,23 @@ struct SizeTokenPage: View {
         let namedTypography = namedSize.namedTypography
         let value = String(format: "\(namedSize.rawValue) (%.0f) pt", token)
 
-        HStack {
-            Image("ic_token")
-                .resizable()
-                .renderingMode(.template)
-                .foregroundColor(activeTheme.colorAlwaysInfo.color(for: activeColorScheme))
-                .frame(width: token, height: token, alignment: .center)
-                .accessibilityHidden(true)
-
-            VStack(alignment: .leading) {
-                illustration(for: namedTypography, in: activeTheme)
-                    .foregroundStyle(activeTheme.colorContentDefault.color(for: activeColorScheme))
-                Text(value)
-                    .typeBodyDefaultMedium(activeTheme)
-                    .foregroundStyle(activeTheme.colorContentMuted.color(for: activeColorScheme))
+        VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
+            HStack(alignment: .center, spacing: theme.spaceFixedShorter) {
+                Image(decorative: "ic_token")
+                    .resizable()
+                    .renderingMode(.template)
+                    .foregroundColor(theme.colorAlwaysInfo.color(for: colorScheme))
+                    .frame(width: token, height: token, alignment: .center)
+
+                illustration(for: namedTypography, in: theme)
+                    .foregroundStyle(theme.colorContentDefault.color(for: colorScheme))
             }
-            .accessibilityElement(children: .combine)
+
+            Text(value)
+                .typeBodyDefaultMedium(theme)
+                .foregroundStyle(theme.colorContentMuted.color(for: colorScheme))
         }
+        .accessibilityElement(children: .combine)
     }
 
     // MARK: Common helpers

Showcase/Showcase/Pages/Tokens/Dimension/Space/NamedSpace/NameSpace+GapInlineWithArrow.swift

@@ -0,0 +1,44 @@
+//
+// 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
+
+extension NamedSpace {
+
+    enum GapInlineWithArrow: String, CaseIterable {
+        case spaceColumnGapWitharrowNone
+        case spaceColumnGapWitharrowShortest
+        case spaceColumnGapWitharrowShorter
+        case spaceColumnGapWitharrowShort
+        case spaceColumnGapWitharrowMedium
+        case spaceColumnGapWitharrowTall
+
+        func token(from theme: OUDSTheme) -> SpaceSemanticToken {
+            switch self {
+            case .spaceColumnGapWitharrowNone:
+                return theme.spaceColumnGapWithArrowNone
+            case .spaceColumnGapWitharrowShortest:
+                return theme.spaceColumnGapWithArrowShortest
+            case .spaceColumnGapWitharrowShorter:
+                return theme.spaceColumnGapWithArrowShorter
+            case .spaceColumnGapWitharrowShort:
+                return theme.spaceColumnGapWithArrowShort
+            case .spaceColumnGapWitharrowMedium:
+                return theme.spaceColumnGapWithArrowMedium
+            case .spaceColumnGapWitharrowTall:
+                return theme.spaceColumnGapWithArrowTall
+            }
+        }
+    }
+}

Showcase/Showcase/Pages/Tokens/Dimension/Space/NamedSpace/NameSpace+GapInlineWithIcon.swift

@@ -0,0 +1,44 @@
+//
+// 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
+
+extension NamedSpace {
+
+    enum GapInlineWithIcon: String, CaseIterable {
+        case spaceColumnGapWithIconNone
+        case spaceColumnGapWithIconShortest
+        case spaceColumnGapWithIconShorter
+        case spaceColumnGapWithIconShort
+        case spaceColumnGapWithIconMedium
+        case spaceColumnGapWithIconTall
+
+        func token(from theme: OUDSTheme) -> SpaceSemanticToken {
+            switch self {
+            case .spaceColumnGapWithIconNone:
+                return theme.spaceColumnGapWithIconNone
+            case .spaceColumnGapWithIconShortest:
+                return theme.spaceColumnGapWithIconShortest
+            case .spaceColumnGapWithIconShorter:
+                return theme.spaceColumnGapWithIconShorter
+            case .spaceColumnGapWithIconShort:
+                return theme.spaceColumnGapWithIconShort
+            case .spaceColumnGapWithIconMedium:
+                return theme.spaceColumnGapWithIconMedium
+            case .spaceColumnGapWithIconTall:
+                return theme.spaceColumnGapWithIconTall
+            }
+        }
+    }
+}

Showcase/Showcase/Pages/Tokens/Dimension/Space/NamedSpace/NameSpace+GapStackWithIcon.swift

@@ -0,0 +1,44 @@
+//
+// 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
+
+extension NamedSpace {
+
+    enum GapStackWithIcon: String, CaseIterable {
+        case spaceRowGapWithIconNone
+        case spaceRowGapWithIconShortest
+        case spaceRowGapWithIconShorter
+        case spaceRowGapWithIconShort
+        case spaceRowGapWithIconMedium
+        case spaceRowGapWithIconTall
+
+        func token(from theme: OUDSTheme) -> SpaceSemanticToken {
+            switch self {
+            case .spaceRowGapWithIconNone:
+                return theme.spaceRowGapWithIconNone
+            case .spaceRowGapWithIconShortest:
+                return theme.spaceRowGapWithIconShortest
+            case .spaceRowGapWithIconShorter:
+                return theme.spaceRowGapWithIconShorter
+            case .spaceRowGapWithIconShort:
+                return theme.spaceRowGapWithIconShort
+            case .spaceRowGapWithIconMedium:
+                return theme.spaceRowGapWithIconMedium
+            case .spaceRowGapWithIconTall:
+                return theme.spaceRowGapWithIconTall
+            }
+        }
+    }
+}

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

@@ -0,0 +1,129 @@
+//
+// 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 SwiftUI
+
+// MARK: Fixed Spaces
+
+struct FixedSapcesIllustrations: View {
+
+    // MARK: Environment properties
+
+    @Environment(\.theme) private var theme
+    @Environment(\.colorScheme) private var colorScheme
+
+    // MARK: Body
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
+            SpaceHeaderDescription(text: "app_tokens_dimension_space_header_text", paddings: EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 0))
+                .padding(.bottom, theme.spaceFixedMedium)
+
+            ForEach(NamedSpace.Fixed.allCases, id: \.rawValue) { namedSpaceToken in
+                Illustration(for: namedSpaceToken)
+            }
+        }
+    }
+
+    struct Illustration: View {
+
+        // MARK: Environment properties
+
+        @Environment(\.theme) private var theme
+        @Environment(\.colorScheme) private var colorScheme
+
+        // MARK: Stored properties
+
+        let namedSpaceToken: NamedSpace.Fixed
+
+        // MARK: Initializer
+
+        init(for namedSpaceToken: NamedSpace.Fixed) {
+            self.namedSpaceToken = namedSpaceToken
+        }
+
+        // MARK: Body
+
+        public var body: some View {
+            let token = namedSpaceToken.token(from: theme)
+            let name = namedSpaceToken.rawValue
+            let value = String(format: "%.2f (pt)", token)
+
+            ShowcaseTokenIllustration(tokenName: name, tokenValue: value) {
+                SpaceIllustration(dimension: token, orientation: .horizontal(position: .center))
+            }
+        }
+    }
+}
+
+// MARK: Scaled Spaces
+
+struct ScaledSpacesIllustrations: View {
+
+    // MARK: Environment properties
+
+    @Environment(\.theme) private var theme
+    @Environment(\.colorScheme) private var colorScheme
+
+    // MARK: Body
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: theme.spaceFixedNone) {
+            SpaceHeaderDescription(text: "app_tokens_dimension_space_header_text", paddings: EdgeInsets(top: 4, leading: 8, bottom: 0, trailing: 0))
+                .padding(.bottom, theme.spaceFixedMedium)
+
+            ForEach(NamedSpace.Scaled.allCases, id: \.rawValue) { namedSpaceToken in
+                Illustration(for: namedSpaceToken)
+            }
+        }
+    }
+
+    struct Illustration: View {
+
+        // MARK: Environment properties
+
+        @Environment(\.theme) private var theme
+        @Environment(\.colorScheme) private var colorScheme
+        @Environment(\.horizontalSizeClass) private var horizontalSizeClass
+        @Environment(\.verticalSizeClass) private var verticalSizeClass
+
+        // MARK: Stored property
+
+        let namedSpaceToken: NamedSpace.Scaled
+
+        // MARK: Initializer
+
+        init(for namedSpaceToken: NamedSpace.Scaled) {
+            self.namedSpaceToken = namedSpaceToken
+        }
+
+        // MARK: Body
+
+        var body: some View {
+            let token = namedSpaceToken.token(from: theme)
+            let name = namedSpaceToken.rawValue
+            let horizontalDimensionRawToken = token.dimension(for: horizontalSizeClass ?? .regular)
+            let verticalDimensionRawToken = token.dimension(for: verticalSizeClass ?? .regular)
+            let value = String(format: "horizontal %@ (%.0f pt)\nvertical %@ (%.0f pt)",
+                               horizontalSizeClass == .regular ? "regular" : "compact",
+                               horizontalDimensionRawToken,
+                               verticalSizeClass == .regular ? "regular" : "compact",
+                               verticalDimensionRawToken)
+
+            return ShowcaseTokenIllustration(tokenName: name, tokenValue: value) {
+                SpaceScaledIllustration(horizontalDimension: horizontalDimensionRawToken, verticalDimension: verticalDimensionRawToken)
+            }
+        }
+    }
+}