@nationalarchives/frontend 0.1.10-prerelease → 0.1.12-prerelease

package/nationalarchives/components/card/template.njk

@@ -1,10 +1,10 @@
 {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
-{%- set classes = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = [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 containerClasses = containerClasses.concat('tna-card--featured') -%}
 {%- endif -%}
-<{{ htmlElement }} class="tna-card {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
   {%- if params.heading.supertitle -%}
     {%- if params.heading.singleSentence -%}
@@ -41,7 +41,12 @@
   {%- endif -%}
   {%- if params.image -%}
     <div class="tna-card__image-container">
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
+      {%- if params.image.label -%}
+      <div class="tna-card__image-label">
+        {{ params.image.label }}
+      </div>
+      {%- endif -%}
     </div>
   {%- endif -%}
     <div class="tna-card__body">

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

@@ -15,7 +15,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Experimental/Filters",
+  title: "Experimental/Components/Filters",
   argTypes,
 };
 

package/nationalarchives/components/filters/macro.njk

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

package/nationalarchives/components/filters/template.njk

@@ -1,5 +1,5 @@
-{%- 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 %}>
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<ul class="tna-filters{% if params.stack %} tna-filters--stacked{% endif %} tna-ul tna-ul--plain {{ containerClasses | 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>

package/nationalarchives/components/footer/_index.scss

@@ -1,19 +1,24 @@
-@use "../../variables/colour";
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../variables/colour" as colourVars;
+@use "../../tools/colour";
 @use "../../tools/media";
 
 .tna-footer {
   padding-top: 2rem;
   padding-bottom: 2rem;
 
-  color: #fff;
-
-  background-color: colour.$dark;
+  // @include colour.invert;
+  @extend %tna-invert;
 
   &__link {
-    color: inherit;
+    &,
+    &:visited {
+      color: inherit;
+    }
 
     &:hover {
-      color: #f0a;
+      // @include colour.colour-font("link");
+      color: colourVars.$tna-blue;
     }
   }
 
@@ -51,6 +56,9 @@
   }
 
   &__navigation-group-item {
+    & + & {
+      margin-top: 1rem;
+    }
   }
 
   &__navigation-group-item-link {
@@ -59,9 +67,8 @@
   &__social {
     margin-bottom: 2rem;
 
-    justify-content: space-evenly;
-
     &.tna-container {
+      justify-content: space-evenly;
       align-items: flex-end;
     }
   }
@@ -106,12 +113,17 @@
   &__govuk-link {
     display: inline-block;
 
-    color: inherit;
-    fill: #fff;
+    &,
+    &:visited {
+      color: inherit;
+      fill: #fff;
+    }
 
     &:hover {
-      color: #f0a;
-      fill: #f0a;
+      // @include colour.colour-font("link");
+      // @include colour.colour-fill("link");
+      color: colourVars.$tna-blue;
+      fill: colourVars.$tna-blue;
     }
   }
 

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 tna-column--full-tiny\">\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 tna-column--full-tiny tna-footer__govuk\">\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\"><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=\"#\" 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>",
       "hidden": false
     }
   ]

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

@@ -17,7 +17,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Work in progress/Footer",
+  title: "Components/Footer",
   argTypes,
 };
 
@@ -155,32 +155,32 @@ Standard.args = {
     {
       text: "Twitter",
       href: "#",
-      image: "/images/footer/twitter.svg",
+      image: "./images/footer/twitter.svg",
     },
     {
       text: "YouTube",
       href: "#",
-      image: "/images/footer/youtube.svg",
+      image: "./images/footer/youtube.svg",
     },
     {
       text: "Flickr",
       href: "#",
-      image: "/images/footer/flickr.svg",
+      image: "./images/footer/flickr.svg",
     },
     {
       text: "Facebook",
       href: "#",
-      image: "/images/footer/facebook.svg",
+      image: "./images/footer/facebook.svg",
     },
     {
       text: "Instagram",
       href: "#",
-      image: "/images/footer/instagram.svg",
+      image: "./images/footer/instagram.svg",
     },
     {
       text: "RSS",
       href: "#",
-      image: "/images/footer/rss.svg",
+      image: "./images/footer/rss.svg",
     },
   ],
   classes: "tna-footer--demo",

