@nationalarchives/frontend 0.1.16-prerelease → 0.1.17-prerelease

package/nationalarchives/components/card/_index.scss

@@ -25,11 +25,14 @@
   &__title {
     order: 2;
 
-    @include typography.main-font;
-    @include typography.main-font-weight-bold;
+    // @include typography.main-font;
+    // @include typography.main-font-weight-bold;
   }
 
   &__title-link {
+    &::after {
+      display: none !important;
+    }
   }
 
   &__image-container {
@@ -53,26 +56,11 @@
   }
 
   &__image-label {
-    max-width: calc(100% - 2rem);
-    padding: 0.25rem 0.5rem;
+    max-width: calc(100% - 1rem);
 
     position: absolute;
-    top: 1rem;
-    left: 0;
-
-    @include colour.fixed;
-
-    @include colour.colour-font("font-dark");
-    @include typography.relative-font-size(14);
-    @include typography.main-font-weight-bold;
-    text-transform: uppercase;
-    line-height: #{math.div(16, 14)};
-
-    @include colour.colour-background("accent");
-  }
-
-  &--green-label #{&}__image-label {
-    background-color: colour.brand-colour("green");
+    top: 0.5rem;
+    left: 0.5rem;
   }
 
   &__body {
@@ -88,36 +76,34 @@
   &__action {
   }
 
-  &--featured {
-    @include colour.fixed;
-
-    position: relative;
-
-    @include colour.colour-font("font-base");
-
-    @include colour.colour-background("accent");
-
-    .tna-card__heading {
-      padding-bottom: 2rem;
-
-      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
+  &--contrast,
+  &--accent {
+    .tna-card__inner {
+      padding-bottom: 1rem;
     }
 
-    .tna-card__supertitle {
-      color: inherit;
+    .tna-card__heading,
+    .tna-card__body,
+    .tna-card__actions {
+      margin-right: 1rem;
+      margin-left: 1rem;
     }
+  }
 
-    .tna-card__title {
-      @include typography.heading-font;
-    }
+  &--contrast {
+    @include colour.invert;
+  }
 
-    .tna-card__title-link {
-      @include colour.colour-font("font-dark");
-    }
+  &--accent {
+    @include colour.accent;
+  }
 
-    .tna-card__image-container {
-      margin-bottom: 2rem;
-    }
+  &--accent &__supertitle {
+    @include colour.invert;
+  }
+
+  &--horizontal {
+    position: relative;
 
     @include media.on-larger-than-mobile {
       .tna-card__inner {
@@ -135,13 +121,27 @@
         position: absolute;
         inset: 0 50% 0 0;
       }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 0;
+        margin-left: 0;
+      }
     }
+  }
 
+  &--horizontal#{&}--contrast,
+  &--horizontal#{&}--accent {
     @include media.on-mobile {
       .tna-card__inner {
         padding: 0 0 2rem;
       }
 
+      .tna-card__image-container {
+        margin-bottom: 2rem;
+      }
+
       .tna-card__heading,
       .tna-card__body,
       .tna-card__actions {
@@ -151,18 +151,33 @@
     }
   }
 
+  &:not(#{&}--horizontal) {
+    @include colour.on-high-contrast {
+      .tna-card__inner {
+        padding-bottom: 1rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 1rem;
+        margin-left: 1rem;
+      }
+    }
+  }
+
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
 
     .tna-card__inner {
-      padding-bottom: 1rem;
+      // padding-bottom: 1rem;
     }
 
     .tna-card__heading,
     .tna-card__body,
     .tna-card__actions {
-      margin-right: 2rem;
-      margin-left: 2rem;
+      // margin-right: 1rem;
+      // margin-left: 1rem;
     }
   }
 }

package/nationalarchives/components/card/card.stories.js

@@ -9,7 +9,8 @@ const argTypes = {
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
-  featured: { control: "boolean" },
+  horizontal: { control: "boolean" },
+  style: { control: "text" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -34,7 +35,8 @@ const Template = ({
   body,
   text,
   actions,
-  featured,
+  horizontal,
+  style,
   htmlElement,
   classes,
   attributes,
@@ -48,7 +50,8 @@ const Template = ({
       body,
       text,
       actions,
-      featured,
+      horizontal,
+      style,
       htmlElement,
       classes,
       attributes,
@@ -61,6 +64,7 @@ Standard.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
+    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -83,12 +87,59 @@ Standard.args = {
   classes: "tna-card--demo",
 };
 
-export const Featured = Template.bind({});
-Featured.args = {
+export const Boxed = Template.bind({});
+Boxed.args = {
   heading: {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
+    size: "l",
+    singleSentence: false,
+  },
+  href: "#",
+  image: {
+    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    alt: "The National Archives office",
+    width: 1996,
+    height: 1331,
+  },
+  label: "New",
+  body: "<p>Card body</p>",
+  style: "contrast",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Accent = Template.bind({});
+Accent.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "l",
+    singleSentence: false,
+  },
+  href: "#",
+  image: {
+    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    alt: "The National Archives office",
+    width: 1996,
+    height: 1331,
+  },
+  label: "New",
+  body: "<p>Card body</p>",
+  style: "accent",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -107,7 +158,7 @@ Featured.args = {
       title: "Go and do the action",
     },
   ],
-  featured: true,
+  horizontal: true,
   htmlElement: "article",
   classes: "tna-card--demo",
 };
@@ -120,7 +171,7 @@ const GridTemplate = ({
   body,
   text,
   actions,
-  featured,
+  horizontal,
   htmlElement,
   classes,
   attributes,
@@ -138,7 +189,7 @@ const GridTemplate = ({
               body,
               text,
               actions,
-              featured,
+              horizontal,
               htmlElement,
               classes,
               attributes,

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,48 +124,87 @@
           }
         ]
       },
-      "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 classes",
+      "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>",
-        "classes": "card__test-class"
+        "style": "boxed"
       },
-      "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 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 attributes",
+      "name": "with a accent style",
       "options": {
         "heading": {
           "title": "Card title",
           "level": 3
         },
         "body": "<p>Card body</p>",
-        "attributes": {
-          "data-testattribute": "foobar"
-        }
+        "style": "accent"
       },
-      "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 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 a label",
+      "name": "with an unknown style",
       "options": {
         "heading": {
           "title": "Card title",
           "level": 3
         },
-        "label": "New",
-        "body": "<p>Card body</p>"
+        "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--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
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "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--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "body": "<p>Card body</p>",
+        "attributes": {
+          "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--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

@@ -23,6 +23,12 @@
         "required": true,
         "description": ""
       },
+      {
+        "name": "size",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "singleSentence",
         "type": "boolean",
@@ -78,7 +84,7 @@
   {
     "name": "body",
     "type": "string",
-    "required": false,
+    "required": true,
     "description": ""
   },
   {
@@ -114,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 = "l" if params.featured 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;