@nationalarchives/frontend 0.1.30 → 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 (115) 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/assets/images/tna-square-logo.svg +3 -1
  6. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  7. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  8. package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
  9. package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
  10. package/nationalarchives/components/button/button.css +1 -1
  11. package/nationalarchives/components/button/button.css.map +1 -1
  12. package/nationalarchives/components/button/template.njk +4 -4
  13. package/nationalarchives/components/card/card.css +1 -1
  14. package/nationalarchives/components/card/card.css.map +1 -1
  15. package/nationalarchives/components/card/template.njk +2 -2
  16. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  17. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  18. package/nationalarchives/components/checkboxes/checkboxes.scss +2 -0
  19. package/nationalarchives/components/cookie-banner/README.md +77 -0
  20. package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
  21. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  22. package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
  23. package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
  24. package/nationalarchives/components/cookie-banner/cookie-banner.mjs +3 -1
  25. package/nationalarchives/components/cookie-banner/fixtures.json +10 -10
  26. package/nationalarchives/components/cookie-banner/template.njk +3 -2
  27. package/nationalarchives/components/date-input/date-input.css +1 -1
  28. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  29. package/nationalarchives/components/date-input/date-input.scss +1 -0
  30. package/nationalarchives/components/date-search/date-search.css +1 -1
  31. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  32. package/nationalarchives/components/date-search/date-search.scss +1 -0
  33. package/nationalarchives/components/featured-records/featured-records.css +1 -1
  34. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  35. package/nationalarchives/components/filters/filters.css +1 -1
  36. package/nationalarchives/components/filters/filters.css.map +1 -1
  37. package/nationalarchives/components/footer/fixtures.json +1 -1
  38. package/nationalarchives/components/footer/footer.css +1 -1
  39. package/nationalarchives/components/footer/footer.css.map +1 -1
  40. package/nationalarchives/components/gallery/gallery.css +1 -1
  41. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  42. package/nationalarchives/components/gallery/gallery.js +1 -1
  43. package/nationalarchives/components/gallery/gallery.js.map +1 -1
  44. package/nationalarchives/components/grid/grid.css +1 -1
  45. package/nationalarchives/components/grid/grid.css.map +1 -1
  46. package/nationalarchives/components/header/header.css +1 -1
  47. package/nationalarchives/components/header/header.css.map +1 -1
  48. package/nationalarchives/components/header/header.js +1 -1
  49. package/nationalarchives/components/header/header.js.map +1 -1
  50. package/nationalarchives/components/hero/fixtures.json +8 -8
  51. package/nationalarchives/components/hero/hero.css +1 -1
  52. package/nationalarchives/components/hero/hero.css.map +1 -1
  53. package/nationalarchives/components/hero/hero.scss +1 -1
  54. package/nationalarchives/components/hero/template.njk +2 -4
  55. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  56. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  57. package/nationalarchives/components/message/fixtures.json +1 -1
  58. package/nationalarchives/components/message/message.css +1 -1
  59. package/nationalarchives/components/message/message.css.map +1 -1
  60. package/nationalarchives/components/message/template.njk +2 -2
  61. package/nationalarchives/components/pagination/fixtures.json +1 -1
  62. package/nationalarchives/components/pagination/pagination.css +1 -1
  63. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  64. package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
  65. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  66. package/nationalarchives/components/picture/fixtures.json +74 -4
  67. package/nationalarchives/components/picture/macro-options.json +30 -4
  68. package/nationalarchives/components/picture/picture.css +1 -1
  69. package/nationalarchives/components/picture/picture.css.map +1 -1
  70. package/nationalarchives/components/picture/picture.js +1 -1
  71. package/nationalarchives/components/picture/picture.js.map +1 -1
  72. package/nationalarchives/components/picture/picture.mjs +10 -4
  73. package/nationalarchives/components/picture/picture.scss +32 -3
  74. package/nationalarchives/components/picture/picture.stories.js +21 -8
  75. package/nationalarchives/components/picture/template.njk +6 -19
  76. package/nationalarchives/components/radios/radios.css +1 -1
  77. package/nationalarchives/components/radios/radios.css.map +1 -1
  78. package/nationalarchives/components/radios/radios.scss +5 -3
  79. package/nationalarchives/components/search-field/fixtures.json +3 -3
  80. package/nationalarchives/components/search-field/search-field.css +1 -1
  81. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  82. package/nationalarchives/components/search-field/search-field.scss +17 -4
  83. package/nationalarchives/components/search-field/template.njk +0 -2
  84. package/nationalarchives/components/select/select.css +1 -1
  85. package/nationalarchives/components/select/select.css.map +1 -1
  86. package/nationalarchives/components/select/select.scss +1 -0
  87. package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
  88. package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
  89. package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
  90. package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
  91. package/nationalarchives/components/skip-link/skip-link.css +1 -1
  92. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  93. package/nationalarchives/components/skip-link/skip-link.js +1 -1
  94. package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
  95. package/nationalarchives/components/tabs/tabs.css +1 -1
  96. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  97. package/nationalarchives/components/tabs/tabs.js +1 -1
  98. package/nationalarchives/components/tabs/tabs.js.map +1 -1
  99. package/nationalarchives/components/text-input/text-input.css +1 -1
  100. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  101. package/nationalarchives/components/text-input/text-input.scss +1 -0
  102. package/nationalarchives/components/textarea/textarea.css +1 -1
  103. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  104. package/nationalarchives/components/textarea/textarea.scss +1 -0
  105. package/nationalarchives/prototype-kit.css +1 -1
  106. package/nationalarchives/prototype-kit.css.map +1 -1
  107. package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +195 -0
  108. package/nationalarchives/stories/utilities/colour-schemes/{colour-schemes.stories.js → colour-themes.stories.js} +24 -124
  109. package/nationalarchives/tools/_colour.scss +16 -0
  110. package/nationalarchives/utilities/_typography.scss +7 -10
  111. package/package.json +16 -20
  112. package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.mdx +0 -107
  113. package/nationalarchives/stories/utilities/lists/lists.mdx +0 -18
  114. package/nationalarchives/stories/utilities/tables/tables.mdx +0 -8
  115. 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
 
