@nationalarchives/frontend 0.1.14-prerelease → 0.1.16-prerelease

package/nationalarchives/components/button/fixtures.json

@@ -7,7 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\">Log in</a>",
       "hidden": false
     },
     {
@@ -17,7 +17,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\" title=\"Log in to the service\">Log in</a>",
       "hidden": false
     },
     {
@@ -27,7 +27,7 @@
         "href": "#",
         "secondary": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\" role=\"button\">Log in</a>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\" role=\"button\">Log in</a>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" role=\"button\" data-testattribute=\"foobar\">Log in</a>",
       "hidden": false
     }
   ]

package/nationalarchives/components/button/template.njk

@@ -2,6 +2,6 @@
 {%- if params.secondary -%}
   {%- set buttonClasses = buttonClasses.concat('tna-button--secondary') -%}
 {%- endif -%}
-<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}" role="button"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {{ params.text }}
 </a>

package/nationalarchives/components/card/_index.scss

@@ -1,8 +1,14 @@
+@use "sass:math";
 @use "../../tools/colour";
-@use "../../variables/colour" as colourVars;
+@use "../../tools/typography";
+@use "../../tools/media";
 
 .tna-card {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   &__inner {
     display: flex;
@@ -18,37 +24,58 @@
 
   &__title {
     order: 2;
+
+    @include typography.main-font;
+    @include typography.main-font-weight-bold;
   }
 
   &__title-link {
   }
 
   &__image-container {
+    height: 0;
     margin-bottom: 1rem;
+    // padding-bottom: #{math.div(9, 16) * 100%};
+    padding-bottom: #{math.div(2, 3) * 100%};
 
     position: relative;
     order: 1;
   }
 
   &__image {
-    height: auto;
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+
+    object-fit: cover;
   }
 
   &__image-label {
-    padding: 0 0.5rem;
+    max-width: calc(100% - 2rem);
+    padding: 0.25rem 0.5rem;
 
     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)};
 
-    background-color: colourVars.$tna-yellow;
+    @include colour.colour-background("accent");
   }
 
-  &__body {
-    // margin-top: 2rem;
+  &--green-label #{&}__image-label {
+    background-color: colour.brand-colour("green");
+  }
 
+  &__body {
     order: 3;
   }
 
@@ -68,57 +95,74 @@
 
     @include colour.colour-font("font-base");
 
-    // background-color: colour.$tna-yellow;
     @include colour.colour-background("accent");
 
-    .tna-card__inner {
-      margin-left: 50%;
-      padding: 2rem;
-    }
-
     .tna-card__heading {
       padding-bottom: 2rem;
 
-      border-bottom: 2px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
     }
 
     .tna-card__supertitle {
       color: inherit;
     }
 
+    .tna-card__title {
+      @include typography.heading-font;
+    }
+
     .tna-card__title-link {
       @include colour.colour-font("font-dark");
     }
 
     .tna-card__image-container {
-      margin-bottom: 0;
+      margin-bottom: 2rem;
+    }
+
+    @include media.on-larger-than-mobile {
+      .tna-card__inner {
+        margin-left: 50%;
+        padding: 2rem;
+      }
+
+      .tna-card__image-container {
+        height: auto;
+        margin-bottom: 0;
+        padding-bottom: 0;
 
-      position: absolute;
-      inset: 0 50% 0 0;
+        display: block;
+
+        position: absolute;
+        inset: 0 50% 0 0;
+      }
     }
 
-    .tna-card__image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+    @include media.on-mobile {
+      .tna-card__inner {
+        padding: 0 0 2rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 2rem;
+        margin-left: 2rem;
+      }
     }
   }
 
-  @mixin high-contrast {
-    padding: 1rem;
-
-    border: 1px transparent solid;
-    @include colour.colour-border("keyline-dark");
-  }
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px);
 
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
+    .tna-card__inner {
+      padding-bottom: 1rem;
+    }
 
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
+    .tna-card__heading,
+    .tna-card__body,
+    .tna-card__actions {
+      margin-right: 2rem;
+      margin-left: 2rem;
     }
   }
 }

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

