chore: borders and background colors (#998)

Signed-off-by: Pierre-Yves Lapersonne <pierreyves.lapersonne@orange.com>

Author: pylapp

OUDS/Core/Components/Sources/Controls/PinCodeInput/Internal/PinCodeInputBorderModifier.swift

@@ -0,0 +1,60 @@
+//
+// 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
+//
+
+#if !os(watchOS) && !os(macOS)
+import OUDSTokensSemantic
+import SwiftUI
+
+/// `ViewModifier` to draw borders on text fields in `OUDSPinCodeInput`` component
+struct PinCodeInputBorderModifier: ViewModifier {
+
+    let isOutlined: Bool
+    let isError: Bool
+    let isFocused: Bool
+
+    @Environment(\.theme) private var theme
+
+    func body(content: Content) -> some View {
+        if !isOutlined {
+            content
+                .overlay(
+                    Rectangle()
+                        .frame(height: borderWidth)
+                        .oudsForegroundColor(borderColor),
+                    alignment: .bottom)
+        } else {
+            content
+                .oudsBorder(style: theme.borders.styleDefault,
+                            width: borderWidth,
+                            radius: theme.textInput.borderRadiusDefault,
+                            color: borderColor)
+        }
+    }
+
+    // MARK: - Helpers
+
+    private var borderColor: MultipleColorSemanticToken {
+        if isError {
+            return theme.colors.actionNegativeEnabled
+        }
+        if isFocused {
+            return theme.textInput.colorBorderFocus
+        }
+        return theme.textInput.colorBorderEnabled
+    }
+
+    private var borderWidth: BorderWidthSemanticToken {
+        isFocused ? theme.textInput.borderWidthFocus : theme.textInput.borderWidthDefault
+    }
+}
+#endif

OUDS/Core/Components/Sources/Controls/PinCodeInput/Internal/PinCodeInputContainer.swift

@@ -15,11 +15,9 @@
 import OUDSTokensSemantic
 import SwiftUI
 
-// MARK: - PIN Code Input Container
-
 struct PinCodeInputContainer: View {
 
-    // MARK: Properties
+    // MARK: - Properties
 
     /// The `Binding` exposing the final result when everything is written
     @Binding private var value: String
@@ -38,7 +36,7 @@ struct PinCodeInputContainer: View {
     @Environment(\.colorScheme) private var colorScheme
     @Environment(\.theme) private var theme
 
-    // MARK: Black magic
+    // MARK: - Black magic
 
     // These properties prevent double backspace processing by tracking which field was cleared and when.
     // When a backspace occurs, we mark the field index and timestamp, then skip onChange events
@@ -52,7 +50,7 @@ struct PinCodeInputContainer: View {
     @State private var lastBackspaceTime: Date = .distantPast
     // swiftlint:enable implicit_optional_initialization
 
-    // MARK: Initializer
+    // MARK: - Initializer
 
     init(_ value: Binding<String>,
          length: OUDSPinCodeInput.Length,
@@ -68,7 +66,7 @@ struct PinCodeInputContainer: View {
         _digits = State(initialValue: empty)
     }
 
-    // MARK: Body
+    // MARK: - Body
 
     // swiftlint:disable accessibility_trait_for_button
     var body: some View {
@@ -83,15 +81,9 @@ struct PinCodeInputContainer: View {
                     .background(
                         RoundedRectangle(cornerRadius: theme.textInput.borderRadiusDefault)
                             .fill(backgroundColor))
-                    .overlay(
-                        RoundedRectangle(cornerRadius: theme.textInput.borderRadiusDefault)
-                            .oudsBorder(
-                                style: theme.borders.styleDefault,
-                                width: theme.textInput.borderWidthDefault,
-                                radius: theme.textInput.borderRadiusDefault,
-                                color: borderColor))
                     .contentShape(Rectangle())
-                    .foregroundColor(backgroundColor)
+                    .foregroundColor(foregroundColor)
+                    .modifier(PinCodeInputBorderModifier(isOutlined: isOutlined, isError: isError, isFocused: focusedIndex == index))
                     .onTapGesture {
                         // Focus on the first empty field or the last one
                         if let firstEmpty = digits.firstIndex(where: { $0.isEmpty }) {
@@ -112,22 +104,38 @@ struct PinCodeInputContainer: View {
 
     // swiftlint:enable accessibility_trait_for_button
 
-    // MARK: Helpers
+    // MARK: - Colors
+
+    private var foregroundColor: Color {
+        if isOutlined {
+            .red
+        } else if isError {
+            theme.colors.surfaceStatusNegativeMuted.color(for: colorScheme)
+        } else { // Not oulined, no error
+            theme.colors.actionSupportEnabled.color(for: colorScheme)
+        }
+    }
 
     private var backgroundColor: Color {
         if isOutlined {
             .clear
         } else if isError {
             theme.colors.surfaceStatusNegativeMuted.color(for: colorScheme)
-        } else {
+        } else { // Not oulined, no error
             theme.colors.actionSupportEnabled.color(for: colorScheme)
         }
     }
 
     private var borderColor: MultipleColorSemanticToken {
-        isError ? theme.colors.actionNegativeEnabled : theme.colors.actionSupportEnabled
+        if isError {
+            theme.colors.actionNegativeEnabled
+        } else { // Same color of border for both outlined and not outlined layouts
+            theme.textInput.colorBorderEnabled
+        }
     }
 
+    // MARK: - Digits fields
+
     private func digitField(at index: Int) -> some View {
         BackspaceDetectingTextField(
             text: $digits[index],
@@ -136,6 +144,7 @@ struct PinCodeInputContainer: View {
                 handleBackspace(at: index)
             })
             .oudsForegroundColor(theme.colors.contentDefault)
+            .oudsAccentColor(theme.colors.contentDefault)
             .focused($focusedIndex, equals: index)
             .padding(.vertical, theme.textInput.spacePaddingBlockDefault)
             .padding(.horizontal, theme.textInput.spacePaddingInlineDefault)

OUDS/Core/Components/Sources/_/Resources/Localizable.xcstrings

@@ -681,6 +681,10 @@
           }
         }
       }
+    },
+    "Digit %lld" : {
+      "comment" : "A label for each digit in the PIN code input. The number inside the label corresponds to the digit's position (e.g. \"Digit 1\").",
+      "isCommentAutoGenerated" : true
     }
   },
   "version" : "1.1"

OUDS/Core/Components/Tests/Controls/PinCodeInput/OUDSPinCodeInputTests.swift

@@ -11,16 +11,18 @@
 // Software description: A SwiftUI components library with code examples for Orange Unified Design System
 //
 
+#if !os(watchOS) && !os(macOS)
 import OUDSComponents
 import Testing
 
 /// Tests some API for `OUDSPinCodeInput`
 struct OUDSPinCodeInputTests {
 
     /// Test the raw values for the length of the component
-    @Test func pinCodeInputLengthValues() {
+    func pinCodeInputLengthValues() {
         #expect(OUDSPinCodeInput.Length.four.rawValue == 4)
         #expect(OUDSPinCodeInput.Length.six.rawValue == 6)
         #expect(OUDSPinCodeInput.Length.eight.rawValue == 8)
     }
 }
+#endif