From 9bc129a40ca5b0fc87c7a727b243deeebdfc2436 Mon Sep 17 00:00:00 2001 From: Gareth Foote Date: Wed, 26 Jun 2024 12:07:15 +0100 Subject: [PATCH 1/5] Adding DA icon component --- .storybook/main.js | 1 + .storybook/preview.js | 2 +- package-lock.json | 295 ++++++++++++++++++ package.json | 1 + src/nationalarchives/components/_index.scss | 1 + .../components/icon/_index.scss | 73 +++++ .../components/icon/icon.scss | 4 + .../components/icon/icon.stories.ts | 56 ++++ .../components/icon/story.njk | 5 + .../components/icon/template.njk | 76 +++++ 10 files changed, 513 insertions(+), 1 deletion(-) create mode 100644 src/nationalarchives/components/icon/_index.scss create mode 100644 src/nationalarchives/components/icon/icon.scss create mode 100644 src/nationalarchives/components/icon/icon.stories.ts create mode 100644 src/nationalarchives/components/icon/story.njk create mode 100644 src/nationalarchives/components/icon/template.njk diff --git a/.storybook/main.js b/.storybook/main.js index 64ca160..d86d597 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -11,6 +11,7 @@ const config = { "@storybook/addon-essentials", "@storybook/addon-a11y", "@storybook/addon-interactions", + "@whitespace/storybook-addon-html", ], framework: { name: "@storybook/html-webpack5", diff --git a/.storybook/preview.js b/.storybook/preview.js index d08a2a6..eaf7454 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -4,7 +4,7 @@ const preview = { controls: { expanded: true, matchers: { - color: /(background|color)$/i, + color: /(background|color|fill)$/i, date: /Date$/i, }, }, diff --git a/package-lock.json b/package-lock.json index ac471ea..6c05d12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@storybook/html-webpack5": "^8.0.10", "@storybook/test": "^8.0.10", "@storybook/test-runner": "^0.18.0", + "@whitespace/storybook-addon-html": "^6.1.1", "axe-playwright": "^2.0.1", "babel-jest": "^29.7.0", "css-loader": "^7.1.1", @@ -6419,6 +6420,16 @@ } } }, + "node_modules/@whitespace/storybook-addon-html": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/@whitespace/storybook-addon-html/-/storybook-addon-html-6.1.1.tgz", + "integrity": "sha512-sq/9c6s4PXugl//Q5iFwKoHF3tBDTEfJQubb62HWspF+CqBrDLHVEh7VYoEjubm5LjihxdFV3+mjj8Ck6bnoHQ==", + "dev": true, + "peerDependencies": { + "prettier": "^3.0.0", + "react-syntax-highlighter": "^15.0.0" + } + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -7884,6 +7895,39 @@ "node": ">=10" } }, + "node_modules/character-entities": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-reference-invalid": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/check-error": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz", @@ -8236,6 +8280,17 @@ "node": ">= 0.8" } }, + "node_modules/comma-separated-tokens": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/commander": { "version": "8.3.0", "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz", @@ -10602,6 +10657,20 @@ "reusify": "^1.0.4" } }, + "node_modules/fault": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", + "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", + "dev": true, + "peer": true, + "dependencies": { + "format": "^0.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/fb-watchman": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz", @@ -11186,6 +11255,16 @@ "node": ">= 6" } }, + "node_modules/format": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", + "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==", + "dev": true, + "peer": true, + "engines": { + "node": ">=0.4.x" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -11832,6 +11911,17 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-parse-selector": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz", + "integrity": "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-string": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz", @@ -11845,6 +11935,52 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hastscript": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz", + "integrity": "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==", + "dev": true, + "peer": true, + "dependencies": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^1.0.0", + "hast-util-parse-selector": "^2.0.0", + "property-information": "^5.0.0", + "space-separated-tokens": "^1.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hastscript/node_modules/@types/hast": { + "version": "2.3.10", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz", + "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==", + "dev": true, + "peer": true, + "dependencies": { + "@types/unist": "^2" + } + }, + "node_modules/hastscript/node_modules/@types/unist": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz", + "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==", + "dev": true, + "peer": true + }, + "node_modules/hastscript/node_modules/space-separated-tokens": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -11854,6 +11990,16 @@ "he": "bin/he" } }, + "node_modules/highlight.js": { + "version": "10.7.3", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz", + "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==", + "dev": true, + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/homedir-polyfill": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz", @@ -12319,6 +12465,32 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-alphabetical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/is-alphanumerical": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", + "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", + "dev": true, + "peer": true, + "dependencies": { + "is-alphabetical": "^1.0.0", + "is-decimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-arguments": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", @@ -12451,6 +12623,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-decimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-deflate": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-deflate/-/is-deflate-1.0.0.tgz", @@ -12535,6 +12718,17 @@ "node": ">=0.10.0" } }, + "node_modules/is-hexadecimal": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", + "dev": true, + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/is-interactive": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-1.0.0.tgz", @@ -15781,6 +15975,21 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true }, + "node_modules/lowlight": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz", + "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==", + "dev": true, + "peer": true, + "dependencies": { + "fault": "^1.0.0", + "highlight.js": "~10.7.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -17025,6 +17234,25 @@ "node": ">=6" } }, + "node_modules/parse-entities": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-2.0.0.tgz", + "integrity": "sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==", + "dev": true, + "peer": true, + "dependencies": { + "character-entities": "^1.0.0", + "character-entities-legacy": "^1.0.0", + "character-reference-invalid": "^1.0.0", + "is-alphanumerical": "^1.0.0", + "is-decimal": "^1.0.0", + "is-hexadecimal": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/parse-json": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", @@ -17549,6 +17777,16 @@ "node": ">= 0.8" } }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -17589,6 +17827,20 @@ "node": ">= 6" } }, + "node_modules/property-information": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz", + "integrity": "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==", + "dev": true, + "peer": true, + "dependencies": { + "xtend": "^4.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -17810,6 +18062,23 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, + "node_modules/react-syntax-highlighter": { + "version": "15.5.0", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz", + "integrity": "sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==", + "dev": true, + "peer": true, + "dependencies": { + "@babel/runtime": "^7.3.1", + "highlight.js": "^10.4.1", + "lowlight": "^1.17.0", + "prismjs": "^1.27.0", + "refractor": "^3.6.0" + }, + "peerDependencies": { + "react": ">= 0.14.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -17985,6 +18254,32 @@ "node": ">=8" } }, + "node_modules/refractor": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-3.6.0.tgz", + "integrity": "sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==", + "dev": true, + "peer": true, + "dependencies": { + "hastscript": "^6.0.0", + "parse-entities": "^2.0.0", + "prismjs": "~1.27.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/refractor/node_modules/prismjs": { + "version": "1.27.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", + "integrity": "sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==", + "dev": true, + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", diff --git a/package.json b/package.json index 0c19f53..0500577 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@storybook/html-webpack5": "^8.0.10", "@storybook/test": "^8.0.10", "@storybook/test-runner": "^0.18.0", + "@whitespace/storybook-addon-html": "^6.1.1", "axe-playwright": "^2.0.1", "babel-jest": "^29.7.0", "css-loader": "^7.1.1", diff --git a/src/nationalarchives/components/_index.scss b/src/nationalarchives/components/_index.scss index 07c8bd6..3747030 100644 --- a/src/nationalarchives/components/_index.scss +++ b/src/nationalarchives/components/_index.scss @@ -1,3 +1,4 @@ +@import "icon"; @import "card"; @import "nested-navigation"; @import "multi-select-search"; diff --git a/src/nationalarchives/components/icon/_index.scss b/src/nationalarchives/components/icon/_index.scss new file mode 100644 index 0000000..acfccc3 --- /dev/null +++ b/src/nationalarchives/components/icon/_index.scss @@ -0,0 +1,73 @@ +/* + * Adapted from ONS Digital Icon + * https://github.com/ONSdigital/design-system/blob/main/src/components/icon/_macro.njk + */ + + span.da-icon { + display: inline-block; + } + + .da-icon { + height: 1rem; + vertical-align: middle; + width: 1rem; + + &--xxxl { + height: 1.7rem; + width: 1.7rem; + + @include govuk-media-query($from: tablet) { + height: 2.6rem; + width: 2.6rem; + } + } + + &--xxl { + height: 1.5rem; + width: 1.5rem; + + @include govuk-media-query($from: tablet) { + height: 2rem; + width: 2rem; + } + } + + &--xl { + height: 1.4rem; + width: 1.4rem; + + @include govuk-media-query($from: tablet) { + height: 1.6rem; + width: 1.6rem; + } + } + + &--l { + height: 1.3rem; + width: 1.3rem; + + @include govuk-media-query($from: tablet) { + height: 1.4rem; + width: 1.4rem; + } + } + + &--m { + height: 1.1rem; + width: 1.1rem; + + @include govuk-media-query($from: tablet) { + height: 1.2rem; + width: 1.2rem; + } + } + + &--s { + height: 0.7rem; + width: 0.7rem; + } + + &--success { + fill: green; + } +} diff --git a/src/nationalarchives/components/icon/icon.scss b/src/nationalarchives/components/icon/icon.scss new file mode 100644 index 0000000..ea84d59 --- /dev/null +++ b/src/nationalarchives/components/icon/icon.scss @@ -0,0 +1,4 @@ +@import "govuk-frontend/govuk/settings/all"; +@import "govuk-frontend/govuk/tools/all"; +@import "govuk-frontend/govuk/helpers/all"; +@import "index"; diff --git a/src/nationalarchives/components/icon/icon.stories.ts b/src/nationalarchives/components/icon/icon.stories.ts new file mode 100644 index 0000000..389a4b3 --- /dev/null +++ b/src/nationalarchives/components/icon/icon.stories.ts @@ -0,0 +1,56 @@ +import "./_index.scss"; +import render from "./story.njk"; + +export default { + title: "TDR/Icon", + args: { + iconType: 'cross', + iconSize: 'xl', + fill: "#174E75" + }, + argTypes: { + iconType: { control: 'select', options: [ + 'cross', + 'check', + 'chevron', + 'download', + 'exit', + 'external-link', + 'info', + 'lock', + 'person', + 'quote', + 'search', + 'warning', + ]}, + iconSize: { control: 'select', options: { + 'Small': 's', + 'Medium': 'm', + 'Large': 'l', + 'X Large': 'xl', + 'XX Large': 'xxl', + 'XXX Large': 'xxxl', + } + } + }, +}; + +// export const Default = { +// args: { +// iconType: 'check', +// iconSize: 'xl' +// }, +// }; + +const createCard = (args): string => { + return render({ + params: { ...args }, + }); +}; + +const Template = ({ ...args }): string => { + return createCard({ ...args }); +}; + +export const Default = Template.bind({}); + diff --git a/src/nationalarchives/components/icon/story.njk b/src/nationalarchives/components/icon/story.njk new file mode 100644 index 0000000..d3c6641 --- /dev/null +++ b/src/nationalarchives/components/icon/story.njk @@ -0,0 +1,5 @@ +{% macro icon(params) %} + {%- include "src/nationalarchives/components/icon/template.njk" -%} +{% endmacro %} + +{{ icon( params ) }} diff --git a/src/nationalarchives/components/icon/template.njk b/src/nationalarchives/components/icon/template.njk new file mode 100644 index 0000000..1f4c481 --- /dev/null +++ b/src/nationalarchives/components/icon/template.njk @@ -0,0 +1,76 @@ +{# + Adapted from ONS Digital Icon + https://github.com/ONSdigital/design-system/blob/main/src/components/icon/_macro.njk +#} + +{%- if params.classes -%} + {% set iconClasses = ' ' + params.classes %} +{%- endif -%} + +{# Function icons A-Z #} +{%- if params.iconType == "cross" -%} + + + +{%- elif params.iconType == "check" -%} + + + +{%- elif params.iconType == "chevron" -%} + + + +{%- elif params.iconType == "download" -%} + + + + +{%- elif params.iconType == "exit" -%} + + + + +{%- elif params.iconType == "external-link" -%} + +{%- elif params.iconType == "info" -%} + + + +{%- elif params.iconType == "lock" -%} + + + +{%- elif params.iconType == "person" -%} + + + + +{%- elif params.iconType == "quote" -%} + + + +{%- elif params.iconType == "search" -%} + +{%- elif params.iconType == "sort-sprite" -%} + + + + +{%- elif params.iconType == "warning" -%} + + + + + + + + + + + +{% endif -%} From 123b63d5378b0a78c3899bf18afa07bf00084932 Mon Sep 17 00:00:00 2001 From: Gareth Foote Date: Wed, 26 Jun 2024 17:07:42 +0100 Subject: [PATCH 2/5] Added alert component that uses icon. --- .storybook/main.js | 3 + .../components/alert/_index.scss | 101 +++++++++++++++++ .../components/alert/alert.scss | 5 + .../components/alert/alert.stories.ts | 103 ++++++++++++++++++ .../components/alert/macro.njk | 3 + .../components/alert/story.njk | 5 + .../components/alert/template.njk | 27 +++++ .../components/icon/_index.scss | 8 +- .../components/icon/icon.stories.ts | 58 +++++----- 9 files changed, 282 insertions(+), 31 deletions(-) create mode 100644 src/nationalarchives/components/alert/_index.scss create mode 100644 src/nationalarchives/components/alert/alert.scss create mode 100644 src/nationalarchives/components/alert/alert.stories.ts create mode 100644 src/nationalarchives/components/alert/macro.njk create mode 100644 src/nationalarchives/components/alert/story.njk create mode 100644 src/nationalarchives/components/alert/template.njk diff --git a/.storybook/main.js b/.storybook/main.js index d86d597..0df6678 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -51,6 +51,9 @@ const config = { options: { additionalData: ` @import "node_modules/govuk-frontend/govuk/base"; + @import "node_modules/govuk-frontend/govuk/settings/all"; + @import "node_modules/govuk-frontend/govuk/tools/all"; + @import "node_modules/govuk-frontend/govuk/helpers/all"; `, implementation: require("sass"), }, diff --git a/src/nationalarchives/components/alert/_index.scss b/src/nationalarchives/components/alert/_index.scss new file mode 100644 index 0000000..1c713dd --- /dev/null +++ b/src/nationalarchives/components/alert/_index.scss @@ -0,0 +1,101 @@ +// @import "node_modules/govuk-frontend/govuk/components/inset-text"; + +.da-alert { + @include govuk-text-colour; + + padding: govuk-spacing(3); + + // Margin top intended to collapse + // This adds an additional 10px to the paragraph above + @include govuk-responsive-margin(6, "top"); + @include govuk-responsive-margin(6, "bottom"); + + clear: both; + border-left: $govuk-border-width-wide solid $govuk-border-colour; + + > :first-child { + margin-top: 0; + } + + > :only-child, + > :last-child { + margin-bottom: 0; + } + + // @extend .govuk-inset-text; + border-color: #2b8cc4; + background-color: #dbeff9; + + &--success { + border-color: #28a197; + background-color: #c6ece9; + } + + &--error { + border-color: #c42b2b; + background-color: #f3dede; + } + + &--info { + border-color: #fcdba9; + background-color: #fcf5ea; + } + + &:first-child { + @include govuk-responsive-margin(0, "top"); + } + + &:last-child { + @include govuk-responsive-margin(0, "bottom"); + } + + &__heading { + @include govuk-typography-responsive(24); + @include govuk-responsive-margin(3, "bottom"); + } + + &__heading--s { + @include govuk-typography-responsive(19); + @include govuk-responsive-margin(2, "bottom"); + } + + .da-alert__icon svg.da-icon { + fill: #174e75; + } + + &--success .da-alert__icon svg.da-icon { + fill: #1b7069; + } + + &--error .da-alert__icon svg.da-icon { + fill: #831d1d; + } + + &--info .da-alert__icon svg.da-icon { + fill: #985e05; + } +} + +.da-alert--with-icon { + display: flex; + gap: 20px; +} + +.da-alert__icon > .da-icon { + @include govuk-responsive-margin(1, "top"); + @include govuk-responsive-margin(1, "left"); +} + +.da-alert__content { + > p { + @include govuk-typography-responsive(19); + } + + > *:first-child { + @include govuk-responsive-margin(0, "top"); + } + + > *:last-child { + @include govuk-responsive-margin(0, "bottom"); + } +} diff --git a/src/nationalarchives/components/alert/alert.scss b/src/nationalarchives/components/alert/alert.scss new file mode 100644 index 0000000..53730a1 --- /dev/null +++ b/src/nationalarchives/components/alert/alert.scss @@ -0,0 +1,5 @@ +@import "govuk-frontend/govuk/settings/all"; +@import "govuk-frontend/govuk/tools/all"; +@import "govuk-frontend/govuk/helpers/all"; +@import "govuk-frontend/govuk/components/inset-text"; +@import "index"; diff --git a/src/nationalarchives/components/alert/alert.stories.ts b/src/nationalarchives/components/alert/alert.stories.ts new file mode 100644 index 0000000..427ba59 --- /dev/null +++ b/src/nationalarchives/components/alert/alert.stories.ts @@ -0,0 +1,103 @@ +// import "govuk-frontend/govuk/components/inset-text"; +import "../icon/_index.scss"; +import "./_index.scss"; +import iconStory from "../icon/icon.stories"; +import render from "./story.njk"; + +export default { + title: "TDR/Alert", + args: { + alertType: "info", + withIcon: false, + headingText: "", + bodyText: + "Once uploaded, we will check your metadata for errors. There will be a chance to review and re-upload the metadata before completing the transfer.", + headingSize: "l", + iconType: "info", + }, + argTypes: { + iconType: { + control: "select", + options: [...iconStory.argTypes.iconType.options], + }, + headingSize: { control: "select", options: { Large: "l", Small: "s" } }, + alertType: { + control: "select", + options: { + Neutral: "default", + Information: "info", + Success: "success", + Error: "error", + }, + }, + }, +}; + +console.log({ ...iconStory.argTypes.iconType }); + +const create = (args): string => { + return render({ + test: "something", + params: { ...args }, + }); +}; + +const Template = ({ ...args }): string => { + return create({ ...args }); +}; + +export const Default = Template.bind({}); + +export const WithHeading = Template.bind({}); +WithHeading.args = { + alertType: "info", + withIcon: false, + headingSize: "l", + headingText: "Leaving and returning to this transfer", + bodyText: + 'You can leave this transfer and return to upload your metadata once you have completed your template. In progress transfers are accessible from the View Transfers page.', + iconType: "exit", +}; + +export const WithIcon = Template.bind({}); +WithIcon.args = { + alertType: "info", + withIcon: true, + headingSize: "l", + headingText: "Leaving and returning to this transfer", + bodyText: + 'You can leave this transfer and return to upload your metadata once you have completed your template. In progress transfers are accessible from the View Transfers page.', + iconType: "exit", +}; + +export const Neutral = Template.bind({}); +Neutral.args = { + alertType: "default", + withIcon: true, + headingSize: "l", + headingText: "Your review is in progress", + bodyText: + "When the review is complete you will receive an email to jesse@ons.gov.uk with further instructions.", + iconType: "search", +}; + +export const Error = Template.bind({}); +Error.args = { + alertType: "error", + withIcon: true, + headingSize: "l", + headingText: "We found issues in your metadata", + bodyText: "We have emailed guidance to jesse@ons.gov.uk", + iconType: "warning", +}; + +export const Success = Template.bind({}); +Success.args = { + alertType: "success", + withIcon: true, + headingSize: "l", + headingText: "You can now complete your transfer", + bodyText: + "The metadata you submitted has been reviewed and no issues were found.", + iconType: "check", +}; diff --git a/src/nationalarchives/components/alert/macro.njk b/src/nationalarchives/components/alert/macro.njk new file mode 100644 index 0000000..32371d0 --- /dev/null +++ b/src/nationalarchives/components/alert/macro.njk @@ -0,0 +1,3 @@ +{% macro alert(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/src/nationalarchives/components/alert/story.njk b/src/nationalarchives/components/alert/story.njk new file mode 100644 index 0000000..31642ba --- /dev/null +++ b/src/nationalarchives/components/alert/story.njk @@ -0,0 +1,5 @@ +{% macro alert(params) %} + {%- include "src/nationalarchives/components/alert/template.njk" -%} +{% endmacro %} + +{{ alert( params ) }} diff --git a/src/nationalarchives/components/alert/template.njk b/src/nationalarchives/components/alert/template.njk new file mode 100644 index 0000000..f25c9a2 --- /dev/null +++ b/src/nationalarchives/components/alert/template.njk @@ -0,0 +1,27 @@ +{% macro icon(params) %} + {%- include "src/nationalarchives/components/icon/template.njk" -%} +{% endmacro %} + +{% if params.headingSize == 'l' %} + {% set iconSize = 'xxl' %} +{% else %} + {% set iconSize = 'm' %} +{% endif %} + +
+ {% if params.withIcon %} +
+ +
+ {% endif %} +
+ {% if params.headingText %} +

+ {{params.headingText|d("Your review is in progress")}} +

+ {% endif %} +

{{params.bodyText|d("When the review is complete you will receive an email to jesse@ons.gov.uk with further instructions.")|safe}}

+
+
diff --git a/src/nationalarchives/components/icon/_index.scss b/src/nationalarchives/components/icon/_index.scss index acfccc3..8db0406 100644 --- a/src/nationalarchives/components/icon/_index.scss +++ b/src/nationalarchives/components/icon/_index.scss @@ -3,11 +3,11 @@ * https://github.com/ONSdigital/design-system/blob/main/src/components/icon/_macro.njk */ - span.da-icon { +span.da-icon { display: inline-block; - } +} - .da-icon { +.da-icon { height: 1rem; vertical-align: middle; width: 1rem; @@ -66,7 +66,7 @@ height: 0.7rem; width: 0.7rem; } - + &--success { fill: green; } diff --git a/src/nationalarchives/components/icon/icon.stories.ts b/src/nationalarchives/components/icon/icon.stories.ts index 389a4b3..ecc0eb2 100644 --- a/src/nationalarchives/components/icon/icon.stories.ts +++ b/src/nationalarchives/components/icon/icon.stories.ts @@ -4,34 +4,39 @@ import render from "./story.njk"; export default { title: "TDR/Icon", args: { - iconType: 'cross', - iconSize: 'xl', - fill: "#174E75" + iconType: "cross", + iconSize: "xl", + fill: "#174E75", }, argTypes: { - iconType: { control: 'select', options: [ - 'cross', - 'check', - 'chevron', - 'download', - 'exit', - 'external-link', - 'info', - 'lock', - 'person', - 'quote', - 'search', - 'warning', - ]}, - iconSize: { control: 'select', options: { - 'Small': 's', - 'Medium': 'm', - 'Large': 'l', - 'X Large': 'xl', - 'XX Large': 'xxl', - 'XXX Large': 'xxxl', - } - } + iconType: { + control: "select", + options: [ + "cross", + "check", + "chevron", + "download", + "exit", + "external-link", + "info", + "lock", + "person", + "quote", + "search", + "warning", + ], + }, + iconSize: { + control: "select", + options: { + Small: "s", + Medium: "m", + Large: "l", + "X Large": "xl", + "XX Large": "xxl", + "XXX Large": "xxxl", + }, + }, }, }; @@ -53,4 +58,3 @@ const Template = ({ ...args }): string => { }; export const Default = Template.bind({}); - From a21e27a4eb36dc39961008f2b8730a0642a9d008 Mon Sep 17 00:00:00 2001 From: Gareth Foote Date: Wed, 26 Jun 2024 17:12:25 +0100 Subject: [PATCH 3/5] Removing log --- src/nationalarchives/components/alert/alert.stories.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/nationalarchives/components/alert/alert.stories.ts b/src/nationalarchives/components/alert/alert.stories.ts index 427ba59..fb8d450 100644 --- a/src/nationalarchives/components/alert/alert.stories.ts +++ b/src/nationalarchives/components/alert/alert.stories.ts @@ -33,8 +33,6 @@ export default { }, }; -console.log({ ...iconStory.argTypes.iconType }); - const create = (args): string => { return render({ test: "something", From 0fb98087743efd6acfa4e1357bed36e0b4d1d6f2 Mon Sep 17 00:00:00 2001 From: Gareth Foote Date: Wed, 26 Jun 2024 17:13:00 +0100 Subject: [PATCH 4/5] Removing comments --- src/nationalarchives/components/icon/icon.stories.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/nationalarchives/components/icon/icon.stories.ts b/src/nationalarchives/components/icon/icon.stories.ts index ecc0eb2..3dfde22 100644 --- a/src/nationalarchives/components/icon/icon.stories.ts +++ b/src/nationalarchives/components/icon/icon.stories.ts @@ -40,13 +40,6 @@ export default { }, }; -// export const Default = { -// args: { -// iconType: 'check', -// iconSize: 'xl' -// }, -// }; - const createCard = (args): string => { return render({ params: { ...args }, From e23ec85fe7039963ffa22d5542b3454e09fa3392 Mon Sep 17 00:00:00 2001 From: Gareth Foote Date: Wed, 26 Jun 2024 17:13:43 +0100 Subject: [PATCH 5/5] Removing comments --- src/nationalarchives/components/alert/_index.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/nationalarchives/components/alert/_index.scss b/src/nationalarchives/components/alert/_index.scss index 1c713dd..c7b39f5 100644 --- a/src/nationalarchives/components/alert/_index.scss +++ b/src/nationalarchives/components/alert/_index.scss @@ -1,5 +1,3 @@ -// @import "node_modules/govuk-frontend/govuk/components/inset-text"; - .da-alert { @include govuk-text-colour; @@ -22,7 +20,6 @@ margin-bottom: 0; } - // @extend .govuk-inset-text; border-color: #2b8cc4; background-color: #dbeff9;