@nationalarchives/frontend 0.1.31 → 0.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/nationalarchives/all.css +1 -1
  2. package/nationalarchives/all.css.map +1 -1
  3. package/nationalarchives/all.js +1 -1
  4. package/nationalarchives/all.js.map +1 -1
  5. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  6. package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
  7. package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
  8. package/nationalarchives/components/button/button.css.map +1 -1
  9. package/nationalarchives/components/card/card.css.map +1 -1
  10. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  11. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  12. package/nationalarchives/components/checkboxes/checkboxes.scss +2 -0
  13. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  14. package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
  15. package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
  16. package/nationalarchives/components/date-input/date-input.css +1 -1
  17. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  18. package/nationalarchives/components/date-input/date-input.scss +1 -0
  19. package/nationalarchives/components/date-search/date-search.css +1 -1
  20. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  21. package/nationalarchives/components/date-search/date-search.scss +1 -0
  22. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  23. package/nationalarchives/components/filters/filters.css.map +1 -1
  24. package/nationalarchives/components/footer/footer.css.map +1 -1
  25. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  26. package/nationalarchives/components/gallery/gallery.js +1 -1
  27. package/nationalarchives/components/gallery/gallery.js.map +1 -1
  28. package/nationalarchives/components/grid/grid.css.map +1 -1
  29. package/nationalarchives/components/header/header.css.map +1 -1
  30. package/nationalarchives/components/header/header.js +1 -1
  31. package/nationalarchives/components/header/header.js.map +1 -1
  32. package/nationalarchives/components/hero/hero.css.map +1 -1
  33. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  34. package/nationalarchives/components/message/message.css.map +1 -1
  35. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  36. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  37. package/nationalarchives/components/picture/picture.css.map +1 -1
  38. package/nationalarchives/components/picture/picture.js +1 -1
  39. package/nationalarchives/components/picture/picture.js.map +1 -1
  40. package/nationalarchives/components/radios/radios.css +1 -1
  41. package/nationalarchives/components/radios/radios.css.map +1 -1
  42. package/nationalarchives/components/radios/radios.scss +5 -3
  43. package/nationalarchives/components/search-field/search-field.css +1 -1
  44. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  45. package/nationalarchives/components/search-field/search-field.scss +17 -4
  46. package/nationalarchives/components/select/select.css +1 -1
  47. package/nationalarchives/components/select/select.css.map +1 -1
  48. package/nationalarchives/components/select/select.scss +1 -0
  49. package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
  50. package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
  51. package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
  52. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  53. package/nationalarchives/components/skip-link/skip-link.js +1 -1
  54. package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
  55. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  56. package/nationalarchives/components/tabs/tabs.js +1 -1
  57. package/nationalarchives/components/tabs/tabs.js.map +1 -1
  58. package/nationalarchives/components/text-input/text-input.css +1 -1
  59. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  60. package/nationalarchives/components/text-input/text-input.scss +1 -0
  61. package/nationalarchives/components/textarea/textarea.css +1 -1
  62. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  63. package/nationalarchives/components/textarea/textarea.scss +1 -0
  64. package/nationalarchives/prototype-kit.css +1 -1
  65. package/nationalarchives/prototype-kit.css.map +1 -1
  66. package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +195 -0
  67. package/nationalarchives/stories/utilities/colour-schemes/{colour-schemes.stories.js → colour-themes.stories.js} +12 -122
  68. package/nationalarchives/tools/_colour.scss +16 -0
  69. package/package.json +16 -16
  70. package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.mdx +0 -107
  71. package/nationalarchives/stories/utilities/lists/lists.mdx +0 -18
  72. package/nationalarchives/stories/utilities/tables/tables.mdx +0 -8
  73. package/nationalarchives/stories/utilities/typography/typography.mdx +0 -27
