govuk_publishing_components 9.3.6 → 9.4.0

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

@@ -0,0 +1,7 @@
+{% from "details/macro.njk" import govukDetails %}
+
+{{- govukDetails({
+  "summaryText": "Help with nationality",
+  "text": "If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card."
+  })
+-}}

data/node_modules/govuk-frontend/components/details/implementation.md

@@ -0,0 +1,43 @@
+## Implementation notes
+
+### Marker styling
+
+Firefox uses display: list-item to show the arrow marker for the summary
+element.
+
+Unfortunately we want to use `display: inline-block` to 'shrink-wrap' the focus
+outline around the summary text, which means that the arrow no longer shows up.
+
+Previously in GOV.UK Elements we resolved this by targeting Firefox specifically
+and reverting to `display: list-item`:
+
+```
+@-moz-document regexp('.*') {
+  details summary:not([tabindex]) {
+    // Allow duplicate properties, override the summary display property
+    // scss-lint:disable DuplicateProperty
+    display: list-item;
+    display: revert;
+  }
+}
+```
+
+However, `@-moz-document` has been removed in Firefox nightly as of 29th Nov
+2017 so with this in mind we have taken a different approach, hiding the
+browser's marker and injecting and styling our own one across all browsers
+instead.
+
+This also gives us more control over the styling of the marker, allowing us for
+example to align the summary and disclosed text correctly across all browsers.
+
+The downside of this approach is that older browsers that require a polyfill for
+the details element will display the marker even when Javascript is disabled.
+Whilst this is not perfect, it is a cosmetic issue and the user will still be
+able to access the disclosed content.
+
+For the arrows themselves, we originally tried using unicode glyphs –
+specifically \25B6 (Black right-pointing triangle) and 25BC (Black down-pointing
+triangle) but Android insists on substituting the the former for an emoji even
+when the \00FE0E modifier is applied. Sad face.
+
+Hence the border-based triangles we are using today.

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

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

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

@@ -0,0 +1,10 @@
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    {{ params.html | safe if params.html else params.text }}
+  </div>
+</details>

data/node_modules/govuk-frontend/components/error-message/README.md

@@ -0,0 +1,143 @@
+# Error message
+
+## Introduction
+
+Component to show a red error message - used for form validation. Use inside a label or legend.
+
+## Guidance
+
+Find out when to use the Error message component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/error-message).
+
+## Quick start examples
+
+### Component default
+
+[Preview the error-message component](http://govuk-frontend-review.herokuapp.com/components/error-message/preview)
+
+#### Markup
+
+    <span class="govuk-error-message">
+      Error message about full name goes here
+    </span>
+
+#### Macro
+
+    {% from 'error-message/macro.njk' import govukErrorMessage %}
+
+    {{ govukErrorMessage({
+      "text": "Error message about full name goes here"
+    }) }}
+
+## 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 to use within the error message. 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 ">No</td>
+
+<td class="govuk-table__cell ">Optional id attribute to add to the error message 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 error message 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 error message 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/error-message/_error-message.scss

@@ -0,0 +1,15 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/error-message") {
+  .govuk-error-message {
+    @include govuk-font($size: 19, $weight: bold);
+
+    display: block;
+    margin-bottom: govuk-spacing(3);
+    clear: both;
+
+    color: $govuk-error-colour;
+  }
+}

data/node_modules/govuk-frontend/components/error-message/error-message.njk

@@ -0,0 +1,7 @@
+{% from "error-message/macro.njk" import govukErrorMessage %}
+
+{{- govukErrorMessage(
+  {
+    "text": "Error message about full name goes here"
+  })
+-}}

data/node_modules/govuk-frontend/components/error-message/macro.njk

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

data/node_modules/govuk-frontend/components/error-message/template.njk

@@ -0,0 +1,3 @@
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- 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/error-summary/README.md

@@ -0,0 +1,215 @@
+# Error summary
+
+## Introduction
+
+Component to show an error summary box - used at the top of the page, to summarise validation errors.
+
+## Guidance
+
+Find out when to use the Error summary component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/error-summary).
+
+## Quick start examples
+
+### Component default
+
+[Preview the error-summary component](http://govuk-frontend-review.herokuapp.com/components/error-summary/preview)
+
+#### Markup
+
+    <div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
+      <h2 class="govuk-error-summary__title" id="error-summary-title">
+        Message to alert the user to a problem goes here
+      </h2>
+      <div class="govuk-error-summary__body">
+
+        <p>
+          Optional description of the errors and how to correct them
+        </p>
+
+        <ul class="govuk-list govuk-error-summary__list">
+
+          <li>
+
+            <a href="#example-error-1">Descriptive link to the question with an error</a>
+
+          </li>
+
+          <li>
+
+            <a href="#example-error-1">Descriptive link to the question with an error</a>
+
+          </li>
+
+        </ul>
+      </div>
+    </div>
+
+#### Macro
+
+    {% from 'error-summary/macro.njk' import govukErrorSummary %}
+
+    {{ govukErrorSummary({
+      "titleText": "Message to alert the user to a problem goes here",
+      "descriptionText": "Optional description of the errors and how to correct them",
+      "classes": "optional-extra-class",
+      "errorList": [
+        {
+          "text": "Descriptive link to the question with an error",
+          "href": "#example-error-1"
+        },
+        {
+          "html": "Descriptive link to the question with an error",
+          "href": "#example-error-1"
+        }
+      ]
+    }) }}
+
+## 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">titleText (or) titleHtml</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 for the heading of the error summary block. If `titleHtml` is provided, the `titleText` argument will be ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">descriptionText (or) descriptionHtml</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Optional text or HTML description of the errors. If `descriptionhtml` is provided, the `descriptionText` argument will be ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">errorList</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Contains an array of error link items and all their available arguments.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">errorList.{}.href</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Href attribute for the error link item. If provided item will be an anchor.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">errorList.{}.text (or) errorList.{}.html</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">Yes</td>
+
+<td class="govuk-table__cell ">Text or HTML for the error link item. 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 error-summary 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 error-summary 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