@nationalarchives/frontend 0.1.31 → 0.1.33

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 (116) hide show
  1. package/nationalarchives/all.css +11 -9
  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/all.scss +9 -7
  6. package/nationalarchives/assets/fonts/OpenSans-Italic.ttf +0 -0
  7. package/nationalarchives/components/breadcrumbs/breadcrumbs.css +1 -1
  8. package/nationalarchives/components/breadcrumbs/breadcrumbs.css.map +1 -1
  9. package/nationalarchives/components/breadcrumbs/breadcrumbs.js +1 -1
  10. package/nationalarchives/components/breadcrumbs/breadcrumbs.js.map +1 -1
  11. package/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js +1 -2
  12. package/nationalarchives/components/button/button.css +1 -1
  13. package/nationalarchives/components/button/button.css.map +1 -1
  14. package/nationalarchives/components/button/button.scss +17 -18
  15. package/nationalarchives/components/card/card.css +1 -1
  16. package/nationalarchives/components/card/card.css.map +1 -1
  17. package/nationalarchives/components/card/card.stories.js +7 -7
  18. package/nationalarchives/components/card/fixtures.json +2 -2
  19. package/nationalarchives/components/card/macro-options.json +1 -1
  20. package/nationalarchives/components/card/template.njk +1 -1
  21. package/nationalarchives/components/checkboxes/checkboxes.css +1 -1
  22. package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
  23. package/nationalarchives/components/checkboxes/checkboxes.scss +2 -0
  24. package/nationalarchives/components/cookie-banner/cookie-banner.css +1 -1
  25. package/nationalarchives/components/cookie-banner/cookie-banner.css.map +1 -1
  26. package/nationalarchives/components/cookie-banner/cookie-banner.js +1 -1
  27. package/nationalarchives/components/cookie-banner/cookie-banner.js.map +1 -1
  28. package/nationalarchives/components/cookie-banner/cookie-banner.scss +12 -2
  29. package/nationalarchives/components/cookie-banner/cookie-banner.stories.js +11 -2
  30. package/nationalarchives/components/cookie-banner/macro-options.json +6 -0
  31. package/nationalarchives/components/cookie-banner/template.njk +7 -0
  32. package/nationalarchives/components/date-input/date-input.css +1 -1
  33. package/nationalarchives/components/date-input/date-input.css.map +1 -1
  34. package/nationalarchives/components/date-input/date-input.scss +1 -0
  35. package/nationalarchives/components/date-search/date-search.css +1 -1
  36. package/nationalarchives/components/date-search/date-search.css.map +1 -1
  37. package/nationalarchives/components/date-search/date-search.scss +1 -0
  38. package/nationalarchives/components/featured-records/featured-records.css +1 -1
  39. package/nationalarchives/components/featured-records/featured-records.css.map +1 -1
  40. package/nationalarchives/components/filters/filters.css +1 -1
  41. package/nationalarchives/components/filters/filters.css.map +1 -1
  42. package/nationalarchives/components/footer/fixtures.json +2 -2
  43. package/nationalarchives/components/footer/footer.css +1 -1
  44. package/nationalarchives/components/footer/footer.css.map +1 -1
  45. package/nationalarchives/components/footer/template.njk +2 -2
  46. package/nationalarchives/components/gallery/gallery.css +1 -1
  47. package/nationalarchives/components/gallery/gallery.css.map +1 -1
  48. package/nationalarchives/components/gallery/gallery.js +1 -1
  49. package/nationalarchives/components/gallery/gallery.js.map +1 -1
  50. package/nationalarchives/components/grid/grid.css +1 -1
  51. package/nationalarchives/components/grid/grid.css.map +1 -1
  52. package/nationalarchives/components/header/header.css +1 -1
  53. package/nationalarchives/components/header/header.css.map +1 -1
  54. package/nationalarchives/components/header/header.js +1 -1
  55. package/nationalarchives/components/header/header.js.map +1 -1
  56. package/nationalarchives/components/header/header.stories.js +1 -2
  57. package/nationalarchives/components/header/template.njk +1 -1
  58. package/nationalarchives/components/hero/hero.css +1 -1
  59. package/nationalarchives/components/hero/hero.css.map +1 -1
  60. package/nationalarchives/components/hero/hero.stories.js +1 -2
  61. package/nationalarchives/components/index-grid/index-grid.css +1 -1
  62. package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
  63. package/nationalarchives/components/message/message.css +1 -1
  64. package/nationalarchives/components/message/message.css.map +1 -1
  65. package/nationalarchives/components/pagination/pagination.css +1 -1
  66. package/nationalarchives/components/pagination/pagination.css.map +1 -1
  67. package/nationalarchives/components/phase-banner/phase-banner.css +1 -1
  68. package/nationalarchives/components/phase-banner/phase-banner.css.map +1 -1
  69. package/nationalarchives/components/picture/picture.css +1 -1
  70. package/nationalarchives/components/picture/picture.css.map +1 -1
  71. package/nationalarchives/components/picture/picture.js +1 -1
  72. package/nationalarchives/components/picture/picture.js.map +1 -1
  73. package/nationalarchives/components/picture/picture.scss +15 -1
  74. package/nationalarchives/components/radios/radios.css +1 -1
  75. package/nationalarchives/components/radios/radios.css.map +1 -1
  76. package/nationalarchives/components/radios/radios.scss +5 -3
  77. package/nationalarchives/components/search-field/search-field.css +1 -1
  78. package/nationalarchives/components/search-field/search-field.css.map +1 -1
  79. package/nationalarchives/components/search-field/search-field.scss +17 -4
  80. package/nationalarchives/components/select/select.css +1 -1
  81. package/nationalarchives/components/select/select.css.map +1 -1
  82. package/nationalarchives/components/select/select.scss +2 -1
  83. package/nationalarchives/components/sensitive-image/sensitive-image.css +1 -1
  84. package/nationalarchives/components/sensitive-image/sensitive-image.css.map +1 -1
  85. package/nationalarchives/components/sensitive-image/sensitive-image.js +1 -1
  86. package/nationalarchives/components/sensitive-image/sensitive-image.js.map +1 -1
  87. package/nationalarchives/components/sensitive-image/sensitive-image.stories.js +1 -2
  88. package/nationalarchives/components/skip-link/skip-link.css +1 -1
  89. package/nationalarchives/components/skip-link/skip-link.css.map +1 -1
  90. package/nationalarchives/components/skip-link/skip-link.js +1 -1
  91. package/nationalarchives/components/skip-link/skip-link.js.map +1 -1
  92. package/nationalarchives/components/skip-link/skip-link.stories.js +1 -2
  93. package/nationalarchives/components/tabs/tabs.css +1 -1
  94. package/nationalarchives/components/tabs/tabs.css.map +1 -1
  95. package/nationalarchives/components/tabs/tabs.js +1 -1
  96. package/nationalarchives/components/tabs/tabs.js.map +1 -1
  97. package/nationalarchives/components/tabs/tabs.stories.js +1 -2
  98. package/nationalarchives/components/text-input/text-input.css +1 -1
  99. package/nationalarchives/components/text-input/text-input.css.map +1 -1
  100. package/nationalarchives/components/text-input/text-input.scss +1 -0
  101. package/nationalarchives/components/textarea/textarea.css +1 -1
  102. package/nationalarchives/components/textarea/textarea.css.map +1 -1
  103. package/nationalarchives/components/textarea/textarea.scss +1 -0
  104. package/nationalarchives/prototype-kit.css +11 -9
  105. package/nationalarchives/prototype-kit.css.map +1 -1
  106. package/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +197 -0
  107. package/nationalarchives/stories/utilities/colour-schemes/{colour-schemes.stories.js → colour-themes.stories.js} +14 -124
  108. package/nationalarchives/templates/layouts/_generic.njk +6 -1
  109. package/nationalarchives/tools/_colour.scss +16 -0
  110. package/nationalarchives/utilities/_typography.scss +15 -8
  111. package/nationalarchives/variables/_typography.scss +2 -1
  112. package/package.json +17 -18
  113. package/nationalarchives/stories/utilities/colour-schemes/colour-schemes.mdx +0 -107
  114. package/nationalarchives/stories/utilities/lists/lists.mdx +0 -18
  115. package/nationalarchives/stories/utilities/tables/tables.mdx +0 -8
  116. package/nationalarchives/stories/utilities/typography/typography.mdx +0 -27
