feat: loader documentation (#537)

* added markdown, njk examples + properties

* update example

* add classes property

* add classes param

* added markdown, njk examples + properties

* update example

* add classes property

* add classes param

* add classes to example

* update param name

* fix typo

* change size type

* markdown amends

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

src/wmnds/components/button/_button.njk

@@ -45,7 +45,7 @@
       {{ _content }}
       {{
         wmndsLoader({
-          customClass: 'wmnds-btn__icon wmnds-btn__icon--right',
+          classes: 'wmnds-btn__icon wmnds-btn__icon--right',
           size: 'btn'
         })
       }}

src/wmnds/components/loader/_example.njk

@@ -0,0 +1,10 @@
+{% raw %}
+{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
+
+{{
+    wmndsLoader({
+        size: "small",
+        classes: null
+    })
+}}
+{% endraw %}

src/wmnds/components/loader/_loader.njk

@@ -5,10 +5,10 @@
 Only two size modifiers are 'large' and 'small' #}
 {% set size = " wmnds-loader--" + params.size if params.size %}
 {% set commentSize = params.size if params.size else "normal" %}
-{% set customClass = " " + params.customClass if params.customClass %} {# Allows custom classes to be added to loader #}
+{% set classes = " " + params.classes if params.classes %} {# Allows custom classes to be added to loader #}
 
 <!-- {{commentSize}} sized loader -->
-<div class="wmnds-loader{{size}}{{customClass}}" role="alert" aria-live="assertive">
+<div class="wmnds-loader{{size}}{{classes}}" role="alert" aria-live="assertive">
   <p class="wmnds-loader__content">Content is loading...</p>
 </div>
 

src/wmnds/components/loader/_properties.njk.json

@@ -0,0 +1,14 @@
+{
+  "wmndsLoaderProps": [
+    {
+      "name": "size",
+      "type": "string",
+      "description": "Determines the display size of the loader. If left blank, the loader will display at the default size. Other accepted values are <code class='wmnds-website-inline-code'>small</code> or <code class='wmnds-website-inline-code'>large</code>."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the loader component."
+    }
+  ]
+}

src/www/pages/components/loader/index.njk.md

@@ -0,0 +1,61 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Loader" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{% block content %}
+
+{% markdown %}
+{# Loader #}
+
+## Loader
+
+{# What #}
+
+### What does it do?
+
+- Helps users to understand they need to wait for something to finish happening
+- Continues to play the animation until the action is complete
+
+{# When #}
+
+### When to use it?
+
+- When you are calling an API
+- In the area of the page that the action is occurring
+- Example: within a search box
+
+{# When not #}
+
+### When not to use it?
+
+- A service should not go live if there is a whole-page loading spinner
+- Try to avoid using a loading spinner, our services should respond quickly
+- If an action takes a long time, users will lose trust in the service
+
+**By default you should aim to use the 'normal sized loader'.** <br>
+Only when the normal sized loader is not fit for purpose should you use the large or small sized loader.
+
+Change the text within <code class="wmnds-website-inline-code">.wmnds-loader\_\_content</code> from 'Content is loading...' to something that describes what it is you are loading, this will help with accessibility.
+
+{% endmarkdown %}
+
+{% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
+{{
+  compExample([
+    wmndsLoader({
+      size: 'small'
+    }),
+    wmndsLoader(),
+    wmndsLoader({
+      size: 'large'
+    })
+  ], {
+    componentPath: "wmnds/components/loader/",
+    njk: true,
+    njkProps: wmndsLoaderProps,
+    js: false,
+    iframe: false
+  })
+}}
+
+{% endblock %}