govuk_publishing_components 9.3.6 → 9.4.0

data/node_modules/govuk-frontend/components/header/header.njk

@@ -0,0 +1,3 @@
+{% from "header/macro.njk" import govukHeader %}
+
+{{ govukHeader() }}

data/node_modules/govuk-frontend/components/header/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/components/header/template.njk

@@ -0,0 +1,82 @@
+<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
+        {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
+
+    <div class="govuk-header__logo">
+      <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">
+        <span class="govuk-header__logotype">
+          {# We use an inline SVG for the crown so that we can cascade the
+          currentColor into the crown whilst continuing to support older browsers
+          which do not support external SVGs without a Javascript polyfill. This
+          adds approximately 1kb to every page load.
+
+          We use currentColour so that we can easily invert it when printing and
+          when the focus state is applied. This also benefits users who override
+          colours in their browser as they will still see the crown.
+
+          The SVG needs `focusable="false"` so that Internet Explorer does not
+          treat it as an interactive element - without this it will be
+          'focusable' when using the keyboard to navigate. #}
+          <svg
+            role="presentation"
+            focusable="false"
+            class="govuk-header__logotype-crown"
+            xmlns="http://www.w3.org/2000/svg"
+            viewbox="0 0 132 97"
+            height="32"
+            width="36"
+          >
+            <path
+              fill="currentColor" fill-rule="evenodd"
+              d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
+            ></path>
+            {# Fallback PNG image for older browsers.
+
+            The <image> element is a valid SVG element. In SVG, you would specify
+            the URL of the image file with the xlink:href – as we don't reference an
+            image it has no effect. It's important to include the empty xlink:href
+            attribute as this prevents versions of IE which support SVG from
+            downloading the fallback image when they don't need to.
+
+            In other browsers <image> is synonymous for the <img> tag and will be
+            interpreted as such, displaying the fallback image. #}
+            <image src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image"></image>
+          </svg>
+          <span class="govuk-header__logotype-text">
+            GOV.UK
+          </span>
+        </span>
+        {% if (params.productName) %}
+        <span class="govuk-header__product-name">
+          {{ params.productName }}
+        </span>
+        {% endif %}
+      </a>
+    </div><div class="govuk-header__content">
+
+    {% if (params.serviceName) %}
+    <a href="{{ params.serviceUrl }}" class="govuk-header__link govuk-header__link--service-name">
+      {{ params.serviceName }}
+    </a>
+    {% endif %}
+
+    {% if params.navigation %}
+    <button role="button" class="govuk-header__menu-button js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+    <nav>
+      <ul id="navigation" class="govuk-header__navigation {{ params.navigationClasses if params.navigationClasses }}" aria-label="Top Level Navigation">
+        {% for item in params.navigation %}
+          {% if item.href and item.text %}
+            <li class="govuk-header__navigation-item{{ ' govuk-header__navigation-item--active' if item.active }}">
+              <a class="govuk-header__link" href="{{ item.href }}">
+                {{ item.text }}
+              </a>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </nav>
+    {% endif %}
+
+    </div>
+  </div>
+</header>

data/node_modules/govuk-frontend/components/hint/README.md

@@ -0,0 +1,157 @@
+# Hint
+
+## Introduction
+
+Use hint text for supporting contextual help
+
+## Quick start examples
+
+### Component default
+
+[Preview the hint component](http://govuk-frontend-review.herokuapp.com/components/hint/preview)
+
+#### Markup
+
+    <span class="govuk-hint">
+      It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+    </span>
+
+#### Macro
+
+    {% from 'hint/macro.njk' import govukHint %}
+
+    {{ govukHint({
+      "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+    }) }}
+
+### Hint--with html
+
+[Preview the hint--with html example](http://govuk-frontend-review.herokuapp.com/components/hint/with html/preview)
+
+#### Markup
+
+    <span class="govuk-hint">
+      It’s on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>. For example, ‘QQ 12 34 56 C’.
+    </span>
+
+#### Macro
+
+    {% from 'hint/macro.njk' import govukHint %}
+
+    {{ govukHint({
+      "html": "It’s on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>. For example, ‘QQ 12 34 56 C’."
+    }) }}
+
+## Requirements
+
+### Build tool configuration
+
+When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
+
+    .pipe(sass({
+      includePaths: 'node_modules/'
+    }))
+
+### Static asset path configuration
+
+In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
+
+    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
+
+## Component arguments
+
+If you are using Nunjucks,then macros take the following arguments
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+<table class="govuk-table">
+
+<thead class="govuk-table__head">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="col">Name</th>
+
+<th class="govuk-table__header" scope="col">Type</th>
+
+<th class="govuk-table__header" scope="col">Required</th>
+
+<th class="govuk-table__header" scope="col">Description</th>
+
+</tr>
+
+</thead>
+
+<tbody class="govuk-table__body">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">text or (html) html</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Text or HTML to use within the hint. If `html` is provided, the `text` argument will be ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">id</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Optional id attribute o add to the hint span tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">classes</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional additional classes to add to the hint span tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the hint span tag.</td>
+
+</tr>
+
+</tbody>
+
+</table>
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+### Setting up Nunjucks views and paths
+
+Below is an example setup using express configure views:
+
+    nunjucks.configure('node_modules/govuk-frontend/components', {
+      autoescape: true,
+      cache: false,
+      express: app
+    })
+
+## Contribution
+
+Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
+
+## License
+
+MIT

data/node_modules/govuk-frontend/components/hint/_hint.scss

@@ -0,0 +1,29 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/hint") {
+  .govuk-hint {
+    @include govuk-font($size: 19);
+
+    display: block;
+
+    margin-bottom: govuk-spacing(3);
+
+    color: $govuk-secondary-text-colour;
+  }
+
+  // Reduces margin-bottom of hint when used after the default label (no class)
+  // or govuk-label--s for better vertical alignment.
+
+  // This adjustment will not work when the label is inside the <h1>, however
+  // it is unlikely that the default or govuk-label--s class would be used in
+  // this case.
+
+  // This adjustment will not work in browsers that do not support :not()
+  // Users with these browsers will see the default size margin (5px larger)
+
+  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-hint {
+    margin-bottom: govuk-spacing(2);
+  }
+}

data/node_modules/govuk-frontend/components/hint/hint.njk

@@ -0,0 +1,7 @@
+{% from "hint/macro.njk" import govukHint %}
+
+{{ govukHint({
+  text: "It’s on your National Insurance card, benefit letter, payslip or P60.
+    For example, ‘QQ 12 34 56 C’.",
+  id: "hint-id"
+}) }}

data/node_modules/govuk-frontend/components/hint/macro.njk

@@ -0,0 +1,3 @@
+{% macro govukHint(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

data/node_modules/govuk-frontend/components/hint/template.njk

@@ -0,0 +1,4 @@
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {{ params.html | safe if params.html else params.text }}
+</span>

data/node_modules/govuk-frontend/components/input/README.md

@@ -0,0 +1,416 @@
+# Input
+
+## Introduction
+
+A single-line text field.
+
+## Guidance
+
+Find out when to use the Input component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/text-input).
+
+## Quick start examples
+
+### Component default
+
+[Preview the input component](http://govuk-frontend-review.herokuapp.com/components/input/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-example">
+        National Insurance number
+      </label>
+
+      <input class="govuk-input" id="input-example" name="test-name" type="text">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National Insurance number"
+      },
+      "id": "input-example",
+      "name": "test-name"
+    }) }}
+
+### Input--with-hint-text
+
+[Preview the input--with-hint-text example](http://govuk-frontend-review.herokuapp.com/components/input/with-hint-text/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-with-hint-text">
+        National insurance number
+      </label>
+
+      <span id="input-with-hint-text-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-with-hint-text",
+      "name": "test-name-2"
+    }) }}
+
+### Input--with-error-message
+
+[Preview the input--with-error-message example](http://govuk-frontend-review.herokuapp.com/components/input/with-error-message/preview)
+
+#### Markup
+
+    <div class="govuk-form-group govuk-form-group--error">
+      <label class="govuk-label" for="input-with-error-message">
+        National Insurance number
+      </label>
+
+      <span id="input-with-error-message-hint" class="govuk-hint">
+        It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <span id="input-with-error-message-error" class="govuk-error-message">
+        Error message goes here
+      </span>
+
+      <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National Insurance number"
+      },
+      "hint": {
+        "html": "It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-with-error-message",
+      "name": "test-name-3",
+      "errorMessage": {
+        "text": "Error message goes here"
+      }
+    }) }}
+
+### Input--width-10
+
+[Preview the input--width-10 example](http://govuk-frontend-review.herokuapp.com/components/input/width-10/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-10">
+        National insurance number
+      </label>
+
+      <span id="input-width-10-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-name-4" type="text" aria-describedby="input-width-10-hint">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-10",
+      "name": "test-name-4",
+      "classes": "govuk-input--width-10"
+    }) }}
+
+### Input--width-20
+
+[Preview the input--width-20 example](http://govuk-frontend-review.herokuapp.com/components/input/width-20/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-20">
+        National insurance number
+      </label>
+
+      <span id="input-width-20-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-name-5" type="text" aria-describedby="input-width-20-hint">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-20",
+      "name": "test-name-5",
+      "classes": "govuk-input--width-20"
+    }) }}
+
+### Input--width-30
+
+[Preview the input--width-30 example](http://govuk-frontend-review.herokuapp.com/components/input/width-30/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="input-width-30">
+        National insurance number
+      </label>
+
+      <span id="input-width-30-hint" class="govuk-hint">
+        It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’.
+      </span>
+
+      <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-name-6" type="text" aria-describedby="input-width-30-hint">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National insurance number"
+      },
+      "hint": {
+        "text": "It’s on your National Insurance card, benefit letter, payslip or P60\. For example, ‘QQ 12 34 56 C’."
+      },
+      "id": "input-width-30",
+      "name": "test-name-6",
+      "classes": "govuk-input--width-30"
+    }) }}
+
+### Input--with-label-as-page-heading
+
+[Preview the input--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/input/with-label-as-page-heading/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <h1 class="govuk-label-wrapper">
+        <label class="govuk-label" for="input-with-page-heading">
+          National Insurance number
+        </label>
+
+      </h1>
+
+      <input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
+    </div>
+
+#### Macro
+
+    {% from 'input/macro.njk' import govukInput %}
+
+    {{ govukInput({
+      "label": {
+        "text": "National Insurance number",
+        "isPageHeading": true
+      },
+      "id": "input-with-page-heading",
+      "name": "test-name"
+    }) }}
+
+## Requirements
+
+### Build tool configuration
+
+When compiling the Sass files you'll need to define includePaths to reference the node_modules directory. Below is a sample configuration using gulp
+
+    .pipe(sass({
+      includePaths: 'node_modules/'
+    }))
+
+### Static asset path configuration
+
+In order to include the images used in the components, you need to configure your app to show these assets. Below is a sample configuration using Express js:
+
+    app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/assets')))
+
+## Component arguments
+
+If you are using Nunjucks,then macros take the following arguments
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+<table class="govuk-table">
+
+<thead class="govuk-table__head">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="col">Name</th>
+
+<th class="govuk-table__header" scope="col">Type</th>
+
+<th class="govuk-table__header" scope="col">Required</th>
+
+<th class="govuk-table__header" scope="col">Description</th>
+
+</tr>
+
+</thead>
+
+<tbody class="govuk-table__body">
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">id</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The id of the input.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">name</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">The name of the input, which is submitted with the form data.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">type</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Type of input control to render. Defaults to "text".</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">value</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional initial value of the input.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">label</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Arguments for the label component. See label component.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">hint</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Arguments for the hint component (e.g. text). See hint component.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">errorMessage</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Arguments for the errorMessage component (e.g. text). See errorMessage component.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">classes</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional additional classes add to the input component.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the input component.</td>
+
+</tr>
+
+</tbody>
+
+</table>
+
+**If you’re using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `Html` can be a [security risk](https://en.wikipedia.org/wiki/Cross-site_scripting). More about it in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).**
+
+### Setting up Nunjucks views and paths
+
+Below is an example setup using express configure views:
+
+    nunjucks.configure('node_modules/govuk-frontend/components', {
+      autoescape: true,
+      cache: false,
+      express: app
+    })
+
+## Contribution
+
+Guidelines can be found at [on our Github repository.](https://github.com/alphagov/govuk-frontend/blob/master/CONTRIBUTING.md "link to contributing guidelines on our github repository")
+
+## License
+
+MIT