diff --git a/CHANGELOG.md b/CHANGELOG.md index 64f25bd..0cdc73f 100644 --- 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 index 19d38f6..de6d6ee 100644 --- 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 index 70b68b3..972a751 100644 --- 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 index 877f69a..49bd471 100644 --- 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,7 +115,7 @@ extension Components.Molecules { Image( "clear_icon", bundle: Bundle.resource - ).foregroundColor(Color.Named.grey2.colour) + ).foregroundColor(Color.Named.black.colour) } } } @@ -114,7 +123,7 @@ extension Components.Molecules { .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,