@@ -0,0 +1,197 @@
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
+ label: "Input",
91
+ id: `name-${theme}-${block}-${accent}`,
92
+ name: `name-${theme}-${block}-${accent}`,
93
+ value: `Lorem ipsum`,
94
+ },
95
+ })}
96
+ ${Checkboxes({
97
+ params: {
98
+ id: `categories-${theme}-${block}-${accent}`,
99
+ name: `categories-${theme}-${block}-${accent}`,
100
+ items: [
101
+ {
102
+ text: "Alpha",
103
+ value: "alpha",
104
+ },
105
+ {
106
+ text: "Beta",
107
+ value: "beta",
108
+ checked: true,
109
+ },
110
+ ],
111
+ small: true,
112
+ inline: true,
113
+ },
114
+ })}
115
+ ${Radios({
116
+ params: {
117
+ id: `type-${theme}-${block}-${accent}`,
118
+ name: `type-${theme}-${block}-${accent}`,
119
+ items: [
120
+ {
121
+ text: "Alpha",
122
+ value: "alpha",
123
+ },
124
+ {
125
+ text: "Beta",
126
+ value: "beta",
127
+ },
128
+ ],
129
+ selected: "beta",
130
+ small: true,
131
+ inline: true,
132
+ },
133
+ })}
134
+ ${Select({
135
+ params: {
136
+ label: "Select",
137
+ id: `sort-${theme}-${block}-${accent}`,
138
+ name: `sort-${theme}-${block}-${accent}`,
139
+ items: [
140
+ {
141
+ text: "Relevance",
142
+ value: "relevance",
143
+ },
144
+ {
145
+ text: "Date",
146
+ value: "date",
147
+ },
148
+ {
149
+ text: "Title",
150
+ value: "title",
151
+ },
152
+ ],
153
+ },
154
+ })}
155
+ <div class="tna-button-group">
156
+ ${Button({
157
+ params: {
158
+ text: "Button",
159
+ small: true,
160
+ },
161
+ })}
162
+ ${Button({
163
+ params: {
164
+ text: "Button",
165
+ small: true,
166
+ accent: true,
167
+ },
168
+ })}
169
+ ${Button({
170
+ params: {
171
+ text: "Button",
172
+ small: true,
173
+ plain: true,
174
+ },
175
+ })}
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>`,
180
+ "",
181
+ )}
182
+ </div>`,
183
+ "",
184
+ )}`,
185
+ "",
186
+ )}
187
+ </div>
188
+ </div>`;
189
+ };
190
+
191
+ export const Combinations = Template.bind({});
192
+ Combinations.parameters = {
193
+ a11y: {
194
+ disable: true,
195
+ },
196
+ };
197
+ 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
 
