feat: form elements - date input documentation (#588)

* Add date input component.

* Update example.njk

* Property's text amend.

Co-authored-by: Houston Blyden <[email protected]>

* Define default errorMessage for date input component.

Co-authored-by: Houston Blyden <[email protected]>

Co-authored-by: Houston Blyden <[email protected]>

src/wmnds/components/form-elements/date-input/_date-input.njk

@@ -0,0 +1,74 @@
+{% macro wmndsDateInput(params) %}
+
+{# Imports #}
+{% from "wmnds/components/form-elements/label/_label.njk" import wmndsLabel %}
+{% from "wmnds/components/form-elements/error-message/_error-message.njk" import wmndsFeErrorMessage %}
+
+{# Params #}
+{% set id = params.id if params.id else "date-input" %}
+{% set name = params.name if params.name else id %}
+{% set required = params.required if params.required else false %}
+{% set classes = " " + params.classes if params.classes %} {# set paramClass to params.classNames if any #}
+{# Error Message Params #}
+{% set groupErrorClass = " wmnds-fe-group--error" if params.error %}
+{% set inputErrorClass = " wmnds-fe-input--error" if params.error %}
+{% set errorContentText = params.errorMessage.contentText if params.errorMessage.contentText else "Please enter a valid date" %}
+{% 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 %}
+{# Params of formGroup #}
+{% set formGroupClasses = " " + params.formGroup.classes if params.formGroup.classes else null %}
+{# Params of Attributes #}
+{% set disabled = params.attributes.disabled if params.attributes.disabled else null %}
+{% set maxLength = params.attributes.maxLength if params.attributes.maxLength else null %}
+{% set placeholder = params.attributes.placeholder if params.attributes.placeholder else null %}
+{% set value = params.attributes.value if params.attributes.value else null %}
+
+<div id="{{id}}" class="wmnds-fe-group{{groupErrorClass}}{{formGroupClasses}}">
+
+  {% if params.error -%}
+    {{
+      wmndsFeErrorMessage(
+        {
+          contentText: errorContentText,
+          contentHTML: errorContentHTML,
+          classes: errorClasses,
+          id: errorId
+        }
+      ) 
+    }}
+  {% endif -%}
+
+  <div class="wmnds-col-1-2 wmnds-col-sm-1-12 wmnds-m-r-md">
+    {{
+      wmndsLabel({
+        contentText: "Day",
+        for: "LastUsedDateDay"
+      }) 
+    }}
+    <input autocomplete="day" class="wmnds-fe-input {{inputErrorClass}}" id="LastUsedDateDay" inputmode="numeric" name="LastUsedDateDay" type="text" value="" {% if required %} required {% endif %}>
+  </div>
+
+  <div class="wmnds-col-1-2 wmnds-col-sm-1-12 wmnds-m-r-md">
+    {{
+      wmndsLabel({
+        contentText: "Month",
+        for: "LastUsedDateMonth"
+      }) 
+    }}
+    <input autocomplete="month" class="wmnds-fe-input {{inputErrorClass}}" id="LastUsedDateMonth" inputmode="numeric" name="LastUsedDateMonth" type="text" value="" {% if required %} required {% endif %}>
+  </div>
+
+  <div class="wmnds-col-1-2 wmnds-col-sm-1-8">
+    {{
+      wmndsLabel({
+        contentText: "Year",
+        for: "LastUsedDateYear"
+      }) 
+    }}
+    <input autocomplete="year" class="wmnds-fe-input {{inputErrorClass}}" id="LastUsedDateYear" inputmode="numeric" name="LastUsedDateYear" type="text" value="" {% if required %} required {% endif %}>
+  </div>
+
+</div>
+
+{% endmacro %}

src/wmnds/components/form-elements/date-input/_date-input.scss

@@ -0,0 +1,11 @@
+.wmnds-fe-input {
+  @include type-setting(0);
+  width: 100%;
+  padding: $size-sm;
+  border: 1px solid get-color(primary);
+  color: get-color(text);
+
+  &--error {
+    border: 2px solid get-color(error);
+  }
+}

src/wmnds/components/form-elements/date-input/_example.njk

@@ -0,0 +1,20 @@
+{% raw %}
+{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %}
+
+{{
+   wmndsDateInput({
+      id: "passport-date",
+      required: true,
+      error: false, 
+      errorMessage: {
+         id: null,
+         contextText: "The date your passport was issued must be in the past",
+         contextHTML: null,
+         classes: null
+      },
+      formGroup: {
+         classes: "wmnds-m-t-20"
+      }
+    })
+}}
+{% endraw %}

src/wmnds/components/form-elements/date-input/_properties.njk.json

@@ -0,0 +1,58 @@
+{
+  "wmndsDateInputProps": [
+    {
+      "name": "id",
+      "type": "string",
+      "description": "<strong>Required.</strong> Must be unique. The id of the group of inputs."
+    },
+    {
+      "name": "required",
+      "type": "boolean",
+      "description": "If true, input is required/must be filled out. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "error",
+      "type": "boolean",
+      "description": "If true, error will be displayed. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "errorMessage",
+      "type": "object",
+      "description": "Options for the error message component. See errorMessage.",
+      "arrayOptions": [
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id attribute to add to the error message span tag."
+        },
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> Text to use within the error message. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> HTML to use within the error message"
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the error message span tag."
+        }
+      ]
+    },
+    {
+      "name": "formGroup",
+      "type": "object",
+      "description": "Options for the form-group wrapper. See formGroup below.",
+      "arrayOptions": [
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+        }
+      ]
+    }
+  ]
+}

src/www/data.njk.json

@@ -47,6 +47,9 @@
         {
           "name": "Content tiles"
         },
+        {
+          "name": "Date Input"
+        },
         {
           "name": "Details"
         },

src/www/pages/components/date-input/index.njk.md

@@ -0,0 +1,57 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Date Input" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/components/form-elements/date-input/_date-input.njk" import wmndsDateInput %}
+
+{% block content %}
+{% markdown %}
+
+## About
+
+### What does it do?
+
+- Help users enter a memorable date or one they can easily look up.
+
+### When to use it?
+
+- Use the date input component when you’re asking users for a date they’ll already know, or can look up without using a calendar.
+
+### When not to use it?
+
+- Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about.
+
+{% endmarkdown %}
+
+{{
+    compExample([wmndsDateInput()], {
+      componentPath: "wmnds/components/form-elements/date-input/",
+      njk: true,
+      njkProps: wmndsDateInputProps,
+      js: false,
+      iframe: false
+    })
+}}
+{# End Input #}
+
+{% markdown %}
+
+## Showing error
+
+{% endmarkdown %}
+
+{{
+    compExample([wmndsDateInput({
+        error: true,
+        errorMessage: {
+            contentText: "Date input custom error message"
+        }
+    })], {
+      componentPath: "wmnds/components/form-elements/date-input/",
+      njk: true,
+      njkProps: wmndsDateInputProps,
+      js: false,
+      iframe: false
+    })
+}}
+
+{% endblock %}