From 1ee82f0a965ea71f1402a4ed2525e705cf9dc9e6 Mon Sep 17 00:00:00 2001
From: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>
Date: Tue, 12 Jan 2021 14:24:34 +0000
Subject: [PATCH] feat: Form elements - error message documentation (#582)

* Move error message component to own page. Add properties and example.njks. Update error message use case (input).

* Delete error message page.

* Remove Error message example and properties.

* Maintain error message inside form-elements folder.

* Update default error message for text input.

Co-authored-by: Houston Blyden <h.blyden@gmail.com>

Co-authored-by: Houston Blyden <h.blyden@gmail.com>
---
 .../error-message/_error-message.njk           |  8 +++++++-
 .../components/form-elements/input/_input.njk  | 18 +++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/wmnds/components/form-elements/error-message/_error-message.njk b/src/wmnds/components/form-elements/error-message/_error-message.njk
index a175a8d8d..00b4fa9c4 100644
--- a/src/wmnds/components/form-elements/error-message/_error-message.njk
+++ b/src/wmnds/components/form-elements/error-message/_error-message.njk
@@ -1,6 +1,12 @@
 {% macro wmndsFeErrorMessage(params) %}
 
 {# Params #}
-<span class="wmnds-fe-error-message">This is an example error message</span>
+{% set contentText = params.contentText if params.contentText else "This is an example error message" %}
+{% set contentHTML = params.contentHTML if params.contentHTML else null %}
+{% set _content = contentHTML | safe if contentHTML else contentText %} {# change content based on what user has input #}
+{% set id = params.id if params.id else null %}
+{% set classes = " " + params.classes if params.classes else null %}
+
+<span class="wmnds-fe-error-message{{classes}}" {% if id %} id="{{id}}" {% endif %}>{{_content}}</span>
 
 {% endmacro %}]
\ No newline at end of file
diff --git a/src/wmnds/components/form-elements/input/_input.njk b/src/wmnds/components/form-elements/input/_input.njk
index 35c2af9d0..7c4b8c343 100644
--- a/src/wmnds/components/form-elements/input/_input.njk
+++ b/src/wmnds/components/form-elements/input/_input.njk
@@ -8,20 +8,32 @@
 {% set id = params.id if params.id else "input" %}
 {% set label = params.label if params.label else "Input Label" %}
 {% set paramClass = " " + params.classNames if params.classNames %} {# set paramClass to params.classNames if any #}
+{% set type = params.type if params.type else "text" %}
 {% set groupErrorClass = " wmnds-fe-group--error" if params.error %}
 {% set errorClass = " wmnds-fe-input--error" if params.error %}
-{% set type = params.type if params.type else "text" %}
+{# Error Message Params #}
+{% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please enter a value" %}
+{% set errorContentHTML = params.errorMessage.contentHTML if params.errorMessage.contentHTML else null %}
+{% set errorClasses = " " + params.errorMessage.classes if params.errorMessage.classes else null %}
+{% set errorId = params.errorMessage.id if params.errorMessage.id else null %}
 
 <div class="wmnds-fe-group{{groupErrorClass}}">
   {{
     wmndsLabel({
       label: label,
       for: id
-    }) | trim | indent
+    }) 
   }}
   {% if params.error -%}
     {{
-      wmndsFeErrorMessage() | trim | indent
+      wmndsFeErrorMessage(
+        {
+          contentText: errorContentText,
+          contentHTML: errorContentHTML,
+          classes: errorClasses,
+          id: errorId
+        }
+      )
     }}
   {% endif -%}
   <input class="wmnds-fe-input{{errorClass}}{{paramClass}}" id="{{id}}" name="{{id}}" type="{{type}}"/>