From 22e215e618960a69aa5b230d40f256baed9f7860 Mon Sep 17 00:00:00 2001 From: LudovicPinel Date: Thu, 14 Nov 2024 14:20:10 +0100 Subject: [PATCH] feat: add grid tokens screen in demo app (#151) (#276) Signed-off-by: Pierre-Yves Lapersonne Co-authored-by: Pierre-Yves Lapersonne Reviewed-by: Pierre-Yves Lapersonne Tested-by: Pierre-Yves Lapersonne --- CHANGELOG.md | 1 + NOTICE.txt | 10 +- .../OUDSTheme+GridSemanticTokensHelper.swift | 100 ++++++++++++++++++ .../Sources/OUDSTheme/OUDSThemeableView.swift | 38 ++++++- .../Sources/OUDSUserInterfaceSizeClass.swift | 76 +++++++++++++ Showcase/Showcase.xcodeproj/project.pbxproj | 16 +++ .../xcshareddata/swiftpm/Package.resolved | 2 +- .../Pages/Tokens/Grid/GridTokenElement.swift | 28 +++++ .../Pages/Tokens/Grid/GrisTokenPage.swift | 95 +++++++++++++++++ .../Showcase/Pages/Tokens/TokensPage.swift | 1 + .../Contents.json | 22 ++++ .../il_tokens_grid_column_margin.png | Bin 0 -> 8747 bytes .../il_tokens_grid_column_margin_dark.png | Bin 0 -> 4987 bytes .../Contents.json | 22 ++++ .../il_tokens_grid_max_width.png | Bin 0 -> 6000 bytes .../il_tokens_grid_max_width_dark.png | Bin 0 -> 6115 bytes .../Contents.json | 22 ++++ .../il_tokens_grid_min_width.png | Bin 0 -> 5306 bytes .../il_tokens_grid_min_width_dark.png | Bin 0 -> 5424 bytes .../Tokens/ic_grid.imageset/Contents.json | 12 +++ .../Tokens/ic_grid.imageset/ic_grid.svg | 5 + .../Resources/en.lproj/Localizable.strings | 5 +- 22 files changed, 448 insertions(+), 7 deletions(-) create mode 100644 OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift create mode 100644 OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift create mode 100644 Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift create mode 100644 Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json create mode 100644 Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index e683b3dd7b..0a7bf5570a 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 +- [DemoApp] Add grid tokens screen in demo app ([#151](https://github.com/Orange-OpenSource/ouds-ios/issues/151)) - [Tool] GitHub Action to run SwiftLint for *main* and *develop* branches ### Changed diff --git a/NOTICE.txt b/NOTICE.txt index c68042ae5a..30ccbf17cc 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -26,14 +26,20 @@ Any use or displaying shall constitute an infringement under intellectual proper ./Showcase/Showcase/Resources/Assets.xcassets/ic_info.imageset/ic_info.svg ./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_empty_screen.imageset/il_empty_screen.svg - +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png +./Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png +./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_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/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_layers.imageset/ic_layers.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_palette.imageset/ic_palette.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_vector.imageset/ic_vector.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_typography.imageset/ic_typography.svg ./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_union.imageset/ic_union.svg -End of the parts list under Orange SA Copyright \ No newline at end of file +End of the parts list under Orange SA Copyright diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift new file mode 100644 index 0000000000..c500da3b1a --- /dev/null +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSTheme+SemanticTokens/OUDSTheme+GridSemanticTokensHelper.swift @@ -0,0 +1,100 @@ +// +// 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 OUDSTokensRaw +import OUDSTokensSemantic + +extension OUDSTheme { + + // MARK: Semantic Grid token - Helper + + /// The min column width of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The minimal width according to viewports / size classes. + public final func gridMinWidth(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMinWidth + case .compact: + return gridCompactMinWidth + case .regular: + return gridRegularMinWidth + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The max column width of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The maximal width according to viewports / size classes. + public final func gridMaxWidth(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMaxWidth + case .compact: + return gridCompactMaxWidth + case .regular: + return gridRegularMaxWidth + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The margin of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The margin according to viewports / size classes. + public final func gridMargin(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactMargin + case .compact: + return gridCompactMargin + case .regular: + return gridRegularMargin + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The column gap of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The column gap according to viewports / size classes. + public final func gridColumnGap(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactColumnGap + case .compact: + return gridCompactColumnGap + case .regular: + return gridRegularColumnGap + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } + + /// The column count of a grid. + /// - Parameter sizeClass: The current interface size class + /// - Returns `GridRawToken`: The column count according to viewports / size classes. + public final func gridColumnCount(for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch sizeClass { + case .extraCompact: + return gridExtraCompactColumnCount + case .compact: + return gridCompactColumnCount + case .regular: + return gridRegularColumnCount + @unknown default: + fatalError("🤖 Raw token unavailable for \(sizeClass)!") + } + } +} diff --git a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift index ccb2140cd6..7b8f1d4c38 100644 --- a/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift +++ b/OUDS/Core/OUDS/Sources/OUDSTheme/OUDSThemeableView.swift @@ -16,7 +16,7 @@ import SwiftUI // MARK: - Environment values -private struct ThemeContractEnvironmentKey: EnvironmentKey { +private struct ThemeEnvironmentKey: EnvironmentKey { static let defaultValue = OUDSTheme() } @@ -26,10 +26,10 @@ extension EnvironmentValues { /// The `OUDSTheme` instance exposed as en environment values across the library public var theme: OUDSTheme { get { - self[ThemeContractEnvironmentKey.self] + self[ThemeEnvironmentKey.self] } set { - self[ThemeContractEnvironmentKey.self] = newValue + self[ThemeEnvironmentKey.self] = newValue } } } @@ -69,5 +69,37 @@ public struct OUDSThemeableView: View where Content: View { public var body: some View { content() .environment(\.theme, theme) + .modifier(UserInterfaceSizeClassModifier()) + } +} + +/// Private modifier used to set in environment the computed orizontal and vertical size classes. +private struct UserInterfaceSizeClassModifier: ViewModifier { + + @Environment(\.horizontalSizeClass) private var horizontalSizeClass + @Environment(\.verticalSizeClass) private var verticalSizeClass + + /// According to Apple guidelines, this value of 390 is the limit defining extract compact size classes if lower and compact if higher or equal + private static let extraCompactMaxWidth = 390.0 + + private var horizontalUserInterfaceSizeClass: OUDSUserInterfaceSizeClass { + if UIScreen.main.bounds.width < Self.extraCompactMaxWidth { + return .extraCompact + } else { + return horizontalSizeClass == .compact ? .compact : .regular + } + } + private var verticalUserInterfaceSizeClass: OUDSUserInterfaceSizeClass { + if UIScreen.main.bounds.width < Self.extraCompactMaxWidth { + return .extraCompact + } else { + return verticalSizeClass == .compact ? .compact : .regular + } + } + + func body(content: Content) -> some View { + content + .environment(\.oudsHorizontalSizeClass, horizontalUserInterfaceSizeClass) + .environment(\.oudsVerticalSizeClass, verticalUserInterfaceSizeClass) } } diff --git a/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift b/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift new file mode 100644 index 0000000000..0082a7a4f9 --- /dev/null +++ b/OUDS/Core/OUDS/Sources/OUDSUserInterfaceSizeClass.swift @@ -0,0 +1,76 @@ +// +// 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 SwiftUICore +import UIKit + +// MARK: - Environment values + +private struct HorizontalSizeClassEnvironmentKey: EnvironmentKey { + + static let defaultValue = OUDSUserInterfaceSizeClass.regular +} + +private struct VerticalSizeClassEnvironmentKey: EnvironmentKey { + + static let defaultValue = OUDSUserInterfaceSizeClass.regular +} + +extension EnvironmentValues { + + /// The `OUDSUserInterfaceSizeClass` instance exposed as en environment values across the library for the horizontal viewport. + /// + /// You receive a ``OUDSUserInterfaceSizeClass`` value when you read this environment value. + /// The value tells you about the amount of horizontal space available to the view that reads it. + /// You can read this size class like any other of the ``EnvironmentValues``, by creating a property with the ``Environment`` property wrapper: + /// + /// @Environment(\.oudsHorizontalSizeClass) private var horizontalSizeClass + /// + public var oudsHorizontalSizeClass: OUDSUserInterfaceSizeClass { + get { + self[HorizontalSizeClassEnvironmentKey.self] + } + set { + self[HorizontalSizeClassEnvironmentKey.self] = newValue + } + } + + /// The `OUDSUserInterfaceSizeClass` instance exposed as en environment values across the library for the vertical viewport. + /// + /// You receive a ``OUDSUserInterfaceSizeClass`` value when you read this environment value. + /// The value tells you about the amount of vertical space available to the view that reads it. + /// You can read this size class like any other of the ``EnvironmentValues``, by creating a property with the ``Environment`` property wrapper: + /// + /// @Environment(\.oudsVerticalSizeClass) private var verticalSizeClass + /// + public var oudsVerticalSizeClass: OUDSUserInterfaceSizeClass { + get { + self[VerticalSizeClassEnvironmentKey.self] + } + set { + self[VerticalSizeClassEnvironmentKey.self] = newValue + } + } +} + +/// Enumerates the size classes defined by the design system. +/// The __extraCompact__ size class if for screens with width < 389. +/// The __compact__ and __regular__ size classes are the standard Apple classes. +/// +/// See: https://developer.apple.com/design/human-interface-guidelines/layout#iOS-iPadOS-device-size-classes +/// Remark: This enum is defined as a string to easily display its raw value. +public enum OUDSUserInterfaceSizeClass: String, Sendable { + case extraCompact = "Extra Compact" + case compact = "Compact" + case regular = "Regular" +} diff --git a/Showcase/Showcase.xcodeproj/project.pbxproj b/Showcase/Showcase.xcodeproj/project.pbxproj index 0fad8b8284..5c4e48d9c1 100644 --- a/Showcase/Showcase.xcodeproj/project.pbxproj +++ b/Showcase/Showcase.xcodeproj/project.pbxproj @@ -24,6 +24,8 @@ 070C35622C75EB1C0029C6A8 /* OUDS in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35612C75EB1C0029C6A8 /* OUDS */; }; 070C35642C773A0D0029C6A8 /* OUDSThemesInverse in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35632C773A0D0029C6A8 /* OUDSThemesInverse */; }; 070C35662C7762B90029C6A8 /* OUDSModules in Frameworks */ = {isa = PBXBuildFile; productRef = 070C35652C7762B90029C6A8 /* OUDSModules */; }; + 070DF8B12CDD07F20043D558 /* GrisTokenPage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */; }; + 070DF8B22CDD07F20043D558 /* GridTokenElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */; }; 073543112CA154DE001187EA /* Card.swift in Sources */ = {isa = PBXBuildFile; fileRef = 073543102CA154DE001187EA /* Card.swift */; }; 073543132CA1676C001187EA /* Colors.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 073543122CA1676C001187EA /* Colors.xcassets */; }; 073543162CA17275001187EA /* ShowcaseElement.swift in Sources */ = {isa = PBXBuildFile; fileRef = 073543152CA17275001187EA /* ShowcaseElement.swift */; }; @@ -120,6 +122,8 @@ /* Begin PBXFileReference section */ 0707B6402C2C3C0400A911E7 /* .github */ = {isa = PBXFileReference; lastKnownFileType = folder; name = .github; path = ../.github; sourceTree = ""; }; 0707B6432C2C569500A911E7 /* Gemfile */ = {isa = PBXFileReference; lastKnownFileType = text; name = Gemfile; path = ../Gemfile; sourceTree = ""; }; + 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GridTokenElement.swift; sourceTree = ""; }; + 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GrisTokenPage.swift; sourceTree = ""; }; 073543102CA154DE001187EA /* Card.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Card.swift; sourceTree = ""; }; 073543122CA1676C001187EA /* Colors.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Colors.xcassets; sourceTree = ""; }; 073543152CA17275001187EA /* ShowcaseElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShowcaseElement.swift; sourceTree = ""; }; @@ -249,6 +253,15 @@ /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ + 070DF8B02CDD07F20043D558 /* Grid */ = { + isa = PBXGroup; + children = ( + 070DF8AE2CDD07F20043D558 /* GridTokenElement.swift */, + 070DF8AF2CDD07F20043D558 /* GrisTokenPage.swift */, + ); + path = Grid; + sourceTree = ""; + }; 0735430F2CA15440001187EA /* Cards */ = { isa = PBXGroup; children = ( @@ -523,6 +536,7 @@ 075114DD2CB7FD7E00B8B759 /* Color */, 077CCE562CB426090059CC28 /* Dimension */, 07CF42752CA3F461000BD03E /* Elevation */, + 070DF8B02CDD07F20043D558 /* Grid */, 07CF427C2CA412F5000BD03E /* Opacity */, 073543192CA17388001187EA /* Typography */, 073543222CA192F9001187EA /* TokenElement.swift */, @@ -858,6 +872,8 @@ 07F7533B2CC785620007450D /* ShowcaseSectionHeaderStyle.swift in Sources */, 073543182CA172CA001187EA /* TypographyTokenElement.swift in Sources */, 077CCE5C2CB431C50059CC28 /* ShowcaseVariantElement.swift in Sources */, + 070DF8B12CDD07F20043D558 /* GrisTokenPage.swift in Sources */, + 070DF8B22CDD07F20043D558 /* GridTokenElement.swift in Sources */, 077CCE582CB426090059CC28 /* SpaceTokenPage.swift in Sources */, 07F75A3F2CC653CD0004F1AD /* NameSpace+GapInline.swift in Sources */, 51BD76292C466FCF0033365D /* WebView.swift in Sources */, diff --git a/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved b/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved index 81ed0d1e2d..10bbabf032 100644 --- a/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/Showcase/Showcase.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -1,5 +1,5 @@ { - "originHash" : "ce9d2b5fcd836ee7f16c345c970c6dad8b1405cc6afc0904bafd4a5916517710", + "originHash" : "37157bb82d55cf8fef2178d1e02e303f55f01b545bfb15038a1dd61301498d2b", "pins" : [ { "identity" : "accessibility-statement-lib-ios", diff --git a/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift b/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift new file mode 100644 index 0000000000..c7efe7645e --- /dev/null +++ b/Showcase/Showcase/Pages/Tokens/Grid/GridTokenElement.swift @@ -0,0 +1,28 @@ +// +// 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 GridTokenElement: TokenElement { + let name: String + let imageName: String + let description: String + let pageDescription: AnyView + + init() { + name = "app_tokens_grid_label" + imageName = "ic_grid" + description = "app_tokens_grid_description_text" + pageDescription = AnyView(GridTokenPage()) + } +} diff --git a/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift b/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift new file mode 100644 index 0000000000..407199f778 --- /dev/null +++ b/Showcase/Showcase/Pages/Tokens/Grid/GrisTokenPage.swift @@ -0,0 +1,95 @@ +// +// 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 OUDSTokensRaw +import OUDSTokensSemantic +import SwiftUI + +struct GridTokenPage: View { + + @Environment(\.theme) private var theme + @Environment(\.oudsHorizontalSizeClass) private var horizontalSizeClass + @Environment(\.colorScheme) private var colorScheme + + // MARK: Body + + var body: some View { + Group { + VStack(alignment: .leading, spacing: theme.spaceFixedMedium) { + Image(decorative: "il_tokens_grid_column_margin") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + Image(decorative: "il_tokens_grid_min_width") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + Image(decorative: "il_tokens_grid_max_width") + .resizable() + .aspectRatio(contentMode: .fit) + .background(theme.colorBgEmphasized.color(for: colorScheme)) + } + + Section { illustrationForGridTokens() } header: { + Text(horizontalSizeClass.rawValue) + .showcaseSectionHeaderStyle() + } + } + .padding(.horizontal, theme.spaceFixedMedium) + } + + // MARK: Private helpers + + private func illustrationForGridTokens() -> some View { + VStack(alignment: .leading, spacing: theme.spaceFixedNone) { + ForEach(NamedGrid.allCases, id: \.rawValue) { namedGrid in + illustration(for: namedGrid) + } + } + } + + private func illustration(for namedGrid: NamedGrid) -> some View { + let token = namedGrid.token(from: theme, for: horizontalSizeClass) + let name = namedGrid.rawValue + let value = String(format: "(%.0f) pt", token) + + return ShowcaseTokenIllustration(tokenName: name, tokenValue: value) { + EmptyView() + } + } +} + +private enum NamedGrid: String, CaseIterable { + case gridMinWidth + case gridMaxWidth + case gridMargin + case gridColumnGap + case gridColumnCount + + @MainActor + func token(from theme: OUDSTheme, for sizeClass: OUDSUserInterfaceSizeClass) -> GridRawToken { + switch self { + case .gridMinWidth: + return theme.gridMinWidth(for: sizeClass) + case .gridMaxWidth: + return theme.gridMaxWidth(for: sizeClass) + case .gridMargin: + return theme.gridMargin(for: sizeClass) + case .gridColumnGap: + return theme.gridColumnGap(for: sizeClass) + case .gridColumnCount: + return theme.gridColumnCount(for: sizeClass) + } + } +} diff --git a/Showcase/Showcase/Pages/Tokens/TokensPage.swift b/Showcase/Showcase/Pages/Tokens/TokensPage.swift index beb37a178e..12d3cbe93a 100644 --- a/Showcase/Showcase/Pages/Tokens/TokensPage.swift +++ b/Showcase/Showcase/Pages/Tokens/TokensPage.swift @@ -20,6 +20,7 @@ struct TokensPage: View { ColorTokenElement(), DimensionTokenElement(), ElevationTokenElement(), + GridTokenElement(), OpacityTokenElement(), TypographyTokenElement(), ] diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json new file mode 100644 index 0000000000..a1c0e6501e --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_column_margin.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_column_margin_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin.png new file mode 100644 index 0000000000000000000000000000000000000000..381ad2f53c7dd28cd7ea57750854954ba730a3d8 GIT binary patch literal 8747 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 literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_column_margin.imageset/il_tokens_grid_column_margin_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..741f740a1839a521393402bcb3e03aca37f46c9c GIT binary patch literal 4987 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 H|NH*~o0xts literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json new file mode 100644 index 0000000000..4457460a51 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_max_width.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_max_width_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width.png new file mode 100644 index 0000000000000000000000000000000000000000..140a3ea2820071a9c28348480e54b0ea397da8be GIT binary patch literal 6000 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 BfD-@! literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_max_width.imageset/il_tokens_grid_max_width_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..0dd45f94a9f2fc546896287d8be72e0f5edca5a0 GIT binary patch literal 6115 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%0A+-nkqG%MEiHQMfQCWPdW#*CC}mpg zNEnbEC8_vJ0pMKlB^qeBXJ=haP42|--7>!mqCvjBSz!6Sdx#O$ zo@LOvk^ojQz-L?a8NEXr)Bw~r*UGpyrtxK9!$UnMWg54{!oDuQStkNpEypI@1{wN> zbM{TIEzW$ejDJGw1=&=~!MD2SSJ#%gBR;4BK=p}2hgV>Ne>H_%2LSUaU);;eOkFJ2 z6dePA-5UQU{O?Ohb6gky0<>}IqwA_&Tj%aJgl*d+Jpc$Y#Hf+|)W`?p;^IU)!%8`C zMpcsy-EdK-*)YO6$?|fOZkK|M1nb^%2Kk&KV5D#XHs8ppI6lw#h{kHM2%E}tY0He>nS~^3dXXRi$~nI)fx8;9AQOx|6>!(R_CeX=BgL+( zDRMTrg6tP+U2ORNrAZ}Q?cvw_8=|a*M#aj8>Wj)iLnl2|OjioX|`G~SM literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json new file mode 100644 index 0000000000..1a045c9ca1 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/Contents.json @@ -0,0 +1,22 @@ +{ + "images" : [ + { + "filename" : "il_tokens_grid_min_width.png", + "idiom" : "universal" + }, + { + "appearances" : [ + { + "appearance" : "luminosity", + "value" : "dark" + } + ], + "filename" : "il_tokens_grid_min_width_dark.png", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width.png new file mode 100644 index 0000000000000000000000000000000000000000..856d1384d3fc0b75656484ea0b6191dc3dcdda8b GIT binary patch literal 5306 zcmeHLdsI@{8sCOl*_dN53r(7CSEtOJUPhXc6`A8J%dXFm#?moCEyV|@P~91ODZL#7 zrJ2e{BvMXlkxH*YqwqS2fQWB1MI;|UazyTNtvhSY{l9zH{Lx z{X6H}{s3<)OQavqR>8#6#MA+igm1CBBaHsgrD+}7p8u8JW^A2MNE%!MtaO0M)b!yvl$0d$Ee7H$; zL4vpQ_T*xq>!7QQ|;VxsCVr97*Z2fcjvj_O{O>ux3Cmu|R)%7+0ZB4NE#fL;%v*Kf8z43^oVLzKWU4H3C1BsV8 zd6MDhsD6FjnNlr}#A@C$w(6@@m9b4oz;!rf#V<&LbZXs*l2@y7wp6(>*g+kW!9#7F zw2^jsrwH(m!z+xacwTX1I+l6K>@Nsf`cRR3Vq zne&4KO{}c|pS<_a4qwv)?8`)(59cS`jH)Xuj+ZuaZv?5{NL?S{%ImER(yG@`&n@CK z(>fXjR{G!(k$BR!Vo0yibaJ?*SI=Fy%oEU2)g^(fJlyNDU40$36ty@Ivm$FaTqCcH zg`}Y)$|odtmQEf^acT|U>nUYyP1Gey$t>#hXb;=vfiIopXs!jKZ8$vXu?iV@4Fzw`y^bh#NsG$m$C+0*r5jxfpUyl({TRTUZ zR^y~2xc+hX+$=ap(1>F3;7E$UYg8Sxb@!Y6FucY%)qLBV(rIlXG;f?=GANCr)|!6O z8rR*s5ng>GtYMut91<|GlIM`9N6XKOS8jy*pS5Y?4;sfsJqcynq00AB(uW3pFe@!l zcj0U^k#tQ{2PL@A*WJYokc+aZ>|-^#g6T}TU_=Y?GkJwQJGcsf*4v-4;@2VN?B)h! zt;+jvwq-VaWYB#``o2f2lG^5l(+g(zHSKkw@2;&-R3}zw>lPlLNdI0=Y+-fta8g-m zdkM}#IH^DjPhTE@$)o=o|VQXwQL@36YXv!M%2>=t0hz0-a)=u9hJ?U z2uK*@g%daAK%JR|-N}-yGHNcL4<@^y?j|mj1G4kR4!y zqWC|`U7(2iZHLBfBR117OT@0zV=Kn5=}#$P+#poPp}F~0b%L{|pwY z=ojW&w->R#Ileslb`j~9vfgjpelL1zdT6-Zmwk=={j$nO0lC@M)fyS8WWXTs`$2u8 z2(7Lm{xLw8xmNtr*58veC`%r{w1UI?S|ljG;j}BAU}=iW+lS!0!6=h-+VJ&?3w;K8 zQVO{)0AtKv)}3tpb-d;4aaoG)FL*eGslT{CVFPibOa45SL zPvooa`6gJo@(xk6W%FJe_#>`z$(+nxm?2zK+)Xr?`T<_^!GF=`N+&)X+ItIXR>QD~ zs>!l_RUpmH-iL#+^N1lI)YfFxV8|1t zo)q111Id{qEjZ9Y@3D40VgVF;VPC8XTim?lx^Yw#y|mC=%}wfTd68qSkf};(4vh6U zugvjxZ((>f%0)%s{0D8-kOD}}+*KZf+SWC6p1QCFMdhy z?Td*%{_@G`N$#e?CP@~qF7vTIT)NFIQ$Aou6UUg_bJc@4taQZI-Z$z-QyKw%Uj9g z&He7p@}z4SJFeiUxQe*xnK3!i2nRtg7S<_I&WnGzXXTx13h5>S%%t~1c_YRL?B3w^telU6)Oy&2Z~ zh(&;^R{=1)18yPtgNC>XgU?K-b<=#6U2zTq@MlkmH{AC44xIea$sOU=t69^vdfNpw z_cAhu0b7rQ%}#mFX0CSH2CLCv=Ca=rXmKO3TOLr0pb_DqB(=kf@kz4-1l#81ped&J8v0K`hF>rK&=kMFYBR7DjAHTLmU zV9u`R-c Rqz;A{;DZg=!`X#D{cn9W3+(^^ literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png b/Showcase/Showcase/Resources/Assets.xcassets/Illustrations/il_tokens_grid_min_width.imageset/il_tokens_grid_min_width_dark.png new file mode 100644 index 0000000000000000000000000000000000000000..5f0d109cb9673e688649616e800463bb1da7a816 GIT binary patch literal 5424 zcmeHLX;f2L621`y1_ZPPdKxgX8%M+qyIGqpZMSSA;DRhNhQtLT5Qcp*VTszxh)RaW z7El6qqaqTL*sQVzK?p9a0TR{-5d#Jcfhk4!uEXl=MOQSC*lG4(qZjJxZV012P+Zr z$2`6V^lr0R_+dT%fX@K{9#eExr#1j!*zR@k!0{Bs{5bl0VPZO4!jB8Mw_V6F_RMLy zT%POW7WxAB1sC_?S*NdV%}?FN`{Dw5zm*%_x_;9T|MKLuFZTuwY}4sqe=z6BcTcaj zK5g;3a3;E$bp5=XJvaC2Jw6$qjI|11=q45y;MIRry0G|5q+ks=j8E6UW`Nv;FGDa( z_gYz@ToPt_#qLAIA(COK}Oq|dZ zD2rM&c>?zfO=Dy?VUJ}CVjB|yz_#yjaH78>x4`8=1{d_;^$_b!VYzO-9W2*t6JV*m z2`(Y9>347-|DXqOTF%RFa_662-4fZHysC!egMrxUDs?l`HI+AUUP#phqh4@OPQU)D z=(u4D+bq6$9`%Pge9`#_7*;yeC+k74p2TS|=e;*;;SM{bt5TG&FByzj6sPu2q$$Re z=6H`ghWw=yO(aF%67lV;0!={3ZqdXYu1gdJC!5VvD;De zIoq_f)Uw$*z^QWFl}@kFy+L zLl0Ei_D8h`+NCe8SYv=(VSVvma=*5-AF59)CfhPm)aF?M1s#If7-?MHwdJt0Bf~S}_)1uB<6wR~sdo zrjdu#U7y9s%=A!)HcZkkU>Jhldj{KwNOZenl>0@cL|?97Ee3(js~2a@hp#9EM8)Xp zD;lc*<~Y#+#O!y_G$niNa@@5m!Z0?NywU$)lX^u|j>eu^9QsRiml46}0`zb?=^;B& zG*sc^LjTdk1^Fn4f1=Pa@sUjFpLauAi$xW^+VU%BApTfMCugcYuqOkha*C?uYk;{7 zcP1jJHx&?ogqx=~ezY!v_9eOZo)orG7n`im%gI10swP zoysCe^CR!oWzdz}``uiOU#n6%?s+5IfIr$GK?2Xbxy_dQP3 zwLbq(Oy%Y|wc0+?d7AX_banTAmsyRUh%9enlSP3c #hAOqL4Ej+4fU?+f3eb+m zp8Ulr%I3+`y{|$?cGsDbZNo5med zLq0I3bkNMHxyD_O#4p}Z+($9?i#Jn3RRk5cxRqbRg<`0bPmZ`Yf*krVvCmgOXZ*A_5}Cmo^Qigc(> z@6UP-g)=+Md!awS$z7+E&T=B@(ZZdT;RAqqt3{K%^?1%0s(gZ?Z%~@T{hMNcr~U06 z6a1khqy;sozzoQ@z;nTgFfv=eD?gL%s4(y4Jh-Z0W4Y%PN$v~o!YNJiC3l=gi@u1` zhIEfbx0CwIdarPvWpbV;$4TqWTvO{10KJ(9m~9cq&pZ6)>^wcR$GlhMvqda$u5KAl zDJH?e4#5b<)Lkj#+YUB7xMJY(i*ok$8PN^0L2ZRmbFMir*Vu;iuB_AqEUbmoaF_BX zOK{^sCS~y4VoU-tHJC9ulT0M0`1ml4dNX%WPj3YJ-+VMgV*=Y{Wqzed4CCjH(!EFQ zHqPjXCTl{Se0v5nb{;8tZ|tZ+E`~v#w*i{1k07RGsAM*f82cnHv`aQ0^qR)%$r9;) zzOU*8rZMF)q9uI?jN*CHQjtlp_=D)N&dj8?B4+!O?^7Hci;gLVJ><(v!qEb2yxmyM z6!8P1m9}zJ1y2(j5OjR)Or8@rV{~uI*iJo_P?EO+sv&89q^CJq&~amsTx5f3bbl+J zXlj`46S*=)@-_ShxXoK5KnwkkR%SKBOM%>Ti}zxDii*kuIU|garj<&|*=khc7e&D| zUvxlTMZPrXU9(8Vm#O>*xINxF8GskQw(QaNQz)LPj{&ND6UyT)k5lQK4^Gu7z=oA(2KF9BGw8#QQ^8_Ple@Av&i4rB zr(_{Izu1?cNw~o(B~#BD#o`V{Sl6Fw!{+2{F5;Sfy-GY>F~UazlCY*zY|uo%+^~p z8f_0HeOcHyJ=_Nq-_R!r&@v&xB`n7zJZY+`N+^A5tWB_sGUOT!DBSZ(5}|9+tY|Z5 zmZ}_U19&f+)vIV*efmo6D?XBV)2%prAKv{J=+q^jO+3O2N-Xq#<~P;b)pX9piu8^= zGa8ys*aQg}2KKOP`s(wxj;HeE4CtENfTa#4z3=1?44U-0TK+b?k&UZ7VH?+^60bu3 zN=l#GNe#dZOp~zD)fr00YNRZBRG#+(QVgZ+-2Tc9XIQygz za9R<7hmENJ@Oj3!D#@&7{AWBu$0C={fD4SrHoMd{22YdUpXUGP^}kjTpF;Y*{%(Cb rhflTish0kiA2>dB-2ZLIslI5#|Lx)i&Br)+$N(=l--Gn;aTosqqWx0( literal 0 HcmV?d00001 diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json new file mode 100644 index 0000000000..266e28e494 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "ic_grid.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg new file mode 100644 index 0000000000..df8f300681 --- /dev/null +++ b/Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_grid.imageset/ic_grid.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Showcase/Showcase/Resources/en.lproj/Localizable.strings b/Showcase/Showcase/Resources/en.lproj/Localizable.strings index 03bd3ca037..704cb39381 100644 --- a/Showcase/Showcase/Resources/en.lproj/Localizable.strings +++ b/Showcase/Showcase/Resources/en.lproj/Localizable.strings @@ -53,12 +53,15 @@ "app_tokens_dimension_size_label" = "Size"; "app_tokens_dimension_size_description_text" = "Size refers to the specific measurements used to define the dimensions of UI elements within the design system."; -"app_tokens_dimension_size_iconWithLabel_label" = "Icon with label"; +"app_tokens_dimension_size_iconWithLabel_label" = "Icon with text"; "app_tokens_dimension_size_iconDecorative_label" = "Icon decorative"; "app_tokens_elevation_label" = "Elevation"; "app_tokens_elevation_description_text" = "Shadows are used to give the impression of distance or elevation between surfaces, which adds depth to our designs."; +"app_tokens_grid_label" = "Grid"; +"app_tokens_grid_description_text" = "Grids are used to position content and create consistent page layouts"; + "app_tokens_opacity_label" = "Opacity"; "app_tokens_opacity_description_text" = "Opacity can help distinguish foreground elements from background elements, making content easier to read and important actions more noticeable.";