diff --git a/CHANGELOG.md b/CHANGELOG.md index 0accb085..f5374ae4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,8 +9,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed + +- Footer social links structure and HTML changed +- Header icons changed to SVGs +- Crown logo in footer changed from St Edward's Crown to Tudor Crown +- Added navigation toggle button to HTML of both headers +- Allow navigation groups in footer to have hidden titles +- `utilities/_global.scss` split into other files `_reset.scss` and `_areas.scss` + ### Deprecated ### Removed + +- Removed option for brand icons on buttons, card actions and headers +- Removed Font Awesome icon selection for header and footers +- No `init` method for component JavaScript - components are now initialised on instantiation (`new Header($header).init()` -> `new Header($header)`) + ### Fixed ### Security diff --git a/src/nationalarchives/all.mjs b/src/nationalarchives/all.mjs index af4d2c7e..489b5d10 100644 --- a/src/nationalarchives/all.mjs +++ b/src/nationalarchives/all.mjs @@ -40,53 +40,53 @@ const initAll = (options) => { const $breadcrumbs = $scope.querySelector('[data-module="tna-breadcrumbs"]'); if ($breadcrumbs) { - new Breadcrumbs($breadcrumbs).init(); + new Breadcrumbs($breadcrumbs); } const $cookieBanner = $scope.querySelector( '[data-module="tna-cookie-banner"]', ); if ($cookieBanner) { - new CookieBanner($cookieBanner).init(); + new CookieBanner($cookieBanner); } const $galleries = $scope.querySelectorAll('[data-module="tna-gallery"]'); $galleries.forEach(($gallery) => { - new Gallery($gallery).init(); + new Gallery($gallery); }); const $globalHeader = $scope.querySelector( '[data-module="tna-global-header"]', ); if ($globalHeader) { - new GlobalHeader($globalHeader).init(); + new GlobalHeader($globalHeader); } const $header = $scope.querySelector('[data-module="tna-header"]'); if ($header) { - new Header($header).init(); + new Header($header); } const $pictures = $scope.querySelectorAll('[data-module="tna-picture"]'); $pictures.forEach(($picture) => { - new Picture($picture).init(); + new Picture($picture); }); const $sensitiveImages = $scope.querySelectorAll( '[data-module="tna-sensitive-image"]', ); $sensitiveImages.forEach(($sensitiveImage) => { - new SensitiveImage($sensitiveImage).init(); + new SensitiveImage($sensitiveImage); }); const $skipLinks = $scope.querySelectorAll('[data-module="tna-skip-link"]'); $skipLinks.forEach(($skipLink) => { - new SkipLink($skipLink).init(); + new SkipLink($skipLink); }); const $tabs = $scope.querySelectorAll('[data-module="tna-tabs"]'); $tabs.forEach(($tabModule) => { - new Tabs($tabModule).init(); + new Tabs($tabModule); }); }; diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs b/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs index 13d0c3d3..20152e40 100644 --- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs +++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs @@ -9,9 +9,7 @@ export class Breadcrumbs { $module && this.$breadcrumbsList && $module.querySelectorAll(".tna-breadcrumbs__item"); - } - init() { if (!this.$module || !this.$breadcrumbsList || !this.$breadcrumbs) { return; } diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss index 41c71328..8975bea6 100644 --- a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss +++ b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss @@ -1,8 +1,6 @@ @use "../../tools/colour"; @use "../../tools/media"; @use "../../tools/typography"; -@use "../../utilities"; -@use "../grid"; .tna-breadcrumbs { padding-top: 1rem; diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 90dc7180..30dff3b0 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -2,7 +2,6 @@ @use "../../tools/colour"; @use "../../tools/media"; @use "../../tools/typography"; -@use "../../utilities"; @use "button-group"; .tna-button { @@ -39,8 +38,7 @@ background: transparent; } - .fa-solid, - .fa-brands { + .fa-solid { display: block; font-size: 0.9em; @@ -92,8 +90,7 @@ @include typography.relative-font-size(14); line-height: 1.5rem; - .fa-solid, - .fa-brands { + .fa-solid { line-height: 2rem; } } @@ -107,8 +104,7 @@ font-size: 0; line-height: 0; - .fa-solid, - .fa-brands { + .fa-solid { width: 2.5rem; @include typography.relative-font-size(18); @@ -119,8 +115,7 @@ padding-right: 0; padding-left: 0; - .fa-solid, - .fa-brands { + .fa-solid { width: 2rem; @include typography.relative-font-size(18 * 0.9); diff --git a/src/nationalarchives/components/button/button.stories.js b/src/nationalarchives/components/button/button.stories.js index 5c83e150..c2af318d 100644 --- a/src/nationalarchives/components/button/button.stories.js +++ b/src/nationalarchives/components/button/button.stories.js @@ -6,7 +6,6 @@ const argTypes = { href: { control: "text" }, title: { control: "text" }, icon: { control: "text" }, - brandIcon: { control: "text" }, accent: { control: "boolean" }, small: { control: "boolean" }, plain: { control: "boolean" }, @@ -35,7 +34,6 @@ const Template = ({ href, title, icon, - brandIcon, accent, small, plain, @@ -53,7 +51,6 @@ const Template = ({ href, title, icon, - brandIcon, accent, small, plain, @@ -99,14 +96,6 @@ RightAlignedIcon.args = { classes: "tna-button--demo", }; -export const BrandIcon = Template.bind({}); -BrandIcon.args = { - text: "Twitter", - href: "#", - brandIcon: "twitter", - classes: "tna-button--demo", -}; - export const IconOnly = Template.bind({}); IconOnly.args = { text: "Show as a list", diff --git a/src/nationalarchives/components/button/macro-options.json b/src/nationalarchives/components/button/macro-options.json index bfedf23a..9df9f6a0 100644 --- a/src/nationalarchives/components/button/macro-options.json +++ b/src/nationalarchives/components/button/macro-options.json @@ -23,12 +23,6 @@ "required": false, "description": "" }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "description": "" - }, { "name": "accent", "type": "boolean", diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk index 5d574c2a..496243b5 100644 --- a/src/nationalarchives/components/button/template.njk +++ b/src/nationalarchives/components/button/template.njk @@ -18,9 +18,7 @@ {%- set buttonClasses = buttonClasses.concat('tna-button--icon-right') -%} {%- endif -%} <{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> - {%- if params.brandIcon -%} - - {% elseif params.icon -%} + {%- if params.icon -%} {% endif -%} {{ params.text -}} diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss index 5d885435..1144b37e 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -3,8 +3,6 @@ @use "../../tools/typography"; @use "../../tools/media"; @use "../../tools/spacing"; -@use "../../utilities"; -@use "../button"; .tna-card { @include spacing.space-above; @@ -82,8 +80,7 @@ &__action { @include typography.main-font-weight-bold; - .fa-solid, - .fa-brands { + .fa-solid { margin-right: 0.5rem; } } diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json index 614c1e33..30383386 100644 --- a/src/nationalarchives/components/card/macro-options.json +++ b/src/nationalarchives/components/card/macro-options.json @@ -178,12 +178,6 @@ "required": false, "description": "The name of a Font Awesome icon, without the prefixed `fa-`." }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "description": "The name of a Font Awesome brand icon, without the prefixed `fa-`." - }, { "name": "classes", "type": "string", diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk index 1226f28c..99c58e36 100644 --- a/src/nationalarchives/components/card/template.njk +++ b/src/nationalarchives/components/card/template.njk @@ -82,9 +82,7 @@
{%- for item in params.actions %} - {%- if item.brandIcon %} - - {%- elseif item.icon %} + {%- if item.icon %} {%- endif %} {{ item.text }} diff --git a/src/nationalarchives/components/checkboxes/checkboxes.scss b/src/nationalarchives/components/checkboxes/checkboxes.scss index 8938053c..55c2eca4 100644 --- a/src/nationalarchives/components/checkboxes/checkboxes.scss +++ b/src/nationalarchives/components/checkboxes/checkboxes.scss @@ -1,8 +1,7 @@ @use "../../variables/forms"; +@use "../../tools/a11y"; @use "../../tools/colour"; @use "../../tools/media"; -@use "../../utilities/a11y"; -@use "../../utilities"; .tna-checkboxes { display: flex; diff --git a/src/nationalarchives/components/compound-filters/compound-filters.scss b/src/nationalarchives/components/compound-filters/compound-filters.scss index b93d70b5..08cf4ebf 100644 --- a/src/nationalarchives/components/compound-filters/compound-filters.scss +++ b/src/nationalarchives/components/compound-filters/compound-filters.scss @@ -1,7 +1,6 @@ @use "../../tools/colour"; @use "../../tools/spacing"; @use "../../tools/typography"; -@use "../../utilities"; .tna-compound-filters { @include spacing.space-above; diff --git a/src/nationalarchives/components/cookie-banner/README.md b/src/nationalarchives/components/cookie-banner/README.md index bf5f1ff6..86de56a5 100644 --- a/src/nationalarchives/components/cookie-banner/README.md +++ b/src/nationalarchives/components/cookie-banner/README.md @@ -37,7 +37,7 @@ const $cookieBanner = document.querySelector( ); if ($cookieBanner) { - new TNAFrontend.CookieBanner($cookieBanner).init(); + new TNAFrontend.CookieBanner($cookieBanner); } ``` diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs index 236c283a..19717f8c 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.mjs +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.mjs @@ -14,9 +14,7 @@ export class CookieBanner { this.$rejectedMessage = $module && $module.querySelector(".tna-cookie-banner__message--rejected"); this.$closeButtons = $module && $module.querySelectorAll('[value="close"]'); - } - init() { if ( !this.$module || !this.$acceptButton || diff --git a/src/nationalarchives/components/cookie-banner/cookie-banner.scss b/src/nationalarchives/components/cookie-banner/cookie-banner.scss index a80dc389..ee6f520b 100644 --- a/src/nationalarchives/components/cookie-banner/cookie-banner.scss +++ b/src/nationalarchives/components/cookie-banner/cookie-banner.scss @@ -2,9 +2,6 @@ @use "../../tools/media"; @use "../../tools/spacing"; @use "../../tools/typography"; -@use "../../utilities"; -@use "../button"; -@use "../grid"; .tna-cookie-banner { padding-top: 2rem; diff --git a/src/nationalarchives/components/date-input/date-input.scss b/src/nationalarchives/components/date-input/date-input.scss index 6686bfde..50c291fc 100644 --- a/src/nationalarchives/components/date-input/date-input.scss +++ b/src/nationalarchives/components/date-input/date-input.scss @@ -1,7 +1,6 @@ @use "../../variables/forms"; @use "../../tools/colour"; @use "../../tools/typography"; -@use "../../utilities"; .tna-date-input { display: flex; diff --git a/src/nationalarchives/components/date-search/date-search.scss b/src/nationalarchives/components/date-search/date-search.scss index 26c2835e..f944e894 100644 --- a/src/nationalarchives/components/date-search/date-search.scss +++ b/src/nationalarchives/components/date-search/date-search.scss @@ -1,6 +1,5 @@ @use "../../variables/forms"; @use "../../tools/colour"; -@use "../../utilities"; .tna-date-search { max-width: 100%; diff --git a/src/nationalarchives/components/featured-records/featured-records.scss b/src/nationalarchives/components/featured-records/featured-records.scss index 24c592bb..d55e36ce 100644 --- a/src/nationalarchives/components/featured-records/featured-records.scss +++ b/src/nationalarchives/components/featured-records/featured-records.scss @@ -3,7 +3,6 @@ @use "../../tools/spacing"; @use "../../tools/typography"; @use "../../variables/typography" as typographyVars; -@use "../../utilities"; .tna-featured-records { @include spacing.space-above; diff --git a/src/nationalarchives/components/filters/filters.scss b/src/nationalarchives/components/filters/filters.scss index f0c2c192..8c4f981d 100644 --- a/src/nationalarchives/components/filters/filters.scss +++ b/src/nationalarchives/components/filters/filters.scss @@ -1,6 +1,5 @@ @use "../../tools/colour"; @use "../../tools/spacing"; -@use "../../utilities"; .tna-filters { @include spacing.space-above; diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index 9f5a2175..9131443a 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -4,7 +4,7 @@ { "name": "minimal", "options": {}, - "html": "", + "html": "", "hidden": false }, { @@ -13,39 +13,40 @@ "meta": "

Open today
09:00—19:00

", "social": [ { - "text": "Twitter", - "href": "#", - "brandIcon": "twitter" + "href": "https://twitter.com/UKNatArchives", + "icon": "twitter", + "title": "Visit us on Twitter" }, { - "text": "YouTube", - "href": "#", - "brandIcon": "youtube" + "href": "https://www.youtube.com/c/TheNationalArchivesUK", + "icon": "youtube", + "title": "Watch us on YouTube" }, { - "text": "Facebook", - "href": "#", - "brandIcon": "facebook" + "href": "https://www.facebook.com/TheNationalArchives", + "icon": "facebook", + "title": "See us on Facebook" }, { - "text": "Flickr", - "href": "#", - "brandIcon": "flickr" + "href": "https://www.flickr.com/photos/nationalarchives", + "icon": "flickr", + "title": "See our Flickr feed" }, { - "text": "Instagram", - "href": "#", - "brandIcon": "instagram" + "href": "https://www.instagram.com/nationalarchivesuk/", + "icon": "instagram", + "title": "See us on Instagram" }, { - "text": "RSS", - "href": "#", - "icon": "rss" + "href": "https://www.nationalarchives.gov.uk/rss/", + "icon": "rss", + "title": "Read our RSS feed" } ], "navigation": [ { "title": "About us", + "hideTitle": true, "items": [ { "text": "Our role", @@ -152,7 +153,7 @@ } ] }, - "html": "", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index 7768fe7e..6aaea931 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -1,9 +1,6 @@ @use "../../tools/colour"; @use "../../tools/typography"; @use "../../tools/media"; -@use "../../utilities"; -@use "../button"; -@use "../grid"; .tna-footer { @include colour.contrast; @@ -51,7 +48,8 @@ &-item { &-link { - min-width: calc(2rem + 4px); + width: calc(2rem + 8px); + height: 2rem; padding: 4px; display: block; @@ -62,9 +60,14 @@ border: 0 transparent solid; border-width: 4px 0; - .fa-solid, - .fa-brands { - font-size: 2rem; + svg { + height: 2rem; + + display: inline-block; + + path { + fill: currentColor; + } } &-text { @@ -153,7 +156,7 @@ hr { margin-top: 1.5rem; - margin-bottom: 1rem; + margin-bottom: 0.5rem; } &__licence { @@ -164,7 +167,7 @@ } .tna-column { - margin-top: 0.5rem; + margin-top: 1rem; } } @@ -180,7 +183,8 @@ } &-logotype-crown { - margin: 0 auto; + margin: 0 auto 0.125rem; + display: block; } } diff --git a/src/nationalarchives/components/footer/footer.stories.js b/src/nationalarchives/components/footer/footer.stories.js index 528af61d..d7976525 100644 --- a/src/nationalarchives/components/footer/footer.stories.js +++ b/src/nationalarchives/components/footer/footer.stories.js @@ -45,42 +45,43 @@ const Template = ({ export const Standard = Template.bind({}); Standard.args = { - meta: "

Open today
09:00—19:00

", + meta: "

Open today
09:00—19:00

", social: [ { - text: "Twitter", - href: "#", - brandIcon: "twitter", + href: "https://twitter.com/UKNatArchives", + icon: "twitter", + title: "Visit us on Twitter", }, { - text: "YouTube", - href: "#", - brandIcon: "youtube", + href: "https://www.youtube.com/c/TheNationalArchivesUK", + icon: "youtube", + title: "Watch us on YouTube", }, { - text: "Facebook", - href: "#", - brandIcon: "facebook", + href: "https://www.facebook.com/TheNationalArchives", + icon: "facebook", + title: "See us on Facebook", }, { - text: "Flickr", - href: "#", - brandIcon: "flickr", + href: "https://www.flickr.com/photos/nationalarchives", + icon: "flickr", + title: "See our Flickr feed", }, { - text: "Instagram", - href: "#", - brandIcon: "instagram", + href: "https://www.instagram.com/nationalarchivesuk/", + icon: "instagram", + title: "See us on Instagram", }, { - text: "RSS", - href: "#", + href: "https://www.nationalarchives.gov.uk/rss/", icon: "rss", + title: "Read our RSS feed", }, ], navigation: [ { title: "About us", + hideTitle: true, items: [ { text: "Our role", diff --git a/src/nationalarchives/components/footer/macro-options.json b/src/nationalarchives/components/footer/macro-options.json index 7ac25e7f..d4fe5230 100644 --- a/src/nationalarchives/components/footer/macro-options.json +++ b/src/nationalarchives/components/footer/macro-options.json @@ -7,39 +7,41 @@ }, { "name": "social", - "type": "array", + "type": "object", "required": false, "description": "", "params": [ { - "name": "text", + "name": "assetsPath", "type": "string", - "required": true, - "description": "" - }, - { - "name": "href", - "type": "string", - "required": true, - "description": "" - }, - { - "name": "icon", - "type": "string", - "required": true, - "description": "" - }, - { - "name": "brandIcon", - "type": "string", - "required": true, + "required": false, "description": "" }, { - "name": "title", - "type": "string", + "name": "items", + "type": "array", "required": false, - "description": "" + "description": "", + "params": [ + { + "name": "href", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "icon", + "type": "string", + "required": true, + "description": "" + }, + { + "name": "title", + "type": "string", + "required": true, + "description": "" + } + ] } ] }, @@ -55,6 +57,12 @@ "required": true, "description": "" }, + { + "name": "hideTitle", + "type": "boolean", + "required": false, + "description": "" + }, { "name": "items", "type": "array", diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index 4f279653..daea4e1b 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -27,21 +27,25 @@
@@ -120,11 +125,11 @@

All content is available under the Open Government Licence v3.0, except where otherwise stated

-
+
- diff --git a/src/nationalarchives/components/gallery/gallery.mjs b/src/nationalarchives/components/gallery/gallery.mjs index ae233520..7b89feaa 100644 --- a/src/nationalarchives/components/gallery/gallery.mjs +++ b/src/nationalarchives/components/gallery/gallery.mjs @@ -5,9 +5,7 @@ export class Gallery { this.$module = $module; this.$items = $module && $module.querySelector(".tna-gallery__items"); this.opened = false; - } - init() { if (!this.$module || !this.$items) { return; } diff --git a/src/nationalarchives/components/gallery/gallery.scss b/src/nationalarchives/components/gallery/gallery.scss index 6c47fae1..4d30dc64 100644 --- a/src/nationalarchives/components/gallery/gallery.scss +++ b/src/nationalarchives/components/gallery/gallery.scss @@ -1,9 +1,6 @@ @use "../../tools/colour"; @use "../../tools/spacing"; @use "../../tools/media"; -@use "../../utilities"; -@use "../button"; -@use "../grid"; .tna-gallery { @include colour.contrast; diff --git a/src/nationalarchives/components/global-header/README.md b/src/nationalarchives/components/global-header/README.md index 7cc65fbc..19abd92d 100644 --- a/src/nationalarchives/components/global-header/README.md +++ b/src/nationalarchives/components/global-header/README.md @@ -31,7 +31,7 @@ const $globalHeader = document.querySelector( ); if ($globalHeader) { - new TNAFrontend.GlobalHeader($globalHeader).init(); + new TNAFrontend.GlobalHeader($globalHeader); } ``` diff --git a/src/nationalarchives/components/global-header/fixtures.json b/src/nationalarchives/components/global-header/fixtures.json index ddc6abea..4e1ca255 100644 --- a/src/nationalarchives/components/global-header/fixtures.json +++ b/src/nationalarchives/components/global-header/fixtures.json @@ -17,11 +17,6 @@ "text": "Top item 2", "href": "#/top-2", "icon": "phone" - }, - { - "text": "Top item 3", - "href": "#/top-3", - "brandIcon": "github" } ], "navigation": [ @@ -39,7 +34,7 @@ } ] }, - "html": "
The National ArchivesBeta
", + "html": "
The National ArchivesBeta
", "hidden": false } ] diff --git a/src/nationalarchives/components/global-header/global-header.mjs b/src/nationalarchives/components/global-header/global-header.mjs index 246859b1..649bb49f 100644 --- a/src/nationalarchives/components/global-header/global-header.mjs +++ b/src/nationalarchives/components/global-header/global-header.mjs @@ -3,9 +3,8 @@ import uuidv4 from "../../lib/uuid.mjs"; export class GlobalHeader { constructor($module) { this.$module = $module; - this.$toggleButtonWrapper = - $module && - $module.querySelector(".tna-global-header__navigation-button-wrapper"); + this.$toggleButton = + $module && $module.querySelector(".tna-global-header__navigation-button"); this.$navigation = $module && $module.querySelector(".tna-global-header__navigation-wrapper"); @@ -20,12 +19,10 @@ export class GlobalHeader { this.$topNavigation.querySelectorAll("[tabindex='0']"))); this.menuOpened = false; this.mql = window.matchMedia("(max-width: 768px)"); - } - init() { if ( !this.$module || - !this.$toggleButtonWrapper || + !this.$toggleButton || (!this.$navigation && !this.$topNavigation) ) { return; @@ -40,20 +37,11 @@ export class GlobalHeader { this.$topNavigation.setAttribute("id", uniqueIdTop); } - this.$toggleButton = document.createElement("button"); - this.$toggleButton.innerText = "Menu"; + this.$toggleButton.removeAttribute("hidden"); this.$toggleButton.setAttribute( "aria-controls", [uniqueId, uniqueIdTop].join(" "), ); - this.$toggleButton.setAttribute("aria-haspopup", "true"); - this.$toggleButton.classList.add("tna-global-header__navigation-button"); - - this.$hamburger = document.createElement("div"); - this.$hamburger.classList.add("tna-global-header__hamburger"); - - this.$toggleButton.appendChild(this.$hamburger); - this.$toggleButtonWrapper.appendChild(this.$toggleButton); this.syncState(); diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 8b5cef53..07fbe8ed 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -3,7 +3,9 @@ @use "../../tools/colour"; @use "../../tools/typography"; @use "../../tools/media"; -@use "../../utilities"; +@use "../../utilities/colour" as colourUtils; +@use "../../utilities/global"; +// @use "../../utilities/typography" as typographyUtils; @use "../grid"; .tna-global-header { @@ -216,6 +218,16 @@ @include colour.colour-font("font-base"); @include typography.interacted-text-decoration; } + + svg { + height: 1em; + + display: inline-block; + + path { + fill: currentColor; + } + } } @include media.on-medium { @@ -309,6 +321,7 @@ &__navigation-item-link { line-height: 1.75rem; + @include typography.main-font-weight-bold; } &__navigation-item:last-child &__navigation-item-link { diff --git a/src/nationalarchives/components/global-header/global-header.stories.js b/src/nationalarchives/components/global-header/global-header.stories.js index 896437d5..7b09787b 100644 --- a/src/nationalarchives/components/global-header/global-header.stories.js +++ b/src/nationalarchives/components/global-header/global-header.stories.js @@ -60,7 +60,7 @@ Standard.args = { { text: "Shop", href: "#/shop", - icon: "bag-shopping", + icon: "shop", }, { text: "Sign in", @@ -133,7 +133,7 @@ Medium.args = { { text: "Shop", href: "#/shop", - icon: "bag-shopping", + icon: "shop", }, { text: "Sign in", @@ -206,7 +206,7 @@ MediumCollapsed.args = { { text: "Shop", href: "#/shop", - icon: "bag-shopping", + icon: "shop", }, { text: "Sign in", @@ -267,7 +267,7 @@ Mobile.args = { { text: "Shop", href: "#/shop", - icon: "bag-shopping", + icon: "shop", }, { text: "Sign in", diff --git a/src/nationalarchives/components/global-header/macro-options.json b/src/nationalarchives/components/global-header/macro-options.json index 7becbd28..f803c69c 100644 --- a/src/nationalarchives/components/global-header/macro-options.json +++ b/src/nationalarchives/components/global-header/macro-options.json @@ -80,12 +80,6 @@ "type": "string", "required": false, "description": "" - }, - { - "name": "brandIcon", - "type": "string", - "required": false, - "description": "" } ] }, diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 5a7e8c28..e35a0f9f 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -30,7 +30,10 @@
- +
{%- if params.navigation %}
{%- if params.navigation or params.topNavigation %}
- +