@nationalarchives/frontend 0.1.16-prerelease → 0.1.18-prerelease

package/nationalarchives/components/footer/_index.scss

@@ -1,100 +1,217 @@
 @use "../../tools/colour";
+@use "../../tools/typography";
 @use "../../tools/media";
 
 .tna-footer {
-  padding-top: 3rem;
+  @include colour.invert;
+
+  padding-top: 1rem;
   padding-bottom: 3rem;
 
-  @include colour.invert;
-  @include colour.colour-font("contrast-font-base");
+  // @include colour.colour-font("font-base");
+
+  // --link: colour.brand-colour("white");
 
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline", 1px, solid, top);
   }
 
-  &__link {
-    &,
-    &:visited {
-      color: inherit;
-    }
+  .tna-logo {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
 
-    &:hover {
-      @include colour.colour-font("link");
+    &__background {
+      fill: transparent;
     }
-  }
-
-  &__top {
-    margin-bottom: 3rem;
 
-    text-align: center;
+    &__foreground {
+      fill: currentColor;
+    }
   }
 
   &__title {
-    margin-bottom: 0.5rem;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   &__address {
     font-style: normal;
   }
 
-  &__navigation {
-    padding-bottom: 3rem;
-  }
+  &__meta {
+    margin-top: 1rem;
 
-  &__navigation-group {
+    @include typography.relative-font-size(16);
   }
 
-  &__navigation-group-title {
-  }
+  &__social {
+    margin-top: 2rem;
 
-  &__navigation-group-items {
-    padding-left: 0;
+    &-items {
+    }
 
-    list-style: none;
-  }
+    &-item {
+      margin-right: 1.5rem;
+      margin-bottom: calc(1rem - 3px);
+
+      display: inline-block;
+
+      vertical-align: top;
+
+      &-link {
+        padding: 0 3px;
 
-  &__navigation-group-item {
-    & + & {
-      margin-top: 1rem;
+        display: inline-block;
+
+        border-top: 3px transparent solid;
+        border-bottom: 3px transparent solid;
+
+        &-image {
+        }
+
+        &-text {
+        }
+
+        &:has(#{&}-image) {
+          &:hover {
+            @include colour.colour-border("link", 3px, solid, bottom);
+          }
+        }
+      }
     }
   }
 
-  &__navigation-group-item-link {
+  &__mailing-list {
+    margin-top: 2rem;
+    padding: 1rem;
+
+    @include typography.relative-font-size(16);
+
+    @include colour.colour-border("keyline-dark", 1px, dashed);
+
+    // background: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23fff' stroke-width='2' stroke-dasharray='4%2c 8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") rgba(colour.brand-colour("white"), 0.1);
+    // background-color: rgba(colour.brand-colour("white"), 0.1);
+    background-color: rgba(#fff, 0.1);
   }
 
-  &__social {
-    margin-bottom: 2rem;
+  &__navigation {
+    &-block {
+      padding-top: 2rem;
 
-    &.tna-container {
-      justify-content: space-evenly;
-      align-items: flex-end;
+      &-heading {
+      }
+
+      &-items {
+      }
+
+      &-item {
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
+
+        @include colour.colour-border("keyline", 1px, solid, bottom);
+
+        &-link {
+          text-decoration: none;
+
+          &:hover {
+            @include typography.interacted-text-decoration;
+          }
+
+          &-icon {
+            width: 0.825rem;
+            height: 0.825rem;
+            margin-right: 0.125rem;
+            margin-left: 0.5rem;
+
+            display: inline-block;
+
+            position: relative;
+
+            vertical-align: middle;
+
+            border: 1px #fff solid;
+
+            &::before {
+              position: absolute;
+              top: -0.25rem;
+              right: -0.25rem;
+              z-index: 2;
+
+              border: 0.25rem transparent solid;
+              border-top-color: #fff;
+              border-right-color: #fff;
+
+              content: "";
+            }
+
+            &::after {
+              width: 4px;
+              height: 13px;
+
+              position: absolute;
+              top: -0.125rem;
+              right: -0.125rem;
+              z-index: 1;
+
+              background-color: #fff;
+
+              outline: 3px transparent solid;
+              @include colour.colour-outline("contrast-background");
+
+              transform: rotate(45deg) translateX(50%);
+              transform-origin: 100% 0;
+
+              content: "";
+            }
+          }
+        }
+      }
     }
   }
 
-  &__social-item {
-    margin-bottom: 2rem;
+  &__legal {
+    padding-top: 3rem;
 
-    text-align: center;
-  }
+    @include typography.relative-font-size(16);
 
-  &__social-item-link {
-    display: block;
-  }
+    &-items {
+      margin-bottom: 0;
 
-  &__social-item-link-image {
-    width: 2.25em;
-    margin: 0 auto 0.5rem;
+      text-align: center;
 
-    display: block;
+      @include media.on-tiny {
+        text-align: inherit;
+      }
+    }
+
+    &-item {
+      padding: 0.5rem;
+
+      display: inline-block;
+
+      @include media.on-tiny {
+        display: block;
+      }
+
+      &-link {
+      }
+    }
+  }
+
+  hr {
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
   }
 
   &__licence {
+    @include typography.relative-font-size(16);
+
     &.tna-container {
       align-items: center;
     }
 
     .tna-column {
-      margin-top: 1rem;
+      margin-top: 0.5rem;
     }
   }
 
@@ -103,22 +220,11 @@
   }
 
   &__govuk {
-    margin-top: 2rem;
-
     text-align: center;
   }
 
   &__govuk-link {
     display: inline-block;
-
-    &,
-    &:visited {
-      @include colour.colour-font("font-dark");
-    }
-
-    &:hover {
-      @include colour.colour-font("link");
-    }
   }
 
   &__govuk-logotype-crown {
@@ -127,10 +233,38 @@
   }
 
   @include media.on-mobile {
-    padding-top: 1rem;
+    padding-top: 0;
+    padding-bottom: 2rem;
+  }
 
+  @include colour.on-high-contrast {
     &__social {
-      justify-content: center;
+      &-item {
+        &-link {
+          background-color: colour.brand-colour("black");
+
+          outline: 1px transparent solid;
+          @include colour.colour-outline("keyline-dark");
+
+          &:hover {
+            background-color: inherit;
+          }
+        }
+      }
+    }
+
+    &__navigation {
+      &-block {
+        &-items {
+          @include colour.colour-border("keyline-dark", 0.25rem, solid, top);
+        }
+      }
+    }
+
+    &__mailing-list {
+      background-color: transparent;
+
+      @include colour.colour-border("keyline-dark", 1px, solid);
     }
   }
 }

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\"><div class=\"tna-column tna-column--full-tiny\"><svg class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 483.2 195.7\" width=\"60\" height=\"24\"><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 tna-column--full-tiny tna-footer__govuk\"><a href=\"https://www.gov.uk/\" class=\"tna-footer__govuk-link\"><svg class=\"tna-footer__govuk-logotype-crown\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 132 97\" width=\"44\" height=\"32\"><path fill=\"currentColor\" 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>",
+      "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\"><path fill=\"transparent\" d=\"M0 0h160v160H0z\" class=\"tna-logo__background\"/><g class=\"tna-logo__foreground\" fill=\"currentColor\"><path d=\"M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z\"/><path d=\"M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z\"/></g></svg><h2 class=\"tna-heading tna-heading--l tna-footer__title\">The National Archives</h2><address class=\"tna-footer__address\">Kew, Richmond<br />TW9 4DU</address></div></div><div class=\"tna-container\"><div class=\"tna-column--full\"><hr /></div></div><div class=\"tna-container tna-footer__licence\"><div class=\"tna-column tna-column--full-tiny\"><svg class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 483.2 195.7\" width=\"60\" height=\"24\"><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 tna-column--full-tiny tna-footer__govuk\"><a href=\"https://www.gov.uk/\" class=\"tna-footer__govuk-link\"><svg class=\"tna-footer__govuk-logotype-crown\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 132 97\" width=\"44\" height=\"32\"><path fill=\"currentColor\" 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></div></footer>",
       "hidden": false
     }
   ]

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

@@ -2,10 +2,11 @@ import Footer from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  title: { control: "text" },
-  address: { control: "text" },
-  navigation: { control: "object" },
+  meta: { control: "text" },
   social: { control: "object" },
+  navigation: { control: "object" },
+  showNewsletter: { control: "boolean" },
+  legal: { control: "object" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -22,19 +23,21 @@ export default {
 };
 
 const Template = ({
-  title,
-  address,
-  navigation,
+  meta,
   social,
+  navigation,
+  showNewsletter,
+  legal,
   classes,
   attributes,
 }) =>
   Footer({
     params: {
-      title,
-      address,
-      navigation,
+      meta,
       social,
+      navigation,
+      showNewsletter,
+      legal,
       classes,
       attributes,
     },
@@ -42,145 +45,151 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  title: "The National Archives",
-  address: "Kew, Richmond TW9 4DU",
+  meta: "<p>Open today<br />09:00&mdash;19:00</p>",
+  social: [
+    {
+      text: "Twitter",
+      href: "#",
+      image: "./images/footer/twitter.svg",
+    },
+    {
+      text: "YouTube",
+      href: "#",
+      image: "./images/footer/youtube.svg",
+    },
+    {
+      text: "Facebook",
+      href: "#",
+      image: "./images/footer/facebook.svg",
+    },
+    {
+      text: "Flickr",
+      href: "#",
+      image: "./images/footer/flickr.svg",
+    },
+    {
+      text: "Instagram",
+      href: "#",
+      image: "./images/footer/instagram.svg",
+    },
+    {
+      text: "RSS",
+      href: "#",
+      image: "./images/footer/rss.svg",
+    },
+  ],
   navigation: [
     {
-      title: "Find out more",
+      title: "About us",
       items: [
         {
-          text: "Contact us",
+          text: "Our role",
           href: "#",
         },
         {
-          text: "Press room",
+          text: "Our history",
           href: "#",
         },
         {
-          text: "Jobs and careers",
+          text: "Our collection",
           href: "#",
         },
         {
-          text: "Friends of The National Archives",
-          href: "#",
-        },
-      ],
-    },
-    {
-      title: "Site help",
-      items: [
-        {
-          text: "Help",
+          text: "Our people",
           href: "#",
         },
         {
-          text: "Website A-Z index",
+          text: "How we are run",
           href: "#",
         },
         {
-          text: "Accessibility",
+          text: "Our research amd academic collaboration",
           href: "#",
         },
-      ],
-    },
-    {
-      title: "Websites",
-      items: [
         {
-          text: "Blog",
+          text: "News",
           href: "#",
         },
         {
-          text: "Podcasts and videos",
+          text: "Contact us",
           href: "#",
         },
         {
-          text: "Shop",
+          text: "Jobs & careers",
           href: "#",
         },
         {
-          text: "Image library",
+          text: "Get involved",
           href: "#",
         },
+      ],
+    },
+    {
+      title: "Our websites help",
+      items: [
         {
           text: "UK Government Web Archive",
           href: "#",
+          newTab: true,
         },
         {
           text: "Legislation.gov.uk",
           href: "#",
+          newTab: true,
         },
         {
           text: "Find case law",
           href: "#",
+          newTab: true,
         },
         {
           text: "The Gazette",
           href: "#",
+          newTab: true,
         },
       ],
     },
     {
-      title: "Legal",
+      title: "Quick links",
       items: [
         {
-          text: "Terms of use",
-          href: "#",
-        },
-        {
-          text: "Privacy policy",
-          href: "#",
-        },
-        {
-          text: "Cookies",
-          href: "#",
-        },
-        {
-          text: "Freedom of Information",
-          href: "#",
-        },
-        {
-          text: "Transparency",
+          text: "Press room",
           href: "#",
         },
         {
-          text: "Our fees",
+          text: "Venue hire",
           href: "#",
         },
       ],
     },
   ],
-  social: [
+  showNewsletter: true,
+  legal: [
     {
-      text: "Twitter",
+      text: "Accessibility statement",
       href: "#",
-      image: "./images/footer/twitter.svg",
-    },
-    {
-      text: "YouTube",
-      href: "#",
-      image: "./images/footer/youtube.svg",
     },
     {
-      text: "Flickr",
+      text: "Freedom of information",
       href: "#",
-      image: "./images/footer/flickr.svg",
     },
     {
-      text: "Facebook",
+      text: "Terms and condidtions",
       href: "#",
-      image: "./images/footer/facebook.svg",
     },
     {
-      text: "Instagram",
+      text: "Privacy policy",
       href: "#",
-      image: "./images/footer/instagram.svg",
     },
     {
-      text: "RSS",
+      text: "Cookies",
       href: "#",
-      image: "./images/footer/rss.svg",
     },
   ],
   classes: "tna-footer--demo",
 };
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  classes: "tna-footer--demo",
+};

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

@@ -1,15 +1,41 @@
 [
   {
-    "name": "title",
-    "type": "text",
+    "name": "meta",
+    "type": "string",
     "required": false,
     "description": ""
   },
   {
-    "name": "address",
-    "type": "text",
+    "name": "social",
+    "type": "array",
     "required": false,
-    "description": ""
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "image",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
   },
   {
     "name": "navigation",
@@ -48,8 +74,8 @@
             "description": ""
           },
           {
-            "name": "image",
-            "type": "string",
+            "name": "newTab",
+            "type": "boolean",
             "required": false,
             "description": ""
           }
@@ -58,7 +84,7 @@
     ]
   },
   {
-    "name": "social",
+    "name": "legal",
     "type": "array",
     "required": false,
     "description": "",