package/nationalarchives/components/footer/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaFooter(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/footer/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/footer/template.njk

@@ -35,7 +35,7 @@
   {%- 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--width-1-4-small tna-column--width-1-2-tiny tna-footer__social-item">
+    <div class="tna-column tna-column--flex-1 tna-column--width-1-4-small tna-column--width-1-2-tiny 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 -%}
         <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" />
@@ -48,7 +48,7 @@
 {%- endif -%}
   <div class="tna-container tna-footer__licence">
     <div class="tna-column tna-column--full-tiny">
-      <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">
+      <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>
@@ -57,8 +57,8 @@
     </div>
     <div class="tna-column tna-column--full-tiny tna-footer__govuk">
       <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 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>

package/nationalarchives/components/grid/_index.scss

@@ -13,7 +13,6 @@
 
   box-sizing: border-box;
 
-  display: -ms-flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: stretch;
@@ -36,7 +35,6 @@
   box-sizing: border-box;
 
   &--container {
-    display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
     justify-content: stretch;
@@ -44,16 +42,6 @@
   }
 }
 
-.tna-container--no-padding,
-.tna-container--no-padding-all,
-.tna-container--no-padding-all > .tna-column,
-.tna-column--no-padding,
-.tna-column--container--no-padding-all,
-.tna-column--container--no-padding-all > .tna-column {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 @include tools.columns-generator(grid.$column-count);
 
 @include media.on-medium {
@@ -79,3 +67,13 @@
 @include media.on-tiny {
   @include tools.columns-generator(grid.$column-count-tiny, "tiny");
 }
+
+.tna-container--no-padding,
+.tna-container--no-padding-all,
+.tna-container--no-padding-all > .tna-column,
+.tna-column--no-padding,
+.tna-column--container--no-padding-all,
+.tna-column--container--no-padding-all > .tna-column {
+  padding-right: 0;
+  padding-left: 0;
+}

package/nationalarchives/components/grid/fixtures.json

@@ -18,7 +18,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container tna-container--max\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -32,7 +32,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container tna-container--no-padding\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -46,7 +46,7 @@
           }
         ]
       },
