feat: buttons documentation

src/wmnds/components/button/_button.njk

@@ -3,51 +3,56 @@
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 {% from "wmnds/components/loader/_loader.njk" import wmndsLoader %}
 {# Set #}
-{% set text = params.text if params.text else "Button text" %} {# set button text #}
-{% set iconRight = params.iconRight if params.iconRight %} {# set icon right classes #}
+{% set type = " wmnds-btn--" + params.type if params.type %}
+{% set contentText = params.contentText if params.contentText else "Button text" %}
+{% set contentHTML = params.contentHTML if params.contentHTML else null %}
+{% set isActive = " wmnds-is--active" if params.isActive %}
+{% set isDarkBg = " wmnds-btn--dark-bg" if params.isDarkBg %}
+{% set isDisabled = " wmnds-btn--disabled" if params.isDisabled %}
+{% set isLoading = params.isLoading %}
+{% set classes = " " + params.classes if params.classes %} {# set svg left reference #}
 {% set iconLeft = params.iconLeft if params.iconLeft %} {# set svg left reference #}
-{% set paramClass = " " + params.classNames if params.classNames %} {# set paramClass to params.classNames if any #}
-{# if button disabled is true #}
-{% if params.disabled %}
-  {% set classNames = paramClass + " wmnds-btn--disabled" %}
-{% else %}
-  {% set classNames = paramClass if paramClass %}
-{% endif %}
+{% set iconRight = params.iconRight if params.iconRight %} {# set icon right classes #}
+{% set role = params.role if params.role else "button" %}
+{% set _content = contentHTML | safe if contentHTML else contentText %} {# change content based on what user has input #}
+
 
-<button class="wmnds-btn{{ classNames }}" {% if params.disabled %}disabled="disabled"{% endif %} {% if params.type %}type="{{params.type}}"{% endif %}>
+<button class="wmnds-btn{{type}}{{classes}}{{isActive}}{{isDarkBg}}{{isDisabled}}" {% if params.isDisabled %}disabled="disabled"{% endif %} type="{{role}}">
     {#- iconLeft -#}
-    {%- if iconLeft %}
-    {{
-      wmndsIcon({
-        icon: iconLeft,
-        class: 'wmnds-btn__icon'
-      }) | indent | trim
-    }}
-    {{text}}
+    {% if iconLeft %}
+      {{
+        wmndsIcon({
+          icon: iconLeft,
+          class: 'wmnds-btn__icon'
+        })
+      }}
+
+      {{ _content }}
 
     {#- iconRight -#}
-    {%- elseif iconRight %}
-    {{ text }}
-    {{
-      wmndsIcon({
-        icon: iconRight,
-        class: 'wmnds-btn__icon wmnds-btn__icon--right'
-      }) | indent | trim
-    }}
+    {% elseif iconRight %}
+      {{ _content }}
+
+      {{
+        wmndsIcon({
+          icon: iconRight,
+          class: 'wmnds-btn__icon wmnds-btn__icon--right'
+        })
+      }}
 
     {#- Loading spinner -#}
-    {%- elseif params.loading %}
-    {{ text -}}
-    {{
-      wmndsLoader({
-        customClass: 'wmnds-btn__icon wmnds-btn__icon--right',
-        size: 'btn'
-      }) | indent | trim
-    }}
+    {% elseif isLoading %}
+      {{ _content }}
+      {{
+        wmndsLoader({
+          customClass: 'wmnds-btn__icon wmnds-btn__icon--right',
+          size: 'btn'
+        })
+      }}
 
     {#- noIcon -#}
-    {%- else %}
-    {{ text -}}
+    {% else %}
+      {{ _content }}
     {% endif %}
 </button>
 {% endmacro %}

src/wmnds/components/button/_example.njk

@@ -1,13 +1,19 @@
-{% filter trim %}
 {% raw %}
-{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+{% from "wmnds/components/button/button.njk" import wmndsButton %}
 
 {{
    wmndsButton({
-      classNames: "wmnds-btn--mode",
-      text: "Metro",
-      iconLeft: "modes-isolated-metro"
+      type: "secondary"
+      contentText: "Button text",
+      contentHTML: null,
+      isActive: false,
+      isDarkBg: false,
+      isDisabled: false,
+      isLoading: false,
+      classes: "wmnds-m-t--lg",
+      iconLeft: null,
+      iconRight: "general-chevron-right",
+      role: null,
     })
 }}
 {% endraw %}
-{% endfilter %}

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

@@ -0,0 +1,59 @@
+{
+  "wmndsButtonProps": [
+    {
+      "name": "type",
+      "type": "string",
+      "description": "Type of the button. As default it is <code class='wmnds-website-inline-code'>null</code>. Available types: <code class='wmnds-website-inline-code'>link</code>, <code class='wmnds-website-inline-code'>primary</code>, <code class='wmnds-website-inline-code'>secondary</code>, <code class='wmnds-website-inline-code'>destructive</code>, <code class='wmnds-website-inline-code'>start</code>, <code class='wmnds-website-inline-code'>mode</code> "
+    },
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the content that will be part of the button. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> Uses HTML to specifies what content is going to be shown in the button."
+    },
+    {
+      "name": "isActive",
+      "type": "boolean",
+      "description": "It true, button will assume active state. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "isDarkBg",
+      "type": "boolean",
+      "description": "It true, button colours will adjust to work over a dark background. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "isDisabled",
+      "type": "boolean",
+      "description": "It true, button will assume disabled state. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "isLoading",
+      "type": "boolean",
+      "description": "It true, button will assume a loading state and will show a spinner. Defaults to <code class='wmnds-website-inline-code'>false</code>."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "List of aditional classes which will be added to the button. Usually not related with the button component itself. A margin definition could be an example use case."
+    },
+    {
+      "name": "iconLeft",
+      "type": "string",
+      "description": "Name of the left icon, which will be used to import icon and place it on the left side of the button, before text."
+    },
+    {
+      "name": "iconRight",
+      "type": "string",
+      "description": "Name of the right icon, which will be used to import icon and place it on the right side of the button, after text."
+    },
+    {
+      "name": "role",
+      "type": "string",
+      "description": "Button role by default is <code class='wmnds-website-inline-code'>button</code>. Other valid values are: <code class='wmnds-website-inline-code'>submit</code> and <code class='wmnds-website-inline-code'>reset</code>."
+    }
+  ]
+}

src/wmnds/components/content-tiles/advice-moving/advice-moving.njk

@@ -1,51 +1,57 @@
 {% macro wmndsContentTileAdviceMoving(params) %}
-{%- from "wmnds/components/button/_button.njk" import wmndsButton as primary -%}
+{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton -%}
 
 <div class="wmnds-content-tile">
   <h2 class="wmnds-content-tile__title">Advice to keep moving</h2>
   <div class="wmnds-content-tile__buttons">
 
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I drive",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I drive",
+        type: 'primary'
+      })
     }}
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I use the bus",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I use the bus",
+        type: 'primary'
+      })
     }}
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I use the train",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I use the train",
+        type: 'primary'
+      })
     }}
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I use the tram",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I use the tram",
+        type: 'primary'
+      })
     }}
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I walk or cycle",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I walk or cycle",
+        type: 'primary'
+      })
     }}
     {{
-      primary({
-        classNames: "wmnds-btn--primary wmnds-content-tile__button",
-        text: "I want to visit an attraction or venue",
-        iconRight: "general-chevron-right"
-      }) | trim | indent(4)
+      wmndsLinkAsButton({
+        classes: "wmnds-content-tile__button",
+        iconRight: "general-chevron-right",
+        contentText: "I want to visit an attraction or venue",
+        type: 'primary'
+      })
     }}
   </div>
 </div>

