@nationalarchives/frontend 0.1.8-prerelease → 0.1.9-prerelease

package/nationalarchives/components/card/fixtures.json

@@ -10,7 +10,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p>\n                <h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n        <p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p>\n        <h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3>\n      </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <h3 class=\"tna-card__title tna-hgroup__title\">\n                    <span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n        <h3 class=\"tna-card__title tna-hgroup__title\">\n          <span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3>\n      </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -50,7 +50,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -62,7 +62,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -87,7 +87,7 @@
         },
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -103,7 +103,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\">\n            <img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" />\n        </div><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\">\n      <img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" />\n    </div><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -122,7 +122,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -135,7 +135,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card card__test-class\">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -150,7 +150,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-testattribute=\"foobar\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \" data-testattribute=\"foobar\">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/card/template.njk

@@ -2,61 +2,61 @@
 {%- set classes = [params.classes] if params.classes else [] -%}
 {%- set headingSize = params.heading.size if params.heading.size else "m" -%}
 {%- if params.featured -%}
-    {%- set classes = classes.concat('tna-card--featured') -%}
+  {%- set classes = classes.concat('tna-card--featured') -%}
 {%- endif -%}
 <{{ htmlElement }} class="tna-card {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <div class="tna-card__inner">
-    {%- if params.heading.supertitle -%}
-        {%- if params.heading.singleSentence -%}
-            <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
-                <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-                    <span class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</span>
-                {%- if params.href -%}
-                    <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-                {%- else -%}
-                    {{ params.heading.title }}
-                {%- endif -%}
-                </h{{ params.heading.level }}>
-            </hgroup>
+  <div class="tna-card__inner">
+  {%- if params.heading.supertitle -%}
+    {%- if params.heading.singleSentence -%}
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+        <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
+          <span class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</span>
+        {%- if params.href -%}
+          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
         {%- else -%}
-            <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
-                <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</p>
-                <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-                {%- if params.href -%}
-                    <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-                {%- else -%}
-                    {{ params.heading.title }}
-                {%- endif -%}
-                </h{{ params.heading.level }}>
-            </hgroup>
+          {{ params.heading.title }}
         {%- endif -%}
+        </h{{ params.heading.level }}>
+      </hgroup>
     {%- else -%}
-        <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ headingSize }}">
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+        <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</p>
+        <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
         {%- if params.href -%}
-            <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
         {%- else -%}
-            {{ params.heading.title }}
+          {{ params.heading.title }}
         {%- endif -%}
         </h{{ params.heading.level }}>
+      </hgroup>
     {%- endif -%}
-    {%- if params.image -%}
-        <div class="tna-card__image-container">
-            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
-        </div>
+  {%- else -%}
+    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ headingSize }}">
+    {%- if params.href -%}
+      <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+    {%- else -%}
+      {{ params.heading.title }}
     {%- endif -%}
-        <div class="tna-card__body">
-        {%- if params.text -%}
-            <p>{{ params.text }}</p>
-        {%- else -%}
-            {{ params.body | safe }}
-        {%- endif -%}
-        </div>
-    {%- if params.actions -%}
-        <div class="tna-card__actions">
-        {%- for item in params.actions -%}
-            <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
-        {%- endfor -%}
-        </div>
+    </h{{ params.heading.level }}>
+  {%- endif -%}
+  {%- if params.image -%}
+    <div class="tna-card__image-container">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
+    </div>
+  {%- endif -%}
+    <div class="tna-card__body">
+    {%- if params.text -%}
+      <p>{{ params.text }}</p>
+    {%- else -%}
+      {{ params.body | safe }}
     {%- endif -%}
     </div>
+  {%- if params.actions -%}
+    <div class="tna-card__actions">
+    {%- for item in params.actions -%}
+      <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+    {%- endfor -%}
+    </div>
+  {%- endif -%}
+  </div>
 </{{ htmlElement }}>

package/nationalarchives/components/filters/_index.scss

