govuk_publishing_components 9.3.6 → 9.4.0

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

@@ -0,0 +1,17 @@
+{% 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"
+    },
+    {
+      "text": "Descriptive link to the question with an error",
+      "href": "#example-error-1"
+    }
+  ]
+}) }}

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

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

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

@@ -0,0 +1,25 @@
+<div class="govuk-error-summary
+  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
+    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+  </h2>
+  <div class="govuk-error-summary__body">
+    {% if params.descriptionHtml or params.descriptionText %}
+    <p>
+      {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
+    </p>
+    {% endif %}
+    <ul class="govuk-list govuk-error-summary__list">
+    {% for item in params.errorList %}
+      <li>
+      {% if item.href %}
+        <a href="{{ item.href }}">{{ item.html | safe if item.html else item.text }}</a>
+      {% else %}
+        {{ item.html | safe if item.html else item.text }}
+      {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,213 @@
+# Fieldset
+
+## Introduction
+
+The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
+
+## Guidance
+
+Find out when to use the Fieldset component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/fieldset).
+
+## Quick start examples
+
+### Component default
+
+[Preview the fieldset component](http://govuk-frontend-review.herokuapp.com/components/fieldset/preview)
+
+#### Markup
+
+    <fieldset class="govuk-fieldset">
+
+      <legend class="govuk-fieldset__legend">
+        What is your address?
+      </legend>
+
+    </fieldset>
+
+#### Macro
+
+    {% from 'fieldset/macro.njk' import govukFieldset %}
+
+    {{ govukFieldset({
+      "legend": {
+        "text": "What is your address?"
+      }
+    }) }}
+
+### Fieldset--as page heading
+
+[Preview the fieldset--as page heading example](http://govuk-frontend-review.herokuapp.com/components/fieldset/as page heading/preview)
+
+#### Markup
+
+    <fieldset class="govuk-fieldset">
+
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
+        <h1 class="govuk-fieldset__heading">
+          What is your address?
+        </h1>
+      </legend>
+
+    </fieldset>
+
+#### Macro
+
+    {% from 'fieldset/macro.njk' import govukFieldset %}
+
+    {{ govukFieldset({
+      "legend": {
+        "text": "What is your address?",
+        "classes": "govuk-fieldset__legend--xl",
+        "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">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 of the group of fields for screenreader users.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">legend</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Arguments for the legend</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">legend.{}.text (or) legend.{}.html</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Legend text or HTML. If `html` is provided, the `text` argument will be ignored.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">legend.{}.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 legend container.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">legend.{}.isPageHeading</th>
+
+<td class="govuk-table__cell ">boolean</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Whether the legend also acts as the heading for the page.</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 fieldset 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 fieldset 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/fieldset/_fieldset.scss

@@ -0,0 +1,58 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@include govuk-exports("govuk/component/fieldset") {
+  .govuk-fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    @include govuk-clearfix;
+  }
+
+  .govuk-fieldset__legend {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+
+    // Fix legend text wrapping in Edge and IE
+    // 1. IE9-11 & Edge 12-13
+    // 2. IE8-11
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box; // 1
+    display: table;         // 2
+    max-width: 100%;        // 1
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+    // Hack to let legends or elements within legends have margins in webkit browsers
+    overflow: hidden;
+
+    white-space: normal;    // 1
+  }
+
+  // Modifiers that make legends look more like their equivalent headings
+
+  .govuk-fieldset__legend--xl {
+    @include govuk-font($size: 48, $weight: bold);
+  }
+
+  .govuk-fieldset__legend--l {
+    @include govuk-font($size: 36, $weight: bold);
+  }
+
+  .govuk-fieldset__legend--m {
+    @include govuk-font($size: 24, $weight: bold);
+  }
+
+  .govuk-fieldset__legend--s {
+    @include govuk-font($size: 19, $weight: bold);
+  }
+
+  // When the legend contains an H1, we want the H1 to inherit all styles from
+  // the legend. Effectively we want to be able to treat the heading as if it is
+  // not there.
+  .govuk-fieldset__heading {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}

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

@@ -0,0 +1,13 @@
+{% from "fieldset/macro.njk" import govukFieldset %}
+
+{{ govukFieldset({
+  "legend": {
+    "text": "Legend text goes here"
+  },
+  "hint": {
+    "text": "Legend hint text goes here"
+  },
+  "errorMessage": {
+    "text": "Error message goes here"
+  }
+}) }}

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

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

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

@@ -0,0 +1,17 @@
+<fieldset class="govuk-fieldset
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% if params.legend.html or params.legend.text %}
+  <legend class="govuk-fieldset__legend {%- if params.legend.classes %} {{ params.legend.classes }}{% endif %}">
+  {%- if params.legend.isPageHeading %}
+    <h1 class="govuk-fieldset__heading">
+      {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+    </h1>
+  {% else %}
+    {{ params.legend.html | safe if params.legend.html else params.legend.text }}
+  {% endif -%}
+  </legend>
+  {% endif %}
+{{ caller() if caller }} {#- if statement allows usage of `call` to be optional -#}
+</fieldset>

data/node_modules/govuk-frontend/components/file-upload/README.md

@@ -0,0 +1,332 @@
+# File upload
+
+## Introduction
+
+The HTML `<input>` element with type="file" lets a user pick one or more files, to upload to a server.
+
+## Guidance
+
+Find out when to use the File upload component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/file-upload).
+
+## Quick start examples
+
+### Component default
+
+[Preview the file-upload component](http://govuk-frontend-review.herokuapp.com/components/file-upload/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="file-upload-1">
+        Upload a file
+      </label>
+
+      <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
+    </div>
+
+#### Macro
+
+    {% from 'file-upload/macro.njk' import govukFileUpload %}
+
+    {{ govukFileUpload({
+      "id": "file-upload-1",
+      "name": "file-upload-1",
+      "label": {
+        "text": "Upload a file"
+      }
+    }) }}
+
+### File-upload--with-hint-text
+
+[Preview the file-upload--with-hint-text example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-hint-text/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="file-upload-2">
+        Upload your photo
+      </label>
+
+      <span id="file-upload-2-hint" class="govuk-hint">
+        Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
+      </span>
+
+      <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
+    </div>
+
+#### Macro
+
+    {% from 'file-upload/macro.njk' import govukFileUpload %}
+
+    {{ govukFileUpload({
+      "id": "file-upload-2",
+      "name": "file-upload-2",
+      "label": {
+        "text": "Upload your photo"
+      },
+      "hint": {
+        "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
+      }
+    }) }}
+
+### File-upload--with-error-message
+
+[Preview the file-upload--with-error-message example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-error-message/preview)
+
+#### Markup
+
+    <div class="govuk-form-group govuk-form-group--error">
+      <label class="govuk-label" for="file-upload-3">
+        Upload a file
+      </label>
+
+      <span id="file-upload-3-hint" class="govuk-hint">
+        Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
+      </span>
+
+      <span id="file-upload-3-error" class="govuk-error-message">
+        Error message goes here
+      </span>
+
+      <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
+    </div>
+
+#### Macro
+
+    {% from 'file-upload/macro.njk' import govukFileUpload %}
+
+    {{ govukFileUpload({
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Upload a file"
+      },
+      "hint": {
+        "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
+      },
+      "errorMessage": {
+        "text": "Error message goes here"
+      }
+    }) }}
+
+### File-upload--with-value-and-attributes
+
+[Preview the file-upload--with-value-and-attributes example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-value-and-attributes/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="file-upload-4">
+        Upload a photo
+      </label>
+
+      <input class="govuk-file-upload" id="file-upload-4" name="file-upload-4" type="file" value="C:\fakepath\myphoto.jpg" accept=".jpg, .jpeg, .png">
+    </div>
+
+#### Macro
+
+    {% from 'file-upload/macro.njk' import govukFileUpload %}
+
+    {{ govukFileUpload({
+      "id": "file-upload-4",
+      "name": "file-upload-4",
+      "value": "C:\\fakepath\\myphoto.jpg",
+      "label": {
+        "text": "Upload a photo"
+      },
+      "attributes": {
+        "accept": ".jpg, .jpeg, .png"
+      }
+    }) }}
+
+### File-upload--with-label-as-page-heading
+
+[Preview the file-upload--with-label-as-page-heading example](http://govuk-frontend-review.herokuapp.com/components/file-upload/with-label-as-page-heading/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+      <h1 class="govuk-label-wrapper">
+        <label class="govuk-label" for="file-upload-1">
+          Upload a file
+        </label>
+
+      </h1>
+
+      <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
+    </div>
+
+#### Macro
+
+    {% from 'file-upload/macro.njk' import govukFileUpload %}
+
+    {{ govukFileUpload({
+      "id": "file-upload-1",
+      "name": "file-upload-1",
+      "label": {
+        "text": "Upload a file",
+        "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">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">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">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 ">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 input 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 accept or data attributes) to add to the input 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