@@ -558,8 +559,18 @@ const Template = ({ theme, accent }) => {
558
559
  width: 499,
559
560
  height: 333,
560
561
  caption: "<p>This is a pretty image</p>",
561
- transcript: "<p>Lorem ipsum transcript</p>",
562
- translation: "<p>Lorem ipsum translation</p>",
562
+ information: [
563
+ {
564
+ id: "transcript",
565
+ title: "Transcript",
566
+ body: "<p>Lorem ipsum transcript</p>",
567
+ },
568
+ {
569
+ id: "translation",
570
+ title: "Translation",
571
+ body: "<p>Lorem ipsum translation</p>",
572
+ },
573
+ ],
563
574
  classes: "tna-picture--demo",
564
575
  },
565
576
  })}
@@ -1050,6 +1061,16 @@ const Template = ({ theme, accent }) => {
1050
1061
  <h2 class="tna-heading tna-heading--l">
1051
1062
  Forms
1052
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
+ })}
1053
1074
  ${TextInput({
1054
1075
  params: {
1055
1076
  label: "Enter your name",
@@ -1342,124 +1363,3 @@ DarkHighContrast.args = {
1342
1363
  theme: "dark high-contrast",
1343
1364
  accent: "pink",
1344
1365
  };
1345
-
1346
- const CombinationsTemplate = () => {
1347
- const themes = [
1348
- "tna-template--light-theme",
1349
- "tna-template--light-theme tna-template--high-contrast-theme",
1350
- "tna-template--dark-theme",
1351
- "tna-template--dark-theme tna-template--high-contrast-theme",
1352
- ];
1353
-
1354
- const accents = [
1355
- "",
1356
- // "tna-template--black-accent",
1357
- "tna-template--yellow-accent",
1358
- "tna-template--pink-accent",
1359
- "tna-template--orange-accent",
1360
- "tna-template--green-accent",
1361
- "tna-template--blue-accent",
1362
- ];
1363
-
1364
- const blocks = [
1365
- "",
1366
- "tna-background-tint",
1367
- "tna-background-accent-light",
1368
- "tna-background-accent",
1369
- "tna-background-contrast",
1370
- ];
1371
-
1372
- return `<div class="tna-colour-contrast-demo">
1373
- <div class="tna-colour-contrast-demo__header">
1374
- <div class="tna-colour-contrast-demo__block">
1375
- Blocks
1376
- </div>
1377
- ${blocks.reduce(
1378
- (blockOutput, block) =>
1379
- `${blockOutput}<div class="tna-colour-contrast-demo__block">
1380
- ${block.replace(/^tna-background-/, "") || "Base"}
1381
- </div>`,
1382
- "",
1383
- )}
1384
- </div>
1385
- <div class="tna-colour-contrast-demo__examples">
1386
- ${themes.reduce(
1387
- (themeOutput, theme) =>
1388
- `${themeOutput}${accents.reduce(
1389
- (
1390
- accentOutput,
1391
- accent,
1392
- ) => `${accentOutput}<div class="tna-colour-contrast-demo__theme-accent">
1393
- <div class="tna-colour-contrast-demo__example">
1394
- <p>Theme: <strong>${theme
1395
- .replace(/tna-template--/g, "")
1396
- .replace(/-theme/g, "")}</strong></p>
1397
- <p>Accent: <strong>${
1398
- accent.replace(/tna-template--/g, "").replace(/-accent/g, "") ||
1399
- "[none]"
1400
- }</strong></p>
1401
- </div>
1402
- ${blocks.reduce(
1403
- (blockOutput, block) =>
1404
- `${blockOutput}<div class="tna-colour-contrast-demo__example tna-template ${theme} ${accent}">
1405
- <div class="tna-template__body">
1406
- <div class="tna-colour-contrast-demo__example-content ${block}">
1407
- <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>
1408
- <p><a href="#"><strong>Link</strong></a> / <a href="#" class="tna-colour-contrast-demo__link--visited"><strong>Link (visited)</strong></a></p>
1409
- <!--
1410
- <span class="tna-chip">Chip</span>
1411
- <a href="#" class="tna-chip">Chip</a>
1412
- <a href="#" class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</a>
1413
- <a href="#" class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</a>
1414
- <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
1415
- <span class="tna-chip tna-chip--plain">Chip</span>
1416
- -->
1417
- <ul class="tna-chip-list">
1418
- <li class="tna-chip-list__item">
1419
- <span class="tna-chip">Chip</span>
1420
- </li>
1421
- <li class="tna-chip-list__item">
1422
- <span class="tna-chip"><i class="fa-solid fa-heart"></i>Chip</span>
1423
- </li>
1424
- <li class="tna-chip-list__item">
1425
- <span class="tna-chip tna-chip--plain"><i class="fa-solid fa-heart"></i>Chip</span>
1426
- </li>
1427
- </ul>
1428
- <div class="tna-button-group">
1429
- ${Button({
1430
- params: {
1431
- text: "Button",
1432
- small: true,
1433
- },
1434
- })}
1435
- ${Button({
1436
- params: {
1437
- text: "Button",
1438
- small: true,
1439
- accent: true,
1440
- },
1441
- })}
1442
- ${Button({
1443
- params: {
1444
- text: "Button",
1445
- small: true,
1446
- plain: true,
1447
- },
1448
- })}
1449
- </div>
1450
- </div>
1451
- </div>
1452
- </div>`,
1453
- "",
1454
- )}
1455
- </div>`,
1456
- "",
1457
- )}`,
1458
- "",
1459
- )}
1460
- </div>
1461
- </div>`;
1462
- };
1463
-
1464
- export const Combinations = CombinationsTemplate.bind({});
1465
- 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);
@@ -41,7 +41,6 @@
41
41
  // font-display: swap;
42
42
  }
43
43
  } @else {
44
- // @import "https://use.typekit.net/hkj3kuz.css";
45
44
  @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@#{typographyVars.$main-font-weight};#{typographyVars.$main-font-weight-bold}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
46
45
  }
47
46
 
@@ -52,6 +51,7 @@
52
51
  -webkit-font-smoothing: antialiased;
53
52
  text-rendering: optimizeLegibility;
54
53
  -webkit-text-size-adjust: none;
54
+ text-size-adjust: none;
55
55
  direction: ltr;
56
56
  }
