Button component variants from YAML file (#251)

* Update component to use yaml data

* Update example class message

src/components/button/button.njk

@@ -1,3 +1,3 @@
 {% from "button/macro.njk" import govukButton %}
 
-{{ govukButton(classes='', text='Save and continue') }}
+{{ govukButton({classes: '', text:'Save and continue', url: '', isStart: '', isDisabled: ''}) }}

src/components/button/button.yaml

@@ -0,0 +1,14 @@
+variants:
+- name: default
+  data:
+    text: Save and continue
+    classes: 'example-class'
+- name: disabled
+  data:
+    text: Disabled button
+    isDisabled: true
+- name: start
+  data:
+    text: Start now
+    url: /
+    isStart: true

src/components/button/index.njk

@@ -1,4 +1,5 @@
 {% extends "component.njk" %}
+{% from "button/macro.njk" import govukButton %}
 
 {# Commented out blocks below inherit from views/component.njk #}
 
@@ -20,7 +21,35 @@ Please note, this component depends on @govuk-frontend/globals and @govuk-fronte
 {% block componentHtmlUsageWriteup %}
 Buttons are configured to perform an action and they can have a different look. For example, they can be disabled until a valid action has been performed by the user.
 {% endblock %}
-{# componentHtml #}
+
+{% block defaultAndVariants %}
+{% for item in componentData.variants %}
+{% if item.name == 'default' %}
+{% set itemName = 'Component default' %}
+{% set previewLink = "/components/" + componentName + '/' + "/preview" %}
+{% set previewText = 'Preview the ' + componentName + ' component' %}
+{% else %}
+{% set itemName = componentName + '--' + item.name %}
+{% set previewLink = "/components/" + componentName + '/' + componentName + '--' + item.name  + "/preview" %}
+{% set previewText = 'Preview the ' + itemName + ' variant' %}
+{% endif %}
+<h3 class="govuk-u-bold-19">{{ itemName  | capitalize }}</h3>
+{% if not isReadme %}
+{{ govukButton(item.data) }}
+{% endif %}
+<p class="govuk-u-copy-19">
+<a href="{% if isReadme %}http://govuk-frontend-review.herokuapp.com{% endif %}{{ previewLink }}">{{previewText}}
+</a>
+</p>
+<h4 class="govuk-u-copy-19">Markup</h4>
+{% set componentHtml %}
+{{- govukButton(item.data) -}}
+{% endset %}
+<pre><code>{{- componentHtml | e -}}</code></pre>
+<h4 class="govuk-u-copy-19">Macro</h4>
+<pre><code>{% raw %}{{ govukButton({% endraw %}{{ item.data | dump }}{% raw %})}}{% endraw %}</code></pre>
+{% endfor %}
+{% endblock %}
 
 {# override link to design system here if it's different to base url + componentName #}
 {# {% set componentGuidanceLink = 'new link here' %} #}

src/components/button/macro.njk

@@ -1,3 +1,3 @@
-{% macro govukButton(classes='', text, url, isStart, isDisabled) %}
+{% macro govukButton(params) %}
   {%- include "./template.njk" -%}
 {% endmacro %}

src/components/button/template.njk

@@ -1,13 +1,13 @@
-{% if url %}
+{% if params.url %}
 <a class="govuk-c-button
-{%- if isStart %} govuk-c-button--start{% endif %}
-{%- if classes %} {{ classes }}{% endif %}" href="{{ url | safe }}" role="button">
-  {%- if text %}{{ text }}{% endif %}
+{%- if params.isStart %} govuk-c-button--start{% endif %}
+{%- if params.classes %} {{ params.classes }}{% endif %}" href="{{ params.url | safe }}" role="button">
+  {%- if params.text %}{{ params.text }}{% endif %}
 </a>
 {% else %}
 <input class="govuk-c-button
-{%- if isDisabled %} govuk-c-button--disabled{% endif %}
-{%- if classes %} {{ classes }}{% endif %}"
-{%- if text %} value="{{ text }}"{% endif %}
-{%- if isDisabled %} disabled="disabled" aria-disabled="true"{% endif %}>
+{%- if params.isDisabled %} govuk-c-button--disabled{% endif %}
+{%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- if params.text %} value="{{ params.text }}"{% endif %}
+{%- if params.isDisabled %} disabled="disabled" aria-disabled="true"{% endif %}>
 {% endif %}