feat: form elements - form label documentation

src/wmnds/components/form-elements/dropdown/_dropdown.njk

@@ -9,7 +9,7 @@
   <div class="wmnds-fe-dropdown">
     {{
       wmndsLabel({
-        label: 'Dropdown label',
+        contentText: 'Dropdown label',
         for: id
       }) | trim
     }}

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

@@ -15,7 +15,7 @@
 <div class="wmnds-fe-group{{groupErrorClass}}">
   {{
     wmndsLabel({
-      label: label,
+      contentText: label,
       for: id
     }) | trim | indent
   }}

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

@@ -0,0 +1,12 @@
+{% raw %}
+{% from "wmnds/components/form-elements/label/_label.njk" import wmndsLabel %}
+
+{{
+   wmndsLabel({
+      contentText: "Form label",
+      contentHTML: null,
+      classes: null,
+      for: "genericInput"
+   })
+}}
+{% endraw %}

src/wmnds/components/form-elements/label/_label.njk

@@ -1,8 +1,11 @@
 {% macro wmndsLabel(params) %}
 {# Set vars and defaults #}
 {% set for = params.for if params.for else "genericInput" %}
-{% set label = params.label if params.label else "Form label" %}
+{% set contentText = params.contentText if params.contentText else "Form label" %}
+{% set classes = " " + params.classes if params.classes %}
+{% set contentHTML = params.contentHTML if params.contentHTML else contentText %}
+{% set _label = contentHTML | safe if contentHTML else contentText %}
 
-<label class="wmnds-fe-label" for="{{for}}">{{ label }}</label>
+<label class="wmnds-fe-label{{classes}}" for="{{for}}">{{ _label }}</label>
 
 {% endmacro %}

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

@@ -0,0 +1,24 @@
+{
+  "wmndsLabelProps": [
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the text that will be included in the label. If <code class='wmnds-website-inline-code'>contentHTML</code> is provided this is not required and will be ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the text that will be included in the label as HTML. If <code class='wmnds-website-inline-code'>contentText</code> is provided, this is not required."
+    },
+    {
+      "name": "for",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the id of the element this label should link to."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the label tag."
+    }
+  ]
+}

src/wmnds/components/form-elements/textarea/_textarea.njk

@@ -9,7 +9,7 @@
 <div class="wmnds-fe-group">
   {{
     wmndsLabel({
-      label: 'Textarea label',
+      contentText: 'Textarea label',
       for: id
     }) | trim
   }}

src/wmnds/patterns/autocomplete/_autocomplete.njk

@@ -15,7 +15,7 @@
 {{
   wmndsLabel({
     for: id,
-    label: 'Autocomplete label'
+    contentText: 'Autocomplete label'
   }) | trim
 }}
 

src/www/data.njk.json

@@ -59,6 +59,9 @@
         {
           "name": "Form elements"
         },
+        {
+          "name": "Form label"
+        },
         {
           "name": "Inset text"
         },

src/www/pages/components/form-elements/index.njk.md

@@ -26,7 +26,16 @@
 
 {% from "wmnds/components/form-elements/label/_label.njk" import wmndsLabel %}
 {{
-  compExample([wmndsLabel()])
+  compExample([
+    wmndsLabel()
+  ],
+  {
+    componentPath: "wmnds/components/form-elements/label/",
+    njk: true,
+    njkProps: wmndsLabelProps,
+    js: false,
+    iframe: false
+  })
 }}
 {# End label #}
 

src/www/pages/components/form-label/index.njk.md

@@ -0,0 +1,42 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Form label" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+{% markdown %}
+{# Label #}
+
+## About
+
+### What does it do?
+
+- Tells users what a field is for.
+
+### When to use it?
+
+- When you are requesting multiple pieces of information to answer the same question. For example, the day, month and year of a date.
+- The label must appear directly above the field.
+
+### When not to use it?
+
+- Do not use this component to ask more questions within a question - instead, ask a new question.
+- When you're giving extra information and hints to help the user answer a question.
+
+{% endmarkdown %}
+
+{% from "wmnds/components/form-elements/label/_label.njk" import wmndsLabel %}
+{{
+  compExample([
+    wmndsLabel()
+  ],
+  {
+    componentPath: "wmnds/components/form-elements/label/",
+    njk: true,
+    njkProps: wmndsLabelProps,
+    js: false,
+    iframe: false
+  })
+}}
+{# End label #}
+
+{% endblock %}