@@ -471,7 +472,7 @@ const Template = ({ theme, accent }) => {
471
472
  ${Card({
472
473
  params: {
473
474
  ...cardDefaultOptions,
474
- style: "boxed",
475
+ style: "contrast",
475
476
  classes: "tna-!--margin-bottom-m",
476
477
  },
477
478
  })}
@@ -504,7 +505,7 @@ const Template = ({ theme, accent }) => {
504
505
  params: {
505
506
  ...cardDefaultOptions,
506
507
  horizontal: true,
507
- style: "boxed",
508
+ style: "contrast",
508
509
  classes: "tna-!--margin-bottom-m",
509
510
  },
510
511
  })}
@@ -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 = {};
@@ -1,13 +1,18 @@
1
1
  {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
2
+
2
3
  {% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner -%}
3
4
  {% from "nationalarchives/components/footer/macro.njk" import tnaFooter -%}
4
5
  {% from "nationalarchives/components/header/macro.njk" import tnaHeader -%}
5
6
  {% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink -%}
7
+
8
+ {% set siteTitle = 'The National Archives' %}
9
+ {% set pageTitle = '' %}
10
+
6
11
  <!DOCTYPE html>
7
12
  <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template tna-template--{{ theme | default('system') }}-theme tna-template--{{ themeAccent | default('black') }}-accent {{ htmlClasses }}">
8
13
  <head>
9
14
  <meta charset="utf-8">
10
- <title>{% block pageTitle %}The National Archives{% endblock %}</title>
15
+ <title>{% block pageTitle %}{% if pageTitle %}{{ pageTitle }} - {{ siteTitle }}{% else %}{{ siteTitle }}{% endif %}{% endblock %}</title>
11
16
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
12
17
  <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
13
18
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -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);
@@ -17,6 +17,14 @@
17
17
  // font-display: swap;
18
18
  }
19
19
 
