feat: add a border around the view showing the opacity in opacity screen (#157) (#162)

Reviewed-by: Pierre-Yves Lapersonne <[email protected]>

Author: ludovic35

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased](https://github.com/Orange-OpenSource/ouds-ios/compare/0.3.0...develop)
 
+### Added
+
+- [DemoApp] On opacity screen, add a border around the view showing the opacity ([#157](https://github.com/Orange-OpenSource/ouds-ios/issues/157))
+
 ## [0.3.0](https://github.com/Orange-OpenSource/ouds-ios/compare/0.2.0...0.3.0) - 2024-10-04
 
 ### Added

OUDS/Core/Components/Sources/ViewModifiers/BorderModifiers/BorderModifier.swift

@@ -29,12 +29,12 @@ struct BorderModifier: ViewModifier {
     /// The radius of the border to apply
     private let radius: BorderRadiusSemanticToken
 
-    /// The colors of the border
+    /// The color token used for the border
     private let color: ColorSemanticToken
 
     /// Color to apply depending to the `colorScheme`
     private var colorToApply: Color {
-        (colorScheme == .light ? color.light.color : color.dark.color)
+        color.color(for: colorScheme)
     }
 
     /// To know if the device is in light mode or in dark mode

Showcase/Showcase.xcodeproj/project.pbxproj

@@ -86,7 +86,6 @@
 		073543172CA172CA001187EA /* TypographyTokenElement.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypographyTokenElement.swift; sourceTree = "<group>"; };
 		0735431A2CA18C48001187EA /* TypographyTokenPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TypographyTokenPage.swift; sourceTree = "<group>"; };
 		073543222CA192F9001187EA /* TokenElement.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = TokenElement.swift; sourceTree = "<group>"; };
-		073543232CA192F9001187EA /* ShacaseElementPage.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ShacaseElementPage.swift; sourceTree = "<group>"; };
 		074008222C942810006B8729 /* Snapshot.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Snapshot.swift; sourceTree = "<group>"; };
 		0740A9872C9833670069D24A /* Appfile */ = {isa = PBXFileReference; lastKnownFileType = text; name = Appfile; path = fastlane/Appfile; sourceTree = "<group>"; };
 		0740A9882C9833670069D24A /* Fastfile */ = {isa = PBXFileReference; lastKnownFileType = text; name = Fastfile; path = fastlane/Fastfile; sourceTree = "<group>"; };
@@ -132,7 +131,7 @@
 		51BD761C2C466FCF0033365D /* WebView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = WebView.swift; sourceTree = "<group>"; };
 		51BD761E2C466FCF0033365D /* Showcase.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Showcase.swift; sourceTree = "<group>"; };
 		51BD761F2C466FCF0033365D /* MainView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MainView.swift; sourceTree = "<group>"; };
-		51E3FF0A2CAFD9AE00F1BC59 /* ShowcaseElementPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = ShowcaseElementPage.swift; path = Showcase/Pages/Utils/ShowcaseElementPage.swift; sourceTree = "<group>"; };
+		51E3FF0A2CAFD9AE00F1BC59 /* ShowcaseElementPage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShowcaseElementPage.swift; sourceTree = "<group>"; };
 		974E2EAB64D9123627CD7D29 /* Pods-DemoApp.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DemoApp.release.xcconfig"; path = "Target Support Files/Pods-DemoApp/Pods-DemoApp.release.xcconfig"; sourceTree = "<group>"; };
 		BF4130905502F287757622E2 /* Pods-DemoApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-DemoApp.debug.xcconfig"; path = "Target Support Files/Pods-DemoApp/Pods-DemoApp.debug.xcconfig"; sourceTree = "<group>"; };
 		E0D3017314DBC1733F8D0C79 /* Pods_Showcase.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Showcase.framework; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -182,8 +181,8 @@
 			children = (
 				0735430F2CA15440001187EA /* Cards */,
 				51BD760F2C466FCF0033365D /* ShowcaseElementsPage.swift */,
+				51E3FF0A2CAFD9AE00F1BC59 /* ShowcaseElementPage.swift */,
 				073543152CA17275001187EA /* ShowcaseElement.swift */,
-				073543232CA192F9001187EA /* ShacaseElementPage.swift */,
 			);
 			path = Utils;
 			sourceTree = "<group>";
@@ -262,7 +261,6 @@
 		07FDCD882C296A500009AA13 = {
 			isa = PBXGroup;
 			children = (
-				51E3FF0A2CAFD9AE00F1BC59 /* ShowcaseElementPage.swift */,
 				07FDCDA32C296B170009AA13 /* 🛠 */,
 				51BD76202C466FCF0033365D /* Showcase */,
 				0740A9902C9873500069D24A /* ShowcaseTests */,

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

@@ -12,6 +12,7 @@
 //
 
 import OUDS
+import OUDSComponents // for BorderStyleModifier
 import OUDSTokensSemantic
 import SwiftUI
 
@@ -50,6 +51,10 @@ struct OpacityTokenPage: View {
                 Rectangle().fill(colorScheme == .dark ? .white : .black)
                     .opacity(opacityToken)
                     .frame(width: 44, height: 44)
+                    .oudsBorder(style: theme.borderStyleDefault,
+                                width: theme.borderWidthThin,
+                                radius: theme.borderRadiusNone,
+                                color: theme.colorContentDefault!)
                     .transformEffect(CGAffineTransform(translationX: 10, y: 10))
             }
             .frame(width: 54, height: 54, alignment: .leading)