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/.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/.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 8426ff41..d6dff1f0 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -1,5 +1,8 @@ +@use "sass:math"; + @use "../src/nationalarchives/tools/colour"; @use "../src/nationalarchives/tools/media"; +@use "../src/nationalarchives/tools/typography"; @import "https://use.typekit.net/hkj3kuz.css"; @@ -37,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; @@ -141,7 +165,105 @@ padding-left: 0.5rem; @include colour.colour-background("background-tint"); + } +} + +.tna-colour-contrast-demo { + width: 0; + max-width: calc(100% - 1px); + display: table; + table-layout: auto; + + border-top: rgb(0 0 0/0.25) 1px solid; + border-left: rgb(0 0 0/0.25) 1px solid; + + &__header { + display: table-header-group; + } + + &__block { + // width: #{math.div(100%, 6)}; + padding: 1rem; + + display: table-cell; + + @include typography.main-font-weight-bold; + + border-right: rgb(0 0 0/0.25) 1px solid; + border-bottom: rgb(0 0 0/0.25) 1px solid; + } + + &__examples { + display: table-row-group; + } + + &__theme-accent { + display: table-row; + } + + &__example { + display: table-cell; + + border-right: rgb(0 0 0/0.25) 1px solid; + border-bottom: rgb(0 0 0/0.25) 1px solid; + + &:first-child { + min-width: 7rem; + padding: 1rem; + + @include typography.relative-font-size(14); + } + + &-content { + height: 100%; + padding: 1rem; + } + } + + &__link { + &--visited { + @include colour.colour-font("link-visited", true); + } + } + + .tna-template { + min-width: 15.25rem; + + p:not(:first-child) { + margin-top: 0.25rem; + } + } + + .tna-chip-list { + margin-top: 1rem; + + flex-wrap: nowrap; + } + + .fa-solid { + // margin-left: 0.5rem; + + &.light-icon { + @include colour.colour-font("icon-light", true); + } + } + + .tna-button-group { + margin-top: 1rem; + + gap: 0.5rem; + flex-wrap: nowrap; + } + + .tna-pagination { + margin-top: 1rem; + } + + .dark-text { + @include colour.colour-font("font-dark", true); + } - // @include colour.colour-border("keyline", 1px, solid, top); + .light-text { + @include colour.colour-font("font-light", true); } } 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 3cdd3793..0943d3f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,28 +5,87 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.25-prerelease...HEAD) +## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.29-prerelease...HEAD) ### Added +### Changed + +- Cookies class parameter `extraPolicies` moved to key inside the options object parameter + +### Deprecated +### Removed +### Fixed + +- Chip colours and icons in chip lists fixed + +### Security + +## [0.1.29-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.28-prerelease...v0.1.29-prerelease) - 2023-12-01 + +### Changed + +- Light font colour changed for better colour contrast on light accented backgrounds + +### Removed + +- High contrast themes don't have outlines when hovering over links + +### Fixed + +- Date search predefined value fixture amended +- Light icons can be used on light accented backgrounds + +## [0.1.28-prerelease](https://github.com/nationalarchives/tna-frontend/compare/v0.1.27-prerelease...v0.1.28-prerelease) - 2023-11-30 + +### Added + +- Buttons can now have `buttonType` which sets the `type` attribute for `Set cookie preferences", + "html": "", "hidden": false }, { "name": "custom preferences set key", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "cookiesPreferencesSetKey": "custom" }, - "html": "", + "html": "", "hidden": false }, { "name": "custom policies", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "policies": "custom" }, - "html": "", + "html": "", "hidden": false }, { "name": "custom policies key", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "policiesKey": "custom_key" }, - "html": "", + "html": "", "hidden": false }, { "name": "with domain", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "cookiesDomain": "nationalarchives.gov.uk" }, - "html": "", + "html": "", + "hidden": false + }, + { + "name": "with path", + "options": { + "serviceName": "My service", + "cookiesUrl": "/cookies", + "cookiesPath": "/my-service" + }, + "html": "", "hidden": false }, { "name": "with preferences set key", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "preferencesSetKey": "custom_preferences_set_key" }, - "html": "", + "html": "", "hidden": false }, { "name": "insecure", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "allowInsecure": true }, - "html": "", + "html": "", "hidden": false }, { "name": "with classes", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "classes": "tna-cookie-banner--fixture" }, - "html": "", + "html": "", "hidden": false }, { "name": "with attributes", "options": { + "serviceName": "My service", "cookiesUrl": "/cookies", "attributes": { "data-fixturetest": "pass" } }, - "html": "", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/cookie-banner/macro-options.json b/src/nationalarchives/components/cookie-banner/macro-options.json index 8ef747e9..2fdf153c 100644 --- a/src/nationalarchives/components/cookie-banner/macro-options.json +++ b/src/nationalarchives/components/cookie-banner/macro-options.json @@ -1,4 +1,10 @@ [ + { + "name": "serviceName", + "type": "string", + "required": true, + "description": "" + }, { "name": "cookiesUrl", "type": "string", @@ -23,6 +29,12 @@ "required": false, "description": "" }, + { + "name": "cookiesPath", + "type": "string", + "required": false, + "description": "" + }, { "name": "allowInsecure", "type": "boolean", diff --git a/src/nationalarchives/components/cookie-banner/template.njk b/src/nationalarchives/components/cookie-banner/template.njk index 89430c2e..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/_index.scss b/src/nationalarchives/components/date-input/_index.scss new file mode 100644 index 00000000..5f5dfd3d --- /dev/null +++ b/src/nationalarchives/components/date-input/_index.scss @@ -0,0 +1 @@ +@use "date-input"; diff --git a/src/nationalarchives/components/date-input/date-input.scss b/src/nationalarchives/components/date-input/date-input.scss new file mode 100644 index 00000000..b6f8c305 --- /dev/null +++ b/src/nationalarchives/components/date-input/date-input.scss @@ -0,0 +1,48 @@ +@use "../../variables/forms"; +@use "../../tools/colour"; +@use "../../tools/typography"; +@use "../../utilities"; + +.tna-date-input { + display: flex; + gap: 1rem; + + &__item { + &-label { + display: block; + + @include typography.relative-font-size(16); + } + + &-input { + width: 3rem; + padding: 0 0.375rem; + + display: block; + box-sizing: border-box; + + @include colour.colour-font("input-foreground"); + font-size: inherit; + line-height: 2rem; + + @include colour.colour-background("input-background"); + + @include colour.colour-border( + "input-border", + forms.$form-field-border-width + ); + border-radius: 0; + + &--wider { + width: 4.5rem; + } + + .tna-form__group--error & { + @include colour.colour-border("form-error"); + } + } + } + + &--inline { + } +} diff --git a/src/nationalarchives/components/date-input/date-input.stories.js b/src/nationalarchives/components/date-input/date-input.stories.js new file mode 100644 index 00000000..95df1d3f --- /dev/null +++ b/src/nationalarchives/components/date-input/date-input.stories.js @@ -0,0 +1,119 @@ +import DateInput from "./template.njk"; +import macroOptions from "./macro-options.json"; + +const argTypes = { + label: { control: "text" }, + headingLevel: { control: { type: "number", min: 1, max: 6 } }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, + id: { control: "text" }, + name: { control: "text" }, + hint: { control: "text" }, + value: { control: "object" }, + error: { control: "object" }, + inline: { 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/Date input", + argTypes, +}; + +const Template = ({ + label, + headingLevel, + headingSize, + id, + name, + hint, + value, + error, + inline, + classes, + attributes, +}) => + DateInput({ + params: { + label, + headingLevel, + headingSize, + id, + name, + hint, + value, + error, + inline, + classes, + attributes, + }, + }); + +export const Standard = Template.bind({}); +Standard.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date11", + name: "date11", + classes: "tna-date-search--demo", +}; + +export const Predefined = Template.bind({}); +Predefined.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date12", + name: "date12", + value: { + day: "24", + month: "09", + year: "1986", + }, + classes: "tna-date-search--demo", +}; + +export const WithHint = Template.bind({}); +WithHint.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date13", + name: "date13", + hint: "The earliest date of the record", + classes: "tna-date-search--demo", +}; + +export const Error = Template.bind({}); +Error.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date14", + name: "date14", + error: { + text: "Date is not valid", + }, + classes: "tna-date-search--demo", +}; + +export const Inline = Template.bind({}); +Inline.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "xs", + id: "date15", + name: "date15", + inline: true, + classes: "tna-date-search--demo", +}; diff --git a/src/nationalarchives/components/date-input/fixtures.json b/src/nationalarchives/components/date-input/fixtures.json new file mode 100644 index 00000000..b15a310b --- /dev/null +++ b/src/nationalarchives/components/date-input/fixtures.json @@ -0,0 +1,75 @@ +{ + "component": "date-input", + "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/macro-options.json b/src/nationalarchives/components/date-input/macro-options.json new file mode 100644 index 00000000..ed0b985e --- /dev/null +++ b/src/nationalarchives/components/date-input/macro-options.json @@ -0,0 +1,96 @@ +[ + { + "name": "label", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "headingLevel", + "type": "number", + "required": true, + "description": "" + }, + { + "name": "headingSize", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "id", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "name", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "hint", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "value", + "type": "object", + "required": false, + "description": "", + "params": [ + { + "name": "day", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "month", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "year", + "type": "text", + "required": false, + "description": "" + } + ] + }, + { + "name": "error", + "type": "object", + "required": false, + "description": "", + "params": [ + { + "name": "text", + "type": "text", + "required": true, + "description": "" + } + ] + }, + { + "name": "inline", + "type": "boolean", + "required": false, + "description": "" + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the date input." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the date input." + } +] diff --git a/src/nationalarchives/components/date-input/macro.njk b/src/nationalarchives/components/date-input/macro.njk new file mode 100644 index 00000000..4efbe3f7 --- /dev/null +++ b/src/nationalarchives/components/date-input/macro.njk @@ -0,0 +1,3 @@ +{% macro tnaDateInput(params) %} + {%- include "nationalarchives/components/date-input/template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/nationalarchives/components/date-input/template.njk b/src/nationalarchives/components/date-input/template.njk new file mode 100644 index 00000000..c7271af0 --- /dev/null +++ b/src/nationalarchives/components/date-input/template.njk @@ -0,0 +1,43 @@ +{%- set containerClasses = [params.classes] if params.classes else [] -%} +{%- if params.inline -%} + {%- 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 %} +
+
+ + +
+
+ + +
+
+ + +
+
+
+
diff --git a/src/nationalarchives/components/date-search/_index.scss b/src/nationalarchives/components/date-search/_index.scss new file mode 100644 index 00000000..a52b7779 --- /dev/null +++ b/src/nationalarchives/components/date-search/_index.scss @@ -0,0 +1 @@ +@use "date-search"; diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss new file mode 100644 index 00000000..25638bed --- /dev/null +++ b/src/nationalarchives/components/date-search/date-search.scss @@ -0,0 +1,28 @@ +@use "../../variables/forms"; +@use "../../tools/colour"; +@use "../../utilities"; + +.tna-date-search { + max-width: 100%; + padding: 0 0.375rem; + + display: block; + box-sizing: border-box; + + @include colour.colour-font("input-foreground"); + font-size: inherit; + line-height: 2rem; + + @include colour.colour-background("input-background"); + + @include colour.colour-border("input-border", forms.$form-field-border-width); + border-radius: 0; + + .tna-form__group--error & { + @include colour.colour-border("form-error"); + } + + &--max-width { + width: 100%; + } +} diff --git a/src/nationalarchives/components/date-search/date-search.stories.js b/src/nationalarchives/components/date-search/date-search.stories.js new file mode 100644 index 00000000..099589bf --- /dev/null +++ b/src/nationalarchives/components/date-search/date-search.stories.js @@ -0,0 +1,124 @@ +import DateSearch from "./template.njk"; +import macroOptions from "./macro-options.json"; + +const argTypes = { + label: { control: "text" }, + headingLevel: { control: { type: "number", min: 1, max: 6 } }, + headingSize: { + control: "inline-radio", + options: ["xs", "s", "m", "l", "xl"], + }, + id: { control: "text" }, + name: { control: "text" }, + hint: { control: "text" }, + value: { control: "text" }, + error: { control: "object" }, + maxWidth: { control: "boolean" }, + inline: { control: "boolean" }, + formGroupClasses: { control: "text" }, + formGroupAttributes: { control: "object" }, + 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/Date search", + argTypes, +}; + +const Template = ({ + label, + headingLevel, + headingSize, + id, + name, + hint, + value, + error, + maxWidth, + inline, + formGroupClasses, + formGroupAttributes, + classes, + attributes, +}) => + DateSearch({ + params: { + label, + headingLevel, + headingSize, + id, + name, + hint, + value, + error, + maxWidth, + inline, + formGroupClasses, + formGroupAttributes, + classes, + attributes, + }, + }); + +export const Standard = Template.bind({}); +Standard.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date1", + name: "date1", + classes: "tna-date-search--demo", +}; + +export const Predefined = Template.bind({}); +Predefined.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date2", + name: "date2", + value: "1986-09-24", + classes: "tna-date-search--demo", +}; + +export const WithHint = Template.bind({}); +WithHint.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date3", + name: "date3", + hint: "The earliest date of the record", + classes: "tna-date-search--demo", +}; + +export const Error = Template.bind({}); +Error.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "m", + id: "date4", + name: "date4", + error: { + text: "Date is not valid", + }, + classes: "tna-date-search--demo", +}; + +export const Inline = Template.bind({}); +Inline.args = { + label: "Enter a start date", + headingLevel: 4, + headingSize: "xs", + id: "date5", + name: "date5", + inline: true, + classes: "tna-date-search--demo", +}; diff --git a/src/nationalarchives/components/date-search/fixtures.json b/src/nationalarchives/components/date-search/fixtures.json new file mode 100644 index 00000000..89f1d955 --- /dev/null +++ b/src/nationalarchives/components/date-search/fixtures.json @@ -0,0 +1,84 @@ +{ + "component": "date-search", + "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": "1986-09-24" + }, + "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/macro-options.json b/src/nationalarchives/components/date-search/macro-options.json new file mode 100644 index 00000000..24c98169 --- /dev/null +++ b/src/nationalarchives/components/date-search/macro-options.json @@ -0,0 +1,94 @@ +[ + { + "name": "label", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "headingLevel", + "type": "number", + "required": true, + "description": "" + }, + { + "name": "headingSize", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "id", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "name", + "type": "text", + "required": true, + "description": "" + }, + { + "name": "hint", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "value", + "type": "text", + "required": false, + "description": "" + }, + { + "name": "error", + "type": "object", + "required": false, + "description": "", + "params": [ + { + "name": "text", + "type": "text", + "required": true, + "description": "" + } + ] + }, + { + "name": "maxWidth", + "type": "boolean", + "required": false, + "description": "" + }, + { + "name": "inline", + "type": "boolean", + "required": false, + "description": "" + }, + { + "name": "formGroupClasses", + "type": "string", + "required": false, + "description": "Classes to add to the date search form group." + }, + { + "name": "formGroupAttributes", + "type": "string", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the date search form group." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the date search field." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the date search field." + } +] diff --git a/src/nationalarchives/components/date-search/macro.njk b/src/nationalarchives/components/date-search/macro.njk new file mode 100644 index 00000000..9b100792 --- /dev/null +++ b/src/nationalarchives/components/date-search/macro.njk @@ -0,0 +1,3 @@ +{% macro tnaDateSearch(params) %} + {%- include "nationalarchives/components/date-search/template.njk" -%} +{% endmacro %} \ No newline at end of file diff --git a/src/nationalarchives/components/date-search/template.njk b/src/nationalarchives/components/date-search/template.njk new file mode 100644 index 00000000..ab90dd79 --- /dev/null +++ b/src/nationalarchives/components/date-search/template.njk @@ -0,0 +1,27 @@ +{%- set containerClasses = [params.formGroupClasses] if params.formGroupClasses else [] -%} +{%- set inputClasses = [params.classes] if params.classes else [] -%} +{%- if params.inline -%} + {%- set containerClasses = containerClasses.concat('tna-form__group--inline') -%} +{%- endif -%} +
+
+ + + + {%- if params.hint %} +

