From 3b8dbdf58267ba683096872115f3697edf810ec7 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Tue, 13 Feb 2024 11:41:22 +0000 Subject: [PATCH] Fix icons --- CHANGELOG.md | 5 +- .../components/card/fixtures.json | 2 +- .../components/card/template.njk | 6 +- .../components/footer/fixtures.json | 2 +- .../components/footer/template.njk | 4 +- .../components/global-header/fixtures.json | 2 +- .../global-header/global-header.scss | 56 ++++++------------- .../components/global-header/template.njk | 8 +-- .../components/header/fixtures.json | 2 +- .../components/header/template.njk | 6 +- .../components/search-field/fixtures.json | 6 +- .../components/search-field/template.njk | 2 +- .../colour-combinations.stories.js | 6 +- .../colour-schemes/colour-themes.stories.js | 10 ++-- .../stories/utilities/lists/lists.stories.js | 6 +- .../generate-global-header-assets.js | 10 ++-- 16 files changed, 57 insertions(+), 76 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21ebaa82..790d674c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Changed the aspect ratio of the hero image to be 5:2 - Selected state of header component changed - Phase banner font size reduced -- Header component tweaked to more closely align to the global header +- Header component spacing and sizing tweaked to more closely align to the global header - Header and footer SVG logos changed to use `currentColor` as the foreground colour with a transparent background - Removed "link" icons from external links in the footer @@ -26,8 +26,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allowed taller images in picture elements on tiny devices - Fixed focus styles for always-light components (e.g. text inputs) on high contrast themes -- Added link to mailing list in footer +- Added link to the National Archives mailing list in footer - Added `` to inline SVGs in header and footers +- Added `aria-hidden="true"` to all Font Awesome icons ### Security diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json index 19243935..34fab283 100644 --- a/src/nationalarchives/components/card/fixtures.json +++ b/src/nationalarchives/components/card/fixtures.json @@ -75,7 +75,7 @@ ], "body": "<p>Card body</p>" }, - "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</div></li></ul><p>Card body</p></div></div></div>", + "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta tna-chip-list\"><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-calendar\" aria-hidden=\"true\"></i>24th September 2023</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-ticket\" aria-hidden=\"true\"></i>From £16</div></li><li class=\"tna-chip-list__item\"><div class=\"tna-chip tna-chip--plain\"><i class=\"fa-solid fa-fw fa-location-dot\" aria-hidden=\"true\"></i>Online</div></li></ul><p>Card body</p></div></div></div>", "hidden": false }, { diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk index c82a7f85..1226f28c 100644 --- a/src/nationalarchives/components/card/template.njk +++ b/src/nationalarchives/components/card/template.njk @@ -64,7 +64,7 @@ <li class="tna-chip-list__item"> <div class="tna-chip tna-chip--plain"> {%- if item.icon %} - <i class="fa-solid fa-fw fa-{{ item.icon }}"></i> + <i class="fa-solid fa-fw fa-{{ item.icon }}" aria-hidden="true"></i> {%- endif %} {{ item.text }} </div> @@ -83,9 +83,9 @@ {%- for item in params.actions %} <a href="{{ item.href }}" class="tna-card__action{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}> {%- if item.brandIcon %} - <i class="fa-brands fa-{{ item.brandIcon }}"></i> + <i class="fa-brands fa-{{ item.brandIcon }}" aria-hidden="true"></i> {%- elseif item.icon %} - <i class="fa-solid fa-{{ item.icon }}"></i> + <i class="fa-solid fa-{{ item.icon }}" aria-hidden="true"></i> {%- endif %} {{ item.text }} </a> diff --git a/src/nationalarchives/components/footer/fixtures.json b/src/nationalarchives/components/footer/fixtures.json index 586ef047..9f5a2175 100644 --- a/src/nationalarchives/components/footer/fixtures.json +++ b/src/nationalarchives/components/footer/fixtures.json @@ -152,7 +152,7 @@ } ] }, - "html": "<footer class=\"tna-footer \"><div class=\"tna-container\"><div class=\"tna-column tna-column--flex-1 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny tna-column--order-1\"><svg xmlns=\"http://www.w3.org/2000/svg\" xml:space=\"preserve\" class=\"tna-logo\" style=\"enable-background:new 0 0 160 160\" viewBox=\"0 0 160 160\" width=\"96\" height=\"96\"><title>The National Archives

The National Archives

Kew, Richmond
TW9 4DU

Open today
09:00—19:00

Join the National Archives' mailing list

Subscribe for regular news, updates and priority booking for events.

Subscribe
Open Government Licence

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

