govuk_publishing_components 9.3.6 → 9.4.0

data/node_modules/govuk-frontend/components/file-upload/_file-upload.scss

@@ -0,0 +1,19 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../error-message/error-message";
+@import "../hint/hint";
+@import "../label/label";
+
+@include govuk-exports("govuk/component/file-upload") {
+  .govuk-file-upload {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-focusable;
+  }
+
+  .govuk-file-upload--error {
+    border: $govuk-border-width-form-element-error solid $govuk-error-colour;
+  }
+}

data/node_modules/govuk-frontend/components/file-upload/file-upload.njk

@@ -0,0 +1,9 @@
+{% from "file-upload/macro.njk" import govukFileUpload %}
+
+{{- govukFileUpload({
+  id: 'file-upload-1',
+  name: 'file-upload-1',
+  label: {
+    text: 'Upload a file'
+  }
+}) -}}

data/node_modules/govuk-frontend/components/file-upload/macro.njk

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

data/node_modules/govuk-frontend/components/file-upload/template.njk

@@ -0,0 +1,42 @@
+{% from "../error-message/macro.njk" import govukErrorMessage -%}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../label/macro.njk" import govukLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = "" %}
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %}">
+  {{ govukLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ govukHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  {{ govukErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text
+  }) | indent(2) | trim }}
+{% endif %}
+  <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
+  {%- if params.value %} value="{{ params.value }}"{% endif %}
+  {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+</div>

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

@@ -0,0 +1,284 @@
+# Footer
+
+## Introduction
+
+The footer component is used at the bottom of every GOV.UK page, to help users navigate.
+
+## Guidance
+
+Find out when to use the Footer component in your service in the [GOV.UK Design System](https://govuk-design-system-production.cloudapps.digital/components/footer).
+
+## Quick start examples
+
+### Component default
+
+[Preview the footer component](http://govuk-frontend-review.herokuapp.com/components/footer/preview)
+
+#### Markup
+
+    <footer class="govuk-footer " role="contentinfo">
+      <div class="govuk-width-container ">
+
+        <div class="govuk-footer__meta">
+          <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+            <svg
+              role="presentation"
+              focusable="false"
+              class="govuk-footer__licence-logo"
+              xmlns="http://www.w3.org/2000/svg"
+              viewbox="0 0 483.2 195.7"
+              height="17"
+              width="41"
+            >
+              <path
+                fill="currentColor"
+                d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
+              />
+            </svg>
+            <span class="govuk-footer__licence-description">
+              All content is available under the
+              <a
+                class="govuk-footer__link"
+                href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+                rel="license"
+              >Open Government Licence v3.0</a>, except where otherwise stated
+            </span>
+          </div>
+          <div class="govuk-footer__meta-item">
+            <a
+              class="govuk-footer__link govuk-footer__copyright-logo"
+              href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"
+            >© Crown copyright</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+
+#### Macro
+
+    {% from 'footer/macro.njk' import govukFooter %}
+
+    {{ govukFooter({}) }}
+
+## 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">meta</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Object containing parameters for the meta navigation.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">meta.items</th>
+
+<td class="govuk-table__cell ">array</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Array of items for use in the meta section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">meta.items.{}.text</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">List item text in the meta section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">meta.items.{}.href</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">List item href attribute in the meta section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation</th>
+
+<td class="govuk-table__cell ">array</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Array of items for use in the navigation section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation.{}.title</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Title for a section</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation.{}.columns</th>
+
+<td class="govuk-table__cell ">integer</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Amount of columns to display items in navigation section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation.items</th>
+
+<td class="govuk-table__cell ">array</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Array of items to display in the list in navigation section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation.items.{}.text</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">List item text in the navigation section of the footer.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">navigation.items.{}.href</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
+<th class="govuk-table__header" scope="row">containerClasses</th>
+
+<td class="govuk-table__cell ">string</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Classes that can be added to the inner container, useful if you want to make the footer full width.</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 footer component 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 footer component 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/footer/_footer.scss

@@ -0,0 +1,216 @@
+@import "../../settings/all";
+@import "../../tools/all";
+@import "../../helpers/all";
+
+@import "../../helpers/typography";
+
+@include govuk-exports("govuk/component/footer") {
+
+  $govuk-footer-background: $govuk-canvas-background-colour;
+  $govuk-footer-border-top: #a1acb2;
+  $govuk-footer-border: govuk-colour("grey-2");
+  $govuk-footer-text: #454a4c;
+  $govuk-footer-link: $govuk-footer-text;
+  $govuk-footer-link-hover: #171819;
+
+  // Based on the govuk-crest-2x.png image dimensions.
+  $govuk-footer-crest-image-width-2x: 250px;
+  $govuk-footer-crest-image-height-2x: 204px;
+  // Half the 2x image so that it fits the regular 1x size.
+  $govuk-footer-crest-image-width: ($govuk-footer-crest-image-width-2x / 2);
+  $govuk-footer-crest-image-height: ($govuk-footer-crest-image-height-2x / 2);
+
+  .govuk-footer {
+    @include govuk-font($size: 16);
+    @include govuk-responsive-padding(7, "top");
+    @include govuk-responsive-padding(5, "bottom");
+
+    border-top: 1px solid $govuk-footer-border-top;
+    color: $govuk-footer-text;
+    background: $govuk-footer-background;
+  }
+
+  .govuk-footer__link {
+    @include govuk-focusable-fill;
+
+    &:link,
+    &:visited {
+      color: $govuk-footer-link;
+    }
+
+    &:hover,
+    &:active {
+      color: $govuk-footer-link-hover;
+    }
+
+    // Use text colour when focussed
+    &:focus {
+      color: $govuk-text-colour;
+    }
+
+    // alphagov/govuk_template includes a specific a:link:focus selector
+    // designed to make unvisited links a slightly darker blue when focussed, so
+    // we need to override the text colour for that combination of selectors.
+    @include govuk-compatibility(govuk_template) {
+      &:link:focus {
+        @include govuk-text-colour;
+      }
+    }
+  }
+
+  .govuk-footer__section-break {
+    margin: 0; // Reset `<hr>` default margins
+    @include govuk-responsive-margin(8, "bottom");
+    border: 0; // Reset `<hr>` default borders
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__meta {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
+    -webkit-box-align: end;
+        -ms-flex-align: end;
+            align-items: flex-end; // Support: Flexbox
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center; // Support: Flexbox
+  }
+
+  .govuk-footer__meta-item {
+    margin-right: $govuk-gutter-half;
+    margin-bottom: govuk-spacing(5);
+    margin-left: $govuk-gutter-half;
+  }
+
+  .govuk-footer__meta-item--grow {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1; // Support: Flexbox
+    @include mq ($until: tablet) {
+      -ms-flex-preferred-size: 320px;
+          flex-basis: 320px; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__licence-logo {
+    display: inline-block;
+    margin-right: govuk-spacing(2);
+    @include mq ($until: desktop) {
+      margin-bottom: govuk-spacing(3);
+    }
+    vertical-align: top;
+  }
+
+  .govuk-footer__licence-description {
+    display: inline-block;
+  }
+
+  .govuk-footer__copyright-logo {
+    display: inline-block;
+    min-width: $govuk-footer-crest-image-width;
+    padding-top: ($govuk-footer-crest-image-height + govuk-spacing(2));
+    background-image: govuk-image-url("govuk-crest.png");
+    @include govuk-device-pixel-ratio {
+      background-image: govuk-image-url("govuk-crest-2x.png");
+    }
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+    background-size: $govuk-footer-crest-image-width $govuk-footer-crest-image-height;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+
+  .govuk-footer__inline-list {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(3);
+    padding: 0;
+  }
+
+  .govuk-footer__inline-list-item {
+    display: inline-block;
+    margin-right: govuk-spacing(3);
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-footer__heading {
+    @include govuk-responsive-margin(7, "bottom");
+    padding-bottom: govuk-spacing(4);
+    @include mq ($until: tablet) {
+      padding-bottom: govuk-spacing(2);
+    }
+    border-bottom: 1px solid $govuk-footer-border;
+  }
+
+  .govuk-footer__navigation {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex; // Support: Flexbox
+    margin-right: -$govuk-gutter-half;
+    margin-left: -$govuk-gutter-half;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
+  }
+
+  .govuk-footer__section {
+    display: inline-block;
+    margin-right: $govuk-gutter-half;
+    margin-bottom: $govuk-gutter;
+    margin-left: $govuk-gutter-half;
+    vertical-align: top;
+    // Ensure columns take up equal width (typically one-half:one-half)
+    -webkit-box-flex: 1;
+        -ms-flex-positive: 1;
+            flex-grow: 1; // Support: Flexbox
+    -ms-flex-negative: 1;
+        flex-shrink: 1; // Support: Flexbox
+    @include mq ($until: desktop) {
+      // Make sure columns do not drop below 200px in width
+      // Will typically result in wrapping, and end up in a single column on smaller screens.
+      -ms-flex-preferred-size: 200px;
+          flex-basis: 200px; // Support: Flexbox
+    }
+  }
+
+  // Sections two-third:one-third on desktop
+  @include mq ($from: desktop) {
+    .govuk-footer__section:first-child {
+      -webkit-box-flex: 2;
+          -ms-flex-positive: 2;
+              flex-grow: 2; // Support: Flexbox
+    }
+  }
+
+  .govuk-footer__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    -webkit-column-gap: $govuk-gutter;
+            column-gap: $govuk-gutter; // Support: Columns
+  }
+
+  @include mq ($from: desktop) {
+    .govuk-footer__list--columns-2 {
+      -webkit-column-count: 2;
+              column-count: 2; // Support: Columns
+    }
+
+    .govuk-footer__list--columns-3 {
+      -webkit-column-count: 3;
+              column-count: 3; // Support: Columns
+    }
+  }
+
+  .govuk-footer__list-item {
+    @include govuk-responsive-margin(4, "bottom");
+  }
+
+  .govuk-footer__list-item:last-child {
+    margin-bottom: 0;
+  }
+}