-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add code samples to show how to use token in tokens pages of de…
…mo app (#283) (#297) Signed-off-by: Pierre-Yves Lapersonne <[email protected]> Co-authored-by: Ludovic PINEL <[email protected]>
- Loading branch information
1 parent
4baef6c
commit dcd69ea
Showing
21 changed files
with
260 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| // | ||
| // 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 { | ||
|
|
||
| // MARK: Environment properties | ||
|
|
||
| @Environment(\.theme) private var theme | ||
| @Environment(\.colorScheme) private var colorScheme | ||
|
|
||
| // MARK: Stored properties | ||
|
|
||
| @State private var isCodeVisible = false | ||
| 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("ic_chevron-up") | ||
| .resizable() | ||
| .renderingMode(.template) | ||
| .rotationEffect(Angle.degrees(isCodeVisible ? 0 : 180)) | ||
| .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.colorBgStatusPositiveMuted.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() { | ||
| withAnimation { | ||
| isCodeVisible.toggle() | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-down.imageset/Contents.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
Binary file added
BIN
+720 Bytes
...e/Resources/Assets.xcassets/Tokens/ic_chevron-down.imageset/ic_chevron-down.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 21 additions & 0 deletions
21
Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_chevron-up.imageset/Contents.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
Binary file added
BIN
+698 Bytes
...wcase/Resources/Assets.xcassets/Tokens/ic_chevron-up.imageset/ic_chevron-up.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.