From e117e12efa5bffb04b1864167bc0d077c9dd3b89 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 29 Nov 2023 17:44:03 +0000 Subject: [PATCH] Search components (#58) * Initial commit of form and search elements * Pure CSS checkboxes, button tweaks * Use button macro inside other components * Fix test prototype kit action * Move "Next" arrow in pagination to the end * Remove dead areas on checkboxes/radios, add colour * Additional styling, small radios option * Allow preselected radio and checkboxes * Switch checkboxes to inverted on selection * Add textarea, add more fields to text-input * Tweak Storybook doc styles * Replace example profile with more reliable source * Add more fields to textarea * Fix spelling in CHANGELOG * Change error colour * Remove search-view * Basic search field styling * Fix tests * More updates to form inputs * Add date-search, fix missing properties * Update CHANGELOG.md * Inline form elements * Further updates to form element structure * Fix small browser bugs * Update deps * Tweak search field * Remove loads of comments * Fix small tab JS error * Add comment * Add date input coomponent * Fix lint and test issues * Update macro options and templates * Add button group to footer subscribe button --- .github/actions/prototype-kit-test/action.yml | 18 +- .storybook/preview.js | 5 +- .storybook/storybook.scss | 23 +- .storybook/test-runner.js | 4 +- .storybook/viewports.js | 42 - CHANGELOG.md | 5 +- jest.config.js | 1 + package-lock.json | 21669 +++++++--------- package.json | 28 +- src/nationalarchives/all.mjs | 11 - src/nationalarchives/components/_index.scss | 8 + .../components/breadcrumbs/breadcrumbs.mjs | 2 +- .../components/button/_button-group.scss | 4 + .../components/button/button.scss | 103 +- .../components/button/button.stories.js | 57 +- .../components/button/macro-options.json | 18 + .../components/button/template.njk | 21 +- .../components/card/card.scss | 17 - .../components/checkboxes/_index.scss | 1 + .../components/checkboxes/checkboxes.scss | 143 + .../checkboxes/checkboxes.stories.js | 238 + .../components/checkboxes/fixtures.json | 4 + .../components/checkboxes/macro-options.json | 102 + .../components/checkboxes/macro.njk | 3 + .../components/checkboxes/template.njk | 35 + .../components/date-input/_index.scss | 1 + .../components/date-input/date-input.scss | 48 + .../date-input/date-input.stories.js | 116 + .../components/date-input/fixtures.json | 4 + .../components/date-input/macro-options.json | 96 + .../components/date-input/macro.njk | 3 + .../components/date-input/template.njk | 45 + .../components/date-search/_index.scss | 1 + .../components/date-search/date-search.scss | 27 + .../date-search/date-search.stories.js | 121 + .../components/date-search/fixtures.json | 4 + .../components/date-search/macro-options.json | 94 + .../components/date-search/macro.njk | 3 + .../components/date-search/template.njk | 27 + .../components/filters/filters.scss | 8 - .../components/filters/template.njk | 2 +- .../components/footer/template.njk | 16 +- .../components/gallery/gallery.scss | 11 - .../components/gallery/gallery.stories.js | 18 +- .../components/gallery/template.njk | 2 +- .../components/header/header.scss | 21 +- .../components/header/header.stories.js | 41 - .../components/header/template.njk | 2 +- .../components/index-grid/fixtures.json | 2 +- .../components/index-grid/template.njk | 4 +- .../components/message/message.scss | 7 +- .../components/message/template.njk | 2 +- .../components/pagination/template.njk | 49 +- .../components/picture/picture.mjs | 4 - .../components/picture/template.njk | 2 +- .../components/radios/_index.scss | 1 + .../components/radios/fixtures.json | 4 + .../components/radios/macro-options.json | 102 + .../components/radios/macro.njk | 3 + .../components/radios/radios.scss | 131 + .../components/radios/radios.stories.js | 241 + .../components/radios/template.njk | 35 + .../components/search-field/_index.scss | 1 + .../components/search-field/fixtures.json | 4 + .../search-field/macro-options.json | 68 + .../components/search-field/macro.njk | 3 + .../components/search-field/search-field.scss | 32 + .../search-field/search-field.stories.js | 88 + .../components/search-field/template.njk | 32 + .../components/select/_index.scss | 1 + .../components/select/fixtures.json | 4 + .../components/select/macro-options.json | 114 + .../components/select/macro.njk | 3 + .../components/select/select.scss | 51 + .../components/select/select.stories.js | 194 + .../components/select/template.njk | 29 + .../components/sensitive-image/template.njk | 2 +- .../components/skip-link/template.njk | 2 +- src/nationalarchives/components/tabs/tabs.mjs | 2 +- .../components/tabs/template.njk | 2 +- .../components/text-input/_index.scss | 1 + .../components/text-input/fixtures.json | 4 + .../components/text-input/macro-options.json | 118 + .../components/text-input/macro.njk | 3 + .../components/text-input/template.njk | 30 + .../components/text-input/text-input.scss | 44 + .../text-input/text-input.stories.js | 188 + .../components/textarea/_index.scss | 1 + .../components/textarea/fixtures.json | 4 + .../components/textarea/macro-options.json | 106 + .../components/textarea/macro.njk | 3 + .../components/textarea/template.njk | 27 + .../components/textarea/textarea.scss | 45 + .../components/textarea/textarea.stories.js | 127 + src/nationalarchives/prototype-kit.scss | 8 - .../colour-schemes/colour-schemes.stories.js | 154 +- .../stories/utilities/forms/forms.mdx | 117 + .../stories/utilities/overrides/overrides.mdx | 53 - .../typography/typography.stories.js | 6 - .../templates/layouts/_generic.njk | 2 +- src/nationalarchives/tools/_typography.scss | 1 - src/nationalarchives/utilities/_a11y.scss | 8 +- src/nationalarchives/utilities/_colour.scss | 12 +- src/nationalarchives/utilities/_debug.scss | 7 +- src/nationalarchives/utilities/_forms.scss | 93 + src/nationalarchives/utilities/_index.scss | 1 + .../utilities/_overrides.scss | 2 +- src/nationalarchives/variables/_colour.scss | 9 +- src/nationalarchives/variables/_forms.scss | 2 + src/nationalarchives/variables/_index.scss | 1 + .../variables/_typography.scss | 4 +- tasks/test-fixtures.js | 28 +- tasks/test-package.js | 58 +- 113 files changed, 13324 insertions(+), 12435 deletions(-) create mode 100644 src/nationalarchives/components/checkboxes/_index.scss create mode 100644 src/nationalarchives/components/checkboxes/checkboxes.scss create mode 100644 src/nationalarchives/components/checkboxes/checkboxes.stories.js create mode 100644 src/nationalarchives/components/checkboxes/fixtures.json create mode 100644 src/nationalarchives/components/checkboxes/macro-options.json create mode 100644 src/nationalarchives/components/checkboxes/macro.njk create mode 100644 src/nationalarchives/components/checkboxes/template.njk create mode 100644 src/nationalarchives/components/date-input/_index.scss create mode 100644 src/nationalarchives/components/date-input/date-input.scss create mode 100644 src/nationalarchives/components/date-input/date-input.stories.js create mode 100644 src/nationalarchives/components/date-input/fixtures.json create mode 100644 src/nationalarchives/components/date-input/macro-options.json create mode 100644 src/nationalarchives/components/date-input/macro.njk create mode 100644 src/nationalarchives/components/date-input/template.njk create mode 100644 src/nationalarchives/components/date-search/_index.scss create mode 100644 src/nationalarchives/components/date-search/date-search.scss create mode 100644 src/nationalarchives/components/date-search/date-search.stories.js create mode 100644 src/nationalarchives/components/date-search/fixtures.json create mode 100644 src/nationalarchives/components/date-search/macro-options.json create mode 100644 src/nationalarchives/components/date-search/macro.njk create mode 100644 src/nationalarchives/components/date-search/template.njk create mode 100644 src/nationalarchives/components/radios/_index.scss create mode 100644 src/nationalarchives/components/radios/fixtures.json create mode 100644 src/nationalarchives/components/radios/macro-options.json create mode 100644 src/nationalarchives/components/radios/macro.njk create mode 100644 src/nationalarchives/components/radios/radios.scss create mode 100644 src/nationalarchives/components/radios/radios.stories.js create mode 100644 src/nationalarchives/components/radios/template.njk create mode 100644 src/nationalarchives/components/search-field/_index.scss create mode 100644 src/nationalarchives/components/search-field/fixtures.json create mode 100644 src/nationalarchives/components/search-field/macro-options.json create mode 100644 src/nationalarchives/components/search-field/macro.njk create mode 100644 src/nationalarchives/components/search-field/search-field.scss create mode 100644 src/nationalarchives/components/search-field/search-field.stories.js create mode 100644 src/nationalarchives/components/search-field/template.njk create mode 100644 src/nationalarchives/components/select/_index.scss create mode 100644 src/nationalarchives/components/select/fixtures.json create mode 100644 src/nationalarchives/components/select/macro-options.json create mode 100644 src/nationalarchives/components/select/macro.njk create mode 100644 src/nationalarchives/components/select/select.scss create mode 100644 src/nationalarchives/components/select/select.stories.js create mode 100644 src/nationalarchives/components/select/template.njk create mode 100644 src/nationalarchives/components/text-input/_index.scss create mode 100644 src/nationalarchives/components/text-input/fixtures.json create mode 100644 src/nationalarchives/components/text-input/macro-options.json create mode 100644 src/nationalarchives/components/text-input/macro.njk create mode 100644 src/nationalarchives/components/text-input/template.njk create mode 100644 src/nationalarchives/components/text-input/text-input.scss create mode 100644 src/nationalarchives/components/text-input/text-input.stories.js create mode 100644 src/nationalarchives/components/textarea/_index.scss create mode 100644 src/nationalarchives/components/textarea/fixtures.json create mode 100644 src/nationalarchives/components/textarea/macro-options.json create mode 100644 src/nationalarchives/components/textarea/macro.njk create mode 100644 src/nationalarchives/components/textarea/template.njk create mode 100644 src/nationalarchives/components/textarea/textarea.scss create mode 100644 src/nationalarchives/components/textarea/textarea.stories.js create mode 100644 src/nationalarchives/stories/utilities/forms/forms.mdx delete mode 100644 src/nationalarchives/stories/utilities/overrides/overrides.mdx create mode 100644 src/nationalarchives/utilities/_forms.scss create mode 100644 src/nationalarchives/variables/_forms.scss diff --git a/.github/actions/prototype-kit-test/action.yml b/.github/actions/prototype-kit-test/action.yml index 608b652b..cc6da517 100644 --- a/.github/actions/prototype-kit-test/action.yml +++ b/.github/actions/prototype-kit-test/action.yml @@ -38,7 +38,10 @@ runs: echo -e "{% from \"nationalarchives/components/breadcrumbs/macro.njk\" import tnaBreadcrumbs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/button/macro.njk\" import tnaButton %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/card/macro.njk\" import tnaCard %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/checkboxes/macro.njk\" import tnaCheckboxes %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && 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/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 && @@ -51,9 +54,14 @@ runs: echo -e "{% from \"nationalarchives/components/pagination/macro.njk\" import tnaPagination %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/phase-banner/macro.njk\" import tnaPhaseBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/picture/macro.njk\" import tnaPicture %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/radios/macro.njk\" import tnaRadios %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/sensitive-image/macro.njk\" import tnaSensitiveImage %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/search-field/macro.njk\" import tnaSearchField %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/select/macro.njk\" import tnaSelect %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && echo -e "{% from \"nationalarchives/components/skip-link/macro.njk\" import tnaSkipLink %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && - echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html + echo -e "{% from \"nationalarchives/components/tabs/macro.njk\" import tnaTabs %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/text-input/macro.njk\" import tnaTextInput %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html && + echo -e "{% from \"nationalarchives/components/textarea/macro.njk\" import tnaTextarea %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html shell: bash - name: Add components to template run: > @@ -61,7 +69,10 @@ runs: echo "{{ tnaBreadcrumbs({}) }}" >> prototype/app/views/index.html && echo "{{ tnaButton({text:\"I am a button\",url:\"#\"}) }}" >> prototype/app/views/index.html && echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaCheckboxes({}) }}" >> prototype/app/views/index.html && echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaDateInput({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaDateSearch({}) }}" >> 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 && @@ -74,9 +85,14 @@ runs: echo "{{ tnaPagination({}) }}" >> prototype/app/views/index.html && echo "{{ tnaPhaseBanner({}) }}" >> prototype/app/views/index.html && echo "{{ tnaPicture({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaRadios({}) }}" >> prototype/app/views/index.html && echo "{{ tnaSensitiveImage({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaSearchField({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaSelect({}) }}" >> prototype/app/views/index.html && echo "{{ tnaSkipLink({}) }}" >> prototype/app/views/index.html && echo "{{ tnaTabs({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaTextInput({}) }}" >> prototype/app/views/index.html && + echo "{{ tnaTextarea({}) }}" >> prototype/app/views/index.html && echo "{% endblock %}" >> prototype/app/views/index.html shell: bash - name: Run prototype diff --git a/.storybook/preview.js b/.storybook/preview.js index cf2cb800..265b55c0 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -2,7 +2,6 @@ import "../src/nationalarchives/all.scss"; import { a11yConfig } from "./storybook-config"; import { customViewports } from "./viewports"; import Cookies from "../src/nationalarchives/lib/cookies.mjs"; -// import isChromatic from "chromatic/isChromatic"; document.documentElement.classList.add( "tna-template", @@ -14,9 +13,7 @@ if (window.self !== window.top) { document.body.classList.add("tna-template__body"); export const parameters = { - actions: { - // disable: true, - }, + actions: {}, viewport: { viewports: customViewports }, options: { showPanel: true }, a11y: { diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss index 7cfffcce..0495a3c6 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -40,6 +40,27 @@ } } +#storybook-docs { + div.docs-story { + background-position: + 16px 16px, + 16px 16px, + 16px 16px, + 16px 16px !important; + + > div { + margin: 0; + padding: 1rem; + + .innerZoomElementWrapper { + > * { + border: none !important; + } + } + } + } +} + .sb-story.sb-unstyled { @include colour.colour-css-vars; @@ -144,8 +165,6 @@ padding-left: 0.5rem; @include colour.colour-background("background-tint"); - - // @include colour.colour-border("keyline", 1px, solid, top); } } diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js index 46722fe3..6ab4d373 100644 --- a/.storybook/test-runner.js +++ b/.storybook/test-runner.js @@ -65,7 +65,7 @@ const { injectAxe, checkA11y } = require("axe-playwright"); const DEFAULT_VP_SIZE = { width: 1280, height: 720 }; module.exports = { - async preRender(page, story) { + async preVisit(page, story) { const context = await getStoryContext(page, story); const vpName = context.parameters?.viewport?.defaultViewport; const vpParams = customViewports[vpName]; @@ -85,7 +85,7 @@ module.exports = { } await injectAxe(page); }, - async postRender(page, story) { + async postVisit(page) { await checkA11y(page, "#storybook-root", a11yConfig, "v2"); }, }; diff --git a/.storybook/viewports.js b/.storybook/viewports.js index 93eec292..e55285c0 100644 --- a/.storybook/viewports.js +++ b/.storybook/viewports.js @@ -1,47 +1,5 @@ export const customViewports = { // ...MINIMAL_VIEWPORTS, - // largeMin: { - // name: "Smallest large device", - // styles: { - // width: "1025px", - // height: "800px", - // }, - // }, - // mediumMax: { - // name: "Largest medium device", - // styles: { - // width: "1024px", - // height: "800px", - // }, - // }, - // mediumMin: { - // name: "Smallest medium device", - // styles: { - // width: "769px", - // height: "800px", - // }, - // }, - // smallMax: { - // name: "Largest small device", - // styles: { - // width: "768px", - // height: "800px", - // }, - // }, - // smallMin: { - // name: "Smallest small device", - // styles: { - // width: "481px", - // height: "800px", - // }, - // }, - // tinyMax: { - // name: "Largest tiny device", - // styles: { - // width: "480px", - // height: "800px", - // }, - // }, medium: { name: "Medium device", styles: { diff --git a/CHANGELOG.md b/CHANGELOG.md index 49e3c94f..7390fee3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- Form element components have been added: checkboxes, date input, date search, radios, search field, select, text input and textarea - High contrast support for chip lists with icons - Allow custom cookie path to be passed to cookie banner - Index grids can have text/body as well as a title @@ -19,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Improvements to high contrast modes - Link colours changed for better contrast - Index grid heading options have been flattened to match other components +- Pagination arrows switched from SVGs to Font Awesome icons ### Deprecated ### Removed @@ -58,6 +60,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed CSS to counter conflicting GOV.UK paragraph styling - Transitions removed from most elements - `loadScriptsOnAccept` option for cookie banner removed in favour of callback events +- Removed the `accent-color` property for form elements ### Fixed @@ -168,7 +171,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `