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 <[email protected]> Co-authored-by: Houston Blyden <[email protected]>
wmcadigital · Jan 12, 2021 · 1ee82f0 · 1ee82f0
1 parent c01f434
commit 1ee82f0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 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
@@ -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 %}]
diff --git 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}}"/>