Digital ACT191 story ONEAPP-6682 highlight text color, background color for character counter

VDS/Components/TextFields/TextArea/TextArea.swift

@@ -87,6 +87,21 @@ open class TextArea: EntryFieldBase {
         $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forDisabled: false)
     }.eraseToAnyColorable() { didSet { setNeedsUpdate() } }
         
+    /// Color configuration for error icon.
+    internal var iconColorConfiguration = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .normal)
+    }
+    
+    /// Color configuration for character counter's highlight background color
+    internal var highlightBackgroundColor = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .normal)
+    }
+
+    /// Color configuration for character counter's highlight text color
+    internal var highlightTextColor = ControlColorConfiguration().with {
+        $0.setSurfaceColors(VDSColor.elementsPrimaryOndark, VDSColor.elementsPrimaryOnlight, forState: .normal)
+    }
+    
     //--------------------------------------------------
     // MARK: - Overrides
     //--------------------------------------------------
@@ -106,7 +121,6 @@ open class TextArea: EntryFieldBase {
         textViewHeightConstraint?.isActive = true
         backgroundColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessBackgroundOnlight, VDSColor.feedbackSuccessBackgroundOndark, forState: .success)
         borderColorConfiguration.setSurfaceColors(VDSColor.feedbackSuccessOnlight, VDSColor.feedbackSuccessOndark, forState: .success)
-        
         textView.delegate = self
     }
     
@@ -151,13 +165,15 @@ open class TextArea: EntryFieldBase {
         }
         
         icon.size = .medium
+        icon.color = iconColorConfiguration.getColor(self)
         containerView.layer.borderColor = readOnly ? readOnlyBorderColorConfiguration.getColor(self).cgColor : borderColorConfiguration.getColor(self).cgColor
         textView.isEditable = readOnly ? false : true
         textView.backgroundColor = backgroundColorConfiguration.getColor(self)
         characterCounterLabel.textColorConfiguration = primaryColorConfiguration.eraseToAnyColorable()
+        textView.tintColor = iconColorConfiguration.getColor(self)
     }
     
-    /// Container for the area which shows helper text, error text, character count, max length value.
+    /// Container for the area showing helper text, error text, character count, maximum length value.
     open override func getBottomContainer() -> UIView {
         bottomView.addSubview(bottomStackView)
         bottomStackView.pinToSuperView()
@@ -182,6 +198,15 @@ open class TextArea: EntryFieldBase {
             return ("\(countStr)" + "/" + "\(maxLength ?? 0)")
         }
     }
+    
+    open func highlightCharacterOverflow() {
+        let count = textView.text.count
+        print("count: \(count), maxLength: \(maxLength ?? 0)")
+        guard let text = textView.attributedText?.mutableCopy() as? NSMutableAttributedString else { return }
+        text.addAttribute(NSAttributedString.Key.backgroundColor, value: highlightBackgroundColor.getColor(self), range: NSRange(location:(maxLength ?? 0 ), length: (count - (maxLength ?? 0))))
+        text.addAttribute(NSAttributedString.Key.foregroundColor, value: highlightTextColor.getColor(self), range: NSRange(location:(maxLength ?? 0 ), length: (count - (maxLength ?? 0))))
+        textView.attributedText = text.copy() as? NSAttributedString
+    }
 }
 
 extension TextArea: UITextViewDelegate {
@@ -189,29 +214,35 @@ extension TextArea: UITextViewDelegate {
     // MARK: - UITextViewDelegate
     //--------------------------------------------------
     public func textViewDidChange(_ textView: UITextView) {
-      
+        
         //dynamic textView Height sizing based on Figma
         //if you want it to work "as-is" delete this code
         //since it will autogrow with the current settings
         if let textViewHeightConstraint, textView.isEditable {
             let height = textView.contentSize.height
-                if height > 88 && height < 176 {
+            if height > 88 && height < 176 {
-                    textViewHeightConstraint.constant = 176
+                textViewHeightConstraint.constant = 176
-                } else if height > 176 {
+            } else if height > 176 {
-                    textViewHeightConstraint.constant = 352
+                textViewHeightConstraint.constant = 352
-                } else {
+            } else {
-                    textViewHeightConstraint.constant = 88
+                textViewHeightConstraint.constant = 88
-                }
+            }
             textViewHeightConstraint.isActive = true
         }
         
+        //The exceeding characters will be highlighted to help users correct their entry.
         if ((maxLength ?? 0) > 0) {
             if textView.text.count <= allowCharCount {
                 //setting the value and firing control event
                 value = textView.text
                 sendActions(for: .valueChanged)
+                
+                if (textView.text.count > (maxLength ?? 0)) {
+                    highlightCharacterOverflow()
+                }
             } else {
                 textView.text.removeLast()
+                highlightCharacterOverflow()
             }
         } else {
             //setting the value and firing control event