feat: add tokens section (border, elevation, opacity, typography) in …

…demo app (#120) (#137)

Co-authored-by: Ludovic PINEL <[email protected]>
Co-authored-by: Pierre-Yves Lapersonne <[email protected]>
Signed-off-by: Pierre-Yves Lapersonne <[email protected]>

.swiftlint.yml

@@ -31,6 +31,8 @@ excluded:
 - Showcase/Pods
 - Showcase/DerivedData
 
+strict: true
+
 # ==============
 # Disabled rules
 # ==============

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [Library] Add color semantic tokens `colorBackgroundStatusNeutral`, some `OnBackgroundEmphasized`, `colorBackgroundAction`, `colorBackgroundAlways`, `colorContent` variants
 - [Library] Add typography semantic tokens for font letter spacing
+- [DemoApp] Create token section (Border, Typography, Elevation, Opacity) ([#120](https://github.com/Orange-OpenSource/ouds-ios/issues/120))
 - [Library] Unit tests for multiple tokens
 - [Library] Add color semantic composite tokens embeding light and dark modes values
 - [Library] Add spacing semantic tokens "huge" and "jumbo"

NOTICE.txt

@@ -66,8 +66,14 @@ Any use or displaying shall constitute an infringement under intellectual proper
 ./Showcase/Showcase/Resources/Assets.xcassets/AppIconQualif.appiconset/[email protected]
 ./Showcase/Showcase/Resources/Assets.xcassets/AppIconQualif.appiconset/[email protected]
 
-./Showcase/Showcase/Resources/Assets.xcassets/ic_guideline_dna.imageset/ic_guideline_dna.svg
+./Showcase/Showcase/Resources/Assets.xcassets/ic_token.imageset/ic_token.svg
 ./Showcase/Showcase/Resources/Assets.xcassets/ic_component_atom.imageset/ic_component_atom.svg
 ./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/Tokens/ic_border.imageset/ic_border.svg
+./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_filter_effects.imageset/ic_filter_effects.svg
+./Showcase/Showcase/Resources/Assets.xcassets/Tokens/ic_layers.imageset/ic_layers.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

OUDS/Core/Components/Sources/Buttons/OUDSButton.swift

@@ -11,7 +11,7 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System
 //
 
-import Foundation
+import OUDS
 import OUDSFoundations
 import OUDSTokensSemantic
 import SwiftUI
@@ -63,10 +63,10 @@ public struct OUDSButton: View {
  .foregroundColor(colorScheme == .light
  ? theme.buttonForegroundColor.light.color
  : theme.buttonForegroundColor.dark.color)
- .modifier(BorderStyleModifier(theme.buttonBorderStyle,
-   theme.buttonBorderWidth,
-   theme.buttonBorderRadius,
-  theme.buttonBorderColor))
+ .oudsBorder(style: theme.buttonBorderStyle,
+ width: theme.buttonBorderWidth,
+ radius: theme.buttonBorderRadius,
+ color: theme.buttonBorderColor)
  }.frame(width: theme.buttonWidth, height: theme.buttonHeight)
  }
 }

OUDS/Core/Components/Sources/Extensions/View+Font.swift

@@ -11,7 +11,6 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System 
 //
 
-import Foundation
 import OUDSTokensSemantic
 import SwiftUI
 

OUDS/Core/Components/Sources/Extensions/View+Shadows.swift

@@ -11,22 +11,20 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System 
 //
 
-import Foundation
-import OUDSTokensSemantic
+import OUDSTokensRaw
 import SwiftUI
 
 extension View {
 
  /// Wraps the *SwiftUI* `shadow(color:radius:x:y)` method so as to use as `radius` value
- /// the computed `radius` value of the given `ElevationCompositeSemanticToken`.
+ /// the computed `radius` value of the given `ElevationCompositeRawToken`.
  /// - Parameter elevation: The token to give for the shadow / elevation effect
  /// - Returns `View`: The current `View` with the shadow / elevation effect
- public func shadow(elevation: ElevationCompositeSemanticToken) -> some View {
- // TODO: Manage light and dark color scheme
+ public func shadow(elevation: ElevationCompositeRawToken) -> some View {
  return self
- .shadow(color: elevation.light.color.color,
- radius: elevation.light.radius,
- x: CGFloat(elevation.light.x),
- y: CGFloat(elevation.light.y))
+ .shadow(color: elevation.color.color,
+ radius: elevation.radius,
+ x: CGFloat(elevation.x),
+ y: CGFloat(elevation.y))
  }
 }

OUDS/Core/Components/Sources/Extensions/View+Typography.swift

@@ -11,7 +11,6 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System 
 //
 
-import Foundation
 import OUDS
 import SwiftUI
 
@@ -191,15 +190,15 @@ extension View {
  /// The current `OUDSTheme` must be given in parameter because `@Environment` property cannot be accessed through an extension or inside a method.
  /// - Parameter theme: The current `OUDSTheme` to use to load the current font family and the suitable typography semantic token.
  /// - Returns some View: The current `View` but with new typography applied
- public func typeLabelCodeMedium(_ theme: OUDSTheme) -> some View {
+ public func typeCodeMedium(_ theme: OUDSTheme) -> some View {
  self.modifier(TypographyModifier(customFontFamily: theme.customFontFamily, typography: theme.typeCodeMedium))
  }
 
  /// Modifies the current `View` to apply a *code small* typography.
  /// The current `OUDSTheme` must be given in parameter because `@Environment` property cannot be accessed through an extension or inside a method.
  /// - Parameter theme: The current `OUDSTheme` to use to load the current font family and the suitable typography semantic token.
  /// - Returns some View: The current `View` but with new typography applied
- public func typeLabelCodeSmall(_ theme: OUDSTheme) -> some View {
+ public func typeCodeSmall(_ theme: OUDSTheme) -> some View {
  self.modifier(TypographyModifier(customFontFamily: theme.customFontFamily, typography: theme.typeCodeSmall))
  }
 }

OUDS/Core/Components/Sources/ViewModifiers/AccessibleModifiers/AccessibleModifiers.swift

@@ -0,0 +1,86 @@
+//
+// 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
+
+// MARK: - Accessible Navigation Title Modifier
+
+/// `ViewModifier` which defines a navigation title for the calling `View` and also uses `UIAccessibility` to notify for screen changed.
+struct AccessibleNavigationTitleModifier: ViewModifier {
+
+ /// The title used as a `LocalizedStringKey` to add as navigation title
+ let title: String
+
+ /// Elapsed time to wait before sending an accessibility notification of a screen change with the `title` in argument
+ let deadline: DispatchTime
+
+ func body(content: Content) -> some View {
+ content
+ .navigationTitle(LocalizedStringKey(title))
+ .onAppear {
+ DispatchQueue.main.asyncAfter(deadline: deadline) {
+ UIAccessibility.post(notification: .screenChanged, argument: title)
+ }
+ }
+ }
+}
+
+// MARK: - Request Accessible Focus Modifier
+
+/// `ViewModifier` to apply on a a `View` so as to request the focus after a given time.
+struct RequestAccessibleFocusModifier: ViewModifier {
+
+ /// Flag to listen saying wether or not the `View` got the focus
+ @AccessibilityFocusState var requestFocus: Bool
+
+ /// Elapsed time to wait before requesting the focus
+ let deadline: DispatchTime
+
+ func body(content: Content) -> some View {
+ content.onAppear {
+ DispatchQueue.main.asyncAfter(deadline: deadline) {
+ requestFocus = true
+ }
+ }
+ }
+}
+
+// MARK: - Accessibility Focusable
+
+public enum AccessibilityFocusable: Hashable {
+ case none
+ case some(id: String)
+}
+
+// MARK: - Restricted Request Accessible Focus Modifier
+
+/// `ViewModifier` to apply on a `View` to request the focus on that `View` after a given time
+struct RestrictedRequestAccessibleFocusModifier: ViewModifier {
+
+ /// Flag to listen saying wether or not the `View` got the focus
+ @AccessibilityFocusState var requestFocus: AccessibilityFocusable?
+
+ /// The target to give the focus after the deadLine` delay
+ let target: AccessibilityFocusable
+
+ /// Elapsed time to wait before requesting the focus
+ let deadline: DispatchTime
+
+ func body(content: Content) -> some View {
+ content.onAppear {
+ DispatchQueue.main.asyncAfter(deadline: deadline) {
+ requestFocus = target
+ }
+ }
+ }
+}

OUDS/Core/Components/Sources/ViewModifiers/AccessibleModifiers/View+extensions.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 SwiftUI
+
+// MARK: - Accessibility Delay
+
+/// Contains some delays to apply to view modifiers' deadlines for vocalizations or accessibility notifications
+private enum AccessibilityDelay: Double {
+ // Must be lower than accesibleFocusRequestDelay to start before
+ case accessibleTitleNotificationDelay = 0.0
+ // Must be greater than accessibleTitleNotificationDelay to start after
+ case accessibleFocusRequestDelay = 1.0
+}
+
+// MARK: - View extension
+
+extension View {
+
+ /// Adds a modifier to the current `View` so as to define a navigation title using the current `title`
+ /// and also send a notification for accessibility layers for a change of screen when appeared.
+ /// - Parameter title: The navigation title
+ /// - Returns View: The view with a new modifier
+ public func oudsNavigationTitle(_ title: String) -> some View {
+ self.modifier(AccessibleNavigationTitleModifier(title: title,
+ deadline: .now() + AccessibilityDelay.accessibleTitleNotificationDelay.rawValue))
+ }
+
+ /// Adds a modifier to the current `View` so as to defer a focus request after the view is displayed
+ /// - Parameter requestFocus: The boolean binding (e.g. the `AccessibilityFocusState`)
+ /// - Returns View: The view with a new modifier
+ public func oudsRequestAccessibleFocus(_ requestFocus: AccessibilityFocusState<Bool>) -> some View {
+ self.modifier(RequestAccessibleFocusModifier(requestFocus: requestFocus,
+ deadline: .now() + AccessibilityDelay.accessibleFocusRequestDelay.rawValue))
+ }
+
+ /// Adds a modifier to the current `View` so as to defer a focus request after the view is displayed for the given element
+ /// - Parameters:
+ /// - requestFocus: The boolean binding (e.g. the `AccessibilityFocusState`)
+ /// - target: The item which will get the focus
+ /// - Returns View: The view with a new modifier
+ public func oudsRequestAccessibleFocus(_ requestFocus: AccessibilityFocusState<AccessibilityFocusable?>, for target: AccessibilityFocusable) -> some View {
+ self.modifier(RestrictedRequestAccessibleFocusModifier(requestFocus: requestFocus,
+ target: target,
+ deadline: .now() + AccessibilityDelay.accessibleFocusRequestDelay.rawValue))
+ }
+}