@@ -5,6 +5,7 @@ const argTypes = {
   heading: { control: "object" },
   href: { control: "text" },
   image: { control: "object" },
+  label: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
@@ -29,6 +30,7 @@ const Template = ({
   heading,
   href,
   image,
+  label,
   body,
   text,
   actions,
@@ -36,12 +38,13 @@ const Template = ({
   htmlElement,
   classes,
   attributes,
-}) => {
-  return Card({
+}) =>
+  Card({
     params: {
       heading,
       href,
       image,
+      label,
       body,
       text,
       actions,
@@ -51,7 +54,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {
@@ -59,7 +61,6 @@ Standard.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
     singleSentence: false,
   },
   href: "#",
@@ -69,6 +70,7 @@ Standard.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   // actions: [
   //   {
@@ -87,7 +89,6 @@ Featured.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
     singleSentence: false,
   },
   href: "#",
@@ -97,6 +98,7 @@ Featured.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   actions: [
     {
@@ -109,3 +111,68 @@ Featured.args = {
   htmlElement: "article",
   classes: "tna-card--demo",
 };
+
+const GridTemplate = ({
+  heading,
+  href,
+  image,
+  label,
+  body,
+  text,
+  actions,
+  featured,
+  htmlElement,
+  classes,
+  attributes,
+}) =>
+  `<div class="tna-container">
+    ${Array(12)
+      .fill(
+        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          ${Card({
+            params: {
+              heading,
+              href,
+              image,
+              label,
+              body,
+              text,
+              actions,
+              featured,
+              htmlElement,
+              classes,
+              attributes,
+            },
+          })}
+        </div>`,
+      )
+      .join("")}
+  </div>`;
+
+export const Grid = GridTemplate.bind({});
+Grid.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    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>",
+  // actions: [
+  //   {
+  //     text: "Card action",
+  //     href: "#",
+  //     title: "Go and do the action",
+  //   },
+  // ],
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};

package/nationalarchives/components/card/fixtures.json

@@ -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><div class=\"tna-card__image-container\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></div><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--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>",
       "hidden": false
     },
     {
@@ -124,7 +124,7 @@
           }
         ]
       },
-      "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\"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--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>",
       "hidden": false
     },
     {
@@ -154,6 +154,19 @@
       },
       "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>",
       "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--m\">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,12 +23,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "size",
-        "type": "text",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "singleSentence",
         "type": "boolean",
@@ -61,12 +55,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "label",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "width",
         "type": "number",
@@ -81,6 +69,12 @@
       }
     ]
   },
+  {
+    "name": "label",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "body",
     "type": "string",

package/nationalarchives/components/card/template.njk

@@ -1,6 +1,6 @@
 {%- 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" -%}
+{%- set headingSize = "l" if params.featured else "m" -%}
 {%- if params.featured -%}
   {%- set containerClasses = containerClasses.concat('tna-card--featured') -%}
 {%- endif -%}
@@ -40,14 +40,14 @@
     </h{{ params.heading.level }}>
   {%- endif -%}
   {%- if params.image -%}
-    <div class="tna-card__image-container">
+    <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.image.label -%}
+      {%- if params.label -%}
       <div class="tna-card__image-label">
-        {{ params.image.label }}
+        {{ params.label }}
       </div>
       {%- endif -%}
-    </div>
+    </a>
   {%- endif -%}
     <div class="tna-card__body">
     {%- if params.text -%}
@@ -59,7 +59,7 @@
   {%- if params.actions -%}
     <div class="tna-card__actions">
     {%- for item in params.actions -%}
-      <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+      <a href="{{ item.href }}" class="tna-card__action tna-button" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
     {%- endfor -%}
     </div>
   {%- endif -%}

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

@@ -15,12 +15,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Components/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,4 +1,3 @@
-@use "../../variables/colour" as colourVars;
 @use "../../tools/colour";
 @use "../../tools/media";
 
@@ -7,6 +6,11 @@
   padding-bottom: 3rem;
 
   @include colour.invert;
+  @include colour.colour-font("contrast-font-base");
+
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline", 1px, solid, top);
+  }
 
   &__link {
     &,
@@ -15,8 +19,7 @@
     }
 
     &:hover {
-      // @include colour.colour-font("link");
-      color: colourVars.$tna-blue;
+      @include colour.colour-font("link");
     }
   }
 
@@ -28,8 +31,6 @@
 
   &__title {
     margin-bottom: 0.5rem;
-
-    color: inherit;
   }
 
   &__address {
@@ -44,7 +45,6 @@
   }
 
   &__navigation-group-title {
-    color: inherit;
   }
 
   &__navigation-group-items {
@@ -113,23 +113,17 @@
 
     &,
     &:visited {
-      color: inherit;
-      fill: #fff;
+      @include colour.colour-font("font-dark");
     }
 
     &:hover {
-      // @include colour.colour-font("link");
-      // @include colour.colour-fill("link");
-      color: colourVars.$tna-blue;
-      fill: colourVars.$tna-blue;
+      @include colour.colour-font("link");
     }
   }
 
   &__govuk-logotype-crown {
     margin: 0 auto;
     display: block;
-
-    fill: inherit;
   }
 
   @include media.on-mobile {

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

@@ -28,8 +28,8 @@ const Template = ({
   social,
   classes,
   attributes,
-}) => {
-  return Footer({
+}) =>
+  Footer({
     params: {
       title,
       address,
@@ -39,7 +39,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/footer/template.njk

@@ -38,7 +38,7 @@
     <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="" />
+        <img class="tna-footer__social-item-link-image" src="{{ item.image }}" alt="" width="40" height="40" />
       {%- endif -%}
         {{ item.text }}
       </a>

package/nationalarchives/components/grid/_index.scss

@@ -50,8 +50,8 @@
 
 @include media.on-mobile {
   .tna-container {
-    padding-right: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
-    padding-left: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
+    padding-right: math.div(grid.$gutter-width-mobile, 2);
+    padding-left: math.div(grid.$gutter-width-mobile, 2);
   }
 
   .tna-column {

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

@@ -30,8 +30,8 @@ const Template = ({
   htmlElement,
   classes,
   attributes,
-}) => {
-  return Header({
+}) =>
+  Header({
     params: {
       columns,
       maxWidth,
@@ -42,7 +42,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {