Remove FA brand icons, header and footer optimisation

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
 

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);
   });
 };
 

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;
     }

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;

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);

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",

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",

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 -%}
-  <i class="fa-brands fa-{{ params.brandIcon }}" aria-hidden="true"></i>
-  {% elseif params.icon -%}
+  {%- if params.icon -%}
   <i class="fa-solid fa-{{ params.icon }}" aria-hidden="true"></i>
   {% endif -%}
   {{ params.text -}}

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;
     }
   }

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",

src/nationalarchives/components/card/template.njk

@@ -82,9 +82,7 @@
     <div class="tna-card__actions">
     {%- 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 }}" aria-hidden="true"></i>
-        {%- elseif item.icon %}
+        {%- if item.icon %}
         <i class="fa-solid fa-{{ item.icon }}" aria-hidden="true"></i>
         {%- endif %}
         {{ item.text }}

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;

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;

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);
 }
 ```
 

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 ||

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;

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;

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%;

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;

src/nationalarchives/components/filters/filters.scss

@@ -1,6 +1,5 @@
 @use "../../tools/colour";
 @use "../../tools/spacing";
-@use "../../utilities";
 
 .tna-filters {
   @include spacing.space-above;