@@ -0,0 +1,195 @@
1
+ import Button from "../../../components/button/template.njk";
2
+ import Checkboxes from "../../../components/checkboxes/template.njk";
3
+ import Radios from "../../../components/radios/template.njk";
4
+ import Select from "../../../components/select/template.njk";
5
+ import TextInput from "../../../components/text-input/template.njk";
6
+
7
+ const argTypes = {};
8
+
9
+ export default {
10
+ title: "Utilities/Colours/Combinations",
11
+ argTypes,
12
+ };
13
+
14
+ const Template = () => {
15
+ const themes = [
16
+ "tna-template--light-theme",
17
+ "tna-template--light-theme tna-template--high-contrast-theme",
18
+ "tna-template--dark-theme",
19
+ "tna-template--dark-theme tna-template--high-contrast-theme",
20
+ ];
21
+
22
+ const accents = [
23
+ "",
24
+ // "tna-template--black-accent",
25
+ "tna-template--yellow-accent",
26
+ "tna-template--pink-accent",
27
+ "tna-template--orange-accent",
28
+ "tna-template--green-accent",
29
+ "tna-template--blue-accent",
30
+ ];
31
+
32
+ const blocks = [
33
+ "",
34
+ "tna-background-tint",
35
+ "tna-background-accent-light",
36
+ "tna-background-accent",
37
+ "tna-background-contrast",
38
+ ];
39
+
40
+ return `<div class="tna-colour-contrast-demo">
41
+ <div class="tna-colour-contrast-demo__header">
42
+ <div class="tna-colour-contrast-demo__block">
43
+ Blocks
44
+ </div>
45
+ ${blocks.reduce(
46
+ (blockOutput, block) =>
47
+ `${blockOutput}<div class="tna-colour-contrast-demo__block">
48
+ ${block.replace(/^tna-background-/, "") || "Base"}
49
+ </div>`,
50
+ "",
51
+ )}
52
+ </div>
53
+ <div class="tna-colour-contrast-demo__examples">
54
+ ${themes.reduce(
55
+ (themeOutput, theme) =>
56
+ `${themeOutput}${accents.reduce(
57
+ (
58
+ accentOutput,
59
+ accent,
60
+ ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
61
+ <div class="tna-colour-contrast-demo__example">
62
+ <p>Theme: <strong>${theme
63
+ .replace(/tna-template--/g, "")
64
+ .replace(/-theme/g, "")}</strong></p>
65
+ <p>Accent: <strong>${
66
+ accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
67
+ "[none]"
68
+ }</strong></p>
69
+ </div>
70
+ ${blocks.reduce(
71
+ (blockOutput, block) =>
72
+ `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
73
+ <div class="tna-template__body">
74
+ <div class="tna-colour-contrast-demo__example-content ${block}">
75
+ <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
76
+ <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
77
+ <ul class="tna-chip-list">
78
+ <li class="tna-chip-list__item">
79
+ <span class="tna-chip">Chip</span>
80
+ </li>
81
+ <li class="tna-chip-list__item">
82
+ <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
83
+ </li>
84
+ <li class="tna-chip-list__item">
85
+ <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
86
+ </li>
87
+ </ul>
88
+ ${TextInput({
89
+ params: {
90
+ id: `name-${theme}-${block}-${accent}`,
91
+ name: `name-${theme}-${block}-${accent}`,
92
+ value: `name-${theme}-${block}-${accent}`,
93
+ },
94
+ })}
95
+ ${Checkboxes({
96
+ params: {
97
+ id: `categories-${theme}-${block}-${accent}`,
98
+ name: `categories-${theme}-${block}-${accent}`,
99
+ items: [
100
+ {
101
+ text: "Alpha",
102
+ value: "alpha",
103
+ },
104
+ {
105
+ text: "Beta",
106
+ value: "beta",
107
+ checked: true,
108
+ },
109
+ ],
110
+ small: true,
111
+ inline: true,
112
+ },
113
+ })}
114
+ ${Radios({
115
+ params: {
116
+ id: `type-${theme}-${block}-${accent}`,
117
+ name: `type-${theme}-${block}-${accent}`,
118
+ items: [
119
+ {
120
+ text: "Alpha",
121
+ value: "alpha",
122
+ },
123
+ {
124
+ text: "Beta",
125
+ value: "beta",
126
+ },
127
+ ],
128
+ selected: "beta",
129
+ small: true,
130
+ inline: true,
131
+ },
132
+ })}
133
+ ${Select({
134
+ params: {
135
+ id: `sort-${theme}-${block}-${accent}`,
136
+ name: `sort-${theme}-${block}-${accent}`,
137
+ items: [
138
+ {
139
+ text: "Relevance",
140
+ value: "relevance",
141
+ },
142
+ {
143
+ text: "Date",
144
+ value: "date",
145
+ },
146
+ {
147
+ text: "Title",
148
+ value: "title",
149
+ },
150
+ ],
151
+ },
152
+ })}
153
+ <div class="tna-button-group">
154
+ ${Button({
155
+ params: {
156
+ text: "Button",
157
+ small: true,
158
+ },
159
+ })}
160
+ ${Button({
161
+ params: {
162
+ text: "Button",
163
+ small: true,
164
+ accent: true,
165
+ },
166
+ })}
167
+ ${Button({
168
+ params: {
169
+ text: "Button",
170
+ small: true,
171
+ plain: true,
172
+ },
173
+ })}
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>`,
178
+ "",
179
+ )}
180
+ </div>`,
181
+ "",
182
+ )}`,
183
+ "",
184
+ )}
185
+ </div>
186
+ </div>`;
187
+ };
188
+
189
+ export const Combinations = Template.bind({});
190
+ Combinations.parameters = {
191
+ a11y: {
192
+ disable: true,
193
+ },
194
+ };
195
+ Combinations.args = {};
@@ -15,6 +15,7 @@ import Pagination from "../../../components/pagination/template.njk";
15
15
  import PhaseBanner from "../../../components/phase-banner/template.njk";
16
16
  import Picture from "../../../components/picture/template.njk";
17
17
  import Radios from "../../../components/radios/template.njk";
18
+ import SearchField from "../../../components/search-field/template.njk";
18
19
  import Select from "../../../components/select/template.njk";
19
20
  import Tabs from "../../../components/tabs/template.njk";
20
21
  import TextInput from "../../../components/text-input/template.njk";
@@ -38,7 +39,7 @@ const argTypes = {
38
39
  };
39
40
 
40
41
  export default {
41
- title: "Utilities/Colour schemes",
42
+ title: "Utilities/Colours/Themes",
42
43
  argTypes,
43
44
  };
44
45
 
@@ -1060,6 +1061,16 @@ const Template = ({ theme, accent }) => {
1060
1061
  <h2 class="tna-heading tna-heading--l">
1061
1062
  Forms
1062
1063
  </h2>
1064
+ ${SearchField({
1065
+ params: {
1066
+ label: "Catalogue search results",
1067
+ headingLevel: 3,
1068
+ headingSize: "l",
1069
+ id: "search1",
1070
+ name: "q",
1071
+ formGroupClasses: "tna-search-field--no-border",
1072
+ },
1073
+ })}
1063
1074
  ${TextInput({
1064
1075
  params: {
1065
1076
  label: "Enter your name",
@@ -1352,124 +1363,3 @@ DarkHighContrast.args = {
1352
1363
  theme: "dark high-contrast",
1353
1364
  accent: "pink",
1354
1365
  };
1355
-
1356
- const CombinationsTemplate = () => {
1357
- const themes = [
1358
- "tna-template--light-theme",
1359
- "tna-template--light-theme tna-template--high-contrast-theme",
1360
- "tna-template--dark-theme",
1361
- "tna-template--dark-theme tna-template--high-contrast-theme",
1362
- ];
1363
-
1364
- const accents = [
1365
- "",
1366
- // "tna-template--black-accent",
1367
- "tna-template--yellow-accent",
1368
- "tna-template--pink-accent",
1369
- "tna-template--orange-accent",
1370
- "tna-template--green-accent",
1371
- "tna-template--blue-accent",
1372
- ];
1373
-
1374
- const blocks = [
1375
- "",
1376
- "tna-background-tint",
1377
- "tna-background-accent-light",
1378
- "tna-background-accent",
1379
- "tna-background-contrast",
1380
- ];
1381
-
1382
- return `<div class="tna-colour-contrast-demo">
1383
- <div class="tna-colour-contrast-demo__header">
1384
- <div class="tna-colour-contrast-demo__block">
1385
- Blocks
1386
- </div>
1387
- ${blocks.reduce(
1388
- (blockOutput, block) =>
1389
- `${blockOutput}<div class="tna-colour-contrast-demo__block">
1390
- ${block.replace(/^tna-background-/, "") || "Base"}
1391
- </div>`,
1392
- "",
1393
- )}
1394
- </div>
1395
- <div class="tna-colour-contrast-demo__examples">
1396
- ${themes.reduce(
1397
- (themeOutput, theme) =>
1398
- `${themeOutput}${accents.reduce(
1399
- (
1400
- accentOutput,
1401
- accent,
1402
- ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
1403
- <div class="tna-colour-contrast-demo__example">
1404
- <p>Theme: <strong>${theme
1405
- .replace(/tna-template--/g, "")
1406
- .replace(/-theme/g, "")}</strong></p>
1407
- <p>Accent: <strong>${
1408
- accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
1409
- "[none]"
1410
- }</strong></p>
1411
- </div>
1412
- ${blocks.reduce(
1413
- (blockOutput, block) =>
1414
- `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
1415
- <div class="tna-template__body">
1416
- <div class="tna-colour-contrast-demo__example-content ${block}">
1417
- <p><strong>Text / <span class="dark-text">Dark</span> / <span class="light-text">Light</span></strong> / <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-heart light-icon"></i></p>
1418
- <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
1419
- <!--
1420
- <span class="tna-chip">Chip</span>
1421
- <a href="#" class="tna-chip">Chip</a>
1422
- <a href="#" class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</a>
1423
- <a href="#" class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</a>
1424
- <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
1425
- <span class="tna-chip tna-chip--plain">Chip</span>
1426
- -->
1427
- <ul class="tna-chip-list">
1428
- <li class="tna-chip-list__item">
1429
- <span class="tna-chip">Chip</span>
1430
- </li>
1431
- <li class="tna-chip-list__item">
1432
- <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
1433
- </li>
1434
- <li class="tna-chip-list__item">
1435
- <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
1436
- </li>
1437
- </ul>
1438
- <div class="tna-button-group">
1439
- ${Button({
1440
- params: {
1441
- text: "Button",
1442
- small: true,
1443
- },
1444
- })}
1445
- ${Button({
1446
- params: {
1447
- text: "Button",
1448
- small: true,
1449
- accent: true,
1450
- },
1451
- })}
1452
- ${Button({
1453
- params: {
1454
- text: "Button",
1455
- small: true,
1456
- plain: true,
1457
- },
1458
- })}
1459
- </div>
1460
- </div>
1461
- </div>
1462
- </div>`,
1463
- "",
1464
- )}
1465
- </div>`,
1466
- "",
1467
- )}`,
1468
- "",
1469
- )}
1470
- </div>
1471
- </div>`;
1472
- };
1473
-
1474
- export const Combinations = CombinationsTemplate.bind({});
1475
- Combinations.args = {};
@@ -190,6 +190,22 @@
190
190
  @extend %plain;
191
191
  }
