@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.
- 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/assets/images/tna-square-logo.svg +3 -1
- package/nationalarchives/components/breadcrumbs/breadcrumbs.css +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 +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/button/template.njk +4 -4
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/card/template.njk +2 -2
- 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/README.md +77 -0
- package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
- 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/cookie-banner/cookie-banner.mjs +3 -1
- package/nationalarchives/components/cookie-banner/fixtures.json +10 -10
- package/nationalarchives/components/cookie-banner/template.njk +3 -2
- 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 +1 -1
- package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
- package/nationalarchives/components/filters/filters.css +1 -1
- package/nationalarchives/components/filters/filters.css.map +1 -1
- package/nationalarchives/components/footer/fixtures.json +1 -1
- package/nationalarchives/components/footer/footer.css +1 -1
- package/nationalarchives/components/footer/footer.css.map +1 -1
- package/nationalarchives/components/gallery/gallery.css +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 +1 -1
- package/nationalarchives/components/grid/grid.css.map +1 -1
- package/nationalarchives/components/header/header.css +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/fixtures.json +8 -8
- package/nationalarchives/components/hero/hero.css +1 -1
- package/nationalarchives/components/hero/hero.css.map +1 -1
- package/nationalarchives/components/hero/hero.scss +1 -1
- package/nationalarchives/components/hero/template.njk +2 -4
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/message/fixtures.json +1 -1
- package/nationalarchives/components/message/message.css +1 -1
- package/nationalarchives/components/message/message.css.map +1 -1
- package/nationalarchives/components/message/template.njk +2 -2
- package/nationalarchives/components/pagination/fixtures.json +1 -1
- package/nationalarchives/components/pagination/pagination.css +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
- package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
- package/nationalarchives/components/picture/fixtures.json +74 -4
- package/nationalarchives/components/picture/macro-options.json +30 -4
- package/nationalarchives/components/picture/picture.css +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/picture/picture.mjs +10 -4
- package/nationalarchives/components/picture/picture.scss +32 -3
- package/nationalarchives/components/picture/picture.stories.js +21 -8
- package/nationalarchives/components/picture/template.njk +6 -19
- 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/fixtures.json +3 -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/search-field/template.njk +0 -2
- 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 +1 -1
- 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 +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 +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} +24 -124
- package/nationalarchives/tools/_colour.scss +16 -0
- package/nationalarchives/utilities/_typography.scss +7 -10
- package/package.json +16 -20
- 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
|
|
@@ -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
|
-
|
562
|
-
|
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
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
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.
|
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.
|
41
|
+
"@chromaui/addon-visual-tests": "^0.0.124",
|
46
42
|
"@mdx-js/react": "^3.0.0",
|
47
|
-
"@storybook/addon-a11y": "^7.
|
48
|
-
"@storybook/addon-docs": "^7.
|
49
|
-
"@storybook/addon-essentials": "^7.
|
50
|
-
"@storybook/addon-interactions": "^7.
|
51
|
-
"@storybook/addon-links": "^7.
|
52
|
-
"@storybook/addon-mdx-gfm": "^7.
|
53
|
-
"@storybook/html": "^7.
|
54
|
-
"@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",
|
55
51
|
"@storybook/jest": "^0.2.3",
|
56
|
-
"@storybook/test-runner": "^0.
|
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": "^
|
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.
|
75
|
+
"storybook": "^7.6.4",
|
80
76
|
"style-loader": "^3.3.1",
|
81
|
-
"stylelint": "^
|
82
|
-
"stylelint-config-standard-scss": "^
|
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,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} />
|