GOV.UKGOV.UK
", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/footer/template.njk b/src/nationalarchives/components/footer/template.njk index 59added7..4f279653 100644 --- a/src/nationalarchives/components/footer/template.njk +++ b/src/nationalarchives/components/footer/template.njk @@ -30,9 +30,9 @@
The National Archives
", + "html": "
The National ArchivesBeta
", "hidden": false } ] diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index d19f8aaf..b2cd7158 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -57,24 +57,16 @@ .tna-logo { width: 6.75rem; height: 6.75rem; - - // &__background { - // fill: transparent; - // } - - // &__foreground { - // fill: currentColor; - // } } - // &__logo-strapline { - // padding-right: 0.625rem; + &__logo-strapline { + padding-right: 0.625rem; - // @include typography.heading-font; - // @include typography.relative-font-size(20); - // text-transform: uppercase; - // line-height: math.div(6.75rem, 3); - // } + @include typography.heading-font; + @include typography.relative-font-size(20); + text-transform: uppercase; + line-height: math.div(6.75rem, 3); + } &__navigation-button-wrapper { display: none; @@ -248,9 +240,9 @@ height: 5rem; } - // &--collapse-on-medium &__logo-strapline { - // line-height: math.div(5rem, 3); - // } + &--collapse-on-medium &__logo-strapline { + line-height: math.div(5rem, 3); + } &--collapse-on-medium &__navigation { margin-bottom: 0.5rem; @@ -336,9 +328,9 @@ height: 4rem; } - // &__logo-strapline { - // line-height: 1.25rem; - // } + &__logo-strapline { + line-height: 1.25rem; + } &__navigation { width: calc(100% + #{gridVars.$gutter-width * 2}); @@ -357,9 +349,9 @@ height: 3.5rem; } - // &__logo-strapline { - // line-height: 1; - // } + &__logo-strapline { + line-height: 1; + } &__navigation { width: calc(100% + #{gridVars.$gutter-width-tiny * 2}); @@ -371,20 +363,4 @@ padding: 0.5rem gridVars.$gutter-width-tiny; } } - - // @include colour.on-high-contrast { - // &__logo { - // &:hover { - // .tna-logo { - // &__background { - // fill: #fff; - // } - - // &__foreground { - // fill: #000; - // } - // } - // } - // } - // } } diff --git a/src/nationalarchives/components/global-header/template.njk b/src/nationalarchives/components/global-header/template.njk index 0830bb62..5a7e8c28 100644 --- a/src/nationalarchives/components/global-header/template.njk +++ b/src/nationalarchives/components/global-header/template.njk @@ -19,9 +19,9 @@ - {#- {%- if params.logo.strapline -%} + {%- if params.logo.strapline %} {{ params.logo.strapline }} - {%- endif -%} #} + {%- endif %} {%- if params.logo.href %} {%- else %} @@ -50,9 +50,9 @@
  • {%- if item.brandIcon %} - + {%- elseif item.icon %} - + {%- endif %} {{ item.text }} diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json index a58e0332..88de5a2a 100644 --- a/src/nationalarchives/components/header/fixtures.json +++ b/src/nationalarchives/components/header/fixtures.json @@ -45,7 +45,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 43542c1b..fde91d60 100644 --- a/src/nationalarchives/components/header/template.njk +++ b/src/nationalarchives/components/header/template.njk @@ -10,7 +10,7 @@ {{ params.exit.text }} {%- if params.exit.target == "_blank" -%} - + {%- endif -%} @@ -55,9 +55,9 @@
  • {%- if item.brandIcon %} - + {%- elseif item.icon %} - + {%- endif %} {{ item.text }} diff --git a/src/nationalarchives/components/search-field/fixtures.json b/src/nationalarchives/components/search-field/fixtures.json index 17c0cddf..c031b8bf 100644 --- a/src/nationalarchives/components/search-field/fixtures.json +++ b/src/nationalarchives/components/search-field/fixtures.json @@ -10,7 +10,7 @@ "id": "search1", "name": "q" }, - "html": "

    ", + "html": "

    ", "hidden": false }, { @@ -23,7 +23,7 @@ "name": "q", "value": "badgers" }, - "html": "

    ", + "html": "

    ", "hidden": false }, { @@ -36,7 +36,7 @@ "name": "q", "hint": "Try searching for something interesting" }, - "html": "

    Try searching for something interesting

    ", + "html": "

    Try searching for something interesting

    ", "hidden": false } ] diff --git a/src/nationalarchives/components/search-field/template.njk b/src/nationalarchives/components/search-field/template.njk index bc46eb12..b5569af7 100644 --- a/src/nationalarchives/components/search-field/template.njk +++ b/src/nationalarchives/components/search-field/template.njk @@ -23,7 +23,7 @@ {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}> diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js index 74de0c5c..a9d090c5 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-combinations.stories.js @@ -72,17 +72,17 @@ const Template = () => { `${blockOutput}
    -

    Text / Dark / Light /

    +

    Text / Dark / Light /

    Link / Link (visited)

    • Chip
    • - Chip + Chip
    • - Chip + Chip
    ${TextInput({ diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js index 27dad13e..56151a09 100644 --- a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js +++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js @@ -389,17 +389,17 @@ const Template = ({ theme, accent }) => {
    - + Held by
    The National Archives, Kew
    - + Date
    1972–1979
    - + Reference
    LC 4
    @@ -413,7 +413,7 @@ const Template = ({ theme, accent }) => {
  • - + Chip 2
    • @@ -422,7 +422,7 @@ const Template = ({ theme, accent }) => {
  • - + Chip 4
    • diff --git a/src/nationalarchives/stories/utilities/lists/lists.stories.js b/src/nationalarchives/stories/utilities/lists/lists.stories.js index 8686e7ba..11bf069b 100644 --- a/src/nationalarchives/stories/utilities/lists/lists.stories.js +++ b/src/nationalarchives/stories/utilities/lists/lists.stories.js @@ -45,7 +45,11 @@ const DescriptionListTemplate = ({ items, plain, classes }) => } ${classes}">${items.reduce( (list, item) => `${list}
    - ${item.icon ? `` : ""} + ${ + item.icon + ? `` + : "" + } ${item.title}
    ${ diff --git a/tasks/global-header/generate-global-header-assets.js b/tasks/global-header/generate-global-header-assets.js index b45ec3dc..b45f8032 100644 --- a/tasks/global-header/generate-global-header-assets.js +++ b/tasks/global-header/generate-global-header-assets.js @@ -26,11 +26,11 @@ const globalHeaderHTML = nunjucks href: "#/shop", icon: "bag-shopping", }, - { - text: "Sign in", - href: "#/sign-in", - icon: "user", - }, + // { + // text: "Sign in", + // href: "#/sign-in", + // icon: "user", + // }, ], navigation: [ {