src/wmnds/patterns/content-cards/buttons/_buttons.njk

@@ -1,7 +1,7 @@
 {% macro wmndsContentCardButtons(params) %}
 {# imports #}
 {% from "wmnds/components/content-card/_content-card.njk" import wmndsContentCard %}
-{% from "wmnds/components/button/_button.njk" import wmndsButton %}
+{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
 {# Set #}
 {% set buttons = ["I drive", "I use the bus", "I use the train", "I use the tram", "I walk or cycle", "I want to visit an attraction or venue"] %}
 
@@ -12,11 +12,12 @@
             {% for buttonText in buttons -%}
             <li class="wmnds-content-card__list-item">
                 {{
-                    wmndsButton({
-                        text: buttonText,
-                        classNames: "wmnds-btn--primary wmnds-content-card__list-item-btn",
-                        iconRight: "general-chevron-right"
-                    }) | indent(16) | trim
+                    wmndsLinkAsButton({
+                        classes: "wmnds-content-card__list-item-btn",
+                        iconRight: "general-chevron-right",
+                        contentText: buttonText,
+                        type: "primary"
+                    })
                 }}
             </li>
             {% endfor -%}

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

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

src/wmnds/patterns/cookies/cookies-banner/_cookies-banner.njk

@@ -1,7 +1,7 @@
 {% macro wmndsCookiesBanner(params) %}
 
 {# Imports of components #}
-{% from "wmnds/components/button/_button.njk" import wmndsButton as primary %}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
 {%- from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton as cta %}
 
 
@@ -16,10 +16,10 @@
       </p>
       <div class="wmnds-grid wmnds-grid--justify-between wmnds-cookies-banner__group-buttons">
         {{
-          primary({
-            classNames: "wmnds-btn wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24  wmnds-cookies-banner__accept-all-cookies",
-            text: "Accept all cookies"
-          }) | trim | indent(8)
+          wmndsButton({
+            classes: "wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24  wmnds-cookies-banner__accept-all-cookies",
+            contentText: "Accept all cookies"
+          })
         }}
         {{
           cta({

src/wmnds/patterns/cookies/cookies-manager/_cookies-manager.njk

@@ -2,7 +2,7 @@
 
 {# Imports of components #}
 {% from "wmnds/components/form-elements/checkboxes/_checkboxes.njk" import wmndsCheckboxes %}
-{% from "wmnds/components/button/_button.njk" import wmndsButton as primary %}
+{% from "wmnds/components/button/_button.njk" import wmndsButton %}
 
 <div class="wmnds-p-md wmnds-cookies-manager">
   <div class="wmnds-container wmnds-col-1 wmnds-col-sm-1 wmnds-col-lg-3-4">
@@ -38,16 +38,16 @@
                 desc: 'These cookies collect information about how you’re using our services, for instance popular pages or errors. We use this information to make decisions when improving our services. We do not use any information collected to identify you as an individual.'
               }
             ]
-          }) | trim | indent(4)
+          })
         }}
       </div>
       <div>
       {{
-        primary({
-          classNames: "wmnds-btn wmnds-cookies-manager__save-preferences wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24",
-          text: "Save Preferences",
-          type: "submit"
-        }) | trim | indent(4)
+        wmndsButton({
+          classses: "wmnds-cookies-manager__save-preferences wmnds-col-1 wmnds-col-sm-1 wmnds-col-md-12-24",
+          contentText: "Save Preferences",
+          role: "submit"
+        })
       }}
       </div>
       <div class="wmnds-m-t-lg">