@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.
- package/nationalarchives/all.css +1 -1
- package/nationalarchives/all.css.map +1 -1
- package/nationalarchives/all.js +1 -1
- package/nationalarchives/all.js.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.scss +2 -0
- package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
- package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
- package/nationalarchives/components/date-input/date-input.css +1 -1
- package/nationalarchives/components/date-input/date-input.css.map +1 -1
- package/nationalarchives/components/date-input/date-input.scss +1 -0
- package/nationalarchives/components/date-search/date-search.css +1 -1
- package/nationalarchives/components/date-search/date-search.css.map +1 -1
- package/nationalarchives/components/date-search/date-search.scss +1 -0
- package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/filters/filters.css.map +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.js +1 -1
- package/nationalarchives/components/gallery/gallery.js.map +1 -1
- package/nationalarchives/components/grid/grid.css.map +1 -1
- package/nationalarchives/components/header/header.css.map +1 -1
- package/nationalarchives/components/header/header.js +1 -1
- package/nationalarchives/components/header/header.js.map +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/message/message.css.map +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/picture/picture.js +1 -1
- package/nationalarchives/components/picture/picture.js.map +1 -1
- package/nationalarchives/components/radios/radios.css +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/radios/radios.scss +5 -3
- package/nationalarchives/components/search-field/search-field.css +1 -1
- package/nationalarchives/components/search-field/search-field.css.map +1 -1
- package/nationalarchives/components/search-field/search-field.scss +17 -4
- package/nationalarchives/components/select/select.css +1 -1
- package/nationalarchives/components/select/select.css.map +1 -1
- package/nationalarchives/components/select/select.scss +1 -0
- package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
- package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
- package/nationalarchives/components/skip-link/skip-link.js +1 -1
- package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
- package/nationalarchives/components/tabs/tabs.css.map +1 -1
- package/nationalarchives/components/tabs/tabs.js +1 -1
- package/nationalarchives/components/tabs/tabs.js.map +1 -1
- package/nationalarchives/components/text-input/text-input.css +1 -1
- package/nationalarchives/components/text-input/text-input.css.map +1 -1
- package/nationalarchives/components/text-input/text-input.scss +1 -0
- package/nationalarchives/components/textarea/textarea.css +1 -1
- package/nationalarchives/components/textarea/textarea.css.map +1 -1
- package/nationalarchives/components/textarea/textarea.scss +1 -0
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +195 -0
- package/nationalarchives/stories/utilities/colour-schemes/{colour-schemes.stories.js → colour-themes.stories.js} +12 -122
- package/nationalarchives/tools/_colour.scss +16 -0
- package/package.json +16 -16
- package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.mdx +0 -107
- package/nationalarchives/stories/utilities/lists/lists.mdx +0 -18
- package/nationalarchives/stories/utilities/tables/tables.mdx +0 -8
- 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/
|
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.
|
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.
|
41
|
+
"@chromaui/addon-visual-tests": "^0.0.124",
|
42
42
|
"@mdx-js/react": "^3.0.0",
|
43
|
-
"@storybook/addon-a11y": "^7.
|
44
|
-
"@storybook/addon-docs": "^7.
|
45
|
-
"@storybook/addon-essentials": "^7.
|
46
|
-
"@storybook/addon-interactions": "^7.
|
47
|
-
"@storybook/addon-links": "^7.
|
48
|
-
"@storybook/addon-mdx-gfm": "^7.
|
49
|
-
"@storybook/html": "^7.
|
50
|
-
"@storybook/html-webpack5": "^7.
|
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.
|
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": "^
|
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.
|
75
|
+
"storybook": "^7.6.4",
|
76
76
|
"style-loader": "^3.3.1",
|
77
|
-
"stylelint": "^
|
78
|
-
"stylelint-config-standard-scss": "^
|
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,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} />
|