Add shared templates

[quis]

This documentation…

…is now generated from this Jinja template

<div class="question">
  <label for="question-2" class="question-heading{% if hint is defined %}-with-hint{% endif %}">
    {{ question }}
  </label>
  {% if hint is defined %}
    <p class="hint">
      {{ hint }}
    </p>
  {% endif %}
  {% if large %}
    {% if max_length_in_words is defined %}
      <div class="word-count">
        <textarea class="text-box text-box-large" name="{{ id }}" id="{{ id }}" data-max-length-in-words="{{ max_length_in_words }}">{{ value }}</textarea>
      </div>
    {% else %}
      <textarea class="text-box text-box-large" name="{{ id }}" id="{{ id }}">{{ value }}</textarea>
    {% endif %}
  {% else %}
    <input type="text" name="{{ id }}" id="{{ id }}" class="text-box" value="{{ value }}" />
  {% endif %}
</div>

And the templates can be used in other apps, like so:

(uses Jinja's with extension)

The aim of this pull request is to allow sharing of templates between our apps

It does this by:

• Add Jinja templates for all the design patterns in the toolkit
• Refactors the toolkit to generate the example markup from the Jinja templates and generate an example of the data passed to the template

This owes some debt to the work that @edds and @dsingleton did with GOV.UK components.

This commit also does some renaming of the patterns to reflect exactly what they do. eg search-results (plural) is a template for rendering a list of search results, whereas page-heading (singular) is a template for rendering a single page heading. This commit only renames the examples and documentation, not the actual toolkit files (so it won't be a breaking change at this stage).

[tombye]

Could we remove the brackets from this and line 105 to match the style adopted for the rest of this file?

[quis]

Brackets gone as of 44d922e

[tombye]

Other than the comments above I've just got the following points:

I think the id parameter passed into patterns with radio buttons should be changed to name. It's used for that attribute in the HTML and appears in the HTTP parameters too. I think calling it name makes that usage more obvious.

The README should be updated to explain how the templates are part of the toolkit. Probably some updates to the Example markup section and maybe a new section near Sass compilation to explain where you need to work on HTML and where the template data is kept.

[quis]

@tombye Readme and naming of parameters to selection buttons added in 550de71 and 977ccc6 respectively.

[tombye]

Managed not to say, this is brilliant work. Looking forward to pulling it down into the apps.

👍

[dsingleton]

This is 👌 ✖️ 💯