diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml index 9af37cf5..a64de58e 100644 --- a/.github/actions/prototype-kit-test/action.yml +++ b/.github/actions/prototype-kit-test/action.yml @@ -43,6 +43,7 @@ runs: echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/date-input/macro.njk\" import tnaDateInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/date-search/macro.njk\" import tnaDateSearch %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/error-summary/macro.njk\" import tnaErrorSummary %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && @@ -76,6 +77,7 @@ runs: echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html && echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html && echo "{{ tnaDateSearch({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaErrorSummary({}) }}" >> prototype/app/views/index.html && echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html && echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html && echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html && diff --git a/CHANGELOG.md b/CHANGELOG.md index cdc838df..8085461a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,9 +8,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.41...HEAD) ### Added + +- Error summary component + ### Changed ### Deprecated ### Removed + +- Removed the `tna-form__` prefix from form field IDs + ### Fixed ### Security diff --git a/src/nationalarchives/all.mjs b/src/nationalarchives/all.mjs index 489b5d10..23036153 100644 --- a/src/nationalarchives/all.mjs +++ b/src/nationalarchives/all.mjs @@ -1,5 +1,6 @@ import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.mjs"; import { CookieBanner } from "./components/cookie-banner/cookie-banner.mjs"; +import { ErrorSummary } from "./components/error-summary/error-summary.mjs"; import { Gallery } from "./components/gallery/gallery.mjs"; import { GlobalHeader } from "./components/global-header/global-header.mjs"; import { Header } from "./components/header/header.mjs"; @@ -50,6 +51,13 @@ const initAll = (options) => { new CookieBanner($cookieBanner); } + const $errorSummary = $scope.querySelector( + '[data-module="tna-error-summary"]', + ); + if ($errorSummary) { + new ErrorSummary($errorSummary).init(); + } + const $galleries = $scope.querySelectorAll('[data-module="tna-gallery"]'); $galleries.forEach(($gallery) => { new Gallery($gallery); @@ -95,6 +103,7 @@ export { Cookies, Breadcrumbs, CookieBanner, + ErrorSummary, Gallery, GlobalHeader, Header, diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss index f30e27f1..beec5bc6 100644 --- a/src/nationalarchives/components/_index.scss +++ b/src/nationalarchives/components/_index.scss @@ -6,6 +6,7 @@ @use "cookie-banner"; @use "date-input"; @use "date-search"; +@use "error-summary"; @use "featured-records"; @use "filters"; @use "footer"; diff --git a/src/nationalarchives/components/button/_index.scss b/src/nationalarchives/components/button/_index.scss index 6232aea6..f6aa5df2 100644 --- a/src/nationalarchives/components/button/_index.scss +++ b/src/nationalarchives/components/button/_index.scss @@ -1 +1,2 @@ @use "button"; +@use "button-group"; diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 30dff3b0..31040f8e 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -14,7 +14,7 @@ @include typography.relative-font-size(18); @include typography.main-font-weight-bold; - line-height: #{math.div(16, 18) * 2}; + line-height: 2rem; text-decoration: none; text-align: center; text-wrap: balance; diff --git a/src/nationalarchives/components/checkboxes/fixtures.json b/src/nationalarchives/components/checkboxes/fixtures.json index 09f92e11..0eb83ef7 100644 --- a/src/nationalarchives/components/checkboxes/fixtures.json +++ b/src/nationalarchives/components/checkboxes/fixtures.json @@ -24,7 +24,7 @@ } ] }, - "html": "

Categories

", + "html": "

Categories

", "hidden": false }, { @@ -79,7 +79,7 @@ ], "small": true }, - "html": "

Categories

", + "html": "

Categories

", "hidden": false }, { @@ -106,7 +106,7 @@ } ] }, - "html": "

Categories

", + "html": "

Categories

", "hidden": false }, { @@ -133,7 +133,7 @@ } ] }, - "html": "

Categories

Select all that apply.

", + "html": "

Categories

Select all that apply.

", "hidden": false }, { @@ -162,7 +162,7 @@ } ] }, - "html": "

Categories

Error: You must select a category

", + "html": "

Categories

Error: You must select a category

", "hidden": false }, { @@ -189,7 +189,7 @@ ], "inline": true }, - "html": "

Categories

", + "html": "

Categories

", "hidden": false } ] diff --git a/src/nationalarchives/components/checkboxes/template.njk b/src/nationalarchives/components/checkboxes/template.njk index 99119748..da6b0038 100644 --- a/src/nationalarchives/components/checkboxes/template.njk +++ b/src/nationalarchives/components/checkboxes/template.njk @@ -10,20 +10,20 @@ {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
{%- for item in params.items %}
- -
diff --git a/src/nationalarchives/components/date-input/fixtures.json b/src/nationalarchives/components/date-input/fixtures.json index b15a310b..17280afb 100644 --- a/src/nationalarchives/components/date-input/fixtures.json +++ b/src/nationalarchives/components/date-input/fixtures.json @@ -10,7 +10,7 @@ "id": "date", "name": "date" }, - "html": "

Enter a start date

", + "html": "

Enter a start date

", "hidden": false }, { @@ -27,7 +27,7 @@ "year": "1986" } }, - "html": "

Enter a start date

", + "html": "

Enter a start date

", "hidden": false }, { @@ -40,7 +40,7 @@ "name": "date", "hint": "The earliest date of the record." }, - "html": "

Enter a start date

The earliest date of the record.

", + "html": "

Enter a start date

The earliest date of the record.

", "hidden": false }, { @@ -55,7 +55,7 @@ "text": "Date is not valid" } }, - "html": "

Enter a start date

Error: Date is not valid

", + "html": "

Enter a start date

Error: Date is not valid

", "hidden": false }, { @@ -68,7 +68,7 @@ "name": "date", "inline": true }, - "html": "

Enter a start date

", + "html": "

Enter a start date

", "hidden": false } ] diff --git a/src/nationalarchives/components/date-input/template.njk b/src/nationalarchives/components/date-input/template.njk index c7271af0..76477c81 100644 --- a/src/nationalarchives/components/date-input/template.njk +++ b/src/nationalarchives/components/date-input/template.njk @@ -10,33 +10,33 @@ {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
-
-
-
diff --git a/src/nationalarchives/components/date-search/fixtures.json b/src/nationalarchives/components/date-search/fixtures.json index 89f1d955..4b53e37c 100644 --- a/src/nationalarchives/components/date-search/fixtures.json +++ b/src/nationalarchives/components/date-search/fixtures.json @@ -10,7 +10,7 @@ "id": "date", "name": "date" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "date", "value": "1986-09-24" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "date", "hint": "The earliest date of the record." }, - "html": "

The earliest date of the record.

", + "html": "

The earliest date of the record.

", "hidden": false }, { @@ -51,7 +51,7 @@ "text": "Date is not valid" } }, - "html": "

Error: Date is not valid

", + "html": "

Error: Date is not valid

", "hidden": false }, { @@ -64,7 +64,7 @@ "name": "date", "inline": true }, - "html": "

", + "html": "

", "hidden": false }, { @@ -77,7 +77,7 @@ "name": "date", "maxWidth": true }, - "html": "

", + "html": "

", "hidden": false } ] diff --git a/src/nationalarchives/components/date-search/template.njk b/src/nationalarchives/components/date-search/template.njk index ab90dd79..5249ba47 100644 --- a/src/nationalarchives/components/date-search/template.njk +++ b/src/nationalarchives/components/date-search/template.njk @@ -6,22 +6,22 @@
- {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
-
diff --git a/src/nationalarchives/components/error-summary/_index.scss b/src/nationalarchives/components/error-summary/_index.scss new file mode 100644 index 00000000..00f6b306 --- /dev/null +++ b/src/nationalarchives/components/error-summary/_index.scss @@ -0,0 +1 @@ +@use "error-summary"; diff --git a/src/nationalarchives/components/error-summary/error-summary.mjs b/src/nationalarchives/components/error-summary/error-summary.mjs new file mode 100644 index 00000000..cc3e7007 --- /dev/null +++ b/src/nationalarchives/components/error-summary/error-summary.mjs @@ -0,0 +1,51 @@ +export class ErrorSummary { + constructor($module) { + this.$module = $module; + } + + init() { + if (!this.$module) { + return; + } + + const disableAutoFocus = + this.$module.getAttribute("data-disableautofocus") === "true" ?? false; + + if (!disableAutoFocus) { + this.setFocus(this.$module); + } + } + + setFocus($element, options = {}) { + const isFocusable = $element.getAttribute("tabindex"); + + if (!isFocusable) { + $element.setAttribute("tabindex", "-1"); + } + + /** + * Handle element focus + */ + function onFocus() { + $element.addEventListener("blur", onBlur, { once: true }); + } + + /** + * Handle element blur + */ + function onBlur() { + options.onBlur?.call($element); + + if (!isFocusable) { + $element.removeAttribute("tabindex"); + } + } + + // Add listener to reset element on blur, after focus + $element.addEventListener("focus", onFocus, { once: true }); + + // Focus element + options.onBeforeFocus?.call($element); + $element.focus(); + } +} diff --git a/src/nationalarchives/components/error-summary/error-summary.scss b/src/nationalarchives/components/error-summary/error-summary.scss new file mode 100644 index 00000000..83793d2a --- /dev/null +++ b/src/nationalarchives/components/error-summary/error-summary.scss @@ -0,0 +1,39 @@ +@use "../../tools/colour"; +@use "../../tools/media"; +@use "../../tools/spacing"; +@use "../../tools/typography"; +@use "../../utilities"; + +.tna-error-summary { + @include spacing.space-above; + padding: 1rem; + + @include colour.plain; + + @include colour.colour-background("page-background"); + + @include colour.colour-border("form-error", 0.25rem, solid); + + &:focus { + outline: none; + } + + &__list { + margin: 0.5rem 0 0; + + list-style: none; + } + + &__item { + } + + &__link { + @include typography.main-font-weight-bold; + + &, + &:link, + &:visited { + @include colour.colour-font("form-error"); + } + } +} diff --git a/src/nationalarchives/components/error-summary/error-summary.stories.js b/src/nationalarchives/components/error-summary/error-summary.stories.js new file mode 100644 index 00000000..7e52ca9c --- /dev/null +++ b/src/nationalarchives/components/error-summary/error-summary.stories.js @@ -0,0 +1,59 @@ +import ErrorSummary from "./template.njk"; +import macroOptions from "./macro-options.json"; + +const argTypes = { + title: { control: "text" }, + headingLevel: { control: { type: "number", min: 1, max: 6 } }, + items: { control: "object" }, + disableAutoFocus: { control: "boolean" }, + classes: { control: "text" }, + attributes: { control: "object" }, +}; + +Object.keys(argTypes).forEach((argType) => { + argTypes[argType].description = macroOptions.find( + (option) => option.name === argType, + )?.description; +}); + +export default { + title: "Components/Error summary", + argTypes, +}; + +const Template = ({ + title, + headingLevel, + items, + disableAutoFocus, + classes, + attributes, +}) => + ErrorSummary({ + params: { + title, + headingLevel, + items, + disableAutoFocus, + classes, + attributes, + }, + }); + +export const Standard = Template.bind({}); +Standard.args = { + title: "There is a problem", + headingLevel: 2, + items: [ + { + text: "Enter your full name", + href: "#", + }, + { + text: "The date of the record cannot be in the future", + href: "#", + }, + ], + disableAutoFocus: true, + classes: "tna-error-summary--demo", +}; diff --git a/src/nationalarchives/components/error-summary/fixtures.json b/src/nationalarchives/components/error-summary/fixtures.json new file mode 100644 index 00000000..a301499f --- /dev/null +++ b/src/nationalarchives/components/error-summary/fixtures.json @@ -0,0 +1,25 @@ +{ + "component": "error-summary", + "fixtures": [ + { + "name": "default", + "options": { + "title": "There is a problem", + "headingLevel": 2, + "items": [ + { + "text": "Enter your full name", + "href": "#" + }, + { + "text": "The date of the record cannot be in the future", + "href": "#" + } + ], + "disableAutoFocus": true + }, + "html": "

There is a problem

", + "hidden": false + } + ] +} diff --git a/src/nationalarchives/components/error-summary/macro-options.json b/src/nationalarchives/components/error-summary/macro-options.json new file mode 100644 index 00000000..edcb86d4 --- /dev/null +++ b/src/nationalarchives/components/error-summary/macro-options.json @@ -0,0 +1,52 @@ +[ + { + "name": "title", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "headingLevel", + "type": "number", + "required": true, + "description": "" + }, + { + "name": "items", + "type": "array", + "required": true, + "description": "", + "params": [ + { + "name": "text", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "href", + "type": "string", + "required": true, + "description": "" + } + ] + }, + { + "name": "disableAutoFocus", + "type": "boolean", + "required": false, + "description": "" + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the error summary." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the error summary." + } +] diff --git a/src/nationalarchives/components/error-summary/macro.njk b/src/nationalarchives/components/error-summary/macro.njk new file mode 100644 index 00000000..df790a0d --- /dev/null +++ b/src/nationalarchives/components/error-summary/macro.njk @@ -0,0 +1,3 @@ +{% macro tnaErrorSummary(params) %} + {%- include "nationalarchives/components/error-summary/template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/nationalarchives/components/error-summary/template.njk b/src/nationalarchives/components/error-summary/template.njk new file mode 100644 index 00000000..c77ebd24 --- /dev/null +++ b/src/nationalarchives/components/error-summary/template.njk @@ -0,0 +1,15 @@ +{%- set containerClasses = [params.classes] if params.classes else [] -%} +
+
+ + {{ params.title }} + +
    + {%- for item in params.items %} +
  • + {{ item.text }} +
    • + {%- endfor %} +
+
+
diff --git a/src/nationalarchives/components/message/phase-banner.stories.js b/src/nationalarchives/components/message/phase-banner.stories.js index e8a2851f..2bc98d5e 100644 --- a/src/nationalarchives/components/message/phase-banner.stories.js +++ b/src/nationalarchives/components/message/phase-banner.stories.js @@ -34,5 +34,5 @@ Standard.args = { message: "Please note this page references hunger strikes and force feeding, which some people may find upsetting.", headingLevel: 2, - classes: "tna-messaage--demo", + classes: "tna-phase-banner--demo", }; diff --git a/src/nationalarchives/components/radios/fixtures.json b/src/nationalarchives/components/radios/fixtures.json index 14f0a22b..39e70cc5 100644 --- a/src/nationalarchives/components/radios/fixtures.json +++ b/src/nationalarchives/components/radios/fixtures.json @@ -24,7 +24,7 @@ } ] }, - "html": "

Type

", + "html": "

Type

", "hidden": false }, { @@ -79,7 +79,7 @@ ], "small": true }, - "html": "

Type

", + "html": "

Type

", "hidden": false }, { @@ -106,7 +106,7 @@ ], "selected": "image" }, - "html": "

Type

", + "html": "

Type

", "hidden": false }, { @@ -133,7 +133,7 @@ } ] }, - "html": "

Type

You can only select one.

", + "html": "

Type

You can only select one.

", "hidden": false }, { @@ -162,7 +162,7 @@ } ] }, - "html": "

Type

Error: You must select a type

", + "html": "

Type

Error: You must select a type

", "hidden": false }, { @@ -189,7 +189,7 @@ ], "inline": true }, - "html": "

Type

", + "html": "

Type

", "hidden": false } ] diff --git a/src/nationalarchives/components/radios/template.njk b/src/nationalarchives/components/radios/template.njk index 69b4dacd..124b52f5 100644 --- a/src/nationalarchives/components/radios/template.njk +++ b/src/nationalarchives/components/radios/template.njk @@ -10,20 +10,20 @@ {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
{%- for item in params.items %}
- -
diff --git a/src/nationalarchives/components/search-field/fixtures.json b/src/nationalarchives/components/search-field/fixtures.json index c031b8bf..2c33ce2c 100644 --- a/src/nationalarchives/components/search-field/fixtures.json +++ b/src/nationalarchives/components/search-field/fixtures.json @@ -10,7 +10,7 @@ "id": "search1", "name": "q" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "q", "value": "badgers" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "q", "hint": "Try searching for something interesting" }, - "html": "

Try searching for something interesting

", + "html": "

Try searching for something interesting

", "hidden": false } ] diff --git a/src/nationalarchives/components/search-field/search-field.scss b/src/nationalarchives/components/search-field/search-field.scss index e384d633..66f4d3cf 100644 --- a/src/nationalarchives/components/search-field/search-field.scss +++ b/src/nationalarchives/components/search-field/search-field.scss @@ -1,7 +1,10 @@ @use "../../variables/forms"; @use "../../tools/colour"; +@use "../../tools/spacing"; .tna-search-field { + @include spacing.space-above; + &__fields { display: flex; align-self: stretch; @@ -24,10 +27,12 @@ @include colour.colour-border("input-border"); border-width: forms.$form-field-border-width 0 forms.$form-field-border-width forms.$form-field-border-width; + border-style: solid; border-radius: 0; .tna-template--dark-theme &, - .tna-background-contrast & { + .tna-background-contrast &/*, + .tna-background-accent &*/ { margin-right: forms.$form-field-border-width; border-width: 0; diff --git a/src/nationalarchives/components/search-field/template.njk b/src/nationalarchives/components/search-field/template.njk index b5569af7..a887455d 100644 --- a/src/nationalarchives/components/search-field/template.njk +++ b/src/nationalarchives/components/search-field/template.njk @@ -4,18 +4,18 @@
- {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %}
-

", + "html": "

", "hidden": false }, { @@ -51,7 +51,7 @@ ], "selected": "date" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -78,7 +78,7 @@ } ] }, - "html": "

Select a field to sort by.

", + "html": "

Select a field to sort by.

", "hidden": false }, { @@ -107,7 +107,7 @@ } ] }, - "html": "

Error: You must select a field to sort by

", + "html": "

Error: You must select a field to sort by

", "hidden": false }, { @@ -134,7 +134,7 @@ ], "inline": true }, - "html": "

", + "html": "

", "hidden": false }, { @@ -161,7 +161,7 @@ ], "size": "xl" }, - "html": "

", + "html": "

", "hidden": false } ] diff --git a/src/nationalarchives/components/select/template.njk b/src/nationalarchives/components/select/template.njk index 2dae0f11..952e3013 100644 --- a/src/nationalarchives/components/select/template.njk +++ b/src/nationalarchives/components/select/template.njk @@ -6,22 +6,22 @@
- {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
- {%- for item in params.items %} {%- endfor %} diff --git a/src/nationalarchives/components/text-input/fixtures.json b/src/nationalarchives/components/text-input/fixtures.json index e12b0b1d..7d5383e1 100644 --- a/src/nationalarchives/components/text-input/fixtures.json +++ b/src/nationalarchives/components/text-input/fixtures.json @@ -10,7 +10,7 @@ "id": "name", "name": "name" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "name", "value": "John" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "name", "hint": "What people call you by." }, - "html": "

What people call you by.

", + "html": "

What people call you by.

", "hidden": false }, { @@ -51,7 +51,7 @@ "text": "Enter a name" } }, - "html": "

Error: Enter a name

", + "html": "

Error: Enter a name

", "hidden": false }, { @@ -64,7 +64,7 @@ "name": "name", "inline": true }, - "html": "

", + "html": "

", "hidden": false }, { @@ -77,7 +77,7 @@ "name": "name", "size": "m" }, - "html": "

", + "html": "

", "hidden": false } ] diff --git a/src/nationalarchives/components/text-input/template.njk b/src/nationalarchives/components/text-input/template.njk index 5f0e8d1c..71f1a507 100644 --- a/src/nationalarchives/components/text-input/template.njk +++ b/src/nationalarchives/components/text-input/template.njk @@ -6,22 +6,22 @@
- {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
-

", + "html": "

", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "feedback", "value": "I like this 👍🏼" }, - "html": "

", + "html": "

", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "feedback", "hint": "What did you think?" }, - "html": "

What did you think?

", + "html": "

What did you think?

", "hidden": false }, { @@ -51,7 +51,7 @@ "text": "Enter some feedback" } }, - "html": "

Error: Enter some feedback

", + "html": "

Error: Enter some feedback

", "hidden": false }, { @@ -64,7 +64,7 @@ "name": "feedback", "inline": true }, - "html": "

", + "html": "

", "hidden": false }, { @@ -77,7 +77,7 @@ "name": "feedback", "size": "m" }, - "html": "

", + "html": "

", "hidden": false } ] diff --git a/src/nationalarchives/components/textarea/template.njk b/src/nationalarchives/components/textarea/template.njk index b4b1506a..3fce4d91 100644 --- a/src/nationalarchives/components/textarea/template.njk +++ b/src/nationalarchives/components/textarea/template.njk @@ -6,22 +6,22 @@
- {%- if params.hint %} -

+

{{ params.hint }}

{%- endif %} {%- if params.error %} -

+

Error: {{ params.error.text }}

{%- endif %}
-
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js index 7a50af99..dbed2662 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -3,6 +3,7 @@ import Breadcrumbs from "../../../components/breadcrumbs/template.njk"; import Button from "../../../components/button/template.njk"; import Card from "../../../components/card/template.njk"; import Checkboxes from "../../../components/checkboxes/template.njk"; +import ErrorSummary from "../../../components/error-summary/template.njk"; import FeaturedRecords from "../../../components/featured-records/template.njk"; import Footer from "../../../components/footer/template.njk"; import Gallery from "../../../components/gallery/template.njk"; @@ -1065,6 +1066,21 @@ const Template = ({ theme, accent }) => {
+
+
+
+ ${SearchField({ + params: { + label: "Catalogue search results", + headingLevel: 3, + headingSize: "l", + id: "search1", + name: "q", + }, + })} +
+
+
@@ -1072,13 +1088,16 @@ const Template = ({ theme, accent }) => {

Forms

- ${SearchField({ + ${ErrorSummary({ params: { - label: "Catalogue search results", - headingLevel: 3, - headingSize: "l", - id: "search1", - name: "q", + title: "There is a problem", + headingLevel: 2, + items: [ + { + text: "Enter a valid email address", + href: "#email", + }, + ], }, })} ${TextInput({ @@ -1099,6 +1118,9 @@ const Template = ({ theme, accent }) => { id: "email", name: "email", autofill: "email", + error: { + text: "Enter a valid email address", + }, }, })} ${Select({ diff --git a/src/nationalarchives/stories/utilities/forms/forms.mdx b/src/nationalarchives/stories/utilities/forms/forms.mdx index c7f5b9fe..b12f6033 100644 --- a/src/nationalarchives/stories/utilities/forms/forms.mdx +++ b/src/nationalarchives/stories/utilities/forms/forms.mdx @@ -43,26 +43,26 @@ import * as SearchFieldStories from "../../../components/search-field/search-fie

-

- diff --git a/src/nationalarchives/tools/_colour.scss b/src/nationalarchives/tools/_colour.scss index f09da22f..0c926fc1 100644 --- a/src/nationalarchives/tools/_colour.scss +++ b/src/nationalarchives/tools/_colour.scss @@ -1,4 +1,5 @@ @use "sass:map"; +@use "sass:list"; @use "../variables/colour"; @use "../tools/media"; @@ -6,27 +7,35 @@ @return colour.brand-colour($colour, $opacity); } -@mixin colour-css-vars() { +@mixin colour-css-vars($excludes...) { @each $name, $value in colour.$colour-palette-default { - --#{$name}: #{$value}; + @if not list.index($excludes, $name) { + --#{$name}: #{$value}; + } } } -@mixin colour-css-vars-dark() { +@mixin colour-css-vars-dark($excludes...) { @each $name, $value in colour.$colour-palette-dark { - --#{$name}: #{$value}; + @if not list.index($excludes, $name) { + --#{$name}: #{$value}; + } } } -@mixin colour-css-vars-high-contrast() { +@mixin colour-css-vars-high-contrast($excludes...) { @each $name, $value in colour.$colour-palette-high-contrast { - --#{$name}: #{$value}; + @if not list.index($excludes, $name) { + --#{$name}: #{$value}; + } } } -@mixin colour-css-vars-high-contrast-dark() { +@mixin colour-css-vars-high-contrast-dark($excludes...) { @each $name, $value in colour.$colour-palette-high-contrast-dark { - --#{$name}: #{$value}; + @if not list.index($excludes, $name) { + --#{$name}: #{$value}; + } } } @@ -151,14 +160,14 @@ } %light { - @include colour-css-vars; + @include colour-css-vars("form-error"); @media (prefers-contrast: more) { - @include colour-css-vars-high-contrast; + @include colour-css-vars-high-contrast("form-error"); } .tna-template--high-contrast-theme & { - @include colour-css-vars-high-contrast; + @include colour-css-vars-high-contrast("form-error"); } } @@ -167,14 +176,14 @@ } %dark { - @include colour-css-vars-dark; + @include colour-css-vars-dark("form-error"); @media (prefers-contrast: more) { - @include colour-css-vars-high-contrast-dark; + @include colour-css-vars-high-contrast-dark("form-error"); } .tna-template--high-contrast-theme & { - @include colour-css-vars-high-contrast-dark; + @include colour-css-vars-high-contrast-dark("form-error"); } } diff --git a/src/nationalarchives/variables/_colour.scss b/src/nationalarchives/variables/_colour.scss index 5ac73708..5e411665 100644 --- a/src/nationalarchives/variables/_colour.scss +++ b/src/nationalarchives/variables/_colour.scss @@ -116,6 +116,7 @@ $colour-palette-dark: map.merge( "input-foreground": brand-colour("white"), "input-background": brand-colour("black"), "input-border": brand-colour("white"), + "form-error": #ff3d3d, "button-text": brand-colour("black"), "button-background": brand-colour("white"), "button-hover-text": brand-colour("white"), @@ -171,6 +172,7 @@ $colour-palette-high-contrast-dark: map.merge( "font-light": brand-colour("white"), "icon-light": brand-colour("white", 0.75), "keyline": brand-colour("white"), + "form-error": #ff6161, "contrast-background": brand-colour("black"), ) ) !default; diff --git a/src/nationalarchives/variables/_forms.scss b/src/nationalarchives/variables/_forms.scss index 3565af38..247ccd7b 100644 --- a/src/nationalarchives/variables/_forms.scss +++ b/src/nationalarchives/variables/_forms.scss @@ -1,2 +1,2 @@ -$form-field-border-width: 1px !default; +$form-field-border-width: 2px !default; $checkbox-checkmark-width: 0.1875rem !default; diff --git a/tasks/test-package.js b/tasks/test-package.js index 5ed12c89..0472d5f1 100644 --- a/tasks/test-package.js +++ b/tasks/test-package.js @@ -82,6 +82,7 @@ const checkExists = [ ...componentFiles("cookie-banner", "CookieBanner"), ...componentFiles("date-input"), ...componentFiles("date-search"), + ...componentFiles("error-summary", "ErrorSummary"), ...componentFiles("featured-records"), ...componentFiles("filters"), ...componentFiles("footer"),