@@ -0,0 +1,49 @@
+.tna-filters {
+  &__item {
+    margin: 0 0.75rem 0.75rem 0;
+
+    display: inline-block;
+
+    &:last-child {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &--stacked &__item {
+    display: block;
+  }
+
+  &__item--selected #{&}__link {
+    color: #fff;
+
+    background-color: #004c7e;
+  }
+
+  &__link {
+    padding: 0.125rem 0.75rem;
+
+    display: inline-block;
+
+    color: #000;
+    text-decoration: none;
+
+    background-color: #d4e5ef;
+
+    border-radius: 99rem;
+
+    transition:
+      color 200ms,
+      background-color 200ms;
+
+    &:hover {
+      color: #fff;
+
+      background-color: #004c7e;
+
+      transition:
+        color 50ms,
+        background-color 50ms;
+    }
+  }
+}

package/nationalarchives/components/filters/filters.stories.js

@@ -0,0 +1,76 @@
+import Filters from "./template.njk";
+import "./_index.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  items: { control: "object" },
+  stack: { control: "boolean" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Experimental/Filters",
+  argTypes,
+};
+
+const Template = ({ items, stack, classes, attributes }) => {
+  return Filters({
+    params: {
+      items,
+      stack,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      label: "All",
+      href: "#?filter=all",
+      selected: true,
+    },
+    {
+      label: "Medieval (974—1485)",
+      href: "#?filter=alpha",
+    },
+    {
+      label: "Early Modern (1485—1714)",
+      href: "#?filter=beta",
+    },
+    {
+      label: "Georgians (1714—1837)",
+      href: "#?filter=gamma",
+    },
+    {
+      label: "Victorians (1837—1901)",
+      href: "#?filter=delta",
+    },
+    {
+      label: "Early 20th century (1901—1918)",
+      href: "#?filter=epsilon",
+    },
+    {
+      label: "Interwar (1918—1939)",
+      href: "#?filter=zeta",
+    },
+    {
+      label: "Second World War (1939—1945)",
+      href: "#?filter=eta",
+    },
+    {
+      label: "Postwar (1945—2000)",
+      href: "#?filter=theta",
+    },
+  ],
+  classes: "tna-filters--demo",
+};

package/nationalarchives/components/filters/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "filters",
+  "fixtures": []
+}

package/nationalarchives/components/filters/macro-options.json

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "label",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "selected",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "stack",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the filters."
+  }
+]