+ {{ params.hint }} +

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

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

+ {%- endif %} +
+ +
diff --git a/src/nationalarchives/components/featured-records/fixtures.json b/src/nationalarchives/components/featured-records/fixtures.json index 5f1e1ca7..8daa80a5 100644 --- a/src/nationalarchives/components/featured-records/fixtures.json +++ b/src/nationalarchives/components/featured-records/fixtures.json @@ -1,4 +1,44 @@ { "component": "featured-records", - "fixtures": [] + "fixtures": [ + { + "name": "basic featured records", + "options": { + "items": [ + { + "collection": "TS 11/45/167", + "title": "Court records relating to Robert Wedderburn's trial", + "href": "#", + "date": "1819–1820" + }, + { + "collection": "HO 42/191", + "title": "Home office letters", + "href": "#", + "date": "1819" + } + ] + }, + "html": "", + "hidden": false + }, + { + "name": "featured records with images", + "options": { + "items": [ + { + "imageSrc": "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp", + "imageWidth": 576, + "imageHeight": 591, + "collection": "TS 11/45/167", + "title": "Court records relating to Robert Wedderburn's trial", + "href": "#", + "date": "1819–1820" + } + ] + }, + "html": "", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss index 6ea15009..8ed59635 100644 --- a/src/nationalarchives/components/filters/filters.scss +++ b/src/nationalarchives/components/filters/filters.scss @@ -1,23 +1,23 @@ +@use "../../tools/colour"; @use "../../tools/spacing"; @use "../../utilities"; .tna-filters { + @include spacing.space-above; + display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; - @include spacing.space-above; - &__item { } &__item--selected #{&}__link { - background-color: #004c7e; - &, &:link, - &:visited { - color: #fff; + &:visited, + &:hover { + @include colour.accent; } } @@ -26,28 +26,18 @@ text-decoration: none; - background-color: #d4e5ef; - - border-radius: 99rem; - - // transition: - // color 200ms, - // background-color 200ms; + @include colour.tint; &, &:link, &:visited { - color: #000; + @include colour.colour-font("font-base"); } - &:hover { - color: #fff; - - background-color: #004c7e; + border-radius: 99rem; - // transition: - // color 50ms, - // background-color 50ms; + &:hover { + @include colour.accent-light; } } } diff --git a/src/nationalarchives/components/filters/fixtures.json b/src/nationalarchives/components/filters/fixtures.json index 80c9aaa0..6980209b 100644 --- a/src/nationalarchives/components/filters/fixtures.json +++ b/src/nationalarchives/components/filters/fixtures.json @@ -1,4 +1,51 @@ { "component": "filters", - "fixtures": [] + "fixtures": [ + { + "name": "plain filters", + "options": { + "items": [ + { + "label": "All", + "href": "#?filter=all", + "selected": true + }, + { + "label": "Medieval (974—1485)", + "href": "#?filter=alpha" + }, + { + "label": "Early Modern (1485—1714)", + "href": "#?filter=beta" + }, + { + "label": "Georgians (1714—1837)", + "href": "#?filter=gamma" + }, + { + "label": "Victorians (1837—1901)", + "href": "#?filter=delta" + }, + { + "label": "Early 20th century (1901—1918)", + "href": "#?filter=epsilon" + }, + { + "label": "Interwar (1918—1939)", + "href": "#?filter=zeta" + }, + { + "label": "Second World War (1939—1945)", + "href": "#?filter=eta" + }, + { + "label": "Postwar (1945—2000)", + "href": "#?filter=theta" + } + ] + }, + "html": "", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/filters/template.njk b/src/nationalarchives/components/filters/template.njk index be852979..aea66b98 100644 --- a/src/nationalarchives/components/filters/template.njk +++ b/src/nationalarchives/components/filters/template.njk @@ -1,5 +1,5 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%} -