@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

package/nationalarchives/components/card/fixtures.json

@@ -10,7 +10,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><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></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\"><p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--l\"><p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\"><h3 class=\"tna-card__title tna-hgroup__title\"><span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--l\"><h3 class=\"tna-card__title tna-hgroup__title\"><span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -62,7 +62,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><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></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><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></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -87,7 +87,7 @@
         },
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><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></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -105,7 +105,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><a href=\"\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><a href=\"\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -124,7 +124,59 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><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\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with a label",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "label": "New",
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with a boxed style",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "style": "boxed"
+      },
+      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with a accent style",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "style": "accent"
+      },
+      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with an unknown style",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "style": "foobar"
+      },
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -137,7 +189,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><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></div>",
+      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -152,7 +204,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><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></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

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

@@ -25,7 +25,7 @@
       },
       {
         "name": "size",
-        "type": "text",
+        "type": "string",
         "required": false,
         "description": ""
       },
@@ -84,7 +84,7 @@
   {
     "name": "body",
     "type": "string",
-    "required": false,
+    "required": true,
     "description": ""
   },
   {
@@ -120,11 +120,17 @@
     ]
   },
   {
-    "name": "featured",
+    "name": "horizontal",
     "type": "boolean",
     "required": false,
     "description": ""
   },
+  {
+    "name": "style",
+    "type": "text",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "htmlElement",
     "type": "string",

package/nationalarchives/components/card/template.njk

@@ -1,14 +1,18 @@
 {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set headingSize = params.heading.size if params.heading.size else "m" -%}
-{%- if params.featured -%}
-  {%- set containerClasses = containerClasses.concat('tna-card--featured') -%}
+{%- if params.horizontal -%}
+  {%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
+{%- endif -%}
+{%- if params.style == "boxed" -%}
+  {%- set containerClasses = containerClasses.concat('tna-card--contrast') -%}
+{%- elseif params.style == "accent" -%}
+  {%- set containerClasses = containerClasses.concat('tna-card--accent') -%}
 {%- endif -%}
 <{{ 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 -%}
-      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ params.heading.size or 'l' }}">
         <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 -%}
@@ -19,7 +23,7 @@
         </h{{ params.heading.level }}>
       </hgroup>
     {%- else -%}
-      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ params.heading.size or 'l' }}">
         <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 -%}
@@ -31,7 +35,7 @@
       </hgroup>
     {%- endif -%}
   {%- else -%}
-    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ headingSize }}">
+    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ params.heading.size or 'l' }}">
     {%- if params.href -%}
       <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
     {%- else -%}
@@ -43,7 +47,7 @@
     <a href="{{ item.href }}" class="tna-card__image-container" tabindex="-1">
       <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
       {%- if params.label -%}
-      <div class="tna-card__image-label">
+      <div class="tna-chip tna-card__image-label">
         {{ params.label }}
       </div>
       {%- endif -%}
@@ -59,7 +63,7 @@
   {%- if params.actions -%}
     <div class="tna-card__actions">
     {%- for item in params.actions -%}
-      <a href="{{ item.href }}" class="tna-card__action tna-button" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+      <a href="{{ item.href }}" class="tna-card__action" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
     {%- endfor -%}
     </div>
   {%- endif -%}

package/nationalarchives/components/filters/_index.scss

@@ -1,31 +1,30 @@
 .tna-filters {
-  &__item {
-    margin: 0 0.75rem 0.75rem 0;
+  margin-bottom: 2rem;
 
-    display: inline-block;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 
-    &:last-child {
-      margin-right: 0;
-      margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
   }
 
-  &--stacked &__item {
-    display: block;
+  &__item {
   }
 
   &__item--selected #{&}__link {
-    color: #fff;
-
     background-color: #004c7e;
+
+    &,
+    &:link,
+    &:visited {
+      color: #fff;
+    }
   }
 
   &__link {
     padding: 0.125rem 0.75rem;
 
-    display: inline-block;
-
-    color: #000;
     text-decoration: none;
 
     background-color: #d4e5ef;
@@ -36,6 +35,12 @@
       color 200ms,
       background-color 200ms;
 
+    &,
+    &:link,
+    &:visited {
+      color: #000;
+    }
+
     &:hover {
       color: #fff;
 

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

@@ -15,12 +15,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Experimental/Filters",
+  title: "Components/Filters",
   argTypes,
 };
 
-const Template = ({ items, stack, classes, attributes }) => {
-  return Filters({
+const Template = ({ items, stack, classes, attributes }) =>
+  Filters({
     params: {
       items,
       stack,
@@ -28,7 +28,6 @@ const Template = ({ items, stack, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/footer/_index.scss

@@ -1,105 +1,217 @@
-@use "../../variables/colour" as colourVars; // TODO
 @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("font-base");
+
+  // --link: colour.brand-colour("white");
 
   @include colour.on-high-contrast {
-    border-top: 1px transparent solid;
-    @include colour.colour-border("keyline");
+    @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");
-      color: colourVars.$tna-blue;
+    &__background {
+      fill: transparent;
     }
-  }
-
-  &__top {
-    margin-bottom: 3rem;
 
-    text-align: center;
+    &__foreground {
+      fill: currentColor;
+    }
   }
 
   &__title {
-    margin-bottom: 0.5rem;
-
-    color: inherit;
+    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 {
-    color: inherit;
-  }
+  &__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;
 
-  &__navigation-group-item {
-    & + & {
-      margin-top: 1rem;
+      &-link {
+        padding: 0 3px;
+
+        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;
     }
   }
 
@@ -108,40 +220,51 @@
   }
 
   &__govuk {
-    margin-top: 2rem;
-
     text-align: center;
   }
 
   &__govuk-link {
     display: inline-block;
-
-    &,
-    &:visited {
-      color: inherit;
-      fill: #fff;
-    }
-
-    &:hover {
-      // @include colour.colour-font("link");
-      // @include colour.colour-fill("link");
-      color: colourVars.$tna-blue;
-      fill: colourVars.$tna-blue;
-    }
   }
 
   &__govuk-logotype-crown {
     margin: 0 auto;
     display: block;
-
-    fill: inherit;
   }
 
   @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);
     }
   }
 }