From 232476b8e428edda9316936ca3792157941c0ee8 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 30 Nov 2023 13:55:13 +0000 Subject: [PATCH] HTML validation (#59) * Fix existing HTML issues * Lint and fix CI * Add more fixtures * Add more fixtures * Lint * Add extra story options --- .github/actions/tests/action.yml | 3 + .gitignore | 3 +- .htmlvalidate.json | 12 ++ CHANGELOG.md | 12 ++ package-lock.json | 199 ++++++++++++++++++ package.json | 4 +- .../components/button/button.stories.js | 3 + .../components/button/fixtures.json | 10 +- .../components/button/macro-options.json | 6 + .../components/button/template.njk | 2 +- .../components/card/fixtures.json | 2 +- .../components/card/template.njk | 2 +- .../checkboxes/checkboxes.stories.js | 5 +- .../components/checkboxes/fixtures.json | 194 ++++++++++++++++- .../components/checkboxes/template.njk | 32 ++- .../components/cookie-banner/fixtures.json | 20 +- .../components/cookie-banner/template.njk | 4 +- .../date-input/date-input.stories.js | 5 +- .../components/date-input/fixtures.json | 73 ++++++- .../components/date-input/template.njk | 40 ++-- .../components/date-search/date-search.scss | 1 + .../date-search/date-search.stories.js | 5 +- .../components/date-search/fixtures.json | 86 +++++++- .../components/date-search/template.njk | 2 +- .../components/featured-records/fixtures.json | 42 +++- .../components/filters/filters.scss | 24 +-- .../components/filters/fixtures.json | 49 ++++- .../components/footer/fixtures.json | 150 ++++++++++++- .../components/footer/template.njk | 29 ++- .../components/header/fixtures.json | 50 ++++- .../components/header/template.njk | 2 +- .../components/message/fixtures.json | 11 +- .../components/pagination/fixtures.json | 45 +++- .../components/phase-banner/fixtures.json | 4 +- .../components/picture/fixtures.json | 17 +- .../components/radios/fixtures.json | 194 ++++++++++++++++- .../components/radios/radios.stories.js | 5 +- .../components/radios/template.njk | 34 ++- .../components/search-field/fixtures.json | 41 +++- .../components/select/fixtures.json | 166 ++++++++++++++- .../components/select/select.stories.js | 5 +- .../components/select/template.njk | 2 +- .../components/tabs/fixtures.json | 28 ++- .../components/tabs/macro-options.json | 6 - .../components/tabs/tabs.stories.js | 6 +- .../components/tabs/template.njk | 2 +- .../components/text-input/fixtures.json | 82 +++++++- .../components/text-input/template.njk | 2 +- .../components/textarea/fixtures.json | 82 +++++++- .../components/textarea/template.njk | 2 +- .../components/textarea/textarea.stories.js | 5 +- .../colour-schemes/colour-schemes.stories.js | 6 +- src/nationalarchives/utilities/_forms.scss | 1 + tasks/generate-fixture-html.js | 39 ++++ tasks/lib/nunjucks.js | 24 +++ tasks/lib/passfail.js | 7 + tasks/test-fixtures.js | 51 ++--- tasks/test-package.js | 9 +- 58 files changed, 1753 insertions(+), 194 deletions(-) create mode 100644 .htmlvalidate.json create mode 100644 tasks/generate-fixture-html.js create mode 100644 tasks/lib/nunjucks.js create mode 100644 tasks/lib/passfail.js diff --git a/.github/actions/tests/action.yml b/.github/actions/tests/action.yml index 85573230..b13b8729 100644 --- a/.github/actions/tests/action.yml +++ b/.github/actions/tests/action.yml @@ -13,6 +13,9 @@ runs: - name: Install dependencies run: npm ci shell: bash + - name: Validate HTML + run: mkdir temp && npm run validatehtml + shell: bash - name: Build Storybook run: npm run build shell: bash diff --git a/.gitignore b/.gitignore index b4688170..949d6daa 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,5 @@ storybook build-storybook.log chromatic.config.json chromatic.log -RELEASE_NOTES.txt \ No newline at end of file +RELEASE_NOTES.txt +temp \ No newline at end of file diff --git a/.htmlvalidate.json b/.htmlvalidate.json new file mode 100644 index 00000000..abdb6567 --- /dev/null +++ b/.htmlvalidate.json @@ -0,0 +1,12 @@ +{ + "extends": ["html-validate:recommended"], + + "rules": { + "close-order": "error", + "form-dup-name": 0, + "no-inline-style": 0, + "no-redundant-role": 0, + "no-trailing-whitespace": 0, + "void-style": 0 + } +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 62dffdec..fd25075b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.27-prerelease...HEAD) ### Added + +- Buttons can now have `buttonType` which sets the `type` attribute for `Set cookie preferences", + "html": "", "hidden": false }, { @@ -17,7 +17,7 @@ "cookiesUrl": "/cookies", "cookiesPreferencesSetKey": "custom" }, - "html": "", + "html": "", "hidden": false }, { @@ -27,7 +27,7 @@ "cookiesUrl": "/cookies", "policies": "custom" }, - "html": "", + "html": "", "hidden": false }, { @@ -37,7 +37,7 @@ "cookiesUrl": "/cookies", "policiesKey": "custom_key" }, - "html": "", + "html": "", "hidden": false }, { @@ -47,7 +47,7 @@ "cookiesUrl": "/cookies", "cookiesDomain": "nationalarchives.gov.uk" }, - "html": "", + "html": "", "hidden": false }, { @@ -57,7 +57,7 @@ "cookiesUrl": "/cookies", "cookiesPath": "/my-service" }, - "html": "", + "html": "", "hidden": false }, { @@ -67,7 +67,7 @@ "cookiesUrl": "/cookies", "preferencesSetKey": "custom_preferences_set_key" }, - "html": "", + "html": "", "hidden": false }, { @@ -77,7 +77,7 @@ "cookiesUrl": "/cookies", "allowInsecure": true }, - "html": "", + "html": "", "hidden": false }, { @@ -87,7 +87,7 @@ "cookiesUrl": "/cookies", "classes": "tna-cookie-banner--fixture" }, - "html": "", + "html": "", "hidden": false }, { @@ -99,7 +99,7 @@ "data-fixturetest": "pass" } }, - "html": "", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk index fee2befb..b0b42618 100644 --- a/src/nationalarchives/components/cookie-banner/template.njk +++ b/src/nationalarchives/components/cookie-banner/template.njk @@ -1,7 +1,7 @@ {% from "nationalarchives/components/button/macro.njk" import tnaButton %} {%- set containerClasses = [params.classes] if params.classes else [] -%} - - + diff --git a/src/nationalarchives/components/date-input/date-input.stories.js b/src/nationalarchives/components/date-input/date-input.stories.js index fceba054..95df1d3f 100644 --- a/src/nationalarchives/components/date-input/date-input.stories.js +++ b/src/nationalarchives/components/date-input/date-input.stories.js @@ -4,7 +4,10 @@ import macroOptions from "./macro-options.json"; const argTypes = { label: { control: "text" }, headingLevel: { control: { type: "number", min: 1, max: 6 } }, - headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, id: { control: "text" }, name: { control: "text" }, hint: { control: "text" }, diff --git a/src/nationalarchives/components/date-input/fixtures.json b/src/nationalarchives/components/date-input/fixtures.json index 7674a0c9..b15a310b 100644 --- a/src/nationalarchives/components/date-input/fixtures.json +++ b/src/nationalarchives/components/date-input/fixtures.json @@ -1,4 +1,75 @@ { "component": "date-input", - "fixtures": [] + "fixtures": [ + { + "name": "plain date input", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date" + }, + "html": "

Enter a start date

", + "hidden": false + }, + { + "name": "date input with a preselected value", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "value": { + "day": "24", + "month": "09", + "year": "1986" + } + }, + "html": "

Enter a start date

", + "hidden": false + }, + { + "name": "date input with a hint", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "hint": "The earliest date of the record." + }, + "html": "

Enter a start date

The earliest date of the record.

", + "hidden": false + }, + { + "name": "date input with an error", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "error": { + "text": "Date is not valid" + } + }, + "html": "

Enter a start date

Error: Date is not valid

", + "hidden": false + }, + { + "name": "inline date input", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "xs", + "id": "date", + "name": "date", + "inline": true + }, + "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 092d7a44..c7271af0 100644 --- a/src/nationalarchives/components/date-input/template.njk +++ b/src/nationalarchives/components/date-input/template.njk @@ -3,42 +3,40 @@ {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%} {%- endif -%}
-
-
- - - {{ params.label }} - - - {%- if params.hint %} -

- {{ params.hint }} -

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

- Error: {{ params.error.text }} -

- {%- endif %} -
+
+ + + {{ params.label }} + + + {%- if params.hint %} +

+ {{ params.hint }} +

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

+ Error: {{ params.error.text }} +

+ {%- endif %}
- +
- +
- +
diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss index b6c06f9a..25638bed 100644 --- a/src/nationalarchives/components/date-search/date-search.scss +++ b/src/nationalarchives/components/date-search/date-search.scss @@ -7,6 +7,7 @@ padding: 0 0.375rem; display: block; + box-sizing: border-box; @include colour.colour-font("input-foreground"); font-size: inherit; diff --git a/src/nationalarchives/components/date-search/date-search.stories.js b/src/nationalarchives/components/date-search/date-search.stories.js index ac338476..099589bf 100644 --- a/src/nationalarchives/components/date-search/date-search.stories.js +++ b/src/nationalarchives/components/date-search/date-search.stories.js @@ -4,7 +4,10 @@ import macroOptions from "./macro-options.json"; const argTypes = { label: { control: "text" }, headingLevel: { control: { type: "number", min: 1, max: 6 } }, - headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, id: { control: "text" }, name: { control: "text" }, hint: { control: "text" }, diff --git a/src/nationalarchives/components/date-search/fixtures.json b/src/nationalarchives/components/date-search/fixtures.json index d3c4b204..280d403b 100644 --- a/src/nationalarchives/components/date-search/fixtures.json +++ b/src/nationalarchives/components/date-search/fixtures.json @@ -1,4 +1,88 @@ { "component": "date-search", - "fixtures": [] + "fixtures": [ + { + "name": "plain date search", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date" + }, + "html": "

", + "hidden": false + }, + { + "name": "date search with a preselected value", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "value": { + "day": "24", + "month": "09", + "year": "1986" + } + }, + "html": "

", + "hidden": false + }, + { + "name": "date search with a hint", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "hint": "The earliest date of the record." + }, + "html": "

The earliest date of the record.

", + "hidden": false + }, + { + "name": "date search with an error", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "error": { + "text": "Date is not valid" + } + }, + "html": "

Error: Date is not valid

", + "hidden": false + }, + { + "name": "inline date search", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "xs", + "id": "date", + "name": "date", + "inline": true + }, + "html": "

", + "hidden": false + }, + { + "name": "max width date search", + "options": { + "label": "Enter a start date", + "headingLevel": 4, + "headingSize": "m", + "id": "date", + "name": "date", + "maxWidth": true + }, + "html": "

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/date-search/template.njk b/src/nationalarchives/components/date-search/template.njk index 5a13bcd2..ab90dd79 100644 --- a/src/nationalarchives/components/date-search/template.njk +++ b/src/nationalarchives/components/date-search/template.njk @@ -3,7 +3,7 @@ {%- if params.inline -%} {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%} {%- endif -%} -
+
", + "html": "", + "hidden": false + }, + { + "name": "items", + "options": { + "meta": "

Open today
09:00—19:00

", + "social": [ + { + "text": "Twitter", + "href": "#", + "brandIcon": "twitter" + }, + { + "text": "YouTube", + "href": "#", + "brandIcon": "youtube" + }, + { + "text": "Facebook", + "href": "#", + "brandIcon": "facebook" + }, + { + "text": "Flickr", + "href": "#", + "brandIcon": "flickr" + }, + { + "text": "Instagram", + "href": "#", + "brandIcon": "instagram" + }, + { + "text": "RSS", + "href": "#", + "icon": "rss" + } + ], + "navigation": [ + { + "title": "About us", + "items": [ + { + "text": "Our role", + "href": "#" + }, + { + "text": "Our history", + "href": "#" + }, + { + "text": "Our collection", + "href": "#" + }, + { + "text": "Our people", + "href": "#" + }, + { + "text": "How we are run", + "href": "#" + }, + { + "text": "Our research and academic collaboration", + "href": "#" + }, + { + "text": "News", + "href": "#" + }, + { + "text": "Contact us", + "href": "#" + }, + { + "text": "Jobs & careers", + "href": "#" + }, + { + "text": "Get involved", + "href": "#" + } + ] + }, + { + "title": "Our websites help", + "items": [ + { + "text": "UK Government Web Archive", + "href": "#", + "newTab": true + }, + { + "text": "Legislation.gov.uk", + "href": "#", + "newTab": true + }, + { + "text": "Find case law", + "href": "#", + "newTab": true + }, + { + "text": "The Gazette", + "href": "#", + "newTab": true + } + ] + }, + { + "title": "Quick links", + "items": [ + { + "text": "Press room", + "href": "#" + }, + { + "text": "Venue hire", + "href": "#" + } + ] + } + ], + "showNewsletter": true, + "legal": [ + { + "text": "Accessibility statement", + "href": "#" + }, + { + "text": "Freedom of information", + "href": "#" + }, + { + "text": "Terms and conditions", + "href": "#" + }, + { + "text": "Privacy policy", + "href": "#" + }, + { + "text": "Cookies", + "href": "#" + } + ] + }, + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index 6c385389..991ae25d 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -113,22 +113,21 @@ {%- endif -%}
-
-
+ +
+
+

All content is available under the Open Government Licence v3.0, except where otherwise stated

+
+
+ + -
-
-

All content is available under the Open Government Licence v3.0, except where otherwise stated

-
-
- - - GOV.UK - -
+ GOV.UK +
diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index 80ce2a77..4d4a331e 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -1,4 +1,52 @@ { "component": "header", - "fixtures": [] + "fixtures": [ + { + "name": "default", + "options": { + "logo": { + "strapline": "Beta", + "href": "#/" + }, + "topNavigation": [ + { + "text": "Top item 1", + "href": "#/top-1" + }, + { + "text": "Top item 2", + "href": "#/top-2", + "icon": "phone" + }, + { + "text": "Top item 3", + "href": "#/top-3", + "brandIcon": "github" + } + ], + "navigation": [ + { + "text": "Alpha", + "href": "#/alpha", + "selected": true + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "exit": { + "text": "Go to the current National Archives website", + "href": "#", + "target": "_blank" + } + }, + "html": "
Go to the current National Archives website
Beta
", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index e2895e58..ca165d05 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -7,7 +7,7 @@
- + {{ params.exit.text }} {%- if params.exit.target == "_blank" -%} diff --git a/src/nationalarchives/components/message/fixtures.json b/src/nationalarchives/components/message/fixtures.json index 2b7c177e..eb800ea1 100644 --- a/src/nationalarchives/components/message/fixtures.json +++ b/src/nationalarchives/components/message/fixtures.json @@ -1,4 +1,13 @@ { "component": "message", - "fixtures": [] + "fixtures": [ + { + "name": "default", + "options": { + "message": "Please note this page references hunger strikes and force feeding, which some people may find upsetting." + }, + "html": "

Please note this page references hunger strikes and force feeding, which some people may find upsetting.

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/pagination/fixtures.json b/src/nationalarchives/components/pagination/fixtures.json index cdc1edfa..bb48f9ca 100644 --- a/src/nationalarchives/components/pagination/fixtures.json +++ b/src/nationalarchives/components/pagination/fixtures.json @@ -1,4 +1,47 @@ { "component": "pagination", - "fixtures": [] + "fixtures": [ + { + "name": "default", + "options": { + "previous": { + "href": "#" + }, + "items": [ + { + "number": 1, + "href": "#" + }, + { + "ellipsis": true + }, + { + "number": 6, + "href": "#" + }, + { + "number": 7, + "current": true, + "href": "#" + }, + { + "number": 8, + "href": "#" + }, + { + "ellipsis": true + }, + { + "number": 42, + "href": "#" + } + ], + "next": { + "href": "#" + } + }, + "html": "", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/phase-banner/fixtures.json b/src/nationalarchives/components/phase-banner/fixtures.json index 2c7f1ed0..80d16925 100644 --- a/src/nationalarchives/components/phase-banner/fixtures.json +++ b/src/nationalarchives/components/phase-banner/fixtures.json @@ -5,9 +5,9 @@ "name": "simple", "options": { "phase": "beta", - "message": "This is a new service – give us your feedback to help improve it." + "message": "This is a new service – give us your feedback to help improve it." }, - "html": "
Beta

This is a new service – give us your feedback to help improve it.

", + "html": "
Beta

This is a new service – give us your feedback to help improve it.

", "hidden": false }, { diff --git a/src/nationalarchives/components/picture/fixtures.json b/src/nationalarchives/components/picture/fixtures.json index 66f10f03..0e836ce5 100644 --- a/src/nationalarchives/components/picture/fixtures.json +++ b/src/nationalarchives/components/picture/fixtures.json @@ -1,4 +1,19 @@ { "component": "picture", - "fixtures": [] + "fixtures": [ + { + "name": "default", + "options": { + "src": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg", + "alt": "The National Archives office", + "width": 499, + "height": 333, + "caption": "

This is a pretty image

", + "transcript": "

Lorem ipsum transcript

", + "translation": "

Lorem ipsum translation

" + }, + "html": "
\"The

Lorem ipsum transcript

Lorem ipsum translation

This is a pretty image

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/radios/fixtures.json b/src/nationalarchives/components/radios/fixtures.json index 7241542f..14f0a22b 100644 --- a/src/nationalarchives/components/radios/fixtures.json +++ b/src/nationalarchives/components/radios/fixtures.json @@ -1,4 +1,196 @@ { "component": "radios", - "fixtures": [] + "fixtures": [ + { + "name": "plain radios", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "m", + "id": "type", + "name": "type", + "items": [ + { + "text": "Audio", + "value": "audio" + }, + { + "text": "Image", + "value": "image" + }, + { + "text": "Video", + "value": "video" + } + ] + }, + "html": "

Type

", + "hidden": false + }, + { + "name": "small radios", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "m", + "id": "type", + "name": "type", + "items": [ + { + "text": "Admiralty, Navy, Royal Marines, and Coastguard", + "value": "ADM" + }, + { + "text": "Air Ministry and Royal Air Force records", + "value": "AIR" + }, + { + "text": "Board of Trade and successors", + "value": "BT" + }, + { + "text": "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions", + "value": "C" + }, + { + "text": "Colonial Office, Commonwealth and Foreign and Commonwealth Offices", + "value": "CO" + }, + { + "text": "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations", + "value": "E" + }, + { + "text": "Foreign Office", + "value": "FO" + }, + { + "text": "Home Office", + "value": "HO" + }, + { + "text": "Prerogative Court of Canterbury", + "value": "PROB" + }, + { + "text": "War Office, Armed Forces, Judge Advocate General, and related bodies", + "value": "WO" + } + ], + "small": true + }, + "html": "

Type

", + "hidden": false + }, + { + "name": "radios with a preselected value", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "m", + "id": "type", + "name": "type", + "items": [ + { + "text": "Audio", + "value": "audio" + }, + { + "text": "Image", + "value": "image" + }, + { + "text": "Video", + "value": "video" + } + ], + "selected": "image" + }, + "html": "

Type

", + "hidden": false + }, + { + "name": "radios with a hint", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "m", + "id": "type", + "name": "type", + "hint": "You can only select one.", + "items": [ + { + "text": "Audio", + "value": "audio" + }, + { + "text": "Image", + "value": "image" + }, + { + "text": "Video", + "value": "video" + } + ] + }, + "html": "

Type

You can only select one.

", + "hidden": false + }, + { + "name": "radios with an error", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "m", + "id": "type", + "name": "type", + "error": { + "text": "You must select a type" + }, + "items": [ + { + "text": "Audio", + "value": "audio" + }, + { + "text": "Image", + "value": "image" + }, + { + "text": "Video", + "value": "video" + } + ] + }, + "html": "

Type

Error: You must select a type

", + "hidden": false + }, + { + "name": "inline radios", + "options": { + "label": "Type", + "headingLevel": 4, + "headingSize": "xs", + "id": "type", + "name": "type", + "items": [ + { + "text": "Audio", + "value": "audio" + }, + { + "text": "Image", + "value": "image" + }, + { + "text": "Video", + "value": "video" + } + ], + "inline": true + }, + "html": "

Type

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/radios/radios.stories.js b/src/nationalarchives/components/radios/radios.stories.js index 9132df0c..932f40e8 100644 --- a/src/nationalarchives/components/radios/radios.stories.js +++ b/src/nationalarchives/components/radios/radios.stories.js @@ -4,7 +4,10 @@ import macroOptions from "./macro-options.json"; const argTypes = { label: { control: "text" }, headingLevel: { control: { type: "number", min: 1, max: 6 } }, - headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, id: { control: "text" }, name: { control: "text" }, hint: { control: "text" }, diff --git a/src/nationalarchives/components/radios/template.njk b/src/nationalarchives/components/radios/template.njk index 9e5914d4..de6e1a45 100644 --- a/src/nationalarchives/components/radios/template.njk +++ b/src/nationalarchives/components/radios/template.njk @@ -3,24 +3,22 @@ {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%} {%- endif -%}
-
-
- - - {{ params.label }} - - - {%- if params.hint %} -

- {{ params.hint }} -

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

- Error: {{ params.error.text }} -

- {%- endif %} -
+
+ + + {{ params.label }} + + + {%- 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 ccb4f9e0..731b50b2 100644 --- a/src/nationalarchives/components/search-field/fixtures.json +++ b/src/nationalarchives/components/search-field/fixtures.json @@ -1,4 +1,43 @@ { "component": "search-field", - "fixtures": [] + "fixtures": [ + { + "name": "plain search field", + "options": { + "label": "Catalogue search results", + "headingLevel": 1, + "headingSize": "l", + "id": "search1", + "name": "q" + }, + "html": "

", + "hidden": false + }, + { + "name": "search field with a preselected value", + "options": { + "label": "Catalogue search results", + "headingLevel": 1, + "headingSize": "l", + "id": "search1", + "name": "q", + "value": "badgers" + }, + "html": "

", + "hidden": false + }, + { + "name": "search field with a hint", + "options": { + "label": "Catalogue search results", + "headingLevel": 1, + "headingSize": "l", + "id": "search1", + "name": "q", + "hint": "Try searching for something interesting" + }, + "html": "

Try searching for something interesting

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/select/fixtures.json b/src/nationalarchives/components/select/fixtures.json index 9daf0307..2d91b962 100644 --- a/src/nationalarchives/components/select/fixtures.json +++ b/src/nationalarchives/components/select/fixtures.json @@ -1,4 +1,168 @@ { "component": "select", - "fixtures": [] + "fixtures": [ + { + "name": "plain select", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ] + }, + "html": "

", + "hidden": false + }, + { + "name": "select with a preselected value", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ], + "selected": "date" + }, + "html": "

", + "hidden": false + }, + { + "name": "select with a hint", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "hint": "Select a field to sort by.", + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ] + }, + "html": "

Select a field to sort by.

", + "hidden": false + }, + { + "name": "select with an error", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "error": { + "text": "You must select a field to sort by" + }, + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ] + }, + "html": "

Error: You must select a field to sort by

", + "hidden": false + }, + { + "name": "inline select", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ], + "inline": true + }, + "html": "

", + "hidden": false + }, + { + "name": "select size", + "options": { + "label": "Sort by", + "headingLevel": 4, + "headingSize": "m", + "id": "sort", + "name": "sort", + "items": [ + { + "text": "Relevance", + "value": "relevance" + }, + { + "text": "Date", + "value": "date" + }, + { + "text": "Title", + "value": "title" + } + ], + "size": "xl" + }, + "html": "

", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/select/select.stories.js b/src/nationalarchives/components/select/select.stories.js index fc7ce798..37abd384 100644 --- a/src/nationalarchives/components/select/select.stories.js +++ b/src/nationalarchives/components/select/select.stories.js @@ -4,7 +4,10 @@ import macroOptions from "./macro-options.json"; const argTypes = { label: { control: "text" }, headingLevel: { control: { type: "number", min: 1, max: 6 } }, - headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, id: { control: "text" }, name: { control: "text" }, hint: { control: "text" }, diff --git a/src/nationalarchives/components/select/template.njk b/src/nationalarchives/components/select/template.njk index 7f0463ac..2dae0f11 100644 --- a/src/nationalarchives/components/select/template.njk +++ b/src/nationalarchives/components/select/template.njk @@ -3,7 +3,7 @@ {%- if params.inline -%} {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%} {%- endif -%} -
+