-      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></article>",
+      "html": "<article class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></article>",
       "hidden": false
     },
     {
@@ -60,7 +60,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container container__test-class\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -76,7 +76,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \" data-testattribute=\"foobar\"><div class=\"tna-column tna-column--full\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -177,7 +177,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\">\n    <p>Full width</p>\n  </div><div class=\"tna-column tna-column--width-1-2\">\n    <p>Half</p>\n  </div><div class=\"tna-column tna-column--width-1-2\">\n    <p>Half</p>\n  </div><div class=\"tna-column tna-column--width-1-3\">\n    <p>Third</p>\n  </div><div class=\"tna-column tna-column--width-1-3\">\n    <p>Third</p>\n  </div><div class=\"tna-column tna-column--width-1-3\">\n    <p>Third</p>\n  </div><div class=\"tna-column tna-column--width-2-3\">\n    <p>Two thirds</p>\n  </div><div class=\"tna-column tna-column--width-1-3\">\n    <p>Third</p>\n  </div><div class=\"tna-column tna-column--width-1-3\">\n    <p>Third</p>\n  </div><div class=\"tna-column tna-column--width-2-3\">\n    <p>Two thirds</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-2\">\n    <p>Half</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-2\">\n    <p>Half</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-4\">\n    <p>Quarter</p>\n  </div><div class=\"tna-column tna-column--width-1-2\">\n    <p>Half</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full\"><p>Full width</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-1-3\"><p>Third</p></div><div class=\"tna-column tna-column--width-2-3\"><p>Two thirds</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-4\"><p>Quarter</p></div><div class=\"tna-column tna-column--width-1-2\"><p>Half</p></div></div>",
       "hidden": false
     },
     {
@@ -193,7 +193,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--full tna-column--full-medium tna-column--full-small tna-column--full-tiny\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -209,7 +209,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--width-1-5 tna-column--width-1-4-medium tna-column--width-1-3-small tna-column--width-1-2-tiny\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--width-1-5 tna-column--width-1-4-medium tna-column--width-1-3-small tna-column--width-1-2-tiny\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -225,7 +225,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--flex-4 tna-column--flex-3-medium tna-column--flex-2-small tna-column--flex-1-tiny\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column tna-column--flex-4 tna-column--flex-3-medium tna-column--flex-2-small tna-column--flex-1-tiny\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -238,7 +238,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -251,7 +251,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column column--test-class\"><p>Full width</p></div></div>",
       "hidden": false
     },
     {
@@ -266,7 +266,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\">\n    <p>Full width</p>\n  </div></div>",
+      "html": "<div class=\"tna-container \"><div class=\"tna-column \" data-testattribute=\"foobar\"><p>Full width</p></div></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/grid/grid.stories.js

@@ -188,6 +188,60 @@ const responsiveColumn = {
   widthTiny: "full",
 };
 Responsive.args = {
-  classes: "tna-grid--demo",
+  classes: "tna-grid--demo tna-grid--demo-tall",
   columns: Array(12).fill({ ...responsiveColumn }),
 };
+
+export const Flex = Template.bind({});
+Flex.args = {
+  classes: "tna-grid--demo",
+  columns: [
+    {
+      html: "<h1>A</h1>",
+      width: "1-4",
+    },
+    {
+      html: "<h1>B</h1>",
+      flex: 1,
+    },
+  ],
+};
+
+export const Order = Template.bind({});
+Order.args = {
+  classes: "tna-grid--demo tna-grid--demo-tall",
+  columns: [
+    {
+      html: "<h1>A</h1>",
+      width: "1-4",
+      order: 1,
+      orderMedium: 2,
+      orderSmall: 3,
+      orderTiny: 4,
+    },
+    {
+      html: "<h1>B</h1>",
+      width: "1-4",
+      order: 2,
+      orderMedium: 1,
+      orderSmall: 4,
+      orderTiny: 3,
+    },
+    {
+      html: "<h1>C</h1>",
+      width: "1-4",
+      order: 3,
+      orderMedium: 4,
+      orderSmall: 1,
+      orderTiny: 2,
+    },
+    {
+      html: "<h1>D</h1>",
+      width: "1-4",
+      order: 4,
+      orderMedium: 3,
+      orderSmall: 2,
+      orderTiny: 1,
+    },
+  ],
+};

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

@@ -59,6 +59,36 @@
         "required": false,
         "description": ""
       },
+      {
+        "name": "order",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderMedium",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderSmall",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "orderTiny",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "noPadding",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "classes",
         "type": "string",

package/nationalarchives/components/grid/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaGrid(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/grid/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/grid/template.njk

@@ -13,6 +13,7 @@
 {%- for item in params.columns -%}
   {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}
   {%- set columnClasses = [item.classes] if item.classes else [] -%}
+  
   {%- if item.width -%}
     {%- set columnClasses = columnClasses.concat('tna-column--full') if item.width == 'full' else ( columnClasses.concat('tna-column--width-' + item.width) ) -%}
   {%- endif -%}
@@ -25,6 +26,7 @@
   {%- if item.widthTiny -%}
     {%- set columnClasses = columnClasses.concat('tna-column--full-tiny') if item.widthTiny == 'full' else ( columnClasses.concat('tna-column--width-' + item.widthTiny + '-tiny') ) -%}
   {%- endif -%}
+
   {%- if item.flex -%}
     {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flex) -%}
   {%- endif -%}
@@ -37,8 +39,22 @@
   {%- if item.flexTiny -%}
     {%- set columnClasses = columnClasses.concat('tna-column--flex-' + item.flexTiny + '-tiny') -%}
   {%- endif -%}
+
+  {%- if item.order -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.order) -%}
+  {%- endif -%}
+  {%- if item.orderMedium -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderMedium + '-medium') -%}
+  {%- endif -%}
+  {%- if item.orderSmall -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderSmall + '-small') -%}
+  {%- endif -%}
+  {%- if item.orderTiny -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--order-' + item.orderTiny + '-tiny') -%}
+  {%- endif -%}
+
   {%- if item.noPadding -%}
-    {%- set columnClasses = columnClasses.concat('tna-column--noPadding') -%}
+    {%- set columnClasses = columnClasses.concat('tna-column--no-padding') -%}
   {%- endif -%}
   <{{ columnHtmlElement }} class="tna-column {{ columnClasses | join(' ') }}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     {{ item.html | safe }}