govuk_publishing_components 39.2.5 → 40.1.0

data/node_modules/govuk-frontend/dist/govuk/components/date-input/template.njk

@@ -0,0 +1,99 @@
+{% from "../error-message/macro.njk" import govukErrorMessage %}
+{% from "../fieldset/macro.njk" import govukFieldset %}
+{% from "../hint/macro.njk" import govukHint %}
+{% from "../input/macro.njk" import govukInput %}
+
+{#- a record of other elements that we need to associate with the input using
+  aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
+{%- if params.items | length %}
+  {% set dateInputItems = params.items %}
+{% else %}
+  {% set dateInputItems = [
+    {
+      name: "day",
+      classes: "govuk-input--width-2"
+    },
+    {
+      name: "month",
+      classes: "govuk-input--width-2"
+    },
+    {
+      name: "year",
+      classes: "govuk-input--width-4"
+    }
+  ] %}
+{% endif %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+{% 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
+  }) | trim | indent(2) }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + "-error" %}
+  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+  {{ govukErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | trim | indent(2) }}
+{% endif %}
+  <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
+    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+    {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {% for item in dateInputItems %}
+    <div class="govuk-date-input__item">
+      {{ govukInput({
+        label: {
+          text: item.label if item.label else item.name | capitalize,
+          classes: "govuk-date-input__label"
+        },
+        id: item.id if item.id else (params.id + "-" + item.name),
+        classes: "govuk-date-input__input " + (item.classes if item.classes),
+        name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+        value: item.value,
+        type: "text",
+        inputmode: item.inputmode if item.inputmode else "numeric",
+        autocomplete: item.autocomplete,
+        pattern: item.pattern,
+        attributes: item.attributes
+      }) | trim | indent(6) }}
+    </div>
+  {% endfor %}
+  </div>
+{% endset -%}
+
+<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if hasFieldset %}
+  {# We override the fieldset's role to 'group' because otherwise JAWS does not
+    announce the description for a fieldset comprised of text inputs, but
+    adding the role to the fieldset always makes the output overly verbose for
+    radio buttons or checkboxes. -#}
+  {{ govukFieldset({
+    describedBy: describedBy,
+    classes: params.fieldset.classes,
+    role: 'group',
+    attributes: params.fieldset.attributes,
+    legend: params.fieldset.legend,
+    html: innerHtml | trim
+  }) | trim | indent(2) }}
+{% else %}
+  {{ innerHtml | safe | trim }}
+{% endif %}
+</div>

data/node_modules/govuk-frontend/dist/govuk/components/details/_details.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_details.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/details/_details.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/details/_details.scss"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,iBAAiB","file":"_details.scss","sourcesContent":["@import \"../../base\";\n@import \"./index\";\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/details/_index.scss

@@ -0,0 +1,134 @@
+@include govuk-exports("govuk/component/details") {
+  .govuk-details {
+    @include govuk-font($size: 19);
+    @include govuk-text-colour;
+    @include govuk-responsive-margin(6, "bottom");
+
+    display: block;
+  }
+
+  .govuk-details__summary {
+    // Make the focus outline shrink-wrap the text content of the summary
+    display: inline-block;
+
+    margin-bottom: govuk-spacing(1);
+  }
+
+  .govuk-details__summary-text {
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :only-child,
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .govuk-details__text {
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+    padding-left: govuk-spacing(4);
+  }
+
+  .govuk-details__text p {
+    margin-top: 0;
+    margin-bottom: govuk-spacing(4);
+  }
+
+  .govuk-details__text > :last-child {
+    margin-bottom: 0;
+  }
+
+  // Hack to target IE8 - IE11 (and REALLY old Firefox)
+  // These browsers don't support the details element, so fall back to looking
+  // like inset text
+  @media screen\0 {
+    .govuk-details {
+      border-left: $govuk-border-width-wide solid $govuk-border-colour;
+    }
+
+    .govuk-details__summary {
+      margin-top: govuk-spacing(3);
+    }
+
+    .govuk-details__summary-text {
+      @include govuk-typography-weight-bold;
+      @include govuk-responsive-margin(4, "bottom");
+      padding-left: govuk-spacing(4);
+    }
+  }
+
+  // We wrap styles for newer browsers in a feature query, which is ignored by
+  // older browsers, which always expand the details element.
+  //
+  // Additionally, -ms-ime-align is only supported by Edge 12 - 18
+  //
+  // This ensures we don't use these styles in browsers which:
+  //   - support ES6 modules but not the <details> element (Edge 16 - 18)
+  //   - do not support ES6 modules or the <details> element (eg, IE8+)
+  @supports not (-ms-ime-align: auto) {
+    .govuk-details__summary {
+      // Absolutely position the marker against this element
+      position: relative;
+
+      // Allow for absolutely positioned marker and align with disclosed text
+      padding-left: govuk-spacing(4) + $govuk-border-width;
+
+      // Style the summary to look like a link...
+      color: $govuk-link-colour;
+      cursor: pointer;
+
+      &:hover {
+        color: $govuk-link-hover-colour;
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+      }
+    }
+    // ...but only underline the text, not the arrow
+    .govuk-details__summary-text {
+      @include govuk-link-decoration;
+    }
+
+    .govuk-details__summary:hover .govuk-details__summary-text {
+      @include govuk-link-hover-decoration;
+    }
+
+    // Remove the underline when focussed to avoid duplicate borders
+    .govuk-details__summary:focus .govuk-details__summary-text {
+      text-decoration: none;
+    }
+
+    // Remove the default details marker so we can style our own consistently and
+    // ensure it displays in Firefox (see implementation.md for details)
+    .govuk-details__summary::-webkit-details-marker {
+      display: none;
+    }
+
+    // Append our own open / closed marker using a pseudo-element
+    .govuk-details__summary::before {
+      content: "";
+      position: absolute;
+
+      top: -1px;
+      bottom: 0;
+      left: 0;
+
+      margin: auto;
+
+      @include govuk-shape-arrow($direction: right, $base: 14px);
+
+      .govuk-details[open] > & {
+        @include govuk-shape-arrow($direction: down, $base: 14px);
+      }
+    }
+
+    .govuk-details__text {
+      border-left: $govuk-border-width solid $govuk-border-colour;
+    }
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/details/_index.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/details/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,8BAA8B;IAC9B,0BAA0B;IAC1B,6CAA6C;;IAE7C,cAAc;EAChB;;EAEA;IACE,oEAAoE;IACpE,qBAAqB;;IAErB,+BAA+B;EACjC;;EAEA;IACE;MACE,aAAa;IACf;;IAEA;;MAEE,gBAAgB;IAClB;EACF;;EAEA;IACE,6BAA6B;IAC7B,gCAAgC;IAChC,8BAA8B;EAChC;;EAEA;IACE,aAAa;IACb,+BAA+B;EACjC;;EAEA;IACE,gBAAgB;EAClB;;EAEA,oDAAoD;EACpD,2EAA2E;EAC3E,iBAAiB;EACjB;IACE;MACE,gEAAgE;IAClE;;IAEA;MACE,4BAA4B;IAC9B;;IAEA;MACE,qCAAqC;MACrC,6CAA6C;MAC7C,8BAA8B;IAChC;EACF;;EAEA,2EAA2E;EAC3E,0DAA0D;EAC1D,CAAC;EACD,+DAA+D;EAC/D,CAAC;EACD,2DAA2D;EAC3D,sEAAsE;EACtE,oEAAoE;EACpE;IACE;MACE,qDAAqD;MACrD,kBAAkB;;MAElB,sEAAsE;MACtE,oDAAoD;;MAEpD,0CAA0C;MAC1C,yBAAyB;MACzB,eAAe;;MAEf;QACE,+BAA+B;MACjC;;MAEA;QACE,2BAA2B;MAC7B;IACF;IACA,+CAA+C;IAC/C;MACE,8BAA8B;IAChC;;IAEA;MACE,oCAAoC;IACtC;;IAEA,+DAA+D;IAC/D;MACE,qBAAqB;IACvB;;IAEA,4EAA4E;IAC5E,mEAAmE;IACnE;MACE,aAAa;IACf;;IAEA,4DAA4D;IAC5D;MACE,WAAW;MACX,kBAAkB;;MAElB,SAAS;MACT,SAAS;MACT,OAAO;;MAEP,YAAY;;MAEZ,0DAA0D;;MAE1D;QACE,yDAAyD;MAC3D;IACF;;IAEA;MACE,2DAA2D;IAC7D;EACF;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/details\") {\n  .govuk-details {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    @include govuk-responsive-margin(6, \"bottom\");\n\n    display: block;\n  }\n\n  .govuk-details__summary {\n    // Make the focus outline shrink-wrap the text content of the summary\n    display: inline-block;\n\n    margin-bottom: govuk-spacing(1);\n  }\n\n  .govuk-details__summary-text {\n    > :first-child {\n      margin-top: 0;\n    }\n\n    > :only-child,\n    > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .govuk-details__text {\n    padding-top: govuk-spacing(3);\n    padding-bottom: govuk-spacing(3);\n    padding-left: govuk-spacing(4);\n  }\n\n  .govuk-details__text p {\n    margin-top: 0;\n    margin-bottom: govuk-spacing(4);\n  }\n\n  .govuk-details__text > :last-child {\n    margin-bottom: 0;\n  }\n\n  // Hack to target IE8 - IE11 (and REALLY old Firefox)\n  // These browsers don't support the details element, so fall back to looking\n  // like inset text\n  @media screen\\0 {\n    .govuk-details {\n      border-left: $govuk-border-width-wide solid $govuk-border-colour;\n    }\n\n    .govuk-details__summary {\n      margin-top: govuk-spacing(3);\n    }\n\n    .govuk-details__summary-text {\n      @include govuk-typography-weight-bold;\n      @include govuk-responsive-margin(4, \"bottom\");\n      padding-left: govuk-spacing(4);\n    }\n  }\n\n  // We wrap styles for newer browsers in a feature query, which is ignored by\n  // older browsers, which always expand the details element.\n  //\n  // Additionally, -ms-ime-align is only supported by Edge 12 - 18\n  //\n  // This ensures we don't use these styles in browsers which:\n  //   - support ES6 modules but not the <details> element (Edge 16 - 18)\n  //   - do not support ES6 modules or the <details> element (eg, IE8+)\n  @supports not (-ms-ime-align: auto) {\n    .govuk-details__summary {\n      // Absolutely position the marker against this element\n      position: relative;\n\n      // Allow for absolutely positioned marker and align with disclosed text\n      padding-left: govuk-spacing(4) + $govuk-border-width;\n\n      // Style the summary to look like a link...\n      color: $govuk-link-colour;\n      cursor: pointer;\n\n      &:hover {\n        color: $govuk-link-hover-colour;\n      }\n\n      &:focus {\n        @include govuk-focused-text;\n      }\n    }\n    // ...but only underline the text, not the arrow\n    .govuk-details__summary-text {\n      @include govuk-link-decoration;\n    }\n\n    .govuk-details__summary:hover .govuk-details__summary-text {\n      @include govuk-link-hover-decoration;\n    }\n\n    // Remove the underline when focussed to avoid duplicate borders\n    .govuk-details__summary:focus .govuk-details__summary-text {\n      text-decoration: none;\n    }\n\n    // Remove the default details marker so we can style our own consistently and\n    // ensure it displays in Firefox (see implementation.md for details)\n    .govuk-details__summary::-webkit-details-marker {\n      display: none;\n    }\n\n    // Append our own open / closed marker using a pseudo-element\n    .govuk-details__summary::before {\n      content: \"\";\n      position: absolute;\n\n      top: -1px;\n      bottom: 0;\n      left: 0;\n\n      margin: auto;\n\n      @include govuk-shape-arrow($direction: right, $base: 14px);\n\n      .govuk-details[open] > & {\n        @include govuk-shape-arrow($direction: down, $base: 14px);\n      }\n    }\n\n    .govuk-details__text {\n      border-left: $govuk-border-width solid $govuk-border-colour;\n    }\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/details/fixtures.json

@@ -0,0 +1,123 @@
+{
+    "component": "details",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "summaryText": "Help with nationality",
+                "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post."
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
+        },
+        {
+            "name": "expanded",
+            "options": {
+                "id": "help-with-nationality",
+                "summaryText": "Help with nationality",
+                "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.",
+                "open": true
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details id=\"help-with-nationality\" class=\"govuk-details\" open>\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Help with nationality\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.\n  </div>\n</details>"
+        },
+        {
+            "name": "with html",
+            "options": {
+                "summaryText": "Where to find your National Insurance Number",
+                "html": "Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Where to find your National Insurance Number\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Your National Insurance number can be found on\n<ul>\n  <li>your National Insurance card</li>\n  <li>your payslip</li>\n  <li>P60</li>\n  <li>benefits information</li>\n  <li>tax return</li>\n</ul>\n\n  </div>\n</details>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-details-element",
+                "summaryText": "Expand this section",
+                "text": "Here are some more details"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details id=\"my-details-element\" class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "summaryText": "Expand this section",
+                "text": "More about the greater than symbol (>)"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about the greater than symbol (&gt;)\n  </div>\n</details>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "summaryText": "Expand this section",
+                "html": "More about <b>bold text</b>"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand this section\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    More about <b>bold text</b>\n  </div>\n</details>"
+        },
+        {
+            "name": "summary html as text",
+            "options": {
+                "summaryText": "The greater than symbol (>) is the best",
+                "text": "Here are some more details"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      The greater than symbol (&gt;) is the best\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
+        },
+        {
+            "name": "summary html",
+            "options": {
+                "summaryHtml": "Use <b>bold text</b> sparingly",
+                "text": "Here are some more details"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Use <b>bold text</b> sparingly\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "some-additional-class",
+                "text": "Here are some more details",
+                "summaryText": "Expand me"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details some-additional-class\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "Here are some more details",
+                "summaryText": "Expand me",
+                "attributes": {
+                    "data-some-data-attribute": "i-love-data",
+                    "another-attribute": "foo"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<details class=\"govuk-details\" data-some-data-attribute=\"i-love-data\" another-attribute=\"foo\">\n  <summary class=\"govuk-details__summary\">\n    <span class=\"govuk-details__summary-text\">\n      Expand me\n    </span>\n  </summary>\n  <div class=\"govuk-details__text\">\n    Here are some more details\n  </div>\n</details>"
+        }
+    ]
+}

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

@@ -0,0 +1,87 @@
+## Implementation notes
+
+### Styling in older browsers
+
+#### Browsers with support for `type=module`, `<details>` and feature queries
+
+https://browsersl.ist/#q=supports+details+and+supports+css-featurequeries+and+supports+es6-module&region=GB
+
+Previously, we provided a polyfill for older browsers which do not support the
+`<details>` component. Since most browsers now DO support `<details>`, we've
+removed that polyfill, and we need to make sure browsers which don't support
+`<details>` don't use any styles that make them look interactable.
+
+By wrapping these styles in a feature query, we can capture the vast majority of
+browsers which have full support.
+
+#### Browsers that support `type=module` and feature queries but not `<details>`
+
+https://browsersl.ist/#q=supports+es6-module+and+not+supports+details+and+supports+css-featurequeries&region=GB
+
+This only affects Edge 16 - 18. We filter these out of the support query by
+checking for `-ms-ime-align: auto`, which isn't supported by any other browsers.
+
+#### Browsers that support `<details>` but not `type=module` or feature queries
+
+https://browsersl.ist/#q=supports+details+and+not+supports+css-featurequeries+and+not+supports+es6-module&region=GB
+
+These will default to their native styling of the `<details>` element, with a
+few of our spacing and font styles.
+
+#### Browsers which don't support `<details>`, `type=module` or feature queries
+
+https://browsersl.ist/#q=%3E0.0000001%25+and+not+supports+details+and+not+supports+es6-module+and+not+supports+css-featurequeries&region=GB
+
+This is largely IE 8 - 11.
+
+We can account for IE by styling them like inset text, via a `@media screen\0`
+hack that no other browser supports.
+
+#### Browsers that support feature queries, but not `<details>` or `type=module`
+
+https://browsersl.ist/#q=supports+css-featurequeries+and+not+supports+details+and+not+supports+es6-module&region=GB
+
+This is the only gap, as these browsers will get styled to look interactable,
+even though they aren't. This is largely Opera Mini.
+
+### 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`:
+
+```scss
+@-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/dist/govuk/components/details/template-default.html

@@ -0,0 +1,10 @@
+<details class="govuk-details">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      Help with nationality
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+  </div>
+</details>

data/node_modules/govuk-frontend/dist/govuk/components/details/template-expanded.html

@@ -0,0 +1,10 @@
+<details id="help-with-nationality" class="govuk-details" open>
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      Help with nationality
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
+  </div>
+</details>

data/node_modules/govuk-frontend/dist/govuk/components/details/template-with-html.html

@@ -0,0 +1,18 @@
+<details class="govuk-details">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      Where to find your National Insurance Number
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    Your National Insurance number can be found on
+<ul>
+  <li>your National Insurance card</li>
+  <li>your payslip</li>
+  <li>P60</li>
+  <li>benefits information</li>
+  <li>tax return</li>
+</ul>
+
+  </div>
+</details>

data/node_modules/govuk-frontend/dist/govuk/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">
+    {{ caller() if caller else (params.html | safe if params.html else params.text) }}
+  </div>
+</details>

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_error-message.scss

@@ -0,0 +1,4 @@
+@import "../../base";
+@import "./index";
+
+/*# sourceMappingURL=_error-message.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_error-message.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/error-message/_error-message.scss"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,iBAAiB","file":"_error-message.scss","sourcesContent":["@import \"../../base\";\n@import \"./index\";\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_index.scss

@@ -0,0 +1,14 @@
+@include govuk-exports("govuk/component/error-message") {
+  .govuk-error-message {
+    @include govuk-font($size: 19, $weight: bold);
+
+    display: block;
+    margin-top: 0; // Reset any default browser margins for paragraphs
+    margin-bottom: govuk-spacing(3);
+    clear: both;
+
+    color: $govuk-error-colour;
+  }
+}
+
+/*# sourceMappingURL=_index.scss.map */

data/node_modules/govuk-frontend/dist/govuk/components/error-message/_index.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/govuk/components/error-message/_index.scss"],"names":[],"mappings":"AAAA;EACE;IACE,6CAA6C;;IAE7C,cAAc;IACd,aAAa,EAAE,kDAAkD;IACjE,+BAA+B;IAC/B,WAAW;;IAEX,0BAA0B;EAC5B;AACF","file":"_index.scss","sourcesContent":["@include govuk-exports(\"govuk/component/error-message\") {\n  .govuk-error-message {\n    @include govuk-font($size: 19, $weight: bold);\n\n    display: block;\n    margin-top: 0; // Reset any default browser margins for paragraphs\n    margin-bottom: govuk-spacing(3);\n    clear: both;\n\n    color: $govuk-error-colour;\n  }\n}\n"]}

data/node_modules/govuk-frontend/dist/govuk/components/error-message/fixtures.json

@@ -0,0 +1,104 @@
+{
+    "component": "error-message",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "text": "Error message about full name goes here"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message about full name goes here\n</p>"
+        },
+        {
+            "name": "translated",
+            "options": {
+                "visuallyHiddenText": "",
+                "html": "<span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma"
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Neges gwall am yr enw llawn yn mynd yma\n</p>"
+        },
+        {
+            "name": "id",
+            "options": {
+                "id": "my-error-message-id",
+                "text": "This is an error message"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p id=\"my-error-message-id\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "custom-class",
+                "text": "This is an error message"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message custom-class\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+        },
+        {
+            "name": "html as text",
+            "options": {
+                "text": "Unexpected > in body"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected &gt; in body\n</p>"
+        },
+        {
+            "name": "html",
+            "options": {
+                "html": "Unexpected <b>bold text</b> in body copy"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Unexpected <b>bold text</b> in body copy\n</p>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "text": "This is an error message",
+                "attributes": {
+                    "data-test": "attribute",
+                    "id": "my-error-message"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\" data-test=\"attribute\" id=\"my-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> This is an error message\n</p>"
+        },
+        {
+            "name": "with visually hidden text",
+            "options": {
+                "text": "Rhowch eich enw llawn",
+                "visuallyHiddenText": "Gwall"
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Gwall:</span> Rhowch eich enw llawn\n</p>"
+        },
+        {
+            "name": "visually hidden text removed",
+            "options": {
+                "text": "There is an error on line 42",
+                "visuallyHiddenText": ""
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<p class=\"govuk-error-message\">\n  There is an error on line 42\n</p>"
+        }
+    ]
+}