govuk_publishing_components 9.3.6 → 9.4.0

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

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

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

@@ -0,0 +1,29 @@
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix %}
+
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="tabs">
+  <h2 class="govuk-tabs__title">
+    {{ params.title | default ("Contents") }}
+  </h2>
+
+  {% if(params.items) %}
+  <ul class="govuk-tabs__list">
+    {% for item in params.items %}
+    {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+      <li class="govuk-tabs__list-item">
+        <a class="govuk-tabs__tab" href="#{{ id }}">
+          {{ item.label }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+
+  {% for item in params.items %}
+  {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+  <section class="govuk-tabs__panel" id="{{ id }}">
+    {{ item.panel.html | safe if item.panel.html else item.panel.text }}
+  </section>
+  {% endfor %}
+</div>

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

@@ -0,0 +1,150 @@
+# Tag
+
+## Introduction
+
+Phase tags are mostly used inside phase banners as an indication of the state of a project. It’s possible to use them outside phase banners, for example as part of a service header.
+
+## Guidance
+
+Find out when to use the Tag component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/tag).
+
+## Quick start examples
+
+### Component default
+
+[Preview the tag component](http://govuk-frontend-review.herokuapp.com/components/tag/preview)
+
+#### Markup
+
+    <strong class="govuk-tag">
+      alpha
+    </strong>
+
+#### Macro
+
+    {% from 'tag/macro.njk' import govukTag %}
+
+    {{ govukTag({
+      "text": "alpha"
+    }) }}
+
+### Tag--inactive
+
+[Preview the tag--inactive example](http://govuk-frontend-review.herokuapp.com/components/tag/inactive/preview)
+
+#### Markup
+
+    <strong class="govuk-tag govuk-tag--inactive">
+      alpha
+    </strong>
+
+#### Macro
+
+    {% from 'tag/macro.njk' import govukTag %}
+
+    {{ govukTag({
+      "text": "alpha",
+      "classes": "govuk-tag--inactive"
+    }) }}
+
+## 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</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Text or HTML to use within for the tag component. If `html` is provided, the `text` argument will be ignored.</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 tag container.</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 tag container.</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/tag/_tag.scss

@@ -0,0 +1,23 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/tag") {
+  .govuk-tag {
+    @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+
+    display: inline-block;
+    padding: govuk-spacing(1) 8px 0;
+
+    color: govuk-colour("white");
+    background-color: govuk-colour("blue");
+    letter-spacing: 1px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  .govuk-tag--inactive {
+    background-color: govuk-colour("grey-1");
+  }
+}

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

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

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

@@ -0,0 +1,7 @@
+{%- from "tag/macro.njk" import govukTag -%}
+
+{{- govukTag(
+  {
+    "text": "alpha"
+  })
+-}}

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

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

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

@@ -0,0 +1,350 @@
+# Textarea
+
+## Introduction
+
+A multi-line text field.
+
+## Guidance
+
+Find out when to use the Textarea component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/textarea).
+
+## Quick start examples
+
+### Component default
+
+[Preview the textarea component](http://govuk-frontend-review.herokuapp.com/components/textarea/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="more-detail">
+        Can you provide more detail?
+      </label>
+
+      <span id="more-detail-hint" class="govuk-hint">
+        Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
+      </span>
+
+      <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
+    </div>
+
+#### Macro
+
+    {% from 'textarea/macro.njk' import govukTextarea %}
+
+    {{ govukTextarea({
+      "name": "more-detail",
+      "id": "more-detail",
+      "label": {
+        "text": "Can you provide more detail?"
+      },
+      "hint": {
+        "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
+      }
+    }) }}
+
+### Textarea--with error message
+
+[Preview the textarea--with error message example](http://govuk-frontend-review.herokuapp.com/components/textarea/with error message/preview)
+
+#### Markup
+
+    <div class="govuk-form-group govuk-form-group--error">
+      <label class="govuk-label" for="no-ni-reason">
+        Why can&#39;t you provide a National Insurance number?
+      </label>
+
+      <span id="no-ni-reason-error" class="govuk-error-message">
+        You must provide an explanation
+      </span>
+
+      <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
+    </div>
+
+#### Macro
+
+    {% from 'textarea/macro.njk' import govukTextarea %}
+
+    {{ govukTextarea({
+      "name": "no-ni-reason",
+      "id": "no-ni-reason",
+      "label": {
+        "text": "Why can't you provide a National Insurance number?"
+      },
+      "errorMessage": {
+        "text": "You must provide an explanation"
+      }
+    }) }}
+
+### Textarea--with default value
+
+[Preview the textarea--with default value example](http://govuk-frontend-review.herokuapp.com/components/textarea/with default value/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="full-address">
+        Full address
+      </label>
+
+      <textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
+    London
+    NW1 6XE
+    </textarea>
+    </div>
+
+#### Macro
+
+    {% from 'textarea/macro.njk' import govukTextarea %}
+
+    {{ govukTextarea({
+      "id": "full-address",
+      "name": "address",
+      "value": "221B Baker Street\nLondon\nNW1 6XE\n",
+      "label": {
+        "text": "Full address"
+      }
+    }) }}
+
+### Textarea--with custom rows
+
+[Preview the textarea--with custom rows example](http://govuk-frontend-review.herokuapp.com/components/textarea/with custom rows/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="full-address">
+        Full address
+      </label>
+
+      <textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
+    </div>
+
+#### Macro
+
+    {% from 'textarea/macro.njk' import govukTextarea %}
+
+    {{ govukTextarea({
+      "id": "full-address",
+      "name": "address",
+      "label": {
+        "text": "Full address"
+      },
+      "rows": 8
+    }) }}
+
+### Textarea--with label as page heading
+
+[Preview the textarea--with label as page heading example](http://govuk-frontend-review.herokuapp.com/components/textarea/with label as page heading/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <h1 class="govuk-label-wrapper">
+        <label class="govuk-label" for="textarea-with-page-heading">
+          Full address
+        </label>
+
+      </h1>
+
+      <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
+    </div>
+
+#### Macro
+
+    {% from 'textarea/macro.njk' import govukTextarea %}
+
+    {{ govukTextarea({
+      "id": "textarea-with-page-heading",
+      "name": "address",
+      "label": {
+        "text": "Full address",
+        "isPageHeading": true
+      }
+    }) }}
+
+## 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 textarea</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">describedBy</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Text or element id to add to the `aria-describedby` attribute to provide description for screenreader users.</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 textarea, which is submitted with the form data.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">rows</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional number of textarea rows (default is 5 rows).</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 textarea.</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 ">Yes</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 to add to the textarea 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 textarea 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