package/nationalarchives/components/filters/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaFilters(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/filters/template.njk

@@ -0,0 +1,8 @@
+{%- set classes = [params.classes] if params.classes else [] -%}
+<ul class="tna-filters{% if params.stack %} tna-filters--stacked{% endif %} tna-ul tna-ul--plain {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items -%}
+  <li class="tna-filters__item{%- if item.selected %} tna-filters__item--selected{% endif %}">
+    <a href="{{ item.href }}"{%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-filters__link">{{ item.label }}</a>
+  </li>
+  {%- endfor -%}
+</ul>

package/nationalarchives/components/footer/_index.scss

@@ -1,10 +1,12 @@
+@use "../../variables/colour";
+
 .tna-footer {
   padding-top: 3rem;
   padding-bottom: 3rem;
 
   color: #fff;
 
-  background-color: #26262a;
+  background-color: colour.$dark;
 
   &__link {
     color: inherit;

package/nationalarchives/components/footer/fixtures.json

@@ -4,7 +4,7 @@
     {
       "name": "minimal",
       "options": {},
-      "html": "<footer class=\"tna-footer \"><div class=\"tna-container tna-footer__licence\">\n        <div class=\"tna-column\">\n            <svg aria-hidden=\"true\" focusable=\"false\" class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 483.2 195.7\" height=\"17\" width=\"41\">\n                <path fill=\"currentColor\" d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\"></path>\n            </svg>\n        </div>\n        <div class=\"tna-column tna-column--flex-1\">\n            <p>All content is available under the <a href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\" class=\"tna-footer__link\">Open Government Licence v3.0</a>, except where otherwise stated</p>\n        </div>\n        <div class=\"tna-column\">\n            <a href=\"#\" class=\"tna-footer__govuk-link\">\n                <svg aria-hidden=\"true\" class=\"tna-footer__govuk-logotype-crown\" focusable=\"false\" height=\"30\" viewBox=\"0 0 132 97\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z\"></path>\n                </svg>\n                GOV.UK\n            </a>\n        </div>\n    </div>\n</footer>",
+      "html": "<footer class=\"tna-footer \"><div class=\"tna-container tna-footer__licence\">\n    <div class=\"tna-column\">\n      <svg aria-hidden=\"true\" focusable=\"false\" class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 483.2 195.7\" height=\"17\" width=\"41\">\n        <path fill=\"currentColor\" d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\"></path>\n      </svg>\n    </div>\n    <div class=\"tna-column tna-column--flex-1\">\n      <p>All content is available under the <a href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\" class=\"tna-footer__link\">Open Government Licence v3.0</a>, except where otherwise stated</p>\n    </div>\n    <div class=\"tna-column\">\n      <a href=\"#\" class=\"tna-footer__govuk-link\">\n        <svg aria-hidden=\"true\" class=\"tna-footer__govuk-logotype-crown\" focusable=\"false\" height=\"30\" viewBox=\"0 0 132 97\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z\"></path>\n        </svg>\n        GOV.UK\n      </a>\n    </div>\n  </div>\n</footer>",
       "hidden": false
     }
   ]

package/nationalarchives/components/footer/footer.stories.js

@@ -11,7 +11,7 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
@@ -96,7 +96,7 @@ Standard.args = {
           href: "#",
         },
         {
-          text: "Legislation.gov.ukOpens a new window",
+          text: "Legislation.gov.uk",
           href: "#",
         },
         {

package/nationalarchives/components/footer/template.njk

@@ -1,57 +1,57 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <footer class="tna-footer {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    {%- if params.navigation -%}
-    <div class="tna-container tna-footer__navigation">
-    {%- for group in params.navigation -%}
-        <div class="tna-column tna-column--flex-1 tna-column--width-1-2-small tna-column--full-tiny tna-footer__navigation-group">
-            <h4 class="tna-footer__navigation-group-title">{{ group.title }}</h4>
-            <ul class="tna-footer__navigation-group-items">
-            {%- for item in group.items -%}
-                <li class="tna-footer__navigation-group-item">
-                    <a href="{{ item.href }}" class="tna-footer__navigation-group-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
-                </li>
-            {%- endfor -%}
-            </ul>
-        </div>
-    {%- endfor -%}
+  {%- if params.navigation -%}
+  <div class="tna-container tna-footer__navigation">
+  {%- for group in params.navigation -%}
+    <nav class="tna-column tna-column--flex-1 tna-column--width-1-2-small tna-column--full-tiny tna-footer__navigation-group" aria-label="{{ group.title }}">
+      <h4 class="tna-footer__navigation-group-title">{{ group.title }}</h4>
+      <ul class="tna-footer__navigation-group-items">
+      {%- for item in group.items -%}
+        <li class="tna-footer__navigation-group-item">
+          <a href="{{ item.href }}" class="tna-footer__navigation-group-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+        </li>
+      {%- endfor -%}
+      </ul>
+    </nav>
+  {%- endfor -%}
+  </div>
+  {%- endif -%}
+  {%- if params.social -%}
+  <nav class="tna-container tna-footer__social" aria-label="Social links">
+  {%- for item in params.social -%}
+    <div class="tna-column tna-column--flex-1 tna-footer__social-item">
+      <a href="{{ item.href }}" class="tna-footer__social-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
+      {%- if item.image -%}
+        <span class="tna-footer__social-item-link-image">
+          {{ item.image | safe }}
+        </span>
+      {%- elif item.imageSrc -%}
+        <span class="tna-footer__social-item-link-image">
+          <image src="{{ item.imageSrc }}" alt="" />
+        </span>
+      {%- endif -%}
+        {{ item.text }}
+      </a>
     </div>
-    {%- endif -%}
-    {%- if params.social -%}
-    <div class="tna-container tna-footer__social">
-    {%- for item in params.social -%}
-        <div class="tna-column tna-column--flex-1 tna-footer__social-item">
-            <a href="{{ item.href }}" class="tna-footer__social-item-link tna-footer__link" {%- if item.title %}title="{{ item.title }}"{% endif %}>
-            {%- if item.image -%}
-                <span class="tna-footer__social-item-link-image">
-                    {{ item.image | safe }}
-                </span>
-            {%- elif item.imageSrc -%}
-                <span class="tna-footer__social-item-link-image">
-                    <image src="{{ item.imageSrc }}" alt="" />
-                </span>
-            {%- endif -%}
-                {{ item.text }}
-            </a>
-        </div>
-    {%- endfor -%}
+  {%- endfor -%}
+  </nav>
+  {%- endif -%}
+  <div class="tna-container tna-footer__licence">
+    <div class="tna-column">
+      <svg aria-hidden="true" focusable="false" class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+        <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
+      </svg>
     </div>
-    {%- endif -%}
-    <div class="tna-container tna-footer__licence">
-        <div class="tna-column">
-            <svg aria-hidden="true" focusable="false" class="tna-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
-                <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
-            </svg>
-        </div>
-        <div class="tna-column tna-column--flex-1">
-            <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
-        </div>
-        <div class="tna-column">
-            <a href="#" class="tna-footer__govuk-link">
-                <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" focusable="false" height="30" viewBox="0 0 132 97" width="36" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
-                </svg>
-                GOV.UK
-            </a>
-        </div>
+    <div class="tna-column tna-column--flex-1">
+      <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" class="tna-footer__link">Open Government Licence v3.0</a>, except where otherwise stated</p>
     </div>
+    <div class="tna-column">
+      <a href="#" class="tna-footer__govuk-link">
+        <svg aria-hidden="true" class="tna-footer__govuk-logotype-crown" focusable="false" height="30" viewBox="0 0 132 97" width="36" xmlns="http://www.w3.org/2000/svg">
+          <path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
+        </svg>
+        GOV.UK
+      </a>
+    </div>
+  </div>
 </footer>