@nationalarchives/frontend 1.4.0 → 1.5.0
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+analytics.js +1 -1
- package/nationalarchives/all+analytics.js.map +1 -1
- 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/analytics.js +1 -1
- package/nationalarchives/analytics.js.map +1 -1
- package/nationalarchives/components/accordion/accordion.css +1 -1
- package/nationalarchives/components/accordion/accordion.css.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/breadcrumbs/breadcrumbs.mjs +1 -1
- package/nationalarchives/components/button/button.css +1 -1
- package/nationalarchives/components/button/button.css.map +1 -1
- package/nationalarchives/components/card/card.css +1 -1
- package/nationalarchives/components/card/card.css.map +1 -1
- package/nationalarchives/components/checkboxes/checkboxes.css.map +1 -1
- package/nationalarchives/components/checkboxes/fixtures.json +1 -1
- package/nationalarchives/components/code-block/code-block.css +1 -1
- package/nationalarchives/components/code-block/code-block.css.map +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.css +1 -1
- package/nationalarchives/components/compound-filters/compound-filters.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/fixtures.json +1 -1
- package/nationalarchives/components/date-search/fixtures.json +1 -1
- package/nationalarchives/components/error-summary/error-summary.css +1 -1
- package/nationalarchives/components/error-summary/error-summary.css.map +1 -1
- package/nationalarchives/components/fieldset/fieldset.css +1 -1
- package/nationalarchives/components/fieldset/fieldset.css.map +1 -1
- package/nationalarchives/components/fieldset/template.njk +1 -1
- package/nationalarchives/components/file-input/file-input.css.map +1 -1
- package/nationalarchives/components/file-input/fixtures.json +1 -1
- package/nationalarchives/components/files-list/files-list.css +1 -1
- package/nationalarchives/components/files-list/files-list.css.map +1 -1
- package/nationalarchives/components/footer/fixtures.json +3 -3
- package/nationalarchives/components/footer/footer.js +1 -1
- package/nationalarchives/components/footer/footer.js.map +1 -1
- package/nationalarchives/components/footer/template.njk +2 -2
- package/nationalarchives/components/gallery/gallery.css +1 -1
- package/nationalarchives/components/gallery/gallery.css.map +1 -1
- package/nationalarchives/components/index-grid/fixtures.json +1 -1
- package/nationalarchives/components/index-grid/index-grid.css +1 -1
- package/nationalarchives/components/index-grid/index-grid.css.map +1 -1
- package/nationalarchives/components/index-grid/template.njk +1 -1
- package/nationalarchives/components/pagination/pagination.css +1 -1
- package/nationalarchives/components/pagination/pagination.css.map +1 -1
- package/nationalarchives/components/picture/fixtures.json +1 -1
- package/nationalarchives/components/picture/picture.css +1 -1
- package/nationalarchives/components/picture/picture.css.map +1 -1
- package/nationalarchives/components/radios/fixtures.json +1 -1
- package/nationalarchives/components/radios/radios.css.map +1 -1
- package/nationalarchives/components/select/fixtures.json +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/tabs/fixtures.json +133 -12
- package/nationalarchives/components/tabs/macro-options.json +13 -0
- 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/tabs/tabs.mjs +12 -11
- package/nationalarchives/components/tabs/tabs.scss +13 -2
- package/nationalarchives/components/tabs/template.njk +8 -5
- package/nationalarchives/components/tags/tags.css +1 -1
- package/nationalarchives/components/tags/tags.css.map +1 -1
- package/nationalarchives/components/text-input/fixtures.json +1 -1
- package/nationalarchives/components/textarea/fixtures.json +1 -1
- package/nationalarchives/components/warning/warning.css +1 -1
- package/nationalarchives/components/warning/warning.css.map +1 -1
- package/nationalarchives/error-page.css +1 -1
- package/nationalarchives/error-page.css.map +1 -1
- package/nationalarchives/ie.css.map +1 -1
- package/nationalarchives/prototype-kit.css +1 -1
- package/nationalarchives/prototype-kit.css.map +1 -1
- package/nationalarchives/tools/_a11y.scss +2 -0
- package/nationalarchives/tools/_spacing.scss +2 -1
- package/nationalarchives/utilities/a11y/_index.scss +1 -2
- package/nationalarchives/utilities/forms/form-item.njk +1 -1
- package/nationalarchives/utilities/typography/_index.scss +13 -5
- package/package.json +3 -2
|
@@ -23,7 +23,59 @@
|
|
|
23
23
|
}
|
|
24
24
|
]
|
|
25
25
|
},
|
|
26
|
-
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><
|
|
26
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"name": "with a custom tabs title",
|
|
30
|
+
"options": {
|
|
31
|
+
"tabsTitle": "Custom tabs title",
|
|
32
|
+
"itemHeadingLevel": 3,
|
|
33
|
+
"items": [
|
|
34
|
+
{
|
|
35
|
+
"id": "unique-id-a",
|
|
36
|
+
"title": "Alpha section",
|
|
37
|
+
"body": "<p>Lorem ipsum</p>"
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"id": "unique-id-b",
|
|
41
|
+
"title": "Beta section",
|
|
42
|
+
"body": "<p>Lorem ipsum</p>"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"id": "unique-id-c",
|
|
46
|
+
"title": "Gamma section",
|
|
47
|
+
"body": "<p>Lorem ipsum</p>"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Custom tabs title</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "with item tab titles",
|
|
55
|
+
"options": {
|
|
56
|
+
"itemHeadingLevel": 3,
|
|
57
|
+
"items": [
|
|
58
|
+
{
|
|
59
|
+
"id": "unique-id-a",
|
|
60
|
+
"title": "Alpha section tab",
|
|
61
|
+
"tabTitle": "Alpha",
|
|
62
|
+
"body": "<p>Lorem ipsum</p>"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"id": "unique-id-b",
|
|
66
|
+
"title": "Beta section tab",
|
|
67
|
+
"tabTitle": "Beta",
|
|
68
|
+
"body": "<p>Lorem ipsum</p>"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"id": "unique-id-c",
|
|
72
|
+
"title": "Gamma section tab",
|
|
73
|
+
"tabTitle": "Gamma",
|
|
74
|
+
"body": "<p>Lorem ipsum</p>"
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
},
|
|
78
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section tab</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section tab</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section tab</h3><p>Lorem ipsum</p></section></div></div>"
|
|
27
79
|
},
|
|
28
80
|
{
|
|
29
81
|
"name": "with item aria labels",
|
|
@@ -50,7 +102,7 @@
|
|
|
50
102
|
}
|
|
51
103
|
]
|
|
52
104
|
},
|
|
53
|
-
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><
|
|
105
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" aria-label=\"Alpha section tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" aria-label=\"Beta section tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" aria-label=\"Gamma section tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
54
106
|
},
|
|
55
107
|
{
|
|
56
108
|
"name": "with item classes",
|
|
@@ -77,7 +129,7 @@
|
|
|
77
129
|
}
|
|
78
130
|
]
|
|
79
131
|
},
|
|
80
|
-
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><
|
|
132
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button tna-tabs__item--test-1\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button tna-tabs__item--test-2\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button tna-tabs__item--test-3\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
81
133
|
},
|
|
82
134
|
{
|
|
83
135
|
"name": "with item attributes",
|
|
@@ -113,7 +165,82 @@
|
|
|
113
165
|
}
|
|
114
166
|
]
|
|
115
167
|
},
|
|
116
|
-
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><
|
|
168
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\" data-fixturetest-a=\"pass\" data-fixturetest1><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\" data-fixturetest-b=\"pass\" data-fixturetest2><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\" data-fixturetest-c=\"pass\" data-fixturetest3><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
"name": "small",
|
|
172
|
+
"options": {
|
|
173
|
+
"itemHeadingLevel": 3,
|
|
174
|
+
"items": [
|
|
175
|
+
{
|
|
176
|
+
"id": "unique-id-a",
|
|
177
|
+
"title": "Alpha section",
|
|
178
|
+
"body": "<p>Lorem ipsum</p>"
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
"id": "unique-id-b",
|
|
182
|
+
"title": "Beta section",
|
|
183
|
+
"body": "<p>Lorem ipsum</p>"
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"id": "unique-id-c",
|
|
187
|
+
"title": "Gamma section",
|
|
188
|
+
"body": "<p>Lorem ipsum</p>"
|
|
189
|
+
}
|
|
190
|
+
],
|
|
191
|
+
"small": true
|
|
192
|
+
},
|
|
193
|
+
"html": "<div class=\"tna-tabs tna-tabs--small\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "with different active tab on load",
|
|
197
|
+
"options": {
|
|
198
|
+
"itemHeadingLevel": 3,
|
|
199
|
+
"items": [
|
|
200
|
+
{
|
|
201
|
+
"id": "unique-id-a",
|
|
202
|
+
"title": "Alpha section",
|
|
203
|
+
"body": "<p>Lorem ipsum</p>"
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"id": "unique-id-b",
|
|
207
|
+
"title": "Beta section",
|
|
208
|
+
"body": "<p>Lorem ipsum</p>"
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"id": "unique-id-c",
|
|
212
|
+
"title": "Gamma section",
|
|
213
|
+
"body": "<p>Lorem ipsum</p>"
|
|
214
|
+
}
|
|
215
|
+
],
|
|
216
|
+
"activeTabOnLoad": 2
|
|
217
|
+
},
|
|
218
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\" data-active-tab-on-load=\"2\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
"name": "allow close",
|
|
222
|
+
"options": {
|
|
223
|
+
"itemHeadingLevel": 3,
|
|
224
|
+
"items": [
|
|
225
|
+
{
|
|
226
|
+
"id": "unique-id-a",
|
|
227
|
+
"title": "Alpha section",
|
|
228
|
+
"body": "<p>Lorem ipsum</p>"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"id": "unique-id-b",
|
|
232
|
+
"title": "Beta section",
|
|
233
|
+
"body": "<p>Lorem ipsum</p>"
|
|
234
|
+
},
|
|
235
|
+
{
|
|
236
|
+
"id": "unique-id-c",
|
|
237
|
+
"title": "Gamma section",
|
|
238
|
+
"body": "<p>Lorem ipsum</p>"
|
|
239
|
+
}
|
|
240
|
+
],
|
|
241
|
+
"allowClose": true
|
|
242
|
+
},
|
|
243
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\" data-allow-close=\"true\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
117
244
|
},
|
|
118
245
|
{
|
|
119
246
|
"name": "with classes",
|
|
@@ -123,25 +250,22 @@
|
|
|
123
250
|
{
|
|
124
251
|
"id": "unique-id-a",
|
|
125
252
|
"title": "Alpha section",
|
|
126
|
-
"ariaLabel": "Alpha section tab",
|
|
127
253
|
"body": "<p>Lorem ipsum</p>"
|
|
128
254
|
},
|
|
129
255
|
{
|
|
130
256
|
"id": "unique-id-b",
|
|
131
257
|
"title": "Beta section",
|
|
132
|
-
"ariaLabel": "Beta section tab",
|
|
133
258
|
"body": "<p>Lorem ipsum</p>"
|
|
134
259
|
},
|
|
135
260
|
{
|
|
136
261
|
"id": "unique-id-c",
|
|
137
262
|
"title": "Gamma section",
|
|
138
|
-
"ariaLabel": "Gamma section tab",
|
|
139
263
|
"body": "<p>Lorem ipsum</p>"
|
|
140
264
|
}
|
|
141
265
|
],
|
|
142
266
|
"classes": "tna-tabs--test"
|
|
143
267
|
},
|
|
144
|
-
"html": "<div class=\"tna-tabs tna-tabs--test\" data-module=\"tna-tabs\"><
|
|
268
|
+
"html": "<div class=\"tna-tabs tna-tabs--test\" data-module=\"tna-tabs\"><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
145
269
|
},
|
|
146
270
|
{
|
|
147
271
|
"name": "with attributes",
|
|
@@ -151,19 +275,16 @@
|
|
|
151
275
|
{
|
|
152
276
|
"id": "unique-id-a",
|
|
153
277
|
"title": "Alpha section",
|
|
154
|
-
"ariaLabel": "Alpha section tab",
|
|
155
278
|
"body": "<p>Lorem ipsum</p>"
|
|
156
279
|
},
|
|
157
280
|
{
|
|
158
281
|
"id": "unique-id-b",
|
|
159
282
|
"title": "Beta section",
|
|
160
|
-
"ariaLabel": "Beta section tab",
|
|
161
283
|
"body": "<p>Lorem ipsum</p>"
|
|
162
284
|
},
|
|
163
285
|
{
|
|
164
286
|
"id": "unique-id-c",
|
|
165
287
|
"title": "Gamma section",
|
|
166
|
-
"ariaLabel": "Gamma section tab",
|
|
167
288
|
"body": "<p>Lorem ipsum</p>"
|
|
168
289
|
}
|
|
169
290
|
],
|
|
@@ -172,7 +293,7 @@
|
|
|
172
293
|
"data-fixturetest2": ""
|
|
173
294
|
}
|
|
174
295
|
},
|
|
175
|
-
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\" data-fixturetest=\"pass\" data-fixturetest2><
|
|
296
|
+
"html": "<div class=\"tna-tabs\" data-module=\"tna-tabs\" data-fixturetest=\"pass\" data-fixturetest2><h3 class=\"tna-tabs__list-heading tna-heading-m\">Contents</h3><ul class=\"tna-tabs__list\" role=\"tablist\"><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-a\" class=\"tna-tabs__button\" id=\"unique-id-a-tab\" aria-controls=\"unique-id-a\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Alpha section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-b\" class=\"tna-tabs__button\" id=\"unique-id-b-tab\" aria-controls=\"unique-id-b\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Beta section</span></a></li><li class=\"tna-tabs__button-wrapper\" role=\"presentation\"><a href=\"#unique-id-c\" class=\"tna-tabs__button\" id=\"unique-id-c-tab\" aria-controls=\"unique-id-c\" role=\"tab\"><span class=\"tna-tabs__button-inner\">Gamma section</span></a></li></ul><div class=\"tna-tabs__items\"><section id=\"unique-id-a\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Alpha section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-b\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Beta section</h3><p>Lorem ipsum</p></section><section id=\"unique-id-c\" class=\"tna-tabs__item\"><h3 class=\"tna-tabs__heading tna-heading-m\">Gamma section</h3><p>Lorem ipsum</p></section></div></div>"
|
|
176
297
|
}
|
|
177
298
|
]
|
|
178
299
|
}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
[
|
|
2
|
+
{
|
|
3
|
+
"name": "tabsTitle",
|
|
4
|
+
"type": "string",
|
|
5
|
+
"required": false,
|
|
6
|
+
"description": "A heading to add above the tabs. Only used when JavaScript is not available.",
|
|
7
|
+
"default": "Contents"
|
|
8
|
+
},
|
|
2
9
|
{
|
|
3
10
|
"name": "itemHeadingLevel",
|
|
4
11
|
"type": "number",
|
|
@@ -29,6 +36,12 @@
|
|
|
29
36
|
"required": false,
|
|
30
37
|
"description": "An optional aria-label for the button of the tab item."
|
|
31
38
|
},
|
|
39
|
+
{
|
|
40
|
+
"name": "tabTitle",
|
|
41
|
+
"type": "string",
|
|
42
|
+
"required": false,
|
|
43
|
+
"description": "An optional, shorter heading to use in the tab instead of the `title`."
|
|
44
|
+
},
|
|
32
45
|
{
|
|
33
46
|
"name": "body",
|
|
34
47
|
"type": "string",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tna-tabs__button:active{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-tabs__item:focus:not(:focus-visible){outline:none !important;box-shadow:none !important}.tna-tabs{margin-top:2rem}.tna-tabs:first-child{margin-top:0}.tna-tabs__list{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;z-index:2;list-style:none}.tna-tabs__button{position:relative;font-weight:inherit;text-align:center;background:rgba(0,0,0,0);border:none;border:1px rgba(0,0,0,0) solid;border-bottom:none;cursor:pointer;border-radius:2px}.tna-tabs__button[aria-selected=true]{padding-top:0;border-color:var(--keyline, rgba(38, 38, 42, 0.25));border-radius:2px 2px 0 0;background-color:var(--background, #f4f4f4)}.tna-tabs__button[aria-selected=true]:focus{border-radius:2px}.tna-tabs__button-inner{margin:0.25rem 0.25rem calc(0.25rem + 1px);padding:0.375rem 0.75rem;display:block;text-decoration:underline;color:var(--font-base, #343338);background-color:var(--background-tint, rgb(217, 217, 214));border-radius:2px}.tna-tabs--small .tna-tabs__button-inner{margin:0.125rem 0.125rem calc(0.125rem + 1px);padding:0.25rem 0.5rem;font-size:1rem}.tna-tabs__button:hover .tna-tabs__button-inner,.tna-tabs__button:focus-visible .tna-tabs__button-inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-tabs__button[aria-selected=true] .tna-tabs__button-inner{text-decoration:none;background:rgba(0,0,0,0);border-radius:1px 1px 0 0}.tna-tabs__items{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.tna-tabs__items:has(:focus-visible){z-index:3}.tna-tabs__item{margin-top:-1px;border-radius:.1px .1px 2px 2px}.tna-tabs--interactive .tna-tabs__item{padding:1rem;border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}/*# sourceMappingURL=tabs.css.map */
|
|
1
|
+
.tna-tabs__button:active{outline:3px #010101 solid !important;outline-offset:3px !important;box-shadow:0 0 0 3px #fc0 !important;transition:outline-offset .1s,box-shadow .1s}.tna-template--dark-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}@media(prefers-color-scheme: dark){.tna-template--system-theme .tna-tabs__button:active{outline-color:#fc0 !important;box-shadow:0 0 0 3px #010101 !important}}.tna-tabs__item:focus:not(:focus-visible){outline:none !important;box-shadow:none !important}.tna-tabs{margin-top:2rem}.tna-tabs:first-child,.tna-tabs:first-child.tna-visually-hidden+*{margin-top:0}.tna-tabs__list{margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;position:relative;z-index:2;list-style:none}.tna-tabs__button-wrapper{display:flex}.tna-tabs__button{position:relative;font-weight:inherit;text-align:center;background:rgba(0,0,0,0);border:none;border:1px rgba(0,0,0,0) solid;border-bottom:none;cursor:pointer;border-radius:2px}.tna-tabs__button[aria-selected=true]{padding-top:0;text-decoration:none;border-color:var(--keyline, rgba(38, 38, 42, 0.25));border-radius:2px 2px 0 0;background-color:var(--background, #f4f4f4)}.tna-tabs__button[aria-selected=true]:focus{border-radius:2px}.tna-tabs__button-inner{margin:0.25rem 0.25rem calc(0.25rem + 1px);padding:0.375rem 0.75rem;display:block;text-decoration:underline;color:var(--font-base, #343338);background-color:var(--background-tint, rgb(217, 217, 214));border-radius:2px}.tna-tabs--small .tna-tabs__button-inner{margin:0.125rem 0.125rem calc(0.125rem + 1px);padding:0.25rem 0.5rem;font-size:1rem}.tna-tabs__button:hover .tna-tabs__button-inner,.tna-tabs__button:focus-visible .tna-tabs__button-inner{text-decoration:underline;text-decoration-thickness:0.25rem;text-underline-offset:.125em}.tna-tabs__button[aria-selected=true] .tna-tabs__button-inner{text-decoration:none;background:rgba(0,0,0,0);border-radius:1px 1px 0 0}.tna-tabs__items{display:flex;flex-direction:column;gap:2rem;position:relative;z-index:1}.tna-tabs__items:has(:focus-visible){z-index:3}.tna-tabs__item{margin-top:-1px;border-radius:.1px .1px 2px 2px}.tna-tabs--interactive .tna-tabs__item{padding:1rem;border:1px var(--keyline, rgba(38, 38, 42, 0.25)) solid}@media(forced-colors: active){.tna-tabs__button[aria-selected=false]{border-width:0}}/*# sourceMappingURL=tabs.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyBA,yBACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,mDACE,8BAEA,wCAKA,mCADF,qDAEI,8BAEA,yCAyFJ,0CA9EA,wBAEA,2BClCF,UACE,gBAUA,sBACE,aC3BF,gBACE,SACA,UAEA,aACA,iBACA,oBAEA,kBACA,UAEA,gBAGF,kBACE,kBAEA,oBAEA,kBAEA,yBAEA,YAEA,+BACA,mBAEA,eCpCF,cCDsB,IF4CpB,sCACE,cGoEA,oDHjEA,0BGgCJ,4CH3BI,4CCpDJ,cCDsB,IF2DtB,wBACE,2CAEA,yBAEA,cAEA,0BGUF,gCAIA,4DF/EA,cCDsB,IF6EtB,yCACE,8CAEA,uBI5EF,eJiFA,wGIpBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OL8DpC,8DACE,qBAEA,yBAEA,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAEA,qCACE,UAIJ,gBACE,gBAEA,gCAMF,uCACE,aGdE","file":"tabs.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n // @return #{$size * spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n\n position: relative;\n z-index: 2;\n\n list-style: none;\n }\n\n &__button {\n position: relative;\n\n font-weight: inherit;\n\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n border: 1px transparent solid;\n border-bottom: none;\n\n cursor: pointer;\n @include borders.rounded-border;\n\n &:active {\n @include a11y.focus-outline;\n }\n\n &[aria-selected=\"true\"] {\n padding-top: 0;\n\n @include colour.colour-border(\"keyline\");\n border-radius: bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius 0 0;\n\n @include colour.colour-background(\"background\");\n\n &:focus {\n @include borders.rounded-border;\n }\n }\n }\n\n &__button-inner {\n margin: spacing.space(0.25) spacing.space(0.25)\n calc(spacing.space(0.25) + 1px);\n padding: spacing.space(0.375) spacing.space(0.75);\n\n display: block;\n\n text-decoration: underline;\n\n @include colour.colour-font(\"font-base\");\n\n // @include colour.base;\n // @include colour.tint;\n @include colour.colour-background(\"background-tint\");\n\n @include borders.rounded-border;\n }\n\n &--small &__button-inner {\n margin: spacing.space(0.125) spacing.space(0.125)\n calc(spacing.space(0.125) + 1px);\n padding: spacing.space(0.25) spacing.space(0.5);\n\n @include typography.font-size(16);\n }\n\n &__button:hover &__button-inner,\n &__button:focus-visible &__button-inner {\n @include typography.interacted-text-decoration;\n }\n\n &__button[aria-selected=\"true\"] &__button-inner {\n text-decoration: none;\n\n background: transparent;\n\n border-radius: #{bordersVars.$rounded-border-radius - 1px}\n #{bordersVars.$rounded-border-radius - 1px} 0 0;\n }\n\n &__items {\n display: flex;\n flex-direction: column;\n gap: spacing.space(2);\n\n position: relative;\n z-index: 1;\n\n &:has(:focus-visible) {\n z-index: 3;\n }\n }\n\n &__item {\n margin-top: -1px;\n\n border-radius: 0.1px 0.1px #{bordersVars.$rounded-border-radius}\n #{bordersVars.$rounded-border-radius};\n\n @include a11y.focus-indicator-only-on-keyboard-focus;\n }\n\n &--interactive &__item {\n padding: spacing.space(1);\n @include colour.colour-border(\"keyline\", 1px, solid);\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../../src/nationalarchives/tools/_a11y.scss","../../../../src/nationalarchives/tools/_spacing.scss","../../../../src/nationalarchives/components/tabs/tabs.scss","../../../../src/nationalarchives/tools/_borders.scss","../../../../src/nationalarchives/variables/_borders.scss","../../../../src/nationalarchives/tools/_colour.scss","../../../../src/nationalarchives/tools/_typography.scss","../../../../src/nationalarchives/variables/_typography.scss"],"names":[],"mappings":"AAyBA,yBACE,qCACA,8BAEA,qCAGA,WACE,kCAGF,mDACE,8BAEA,wCAKA,mCADF,qDAEI,8BAEA,yCA2FJ,0CAhFA,wBAEA,2BClCF,UACE,gBAUA,kEAEE,aC5BF,gBACE,SACA,UAEA,aACA,iBACA,oBAEA,kBACA,UAEA,gBAGF,0BACE,aAGF,kBACE,kBAEA,oBAEA,kBAEA,yBAEA,YAEA,+BACA,mBAEA,eCxCF,cCDsB,IFgDpB,sCACE,cAEA,qBG8DA,oDH3DA,0BG0BJ,4CHrBI,4CC1DJ,cCDsB,IFiEtB,wBACE,2CAEA,yBAEA,cAEA,0BGIF,gCAIA,4DF/EA,cCDsB,IFiFtB,yCACE,8CAEA,uBIhFF,eJqFA,wGIxBA,0BACA,0BCpCsC,QDqCtC,sBCvCoC,OLkEpC,8DACE,qBAEA,yBAEA,0BAIF,iBACE,aACA,sBACA,SAEA,kBACA,UAEA,qCACE,UAIJ,gBACE,gBAEA,gCAMF,uCACE,aGlBE,wDA6ZJ,8BHrYE,uCACE","file":"tabs.css","sourcesContent":["@use \"../variables/a11y\";\n@use \"colour\";\n@use \"borders\";\n\n@mixin visually-hidden {\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n\n overflow: hidden !important;\n\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n z-index: -1 !important;\n\n background-color: transparent !important;\n\n border: 0 !important;\n\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n}\n\n%focus-outline {\n outline: a11y.$focus-outline-outer-width colour.brand-colour(\"black\") solid !important;\n outline-offset: a11y.$focus-outline-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition:\n outline-offset 0.1s,\n box-shadow 0.1s;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin focus-outline {\n @extend %focus-outline;\n}\n\n@mixin no-focus-outline {\n outline: none !important;\n\n box-shadow: none !important;\n}\n\n%active-outline {\n outline: a11y.$focus-outline-active-outer-width colour.brand-colour(\"black\")\n solid !important;\n outline-offset: a11y.$focus-outline-active-inner-width !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"yellow\") !important;\n\n transition: none;\n\n .tna-template--dark-theme & {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n outline-color: colour.brand-colour(\"yellow\") !important;\n\n box-shadow: 0 0 0 a11y.$focus-outline-active-inner-width\n colour.brand-colour(\"black\") !important;\n }\n }\n}\n\n@mixin active-outline {\n @extend %active-outline;\n}\n\n%faux-full-outline {\n position: relative;\n}\n\n%faux-full-outline-anchor {\n &::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n z-index: 9;\n\n cursor: pointer;\n\n @include borders.rounded-border;\n }\n\n &:focus,\n &:active {\n @include no-focus-outline;\n }\n\n &:focus {\n &::before {\n @include focus-outline;\n }\n }\n\n &:active {\n &::before {\n @include active-outline;\n }\n }\n}\n\n@mixin faux-full-outline($anchor_selector) {\n @extend %faux-full-outline;\n\n #{$anchor_selector} {\n @extend %faux-full-outline-anchor;\n }\n}\n\n%focus-indicator-only-on-keyboard-focus {\n &:focus:not(:focus-visible) {\n @include no-focus-outline;\n }\n}\n\n@mixin focus-indicator-only-on-keyboard-focus {\n @extend %focus-indicator-only-on-keyboard-focus;\n}\n","@use \"sass:map\";\n@use \"sass:math\";\n@use \"../variables/spacing\";\n@use \"../variables/typography\";\n@use \"../tools/media\";\n\n/*\n * ------------------------------------------\n * Spacing is created with rem rather than px\n * units as when users use a custom font size\n * some browsers handle the resize of rem and\n * em separately from px which causes spacing\n * and layout issues, so to ensure everything\n * remaians consistent we use rem for spacing\n * and typography. The original intention was\n * separation so that we could scale the type\n * without affecting spacing, but in practice\n * there are too many ways to change the font\n * size in various browsers and devices\n * ------------------------------------------\n */\n@function space($size) {\n // @return #{$size * spacing.$spacing-unit-px}px;\n @return #{$size}rem;\n}\n\n%space-above {\n margin-top: space(2);\n @extend %no-space-above-for-first-children;\n}\n\n%space-only-above {\n margin: #{space(2)} 0 0;\n @extend %no-space-above-for-first-children;\n}\n\n%no-space-above-for-first-children {\n &:first-child,\n &:first-child.tna-visually-hidden + * {\n margin-top: 0;\n }\n}\n\n@mixin space-above($zero-other-margins: false) {\n @if $zero-other-margins {\n @extend %space-only-above;\n } @else {\n @extend %space-above;\n }\n}\n\n@mixin no-spacing-generator($suffix: \"\") {\n @if $suffix != \"\" {\n $suffix: \"-\" + $suffix;\n }\n @each $property in margin, padding {\n @each $direction in top, bottom {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix},\n .tna-\\!--no-#{$property}-#{$combined-direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n } @else {\n .tna-\\!--no-#{$property}-#{$direction}#{$suffix} {\n #{$property}-#{$direction}: 0 !important;\n }\n }\n }\n }\n}\n\n@mixin spacing-generator($suffix: \"\") {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n\n @include media.on-mobile {\n @each $property in margin, padding {\n @each $direction in top, bottom {\n @each $size, $amount in spacing.$spacing-mobile {\n @if $direction == all {\n .tna-\\!--#{$property}-#{$size} {\n #{$property}: #{space($amount)} !important;\n }\n } @else {\n $combined-direction: \"\";\n @if $direction == top or $direction == bottom {\n $combined-direction: vertical;\n } @else if $direction == right or $direction == left {\n $combined-direction: horizontal;\n }\n @if $combined-direction {\n .tna-\\!--#{$property}-#{$direction}-#{$size},\n .tna-\\!--#{$property}-#{$combined-direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n } @else {\n .tna-\\!--#{$property}-#{$direction}-#{$size} {\n #{$property}-#{$direction}: #{space($amount)} !important;\n }\n }\n }\n }\n }\n }\n }\n}\n","@use \"../../variables/borders\" as bordersVars;\n@use \"../../tools/a11y\";\n@use \"../../tools/borders\";\n@use \"../../tools/colour\";\n@use \"../../tools/media\";\n@use \"../../tools/spacing\";\n@use \"../../tools/typography\";\n\n.tna-tabs {\n @include spacing.space-above;\n\n &__list {\n margin: 0;\n padding: 0;\n\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n\n position: relative;\n z-index: 2;\n\n list-style: none;\n }\n\n &__button-wrapper {\n display: flex;\n }\n\n &__button {\n position: relative;\n\n font-weight: inherit;\n\n text-align: center;\n\n background: transparent;\n\n border: none;\n\n border: 1px transparent solid;\n border-bottom: none;\n\n cursor: pointer;\n @include borders.rounded-border;\n\n &:active {\n @include a11y.focus-outline;\n }\n\n &[aria-selected=\"true\"] {\n padding-top: 0;\n\n text-decoration: none;\n\n @include colour.colour-border(\"keyline\");\n border-radius: bordersVars.$rounded-border-radius\n bordersVars.$rounded-border-radius 0 0;\n\n @include colour.colour-background(\"background\");\n\n &:focus {\n @include borders.rounded-border;\n }\n }\n }\n\n &__button-inner {\n margin: spacing.space(0.25) spacing.space(0.25)\n calc(spacing.space(0.25) + 1px);\n padding: spacing.space(0.375) spacing.space(0.75);\n\n display: block;\n\n text-decoration: underline;\n\n @include colour.colour-font(\"font-base\");\n\n @include colour.colour-background(\"background-tint\");\n\n @include borders.rounded-border;\n }\n\n &--small &__button-inner {\n margin: spacing.space(0.125) spacing.space(0.125)\n calc(spacing.space(0.125) + 1px);\n padding: spacing.space(0.25) spacing.space(0.5);\n\n @include typography.font-size(16);\n }\n\n &__button:hover &__button-inner,\n &__button:focus-visible &__button-inner {\n @include typography.interacted-text-decoration;\n }\n\n &__button[aria-selected=\"true\"] &__button-inner {\n text-decoration: none;\n\n background: transparent;\n\n border-radius: #{bordersVars.$rounded-border-radius - 1px}\n #{bordersVars.$rounded-border-radius - 1px} 0 0;\n }\n\n &__items {\n display: flex;\n flex-direction: column;\n gap: spacing.space(2);\n\n position: relative;\n z-index: 1;\n\n &:has(:focus-visible) {\n z-index: 3;\n }\n }\n\n &__item {\n margin-top: -1px;\n\n border-radius: 0.1px 0.1px #{bordersVars.$rounded-border-radius}\n #{bordersVars.$rounded-border-radius};\n\n @include a11y.focus-indicator-only-on-keyboard-focus;\n }\n\n &--interactive &__item {\n padding: spacing.space(1);\n\n @include colour.colour-border(\"keyline\", 1px, solid);\n }\n\n @include colour.on-forced-colours {\n &__button[aria-selected=\"false\"] {\n border-width: 0;\n }\n }\n}\n","@use \"../variables/borders\";\n\n@mixin rounded-border {\n border-radius: borders.$rounded-border-radius;\n}\n","$thick-border-width: 5px !default;\n$very-thick-border-width: 8px !default;\n$rounded-border-radius: 2px !default;\n","@use \"sass:list\";\n@use \"sass:map\";\n@use \"sass:meta\";\n@use \"../variables/a11y\";\n@use \"../variables/borders\";\n@use \"../variables/forms\";\n@use \"../variables/colour\";\n@use \"../variables/features\";\n@use \"../tools/media\";\n\n$base-colours: (\n \"background\",\n \"font-base\",\n \"font-dark\",\n \"font-light\",\n \"icon-light\",\n \"link\",\n \"link-visited\",\n \"keyline\",\n \"keyline-dark\"\n);\n\n@function brand-colour($colour, $opacity: 1) {\n @return colour.brand-colour($colour, $opacity);\n}\n\n@mixin colour-css-vars($excludes...) {\n @each $name, $value in colour.$colour-palette-default {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index($base-colours, $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@mixin colour-css-vars-high-contrast-dark($excludes...) {\n @each $name, $value in colour.$colour-palette-high-contrast-dark {\n @if not list.index($excludes, $name) {\n --#{$name}: #{$value};\n @if list.index((\"keyline\", \"keyline-dark\"), $name) {\n --base-#{$name}: #{$value};\n }\n }\n }\n}\n\n@function colour-var($colour) {\n @return var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n );\n}\n\n@mixin colour-font($colour, $important: false) {\n color: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n@mixin colour-background($colour, $important: false) {\n background-color: colour-var($colour)\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-background-brand($brandColour, $important: false) {\n background-color: #{brand-colour($brandColour)}\n if(sass($important): !important; else: null);\n}\n\n@mixin colour-border(\n $colour,\n $width: \"\",\n $style: solid,\n $direction: \"\",\n $important: false\n) {\n @if $direction != \"\" {\n @if $width != \"\" {\n border-#{$direction}: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-#{$direction}-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n } @else {\n @if $width != \"\" {\n border: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n border-color: var(\n --#{$colour},\n #{map.get(colour.$colour-palette-default, $colour)}\n )\n if(sass($important): !important; else: null);\n }\n }\n}\n\n@mixin colour-outline($colour, $width: \"\", $style: solid, $important: false) {\n @if $width != \"\" {\n outline: $width\n colour-var($colour)\n $style\n if(sass($important): !important; else: null);\n } @else {\n outline-color: colour-var($colour)\n if(sass($important): !important; else: null);\n }\n}\n\n@mixin colour-fill($colour, $important: false) {\n fill: colour-var($colour) if(sass($important): !important; else: null);\n}\n\n%colour-input {\n @include colour-font(\"input-foreground\");\n @include colour-background(\"input-background\");\n @include colour-border(\"input-border\", forms.$form-field-border-width);\n\n &:hover {\n outline: a11y.$focus-outline-active-total-width var(--keyline) solid;\n }\n}\n\n@mixin colour-input() {\n @extend %colour-input;\n}\n\n@mixin thick-keyline($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-dark($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"keyline-dark\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"keyline-dark\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-accent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\"accent-border\", $border-width, solid, $direction);\n } @else {\n @include colour-border(\"accent-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-error($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n @include colour-border(\n \"form-error-border\",\n $border-width,\n solid,\n $direction\n );\n } @else {\n @include colour-border(\"form-error-border\", $border-width, solid);\n }\n}\n\n@mixin thick-keyline-brand($direction: \"\", $brandColour, $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width #{brand-colour($brandColour)} solid;\n } @else {\n border: $border-width #{brand-colour($brandColour)} solid;\n }\n}\n\n@mixin thick-keyline-transparent($direction: \"\", $veryThick: false) {\n $border-width: borders.$thick-border-width;\n @if $veryThick {\n $border-width: borders.$very-thick-border-width;\n }\n @if $direction != \"\" {\n border-#{$direction}: $border-width transparent solid;\n } @else {\n border: $border-width transparent solid;\n }\n}\n\n%always-light {\n @include colour-css-vars;\n\n @media (prefers-contrast: more) {\n @include colour-css-vars-high-contrast;\n }\n}\n\n@mixin always-light {\n @extend %always-light;\n}\n\n%contrast {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin contrast {\n @extend %contrast;\n}\n\n%contrast-on-mobile {\n @include media.on-mobile {\n --background: var(--contrast-background);\n --font-base: var(--contrast-font-base);\n --font-dark: var(--contrast-font-dark);\n --font-light: var(--contrast-font-light);\n --icon-light: var(--contrast-icon-light);\n --link: var(--contrast-link);\n --link-visited: var(--contrast-link-visited);\n --keyline: var(--contrast-keyline);\n --keyline-dark: var(--contrast-keyline-dark);\n --button-text: var(--contrast-button-text);\n --button-background: var(--contrast-button-background);\n --button-hover-text: var(--contrast-button-hover-text);\n --button-hover-background: var(--contrast-button-hover-background);\n --accent-border: var(--accent-border-bright);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n }\n}\n\n@mixin contrast-on-mobile {\n @extend %contrast-on-mobile;\n}\n\n%base {\n @each $name, $value in $base-colours {\n --#{$name}: var(--base-#{$value});\n }\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin base {\n @extend %base;\n}\n\n%tint {\n --background: var(--background-tint);\n\n @include colour-background(\"background\");\n}\n\n@mixin tint {\n @extend %tint;\n}\n\n%accent {\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n\n @include colour-background(\"background\");\n\n @include colour-font(\"font-base\");\n}\n\n@mixin accent {\n @extend %accent;\n}\n\n%accent-light {\n --background: var(--accent-background-light);\n --font-base: #{map.get(colour.$colour-palette-default, \"font-base\")};\n --font-dark: #{map.get(colour.$colour-palette-default, \"font-dark\")};\n --font-light: #{map.get(colour.$colour-palette-default, \"font-light\")};\n --icon-light: #{map.get(colour.$colour-palette-default, \"icon-light\")};\n --keyline: #{map.get(colour.$colour-palette-default, \"keyline\")};\n --keyline-dark: #{map.get(colour.$colour-palette-default, \"keyline-dark\")};\n --button-text: #{map.get(colour.$colour-palette-default, \"button-text\")};\n --button-background: #{map.get(\n colour.$colour-palette-default,\n \"button-background\"\n )};\n --button-hover-text: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-text\"\n )};\n --button-hover-background: #{map.get(\n colour.$colour-palette-default,\n \"button-hover-background\"\n )};\n --accent-border: var(--accent-background);\n\n @include colour-background(\"background\");\n @include colour-font(\"font-base\");\n\n .tna-template--system-theme & {\n @media (prefers-color-scheme: dark) {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n }\n\n .tna-template--dark-theme & {\n // --link: #{map.get(colour.$colour-palette-default, \"link\")};\n // --link-visited: #{map.get(colour.$colour-palette-default, \"link-visited\")};\n\n --background: var(--accent-background);\n --font-base: var(--accent-font-base);\n --font-dark: var(--accent-font-dark);\n --font-light: var(--accent-font-light);\n --icon-light: var(--accent-icon-light);\n --link: var(--accent-link);\n --link-visited: var(--accent-link);\n --keyline: var(--accent-keyline);\n --keyline-dark: var(--accent-keyline-dark);\n --accent-border: var(--accent-font-dark);\n --button-text: var(--accent-button-text);\n --button-background: var(--accent-button-background);\n --button-hover-text: var(--accent-button-hover-text);\n --button-hover-background: var(--accent-button-hover-background);\n }\n}\n\n@mixin accent-light {\n @extend %accent-light;\n}\n\n%yellow-accent {\n --accent-background: #{colour.brand-colour(\"yellow\")} !important;\n --accent-background-light: #{colour.brand-colour(\"cream\")} !important;\n --accent-border: #{colour.brand-colour(\"yellow\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"yellow\")} !important;\n --accent-font-base: #{colour.brand-colour(\"black\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"black\")} !important;\n --accent-font-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"black\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"black\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"black\")} !important;\n --accent-keyline: #{colour.brand-colour(\"black\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"black\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"yellow\")} !important;\n}\n\n@mixin yellow-accent {\n @extend %yellow-accent;\n}\n\n%accent-lighter-text {\n --accent-font-base: #{colour.brand-colour(\"white\")} !important;\n --accent-font-dark: #{colour.brand-colour(\"white\")} !important;\n --accent-font-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-icon-light: #{colour.brand-colour(\"white\", 0.7)} !important;\n --accent-link: #{colour.brand-colour(\"white\")} !important;\n --accent-link-visited: #{colour.brand-colour(\"white\")} !important;\n --accent-keyline: #{colour.brand-colour(\"white\", 0.5)} !important;\n --accent-keyline-dark: #{colour.brand-colour(\"white\", 0.8)} !important;\n --button-accented-text: #{colour.brand-colour(\"white\")} !important;\n}\n\n%black-accent {\n --accent-background: #{colour.brand-colour(\"black\")} !important;\n --accent-background-light: #{colour.brand-colour(\"light-grey\")} !important;\n --accent-border: #{colour.brand-colour(\"black\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"grey\")} !important;\n --button-accented-text: #{colour.brand-colour(\"black\")} !important;\n --button-accented-background: #{colour.brand-colour(\"grey\")} !important;\n}\n\n@mixin black-accent {\n @extend %accent-lighter-text;\n @extend %black-accent;\n}\n\n%pink-accent {\n --accent-background: #{colour.brand-colour(\"maroon\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-pink\")} !important;\n --accent-border: #{colour.brand-colour(\"maroon\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"pink\")} !important;\n --button-accented-background: #{colour.brand-colour(\"maroon\")} !important;\n}\n\n@mixin pink-accent {\n @extend %accent-lighter-text;\n @extend %pink-accent;\n}\n\n%orange-accent {\n --accent-background: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-orange\")} !important;\n --accent-border: #{colour.brand-colour(\"chestnut\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"orange\")} !important;\n --button-accented-background: #{colour.brand-colour(\"chestnut\")} !important;\n}\n\n@mixin orange-accent {\n @extend %accent-lighter-text;\n @extend %orange-accent;\n}\n\n%green-accent {\n --accent-background: #{colour.brand-colour(\"forest\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-green\")} !important;\n --accent-border: #{colour.brand-colour(\"forest\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"green\")} !important;\n --button-accented-background: #{colour.brand-colour(\"forest\")} !important;\n}\n\n@mixin green-accent {\n @extend %accent-lighter-text;\n @extend %green-accent;\n}\n\n%blue-accent {\n --accent-background: #{colour.brand-colour(\"navy\")} !important;\n --accent-background-light: #{colour.brand-colour(\"pastel-blue\")} !important;\n --accent-border: #{colour.brand-colour(\"navy\")} !important;\n --accent-border-bright: #{colour.brand-colour(\"blue\")} !important;\n --button-accented-background: #{colour.brand-colour(\"navy\")} !important;\n}\n\n@mixin blue-accent {\n @extend %accent-lighter-text;\n @extend %blue-accent;\n}\n\n@mixin on-high-contrast {\n @media (prefers-contrast: more) {\n @content;\n }\n}\n\n@mixin on-forced-colours {\n @media (forced-colors: active) {\n @content;\n }\n}\n\n@mixin on-high-contrast-and-forced-colours {\n @include on-forced-colours {\n @content;\n }\n\n @include on-high-contrast {\n @content;\n }\n}\n\n%image-loader-background {\n background: linear-gradient(\n -45deg,\n rgb(0 0 0 / 25%),\n rgb(255 255 255 / 25%),\n rgb(0 0 0 / 25%)\n );\n background-size: 500% 500%;\n background-position: 0 50%;\n\n animation: image-loader-background ease-in-out 1.2s infinite;\n\n @media (prefers-reduced-motion) {\n animation: none !important;\n }\n}\n\n@mixin image-loader-background {\n @if features.$image-loader-animations {\n @extend %image-loader-background;\n }\n}\n","@use \"sass:math\";\n@use \"../variables/typography\";\n@use \"colour\";\n@use \"media\";\n\n@mixin font-size($font-size-px) {\n font-size: #{math.div($font-size-px, typography.$relative-1rem-px)}rem;\n}\n\n@mixin relative-font-size($font-size-px) {\n @warn \"relative-font-size() will soon be deprecated in favour of font-size().\";\n @include font-size($font-size-px);\n}\n\n@mixin main-font-weight {\n font-weight: typography.$main-font-weight;\n}\n\n@mixin main-font-weight-medium {\n font-weight: typography.$main-font-weight-medium;\n}\n\n@mixin main-font-weight-bold {\n font-weight: typography.$main-font-weight-bold;\n}\n\n@mixin main-font($bold: false) {\n font-family: typography.$main-font-family;\n font-variation-settings: \"wdth\" 100;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n @include main-font-weight-bold;\n } @else {\n @include main-font-weight;\n }\n}\n\n@mixin heading-font {\n font-family: typography.$heading-font-family;\n font-weight: typography.$heading-font-weight;\n}\n\n@mixin detail-font($bold: false) {\n font-family: typography.$detail-font-family;\n font-style: normal;\n font-optical-sizing: auto;\n @if $bold {\n font-weight: typography.$detail-font-weight-bold;\n } @else {\n font-weight: typography.$detail-font-weight;\n }\n}\n\n@mixin detail-font-small {\n @include detail-font;\n @include font-size(14);\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n@mixin interactable-text-decoration {\n text-decoration-thickness: typography.$interactable-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin interacted-text-decoration {\n text-decoration: underline;\n text-decoration-thickness: typography.$interactive-text-decoration-thickness;\n text-underline-offset: typography.$interactable-text-decoration-offset;\n}\n\n@mixin heading-generator(\n $font-size-default,\n $font-size-medium,\n $font-size-small,\n $font-size-tiny,\n $line-height\n) {\n $small-and-tiny-identical: $font-size-small == $font-size-tiny;\n $medium-small-and-tiny-identical: $font-size-medium == $font-size-small and\n $small-and-tiny-identical;\n $all-identical: $font-size-default == $font-size-medium and\n $medium-small-and-tiny-identical and $small-and-tiny-identical;\n line-height: $line-height;\n @include font-size($font-size-default);\n\n @if $all-identical != true {\n @if $medium-small-and-tiny-identical != true {\n @include media.on-medium {\n @include font-size($font-size-medium);\n }\n\n @if $small-and-tiny-identical != true {\n @include media.on-small {\n @include font-size($font-size-small);\n }\n\n @include media.on-tiny {\n @include font-size($font-size-tiny);\n }\n } @else {\n @include media.on-mobile {\n @include font-size($font-size-small);\n }\n }\n } @else {\n @include media.on-smaller-than-large {\n @include font-size($font-size-medium);\n }\n }\n }\n}\n","@use \"sass:math\";\n\n/*\n * ------------------------------------------\n * The typefaces, sizes and spacings that are\n * defined in this file have been selected to\n * ensure 100% match with the latest National\n * Archives brand guidelines - avoid changing\n * or overwriting any of these values without\n * signing off with the Digital Services team\n * first\n * ------------------------------------------\n */\n\n$relative-1rem-px: 16; // 16px = 1rem\n\n/*\n * ------------------------------------------\n * When true, use the included font files for\n * Open Sans and Roboto Mono, rather than the\n * versions hosted by Google Fonts\n * ------------------------------------------\n */\n$use-local-fonts: false !default;\n\n$body-font-size-px: 19 !default;\n$body-font-size-px-medium: 18 !default;\n$body-font-size-px-mobile: 17 !default;\n$body-line-height: 1.75 !default;\n\n$interactable-text-decoration-offset: 0.125em !default;\n$interactable-text-decoration-thickness: #{math.div(1.5, $relative-1rem-px)}rem !default;\n$interactive-text-decoration-thickness: #{math.div(4, $relative-1rem-px)}rem !default;\n\n$main-font-family-name: \"Open Sans\" !default;\n$main-font-family:\n #{$main-font-family-name},\n sans-serif;\n$main-font-weight: 400 !default;\n$main-font-weight-medium: 600 !default;\n$main-font-weight-bold: 700 !default;\n$main-font-file: \"OpenSans-Regular.ttf\" !default;\n$main-font-file-medium: \"OpenSans-SemiBold.ttf\" !default;\n$main-font-file-bold: \"OpenSans-Bold.ttf\" !default;\n\n/*\n * ------------------------------------------\n * To use Supria Sans Condensed (which is the\n * approved heading typeface for The National\n * Archives), you need to obtain a licence to\n * properly embed the CSS files with the font\n * definitions in your service - check with a\n * member of the Digital Services team on how\n * to get a licence\n * ------------------------------------------\n */\n$heading-font-family-name: \"supria-sans-condensed\" !default;\n$heading-font-family:\n #{$heading-font-family-name},\n \"Arial Narrow\",\n sans-serif;\n$heading-font-weight: 500 !default;\n\n/*\n * ------------------------------------------\n * The detail font should be a monospace font\n * and is used for chips, supertitles as well\n * as the date search component\n * ------------------------------------------\n */\n$detail-font-family-name: \"Roboto Mono\" !default;\n$detail-font-family:\n #{$detail-font-family-name},\n monospace;\n$detail-font-weight: 400 !default;\n$detail-font-weight-bold: 500 !default;\n$detail-font-file: \"RobotoMono-Regular.ttf\" !default;\n$detail-font-file-bold: \"RobotoMono-Medium.ttf\" !default;\n\n$heading-xl-font-size-default: 64 !default;\n$heading-xl-font-size-medium: 48 !default;\n$heading-xl-font-size-small: 36 !default;\n$heading-xl-font-size-tiny: $heading-xl-font-size-small !default;\n$heading-xl-line-height: 1.1 !default;\n\n$heading-l-font-size-default: 36 !default;\n$heading-l-font-size-medium: 32 !default;\n$heading-l-font-size-small: 29 !default;\n$heading-l-font-size-tiny: $heading-l-font-size-small !default;\n$heading-l-line-height: 1.15 !default;\n\n$heading-m-font-size-default: 22 !default;\n$heading-m-font-size-medium: $heading-m-font-size-default !default;\n$heading-m-font-size-small: 21 !default;\n$heading-m-font-size-tiny: $heading-m-font-size-small !default;\n$heading-m-line-height: 1.4 !default;\n\n$heading-s-font-size-default: 19 !default;\n$heading-s-font-size-medium: $heading-s-font-size-default !default;\n$heading-s-font-size-small: $heading-s-font-size-default !default;\n$heading-s-font-size-tiny: $heading-s-font-size-default !default;\n$heading-s-line-height: 1.5 !default;\n\n$code-font-family: Consolas, Monaco, \"Ubuntu Mono\", monospace !default;\n"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.previousTabIndex=this.currentTabIndex,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():t.TNAFrontend=e()}(self,()=>(()=>{"use strict";const t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}};let e={};t.r(e),t.d(e,{Tabs:()=>i});class i{constructor(t){this.$module=t,this.$tabListHeading=t&&t.querySelector(".tna-tabs__list-heading"),this.$tabList=t&&t.querySelector(".tna-tabs__list"),this.$tabListItemLinks=t&&this.$tabList&&this.$tabList.querySelectorAll(".tna-tabs__button"),this.$tabItems=t&&t.querySelectorAll(".tna-tabs__item"),this.$module&&this.$tabList&&this.$tabListItemLinks&&this.$tabItems&&this.$tabListItemLinks.length===this.$tabItems.length&&(this.currentTabIndex=this.$module.dataset.activeTabOnLoad?parseInt(this.$module.dataset.activeTabOnLoad,10):0,this.previousTabIndex=this.currentTabIndex,this.allowClose="true"===this.$module.dataset.allowClose,this.init())}init(){this.$module.classList.add("tna-tabs--interactive"),this.$tabListHeading.remove();const t=t=>this.handleItemLinkClick(t);this.$tabListItemLinks.forEach(e=>{const i=e.getAttribute("aria-controls");e.setAttribute("aria-selected",!1);const s=document.getElementById(i);s.setAttribute("aria-labelledby",e.id),s.setAttribute("role","tabpanel"),e.addEventListener("click",t,{capture:!0})}),this.$tabList.addEventListener("keydown",t=>this.handleItemLinkKeyDown(t),{capture:!0}),this.switchTabByIndex(this.currentTabIndex)}handleItemLinkClick(t){t.preventDefault();const e=t.currentTarget.getAttribute("aria-controls");this.switchTabByID(e)}handleItemLinkKeyDown(t){let e=!1;switch(t.key){case"ArrowLeft":this.previousTab(),e=!0;break;case"ArrowRight":this.nextTab(),e=!0;break;case"Home":this.switchTabByIndex(0,!0,!0),e=!0;break;case"End":this.switchTabByIndex(this.$tabListItemLinks.length-1,!0,!0),e=!0}e&&(t.stopPropagation(),t.preventDefault())}nextTab(){this.previousTabIndex<this.$tabListItemLinks.length-1?this.switchTabByIndex(this.previousTabIndex+1,!0):this.switchTabByIndex(0,!0)}previousTab(){this.previousTabIndex>=1?this.switchTabByIndex(this.previousTabIndex-1,!0):this.switchTabByIndex(this.$tabListItemLinks.length-1,!0)}switchTabByIndex(t,e=!1,i=!1){this.currentTabIndex=t,this.previousTabIndex=this.currentTabIndex,"true"===this.$tabListItemLinks[this.currentTabIndex]?.getAttribute("aria-selected").toString()&&this.allowClose&&!i&&(this.currentTabIndex=-1),this.$tabListItemLinks.forEach((t,i)=>{i===this.currentTabIndex?(t.setAttribute("aria-selected",!0),t.setAttribute("tabindex","0"),e&&t.focus()):(t.setAttribute("aria-selected",!1),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))}),this.$tabItems.forEach((t,e)=>{e===this.currentTabIndex?(t.removeAttribute("hidden"),t.setAttribute("tabindex","0")):(t.setAttribute("hidden",""),t.setAttribute("tabindex",-1===this.currentTabIndex?"0":"-1"))})}switchTabByID(t){const e=Array.from(this.$tabItems).findIndex(e=>e.getAttribute("id")===t);this.switchTabByIndex(e)}}return e})());
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n this.$tabList.querySelectorAll(\".tna-tabs__button\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n if (\n !this.$module ||\n !this.$tabList ||\n !this.$tabListItemLinks ||\n !this.$tabItems ||\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.currentTabIndex = this.$module.dataset.activeTabOnLoad\n ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n : 0;\n this.previousTabIndex = this.currentTabIndex;\n this.allowClose = this.$module.dataset.allowClose === \"true\";\n this.init();\n }\n\n init() {\n this.$module.classList.add(\"tna-tabs--interactive\");\n this.$tabList.removeAttribute(\"hidden\");\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n const $tabPanel = document.getElementById(tabPanelID);\n $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n $tabPanel.setAttribute(\"role\", \"tabpanel\");\n $tabListItemLink.addEventListener(\n \"click\",\n (event) => this.handleItemLinkClick(event),\n true,\n );\n });\n this.switchTabByIndex(this.currentTabIndex);\n this.$module.addEventListener(\"keydown\", (event) =>\n this.handleItemLinkKeyDown(event),\n );\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n this.switchTabByID(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n let preventDefaultKeyAction = false;\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n this.previousTab();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n this.nextTab();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(0, true, true);\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, true);\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n nextTab() {\n /* eslint-disable-next-line no-magic-numbers */\n if (this.previousTabIndex < this.$tabListItemLinks.length - 1) {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.previousTabIndex + 1, true);\n } else {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(0, true);\n }\n }\n\n previousTab() {\n /* eslint-disable-next-line no-magic-numbers */\n if (this.previousTabIndex >= 1) {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.previousTabIndex - 1, true);\n } else {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n }\n }\n\n switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {\n this.currentTabIndex = newIndex;\n this.previousTabIndex = this.currentTabIndex;\n const isTabAlreadySelected =\n this.$tabListItemLinks[this.currentTabIndex]\n ?.getAttribute(\"aria-selected\")\n .toString() === \"true\";\n if (isTabAlreadySelected && this.allowClose && !disallowClose) {\n this.currentTabIndex = -1;\n }\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (index === this.currentTabIndex) {\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n if (switchFocus) {\n $tabListItemLink.focus();\n }\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\n \"tabindex\",\n this.currentTabIndex === -1 ? \"0\" : \"-1\",\n );\n }\n });\n this.$tabItems.forEach(($tabItem, index) => {\n if (index === this.currentTabIndex) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", \"\");\n $tabItem.setAttribute(\n \"tabindex\",\n this.currentTabIndex === -1 ? \"0\" : \"-1\",\n );\n }\n });\n }\n\n switchTabByID(targetId) {\n const index = Array.from(this.$tabItems).findIndex(\n ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n );\n this.switchTabByIndex(index);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","constructor","$module","this","$tabList","querySelector","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","previousTabIndex","allowClose","init","classList","add","removeAttribute","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","event","handleItemLinkClick","switchTabByIndex","handleItemLinkKeyDown","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","disallowClose","toString","index","focus","$tabItem","targetId","Array","from","findIndex"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"components/tabs/tabs.js","mappings":"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","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/tabs/tabs.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nconst __webpack_require__ = {};\n\n","// define getter/value functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop));","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Tabs {\n constructor($module) {\n this.$module = $module;\n this.$tabListHeading =\n $module && $module.querySelector(\".tna-tabs__list-heading\");\n this.$tabList = $module && $module.querySelector(\".tna-tabs__list\");\n this.$tabListItemLinks =\n $module &&\n this.$tabList &&\n this.$tabList.querySelectorAll(\".tna-tabs__button\");\n this.$tabItems = $module && $module.querySelectorAll(\".tna-tabs__item\");\n\n if (\n !this.$module ||\n !this.$tabList ||\n !this.$tabListItemLinks ||\n !this.$tabItems ||\n this.$tabListItemLinks.length !== this.$tabItems.length\n ) {\n return;\n }\n\n this.currentTabIndex = this.$module.dataset.activeTabOnLoad\n ? parseInt(this.$module.dataset.activeTabOnLoad, 10)\n : 0;\n this.previousTabIndex = this.currentTabIndex;\n this.allowClose = this.$module.dataset.allowClose === \"true\";\n this.init();\n }\n\n init() {\n this.$module.classList.add(\"tna-tabs--interactive\");\n this.$tabListHeading.remove();\n const clickEventHandler = (event) => this.handleItemLinkClick(event);\n this.$tabListItemLinks.forEach(($tabListItemLink) => {\n const tabPanelID = $tabListItemLink.getAttribute(\"aria-controls\");\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n const $tabPanel = document.getElementById(tabPanelID);\n $tabPanel.setAttribute(\"aria-labelledby\", $tabListItemLink.id);\n $tabPanel.setAttribute(\"role\", \"tabpanel\");\n $tabListItemLink.addEventListener(\"click\", clickEventHandler, {\n capture: true,\n });\n });\n this.$tabList.addEventListener(\n \"keydown\",\n (event) => this.handleItemLinkKeyDown(event),\n { capture: true },\n );\n this.switchTabByIndex(this.currentTabIndex);\n }\n\n handleItemLinkClick(itemLinkClickEvent) {\n itemLinkClickEvent.preventDefault();\n const targetItem =\n itemLinkClickEvent.currentTarget.getAttribute(\"aria-controls\");\n this.switchTabByID(targetItem);\n }\n\n handleItemLinkKeyDown(itemLinkKeyDownEvent) {\n let preventDefaultKeyAction = false;\n switch (itemLinkKeyDownEvent.key) {\n case \"ArrowLeft\":\n this.previousTab();\n preventDefaultKeyAction = true;\n break;\n case \"ArrowRight\":\n this.nextTab();\n preventDefaultKeyAction = true;\n break;\n case \"Home\":\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(0, true, true);\n preventDefaultKeyAction = true;\n break;\n case \"End\":\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true, true);\n preventDefaultKeyAction = true;\n break;\n default:\n break;\n }\n if (preventDefaultKeyAction) {\n itemLinkKeyDownEvent.stopPropagation();\n itemLinkKeyDownEvent.preventDefault();\n }\n }\n\n nextTab() {\n /* eslint-disable-next-line no-magic-numbers */\n if (this.previousTabIndex < this.$tabListItemLinks.length - 1) {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.previousTabIndex + 1, true);\n } else {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(0, true);\n }\n }\n\n previousTab() {\n /* eslint-disable-next-line no-magic-numbers */\n if (this.previousTabIndex >= 1) {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.previousTabIndex - 1, true);\n } else {\n /* eslint-disable-next-line no-magic-numbers */\n this.switchTabByIndex(this.$tabListItemLinks.length - 1, true);\n }\n }\n\n switchTabByIndex(newIndex, switchFocus = false, disallowClose = false) {\n this.currentTabIndex = newIndex;\n this.previousTabIndex = this.currentTabIndex;\n const isTabAlreadySelected =\n this.$tabListItemLinks[this.currentTabIndex]\n ?.getAttribute(\"aria-selected\")\n .toString() === \"true\";\n if (isTabAlreadySelected && this.allowClose && !disallowClose) {\n this.currentTabIndex = -1;\n }\n this.$tabListItemLinks.forEach(($tabListItemLink, index) => {\n if (index === this.currentTabIndex) {\n $tabListItemLink.setAttribute(\"aria-selected\", true);\n $tabListItemLink.setAttribute(\"tabindex\", \"0\");\n if (switchFocus) {\n $tabListItemLink.focus();\n }\n } else {\n $tabListItemLink.setAttribute(\"aria-selected\", false);\n $tabListItemLink.setAttribute(\n \"tabindex\",\n this.currentTabIndex === -1 ? \"0\" : \"-1\",\n );\n }\n });\n this.$tabItems.forEach(($tabItem, index) => {\n if (index === this.currentTabIndex) {\n $tabItem.removeAttribute(\"hidden\");\n $tabItem.setAttribute(\"tabindex\", \"0\");\n } else {\n $tabItem.setAttribute(\"hidden\", \"\");\n $tabItem.setAttribute(\n \"tabindex\",\n this.currentTabIndex === -1 ? \"0\" : \"-1\",\n );\n }\n });\n }\n\n switchTabByID(targetId) {\n const index = Array.from(this.$tabItems).findIndex(\n ($tabItem) => $tabItem.getAttribute(\"id\") === targetId,\n );\n this.switchTabByIndex(index);\n }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Tabs","constructor","$module","this","$tabListHeading","querySelector","$tabList","$tabListItemLinks","querySelectorAll","$tabItems","length","currentTabIndex","dataset","activeTabOnLoad","parseInt","previousTabIndex","allowClose","init","classList","add","remove","clickEventHandler","event","handleItemLinkClick","forEach","$tabListItemLink","tabPanelID","getAttribute","setAttribute","$tabPanel","document","getElementById","id","addEventListener","capture","handleItemLinkKeyDown","switchTabByIndex","itemLinkClickEvent","preventDefault","targetItem","currentTarget","switchTabByID","itemLinkKeyDownEvent","preventDefaultKeyAction","previousTab","nextTab","stopPropagation","newIndex","switchFocus","disallowClose","toString","index","focus","$tabItem","removeAttribute","targetId","Array","from","findIndex"],"sourceRoot":""}
|