20
+ @font-face {
21
+ font-family: "Open Sans";
22
+ src: url("#{assets.$tna-font-path}/OpenSans-Italic.ttf");
23
+ font-weight: typographyVars.$main-font-weight;
24
+ font-style: italic;
25
+ // font-display: swap;
26
+ }
27
+
20
28
  @font-face {
21
29
  font-family: "Open Sans";
22
30
  src: url("#{assets.$tna-font-path}/OpenSans-Bold.ttf");
@@ -41,7 +49,7 @@
41
49
  // font-display: swap;
42
50
  }
43
51
  } @else {
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 */
52
+ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,#{typographyVars.$main-font-weight};0,#{typographyVars.$main-font-weight-bold};1,#{typographyVars.$main-font-weight}&family=Roboto+Mono:wght@#{typographyVars.$detail-font-weight};#{typographyVars.$detail-font-weight-bold}&display=swap"); /* stylelint-disable-line */
45
53
  }
46
54
 
47
55
  .tna-template {
@@ -208,13 +216,12 @@ small {
208
216
 
209
217
  %heading {
210
218
  @include colour.colour-font("font-dark");
219
+ text-wrap: pretty;
211
220
 
212
221
  &:not(.tna-heading--no-link-arrow) {
213
222
  a {
214
223
  display: inline-block;
215
224
 
216
- // text-wrap: balance;
217
-
218
225
  &::after {
219
226
  padding-left: 0.25rem;
220
227
 
@@ -225,11 +232,11 @@ small {
225
232
  content: "\203A";
226
233
  }
227
234
 
228
- // &:hover {
229
- // &::after {
230
- // padding-left: 0.5rem;
231
- // }
232
- // }
235
+ &:hover {
236
+ &::after {
237
+ padding-left: 0.5rem;
238
+ }
239
+ }
233
240
  }
234
241
  }
235
242
  }
@@ -10,7 +10,8 @@ $body-line-height: #{math.div($relative-1rem-px, $body-font-size-px) * 2} !defau
10
10
 
11
11
  $interactive-text-decoration-thickness: 3.5px !default;
12
12
 
13
- $main-font-family: "Open Sans", sans-serif !default;
13
+ $main-font: "Open Sans" !default;
14
+ $main-font-family: $main-font, sans-serif !default;
14
15
  $main-font-weight: 400 !default;
15
16
  $main-font-weight-bold: 700 !default;
16
17
 
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@nationalarchives/frontend",
3
- "version": "0.1.31",
3
+ "version": "0.1.33",
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,22 @@
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",
51
- "@storybook/jest": "^0.2.3",
52
- "@storybook/test-runner": "^0.15.2",
53
- "@storybook/testing-library": "^0.2.2",
43
+ "@storybook/addon-a11y": "^7.6.6",
44
+ "@storybook/addon-docs": "^7.6.6",
45
+ "@storybook/addon-essentials": "^7.6.6",
46
+ "@storybook/addon-interactions": "^7.6.6",
47
+ "@storybook/addon-links": "^7.6.6",
48
+ "@storybook/addon-mdx-gfm": "^7.6.6",
49
+ "@storybook/html": "^7.6.6",
50
+ "@storybook/html-webpack5": "^7.6.6",
51
+ "@storybook/test": "^8.0.0-alpha.5",
52
+ "@storybook/test-runner": "^0.16.0",
54
53
  "axe-playwright": "^1.2.3",
55
54
  "babel-jest": "^29.7.0",
56
55
  "babel-loader": "^9.0.1",
57
- "chromatic": "^9.1.0",
56
+ "chromatic": "^10.1.0",
58
57
  "copy-webpack-plugin": "^11.0.0",
59
58
  "css-loader": "^6.7.1",
60
59
  "diff": "^5.1.0",
@@ -72,10 +71,10 @@
72
71
  "sass": "^1.69.4",
73
72
  "sass-loader": "^13.0.2",
74
73
  "simple-nunjucks-loader": "^3.2.0",
75
- "storybook": "^7.5.3",
74
+ "storybook": "^7.6.6",
76
75
  "style-loader": "^3.3.1",
77
- "stylelint": "^15.11.0",
78
- "stylelint-config-standard-scss": "^11.0.0",
76
+ "stylelint": "^16.0.2",
77
+ "stylelint-config-standard-scss": "^12.0.0",
79
78
  "stylelint-selector-bem-pattern": "^3.0.0",
80
79
  "webpack": "^5.89.0",
81
80
  "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} />