From 79d6e2a58d278cf5fd342f18dae62f7916a498a2 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 20 Feb 2024 10:33:14 +0000 Subject: [PATCH 01/10] Remove brand icons, update footer social links --- CHANGELOG.md | 6 +++ .../components/button/button.scss | 12 ++--- .../components/button/button.stories.js | 11 ---- .../components/button/macro-options.json | 6 --- .../components/button/template.njk | 4 +- .../components/card/card.scss | 3 +- .../components/card/macro-options.json | 6 --- .../components/card/template.njk | 4 +- .../components/footer/fixtures.json | 38 +++++++------- .../components/footer/footer.scss | 15 ++++-- .../components/footer/footer.stories.js | 36 ++++++------- .../components/footer/macro-options.json | 50 ++++++++++--------- .../components/footer/template.njk | 30 ++++++----- .../components/global-header/fixtures.json | 7 +-- .../global-header/macro-options.json | 6 --- .../components/global-header/template.njk | 4 +- .../components/header/fixtures.json | 7 +-- .../components/header/header.scss | 3 +- .../components/header/header.stories.js | 14 +----- .../components/header/macro-options.json | 6 --- .../components/header/template.njk | 4 +- src/nationalarchives/font-awesome.scss | 2 +- .../colour-schemes/colour-themes.stories.js | 49 +++++++----------- .../utilities/_typography.scss | 6 +-- 24 files changed, 131 insertions(+), 198 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0accb085..d3efccd9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,8 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added ### Changed + +- Footer social links structure and HTML changed + ### Deprecated ### Removed + +- Removed option for brand icons on buttons, card actions and headers + ### Fixed ### Security diff --git a/src/nationalarchives/components/button/button.scss b/src/nationalarchives/components/button/button.scss index 90dc7180..b4ce4d15 100644 --- a/src/nationalarchives/components/button/button.scss +++ b/src/nationalarchives/components/button/button.scss @@ -39,8 +39,7 @@ background: transparent; } - .fa-solid, - .fa-brands { + .fa-solid { display: block; font-size: 0.9em; @@ -92,8 +91,7 @@ @include typography.relative-font-size(14); line-height: 1.5rem; - .fa-solid, - .fa-brands { + .fa-solid { line-height: 2rem; } } @@ -107,8 +105,7 @@ font-size: 0; line-height: 0; - .fa-solid, - .fa-brands { + .fa-solid { width: 2.5rem; @include typography.relative-font-size(18); @@ -119,8 +116,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..d97e8af2 100644 --- a/src/nationalarchives/components/card/card.scss +++ b/src/nationalarchives/components/card/card.scss @@ -82,8 +82,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/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index 9f5a2175..06b1d122 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -13,34 +13,34 @@ "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": [ @@ -152,7 +152,7 @@ } ] }, - "html": "", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/footer/footer.scss b/src/nationalarchives/components/footer/footer.scss index 7768fe7e..4f4d6ad0 100644 --- a/src/nationalarchives/components/footer/footer.scss +++ b/src/nationalarchives/components/footer/footer.scss @@ -51,7 +51,8 @@ &-item { &-link { - min-width: calc(2rem + 4px); + width: calc(2rem + 8px); + height: 2rem; padding: 4px; display: block; @@ -62,9 +63,15 @@ border: 0 transparent solid; border-width: 4px 0; - .fa-solid, - .fa-brands { - font-size: 2rem; + svg { + // width: 2rem; + height: 2rem; + + display: inline-block; + + path { + fill: currentColor; + } } &-text { diff --git a/src/nationalarchives/components/footer/footer.stories.js b/src/nationalarchives/components/footer/footer.stories.js index 528af61d..545f61b1 100644 --- a/src/nationalarchives/components/footer/footer.stories.js +++ b/src/nationalarchives/components/footer/footer.stories.js @@ -45,37 +45,37 @@ 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: [ diff --git a/src/nationalarchives/components/footer/macro-options.json b/src/nationalarchives/components/footer/macro-options.json index 7ac25e7f..b14239ec 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", - "type": "string", - "required": true, - "description": "" - }, - { - "name": "href", + "name": "assetsPath", "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": "" + } + ] } ] }, diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index 4f279653..4f8bc214 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -27,21 +27,25 @@
@@ -124,11 +123,11 @@

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

-
+
- From 0641e5e7abc6df745a46cc8e0945ce3e0cf672a1 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Wed, 21 Feb 2024 17:54:57 +0000 Subject: [PATCH 03/10] Various updates to header and footer --- CHANGELOG.md | 2 ++ .../components/footer/fixtures.json | 3 ++- .../components/footer/footer.stories.js | 1 + .../components/footer/macro-options.json | 6 ++++++ .../components/footer/template.njk | 2 ++ .../components/global-header/fixtures.json | 2 +- .../components/global-header/global-header.mjs | 18 ++++-------------- .../global-header/global-header.scss | 1 + .../components/global-header/template.njk | 5 ++++- .../components/header/fixtures.json | 2 +- .../components/header/header.mjs | 17 ++++------------- .../components/header/header.scss | 3 +-- .../components/header/template.njk | 5 ++++- .../index-grid/index-grid.stories.js | 1 - src/nationalarchives/utilities/_global.scss | 2 +- 15 files changed, 34 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 118c2eca..a6684714 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Footer social links structure and HTML changed - 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 ### Deprecated ### Removed diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index 7d6fa297..9131443a 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -46,6 +46,7 @@ "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.stories.js b/src/nationalarchives/components/footer/footer.stories.js index 545f61b1..d7976525 100644 --- a/src/nationalarchives/components/footer/footer.stories.js +++ b/src/nationalarchives/components/footer/footer.stories.js @@ -81,6 +81,7 @@ Standard.args = { 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 b14239ec..d4fe5230 100644 --- a/src/nationalarchives/components/footer/macro-options.json +++ b/src/nationalarchives/components/footer/macro-options.json @@ -57,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 4f802a3b..daea4e1b 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -57,9 +57,11 @@
{%- for group in params.navigation %}
- +
{%- if params.navigation %}
{%- if params.navigation or params.topNavigation %}
- +
-
{%- if params.navigation %} diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index d6219d2a..55b5f386 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -40,7 +40,7 @@ "target": "_blank" } }, - "html": "
Go to the current National Archives website
The National ArchivesBeta
", + "html": "
Go to the current National Archives website
The National ArchivesBeta
", "hidden": false } ] diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk index 04676e45..383925bc 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -35,9 +35,9 @@ {%- if params.navigation or params.topNavigation %}
-