feat: form elements - text input documentation

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

@@ -0,0 +1,40 @@
+{% raw %}
+{% from "wmnds/components/form-elements/input/_input.njk" import wmndsInput %}
+
+{{
+   wmndsInput({
+      id: "example-input",
+      name: "example-input",
+      type: "text",
+      required: true,
+      classes: null,
+      error: false,
+      errorMessage: {
+         contentText: "Custom error message for this example input",
+         contentHTML: null, 
+         classes: null,
+         id: null
+      }
+      label: {
+         contentText: "input label",
+         contentHTML: "<span>input label <em>updated</em></span>",
+         classes: "wmnds-m-t-20",
+         for: null
+      },
+      formGroup: {
+         classes: "wmnds-m-t-20"
+      },
+      attributes: {
+         autocomplete: false,
+         spellcheck: true,
+         autofocus: true,
+         disabled: false,
+         formId: "signup-form",
+         maxLength: "200",
+         placeholder: "input placeholder...",
+         value: null
+      }
+    })
+}}
+
+{% endraw %}

src/wmnds/components/form-elements/input/_input.njk

@@ -6,21 +6,35 @@
 
 {# Params #}
 {% 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 name = params.name if params.name else id %}
 {% 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 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 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 %}
+{# Params of label #}
+{% set labelContentText = params.label.contentText if params.label.contentText else "Form label" %}
+{% set labelContentHTML = params.label.contentHTML if params.label.contentHTML else null %}
+{% set labelClasses = params.label.classes if params.label.classes 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 class="wmnds-fe-group{{groupErrorClass}}">
+<div class="wmnds-fe-group{{groupErrorClass}}{{formGroupClasses}}">
   {{
     wmndsLabel({
-      contentText: label,
+      contentText: labelContentText,
+      contentHTML: labelContentHTML,
+      classes: labelClasses,
       for: id
     }) 
   }}
@@ -36,7 +50,16 @@
       )
     }}
   {% endif -%}
-  <input class="wmnds-fe-input{{errorClass}}{{paramClass}}" id="{{id}}" name="{{id}}" type="{{type}}"/>
+  <input 
+    class="wmnds-fe-input{{inputErrorClass}}{{classes}}" 
+    id="{{id}}" 
+    name="{{name}}" 
+    type="{{type}}"
+    {% if disabled %} disabled {% endif %}
+    {% if maxLength %} maxLength="{{maxLength}}" {% endif %} 
+    {% if placeholder %} placeholder="{{placeholder}}" {% endif %} 
+    {% if required %} required {% endif %}
+  >{% if value %}{{value}}{% endif %}</input>
 </div>
 
 {% endmacro %}

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

@@ -0,0 +1,117 @@
+{
+  "wmndsInputProps": [
+    {
+      "name": "id",
+      "type": "string",
+      "description": "<strong>Required.</strong> Must be unique. The id of the input."
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "description": "<strong>Required.</strong> The name of the input, which is submitted with the form data."
+    },
+    {
+      "name": "type",
+      "type": "string",
+      "description": "Type of input control to render. Defaults to <code class='wmnds-website-inline-code'>text</code>."
+    },
+    {
+      "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": "label",
+      "type": "Object",
+      "description": "<strong>Required.</strong> Options for the label component. See label.",
+      "arrayOptions": [
+        {
+          "name": "contentText",
+          "type": "string",
+          "description": "<strong>Required.</strong> If `contentHTML` is set, this is not required. Text to use within the label. If `contentHTML` is provided, the `contentText`  argument will be ignored."
+        },
+        {
+          "name": "contentHTML",
+          "type": "string",
+          "description": "<strong>Required.</strong> If `contentText` is set, this is not required. HTML to use within the label. If `contentHTML` is provided, the `contentText` argument will be ignored."
+        },
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the label tag."
+        }
+      ]
+    },
+    {
+      "name": "formGroup",
+      "type": "Object",
+      "description": "Options for the form-group wrapper. See formGroup options below.",
+      "arrayOptions": [
+        {
+          "name": "classes",
+          "type": "string",
+          "description": "Classes to add to the form group (e.g. to show error state for the whole group)"
+        }
+      ]
+    },
+    {
+      "name": "attributes",
+      "type": "object",
+      "description": "Attribute to identify input purpose, for instance <code class='wmnds-website-inline-code'>postal-code</code> or <code class='wmnds-website-inline-code'>username</code>. See autofill for full list of attributes that can be used.",
+      "arrayOptions": [
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "description": "If true, input should be disabled. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+        },
+        {
+          "name": "maxLength",
+          "type": "string",
+          "description": "The maxLength is the maximum number of characters allowed in the input. It's an <code class='wmnds-website-inline-code'>optional</code> field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "description": "Placeholder is a short hint that describes the expected value of a input. It's an <code class='wmnds-website-inline-code'>optional</code> field."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "description": "Optional initial value of the input."
+        }
+      ]
+    }
+  ]
+}

src/wmnds/patterns/content-cards/email-sign-up/_email-sign-up.njk

@@ -1,7 +1,6 @@
 {% macro wmndsContentCardEmailSignUp(params) %}
 {# imports #}
 {% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}
-{% from "wmnds/components/form-elements/input/_input.njk" import wmndsInput %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 {# Set #}
 {% set formClass = " wmnds-is--open" if params.expanded else "" %}

src/www/data.njk.json

@@ -92,6 +92,9 @@
         {
           "name": "Table"
         },
+        {
+          "name": "Text Input"
+        },
         {
           "name": "Warning text"
         }

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

@@ -0,0 +1,58 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Text Input" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/components/form-elements/input/_input.njk" import wmndsInput %}
+
+{% block content %}
+{% markdown %}
+
+## About
+
+### What does it do?
+
+- Allows users to enter text.
+
+### When to use it?
+
+- When user needs to enter short amount of text, e.g. name, email.
+
+### When not to use it?
+
+- When user needs to add a lot of text that might go over multiple lines
+- Use fixed width inputs for content that has known length, e.g. postcode.
+
+{% endmarkdown %}
+
+{{
+    compExample([wmndsInput()], {
+      componentPath: "wmnds/components/form-elements/input/",
+      njk: true,
+      njkProps: wmndsInputProps,
+      js: false,
+      iframe: false
+    })
+}}
+{# End Input #}
+
+{% markdown %}
+
+## Showing error
+
+{% endmarkdown %}
+
+{{
+    compExample([wmndsInput({
+        error: true,
+        errorMessage: {
+            contentText: "Input custom error message"
+        }
+    })], {
+      componentPath: "wmnds/components/form-elements/input/",
+      njk: true,
+      njkProps: wmndsInputProps,
+      js: false,
+      iframe: false
+    })
+}}
+
+{% endblock %}

src/www/pages/patterns/question-form/index.njk

@@ -66,8 +66,10 @@
                 sectionName: "About your ticket",
                 fields:
                     wmndsInput({
-                        label: "Direct Debit Reference",
-                        classNames: "wmnds-col-1-2"
+                        label: {
+                            contentText: "Direct Debit Reference"
+                        },
+                        classes: "wmnds-col-1-2"
                     }) ,
                 button:
                     wmndsButton({