192
192
 
193
+ @mixin light {
194
+ @include colour-css-vars;
195
+
196
+ @media (prefers-contrast: more) {
197
+ @include colour-css-vars-high-contrast;
198
+ }
199
+ }
200
+
201
+ @mixin dark {
202
+ @include colour-css-vars-dark;
203
+
204
+ @media (prefers-contrast: more) {
205
+ @include colour-css-vars-high-contrast-dark;
206
+ }
207
+ }
208
+
193
209
  %contrast {
194
210
  --background: var(--contrast-background);
195
211
  --font-base: var(--contrast-font-base);
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.1.31",
3
+ "version": "0.1.32",
4
4
  "description": "The National Archives frontend styles",
5
5
  "scripts": {
6
6
  "start": "storybook dev -p 6006",
7
7
  "build": "storybook build -o storybook --webpack-stats-json",
8
- "test": "node tasks/test-fixtures.js && jest && test-storybook",
8
+ "test": "node tasks/test-fixtures.js && jest && test-storybook --maxWorkers=1",
9
9
  "lint": "prettier --check '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.{js,mjs}'",
10
10
  "lint:fix": "prettier --write '{src,.storybook,tasks,.}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.{js,mjs}'",
11
11
  "package:sass": "sass --style=compressed --embed-sources src/nationalarchives:package/nationalarchives",
@@ -38,23 +38,23 @@
38
38
  "devDependencies": {
39
39
  "@babel/core": "^7.23.2",
40
40
  "@babel/preset-env": "^7.23.2",
41
- "@chromaui/addon-visual-tests": "^0.0.119",
41
+ "@chromaui/addon-visual-tests": "^0.0.124",
42
42
  "@mdx-js/react": "^3.0.0",
43
- "@storybook/addon-a11y": "^7.5.3",
44
- "@storybook/addon-docs": "^7.5.3",
45
- "@storybook/addon-essentials": "^7.5.3",
46
- "@storybook/addon-interactions": "^7.5.3",
47
- "@storybook/addon-links": "^7.5.3",
48
- "@storybook/addon-mdx-gfm": "^7.5.3",
49
- "@storybook/html": "^7.5.3",
50
- "@storybook/html-webpack5": "^7.5.3",
43
+ "@storybook/addon-a11y": "^7.6.4",
44
+ "@storybook/addon-docs": "^7.6.4",
45
+ "@storybook/addon-essentials": "^7.6.4",
46
+ "@storybook/addon-interactions": "^7.6.4",
47
+ "@storybook/addon-links": "^7.6.4",
48
+ "@storybook/addon-mdx-gfm": "^7.6.4",
49
+ "@storybook/html": "^7.6.4",
50
+ "@storybook/html-webpack5": "^7.6.4",
51
51
  "@storybook/jest": "^0.2.3",
52
- "@storybook/test-runner": "^0.15.2",
52
+ "@storybook/test-runner": "^0.16.0",
53
53
  "@storybook/testing-library": "^0.2.2",
54
54
  "axe-playwright": "^1.2.3",
55
55
  "babel-jest": "^29.7.0",
56
56
  "babel-loader": "^9.0.1",
57
- "chromatic": "^9.1.0",
57
+ "chromatic": "^10.1.0",
58
58
  "copy-webpack-plugin": "^11.0.0",
59
59
  "css-loader": "^6.7.1",
60
60
  "diff": "^5.1.0",
@@ -72,10 +72,10 @@
72
72
  "sass": "^1.69.4",
73
73
  "sass-loader": "^13.0.2",
74
74
  "simple-nunjucks-loader": "^3.2.0",
75
- "storybook": "^7.5.3",
75
+ "storybook": "^7.6.4",
76
76
  "style-loader": "^3.3.1",
77
- "stylelint": "^15.11.0",
78
- "stylelint-config-standard-scss": "^11.0.0",
77
+ "stylelint": "^16.0.2",
78
+ "stylelint-config-standard-scss": "^12.0.0",
79
79
  "stylelint-selector-bem-pattern": "^3.0.0",
80
80
  "webpack": "^5.89.0",
81
81
  "webpack-cli": "^5.1.4"
@@ -1,107 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/blocks";
2
- import * as ColourStories from './colour-schemes.stories';
3
-
4
- <Meta of={ColourStories} />
5
-
6
- # Colour schemes
7
-
8
- ## System theme
9
-
10
- The system theme follows the operating system preference for `prefers-color-scheme` which can either be `light` or `dark`.
11
-
12
- The system theme also follows the preference for `prefers-contrast` which can be `no-preference`, `more`, `less` or `custom`.
13
-
14
- At this time, only `prefers-contrast: no-preference` and `prefers-contrast: more` are supported.
15
-
16
- - [MDN Web Docs - prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
17
- - [MDN Web Docs - prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast)
18
-
19
- ```html
20
- <html class="tna-template tna-template--system-theme">
21
- <head>
22
- <title>System theme</title>
23
- </head>
24
- <body class="tna-template__body">
25
- </body>
26
- </html>
27
- ```
28
-
29
- ## Light theme
30
-
31
- ```html
32
- <html class="tna-template tna-template--light-theme">
33
- <head>
34
- <title>Light theme</title>
35
- </head>
36
- <body class="tna-template__body">
37
- </body>
38
- </html>
39
- ```
40
-
41
- ## Dark theme
42
-
43
- ```html
44
- <html class="tna-template tna-template--dark-theme">
45
- <head>
46
- <title>Dark theme</title>
47
- </head>
48
- <body class="tna-template__body">
49
- </body>
50
- </html>
51
- ```
52
-
53
- ## High contrast themes
54
-
55
- The high contrast themes are applied on top of the existing light and dark themes with an extra `tna-template--high-contrast-theme` class on the `tna-template` element.
56
-
57
- ### Light, high contrast theme
58
-
59
- ```html
60
- <html class="tna-template tna-template--light-theme tna-template--high-contrast-theme">
61
- <head>
62
- <title>Light, high contrast theme</title>
63
- </head>
64
- <body class="tna-template__body">
65
- </body>
66
- </html>
67
- ```
68
-
69
- ### Dark, high contrast theme
70
-
71
- ```html
72
- <html class="tna-template tna-template--dark-theme tna-template--high-contrast-theme">
73
- <head>
74
- <title>Dark, high contrast theme</title>
75
- </head>
76
- <body class="tna-template__body">
77
- </body>
78
- </html>
79
- ```
80
-
81
- ## Colour definitions
82
-
83
- The colours are defined in `src/nationalarchives/variables/_colour.scss` as a separate map for each theme.
84
-
85
- This allows you to reference a colour, such as `font-base` without having to worry about which theme is currently in use.
86
-
87
- ## Accent colours
88
-
89
- To add accent colours to the page, add one of the following classes to the `<html>` element:
90
-
91
- - `tna-template--yellow-accent`
92
- - `tna-template--pink-accent`
93
- - `tna-template--orange-accent`
94
- - `tna-template--green-accent`
95
- - `tna-template--blue-accent`
96
-
97
- ```html
98
- <html class="tna-template tna-template--system-theme tna-template--yellow-accent">
99
- <head>
100
- <title>System theme with yellow accents</title>
101
- </head>
102
- <body class="tna-template__body">
103
- </body>
104
- </html>
105
- ```
106
-
107
-
@@ -1,18 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/blocks";
2
- import * as ListStories from './lists.stories';
3
-
4
- <Meta of={ListStories} />
5
-
6
- # Lists
7
-
8
- <Canvas of={ListStories.UnorderedList} />
9
- <Canvas of={ListStories.OrderedList} />
10
- <Canvas of={ListStories.DescriptionList} />
11
- <Canvas of={ListStories.DescriptionListWithIcons} />
12
-
13
- ## Plain versions
14
-
15
- <Canvas of={ListStories.UnorderedListPlain} />
16
- <Canvas of={ListStories.OrderedListPlain} />
17
- <Canvas of={ListStories.PlainDescriptionList} />
18
- <Canvas of={ListStories.PlainDescriptionListWithIcons} />
@@ -1,8 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/blocks";
2
- import * as TableStories from './tables.stories';
3
-
4
- <Meta of={TableStories} />
5
-
6
- # Tables
7
-
8
- <Canvas of={TableStories.Table} />
@@ -1,27 +0,0 @@
1
- import { Meta, Canvas } from "@storybook/blocks";
2
- import * as HeadingStories from './headings.stories';
3
- import * as HeadingGroupStories from './heading-groups.stories';
4
- import * as TypographyStories from './typography.stories';
5
-
6
- <Meta of={TypographyStories} />
7
-
8
- # Typography
9
-
10
- ## Headings
11
-
12
- <Canvas of={HeadingStories.Headings} />
13
- <Canvas of={TypographyStories.HeadingLink} />
14
-
15
- ## Heading groups
16
-
17
- <Canvas of={HeadingGroupStories.HeadingGroup} />
18
- <Canvas of={HeadingGroupStories.HeadingGroupSingleSentence} />
19
- <Canvas of={HeadingGroupStories.HeadingGroupPlainSupertitle} />
20
-
21
- ## General typography
22
-
23
- <Canvas of={TypographyStories.Paragraph} />
24
- <Canvas of={TypographyStories.LargeParagraph} />
25
- <Canvas of={TypographyStories.SceneSetter} />
26
- <Canvas of={TypographyStories.SceneSetterSmall} />
27
- <Canvas of={TypographyStories.Blockquote} />