HMA-8144 updated TextInputView and CurrencyInputView (#109)

* HMA-8144 updated TextInputView and CurrencyInputView * fixed text outline colour * HMA-8144 textinputview and currencyinputview update
hmrc · Feb 22, 2024 · 558d587 · 558d587
1 parent ef1d904
commit 558d587
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
-
+- Updated `TextInputView` and `CurrencyInputView` by adding a hint label, updated fonts and colours
 ## [1.12.0] - 2023-11-29Z
 - changed the render order for the background of `NotificationBubbleView` so to not be visible during UIXCTest 
 ## [1.11.3] - 2023-11-24Z

diff --git a/SUICompanionApp/SUICompanionApp/Molecules/ExampleMolecules.swift b/SUICompanionApp/SUICompanionApp/Molecules/ExampleMolecules.swift
@@ -391,6 +391,7 @@ extension Components.Molecules.TextInputView: Examplable {
             ViewWrapper(
                 model: .init(
                     title: "Title",
+                    hint: "Hint",
                     placeholder: "Placeholder",
                     leftViewText: "@leftText",
                     maxLength: 20
@@ -407,9 +408,10 @@ extension Components.Molecules.TextInputView: Examplable {
                     initialText: "Enter text",
                     model: .init(
                         title: "Enter text",
+                        hint: "A hint message below the text. this is a descriptive hint message",
                         placeholder: "Enter text here please",
                         maxLength: 0
-                    )
+                    ), error: "error"
                 ).cardView()
                 ViewWrapper(
                     initialText: "Some text",
@@ -504,6 +506,15 @@ extension Components.Molecules.CurrencyInputView: Examplable {
                     ),
                     error: nil
                 ).cardView()
+                ViewWrapper(
+                    initialText: "49.99",
+                    model: .init(
+                        title: "Pay amount",
+                        hint: "Hint text",
+                        maxLength: 0
+                    ),
+                    error: nil
+                ).cardView()
             }
         )
     }

diff --git a/Sources/SUIComponents/Molecules/CurrencyInputView.swift b/Sources/SUIComponents/Molecules/CurrencyInputView.swift
@@ -20,22 +20,25 @@ extension Components.Molecules {
     public struct CurrencyInputView: View {
         public struct Model {
             let title: String?
+            let hint: String?
             let maxLength: Int
             public init(
                 title: String? = nil,
+                hint: String? = nil,
                 maxLength: Int = 0
             ) {
                 self.title = title
+                self.hint = hint
                 self.maxLength = maxLength
             }
             fileprivate var textInputViewModel: TextInputView.Model {
                 .init(
                     title: title,
+                    hint: hint,
                     leftViewText: "£",
                     maxLength: maxLength,
                     multiLine: false,
                     keyboardType: .decimalPad,
-                    showCharCount: false,
                     shouldChangeText: { textViewText, range, replacementText in
                         let newText = (textViewText as NSString).replacingCharacters(in: range, with: replacementText)
                         return newText.isEmpty || newText.isCurrencyValue()
@@ -71,7 +74,7 @@ struct CurrencyInputView_Previews: PreviewProvider {
         }
         Components.Molecules.CurrencyInputView(
             text: textBinding,
-            model: .init(title: "Title", maxLength: 20)
+            model: .init(title: "Title", hint: "Hint", maxLength: 20)
         )
     }
 }
diff --git a/Sources/SUIComponents/Molecules/TextInputView.swift b/Sources/SUIComponents/Molecules/TextInputView.swift
@@ -20,34 +20,34 @@ extension Components.Molecules {
     public struct TextInputView: View {
         public struct Model {
             public let title: String
+            public let hint: String?
             public let placeholder: String
             public let leftViewText: String?
             public let maxLength: Int
             public let enforceMaxLength: Bool
             public let multiLine: Bool
             public let keyboardType: UIKeyboardType
-            public let showCharCount: Bool
             public let shouldChangeText: TextViewShouldChangeHandler?
 
             public init(
                 title: String? = nil,
+                hint: String? = nil,
                 placeholder: String? = nil,
                 leftViewText: String? = nil,
                 maxLength: Int = 0,
                 enforceMaxLength: Bool = true,
                 multiLine: Bool = false,
                 keyboardType: UIKeyboardType = .default,
-                showCharCount: Bool = true,
                 shouldChangeText: TextViewShouldChangeHandler? = nil
             ) {
                 self.title = title ?? ""
+                self.hint = hint
                 self.placeholder = placeholder ?? ""
                 self.leftViewText = leftViewText
                 self.maxLength = maxLength
                 self.enforceMaxLength = enforceMaxLength
                 self.multiLine = multiLine
                 self.keyboardType = keyboardType
-                self.showCharCount = showCharCount
                 self.shouldChangeText = shouldChangeText
             }
         }
@@ -64,17 +64,26 @@ extension Components.Molecules {
             self.validationError = validationError
         }
         private var accessibilityLabel: Text {
+            var text = ""
             if let validationError = validationError {
-                return Text("Error: \(validationError) - \(model.title)")
-            } else {
-                return Text(model.title)
+                text.append(" \(validationError) ")
             }
+            if let hint = model.hint {
+                text.append(" \(hint) ")
+            }
+            text.append(model.title)
+            return Text(text)
         }
         public var body: some View {
             VStack(alignment: .leading, spacing: 5) {
                 Text(model.title)
-                    .style(validationError != nil ? .error : .body)
+                    .style(.bold)
                     .accessibility(hidden: true)
+                if let hint = model.hint {
+                    Text(hint)
+                        .style(.body)
+                        .accessibility(hidden: true)
+                }
                 HStack {
                     if let leftText = model.leftViewText {
                         Text(leftText)
@@ -106,15 +115,15 @@ extension Components.Molecules {
                             Image(
                                 "clear_icon",
                                 bundle: Bundle.resource
-                            ).foregroundColor(Color.Named.grey2.colour)
+                            ).foregroundColor(Color.Named.black.colour)
                         }
                     }
                 }
                 .padding(.trailing, .spacer8)
                 .overlay(
                     RoundedRectangle(cornerRadius: 4.0)
                         .stroke(
-                            validationError != nil ? Color.Semantic.errorText : Color.Semantic.textInputBorder,
+                            Color.Named.black.colour,
                             lineWidth: 1.0
                         )
                 )
@@ -126,11 +135,6 @@ extension Components.Molecules {
                             .frame(maxWidth: .infinity, alignment: .leading)
                             .accessibility(hidden: true)
                     }
-                    if model.maxLength > 0 && model.showCharCount {
-                        Text("\(text.count)/\(model.maxLength)")
-                            .style(validationError != nil ? .error : .body)
-                            .accessibility(hidden: true)
-                    }
                 }.frame(maxWidth: .infinity, alignment: .trailing)
             }
         }
@@ -150,6 +154,7 @@ struct TextInputView_Previews: PreviewProvider {
             text: textBinding,
             model: .init(
                 title: "Title",
+                hint: "Hint",
                 leftViewText: "@LeftView",
                 maxLength: 10,
                 multiLine: false,