57
57
 
@@ -213,8 +213,7 @@ small {
213
213
  a {
214
214
  display: inline-block;
215
215
 
216
- text-wrap: balance;
217
- // text-decoration-thickness: .1em;
216
+ // text-wrap: balance;
218
217
 
219
218
  &::after {
220
219
  padding-left: 0.25rem;
@@ -226,13 +225,11 @@ small {
226
225
  content: "\203A";
227
226
  }
228
227
 
229
- &:hover {
230
- // text-decoration-thickness: .15em;
231
-
232
- &::after {
233
- padding-left: 0.5rem;
234
- }
235
- }
228
+ // &:hover {
229
+ // &::after {
230
+ // padding-left: 0.5rem;
231
+ // }
232
+ // }
236
233
  }
237
234
  }
238
235
  }
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.1.30",
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",
@@ -34,31 +34,27 @@
34
34
  "./nationalarchives/": "./nationalarchives/"
35
35
  },
36
36
  "sass": "nationalarchives/all.scss",
37
- "engines": {
38
- "npm": "9.x",
39
- "node": "18.x"
40
- },
41
37
  "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
42
38
  "devDependencies": {
43
39
  "@babel/core": "^7.23.2",
44
40
  "@babel/preset-env": "^7.23.2",
45
- "@chromaui/addon-visual-tests": "^0.0.119",
41
+ "@chromaui/addon-visual-tests": "^0.0.124",
46
42
  "@mdx-js/react": "^3.0.0",
47
- "@storybook/addon-a11y": "^7.5.3",
48
- "@storybook/addon-docs": "^7.5.3",
49
- "@storybook/addon-essentials": "^7.5.3",
50
- "@storybook/addon-interactions": "^7.5.3",
51
- "@storybook/addon-links": "^7.5.3",
52
- "@storybook/addon-mdx-gfm": "^7.5.3",
53
- "@storybook/html": "^7.5.3",
54
- "@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",
55
51
  "@storybook/jest": "^0.2.3",
56
- "@storybook/test-runner": "^0.15.2",
52
+ "@storybook/test-runner": "^0.16.0",
57
53
  "@storybook/testing-library": "^0.2.2",
58
54
  "axe-playwright": "^1.2.3",
59
55
  "babel-jest": "^29.7.0",
60
56
  "babel-loader": "^9.0.1",
61
- "chromatic": "^9.1.0",
57
+ "chromatic": "^10.1.0",
62
58
  "copy-webpack-plugin": "^11.0.0",
63
59
  "css-loader": "^6.7.1",
64
60
  "diff": "^5.1.0",
@@ -76,10 +72,10 @@
76
72
  "sass": "^1.69.4",
77
73
  "sass-loader": "^13.0.2",
78
74
  "simple-nunjucks-loader": "^3.2.0",
79
- "storybook": "^7.5.3",
75
+ "storybook": "^7.6.4",
80
76
  "style-loader": "^3.3.1",
81
- "stylelint": "^15.11.0",
82
- "stylelint-config-standard-scss": "^11.0.0",
77
+ "stylelint": "^16.0.2",
78
+ "stylelint-config-standard-scss": "^12.0.0",
83
79
  "stylelint-selector-bem-pattern": "^3.0.0",
84
80
  "webpack": "^5.89.0",
85
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} />