@nationalarchives/frontend 0.1.14-prerelease → 0.1.15-prerelease

package/nationalarchives/components/card/_index.scss

@@ -1,8 +1,15 @@
+@use "sass:math";
+@use "../../variables/colour" as colourVars; // TODO
 @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;
@@ -24,26 +31,47 @@
   }
 
   &__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");
+  }
+
+  &--green-label #{&}__image-label {
+    // color: colourVars.$tna-white;
+    background-color: colourVars.$tna-green;
   }
 
   &__body {
@@ -68,14 +96,8 @@
 
     @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;
 
@@ -87,38 +109,59 @@
       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;
-
+  @include colour.on-high-contrast {
     border: 1px transparent solid;
     @include colour.colour-border("keyline-dark");
-  }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
 
-  @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,
@@ -42,6 +44,7 @@ const Template = ({
       heading,
       href,
       image,
+      label,
       body,
       text,
       actions,
@@ -69,6 +72,7 @@ Standard.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   // actions: [
   //   {
@@ -87,7 +91,7 @@ Featured.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
+    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -97,6 +101,7 @@ Featured.args = {
     width: 1996,
     height: 1331,
   },
+  label: "New",
   body: "<p>Card body</p>",
   actions: [
     {

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
     },
     {

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

@@ -61,12 +61,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "label",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "width",
         "type": "number",
@@ -81,6 +75,12 @@
       }
     ]
   },
+  {
+    "name": "label",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "body",
     "type": "string",

package/nationalarchives/components/card/template.njk

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

package/nationalarchives/components/footer/_index.scss

@@ -1,4 +1,4 @@
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 @use "../../tools/media";
 
@@ -8,6 +8,11 @@
 
   @include colour.invert;
 
+  @include colour.on-high-contrast {
+    border-top: 1px transparent solid;
+    @include colour.colour-border("keyline");
+  }
+
   &__link {
     &,
     &:visited {

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/header/_index.scss

@@ -6,12 +6,10 @@
 @use "../../tools/media";
 
 .tna-header {
-  color: #fff;
+  @include colour.invert;
 
   background-color: colourVars.$tna-black;
 
-  @include colour.invert;
-
   &__exit {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
@@ -103,8 +101,8 @@
   }
 
   &__logo {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   &__logo-link {
@@ -137,8 +135,8 @@
   }
 
   .tna-logo {
-    width: 6.25rem;
-    height: 6.25rem;
+    width: 6rem;
+    height: 6rem;
 
     display: inline-block;
   }
@@ -148,6 +146,11 @@
     outline-offset: 1px;
   }
 
+  &__logo-link--href:active .tna-logo,
+  &__logo-link--href:focus .tna-logo {
+    outline: none;
+  }
+
   .tna-logo__foreground {
     fill: #fff;
   }
@@ -502,7 +505,7 @@
 
       position: relative;
 
-      line-height: 1.6;
+      line-height: #{math.div(1, 1.125) * 2};
 
       &::after {
         width: 0;

package/nationalarchives/components/header/template.njk

@@ -20,7 +20,7 @@
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo">
       <{%- if params.logo.href -%}a href="{{ params.logo.href }}" class="tna-header__logo-link tna-header__logo-link--href" title="{%- if params.logo.title -%}{{ params.logo.title }}{%- else -%}The National Archives{%- if params.logo.strapline %} - {{ params.logo.strapline }}{%- endif -%}{%- endif -%}"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
-        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="100" height="100">
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" class="tna-logo" style="enable-background:new 0 0 160 160" viewBox="0 0 160 160" width="96" height="96">
           <path fill="#fff" d="M0 0h160v160H0z" class="tna-logo__background"/>
           <g class="tna-logo__foreground" fill="#000">
             <path d="M1.9 107.2h156.3V158H1.9v-50.8zm0-52.7h156.3v50.8H1.9V54.5zm0-52.6h77.2v50.8H1.9V1.9zm79 0h77.2v50.8H80.9V1.9zm0-1.9H0v160h160V0H80.9z"/>

package/nationalarchives/components/hero/_index.scss

@@ -3,8 +3,9 @@
 
 .tna-hero {
   min-height: min(35vw, 480px);
-  padding-top: 5.25rem;
-  padding-bottom: 3.25rem;
+  margin-bottom: 2rem;
+  padding-top: 5rem;
+  padding-bottom: 3rem;
 
   display: flex;
   align-items: flex-end;
@@ -157,7 +158,7 @@
     }
   }
 
-  @mixin high-contrast {
+  @include colour.on-high-contrast {
     &__content-inner {
       border: 1px transparent solid;
       @include colour.colour-border("keyline-dark");
@@ -167,14 +168,4 @@
       }
     }
   }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
-
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
-    }
-  }
 }

package/nationalarchives/components/index-grid/_index.scss

@@ -1,6 +1,16 @@
+@use "sass:math";
 @use "../../tools/colour";
 
 .tna-index-grid {
+  &__heading {
+  }
+
+  &__items {
+    margin-top: 1rem;
+
+    list-style: none;
+  }
+
   &__item-wrapper {
     margin-bottom: 2rem;
   }
@@ -13,11 +23,18 @@
 
     @include colour.invert;
     text-decoration: none;
+
+    @include colour.on-high-contrast {
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+    }
   }
 
   &__item-image {
     width: 100%;
-    height: auto;
+    height: #{math.div(2, 3) * 100%};
+
+    object-fit: cover;
   }
 
   &__item-content {

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

@@ -2,7 +2,7 @@ import IndexGrid from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  heading: { control: "text" },
+  heading: { control: "object" },
   items: { control: "object" },
   columns: { control: "number" },
   columnsMedium: { control: "number" },
@@ -58,7 +58,10 @@ const exampleItem = {
 };
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: "My dogs",
+  heading: {
+    title: "My dogs",
+    level: 2,
+  },
   items: Array(12)
     .fill({ ...exampleItem })
     .map((item, index) => {

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

@@ -1,9 +1,29 @@
 [
   {
     "name": "heading",
-    "type": "string",
+    "type": "object",
     "required": true,
-    "description": ""
+    "description": "",
+    "params": [
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "level",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "size",
+        "type": "text",
+        "required": false,
+        "description": ""
+      }
+    ]
   },
   {
     "name": "items",

package/nationalarchives/components/index-grid/template.njk

@@ -2,10 +2,16 @@
 <nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column tna-column--full">
-      <h1>
-        {{ params.heading }}
-      </h1>
+      {%- set headingSize = 'l' -%}
+      {%- if params.heading.size -%}
+        {%- set headingSize = params.heading.size -%}
+      {%- endif -%}
+      <h{{ params.heading.level }} class="tna-heading tna-heading--{{ headingSize }} tna-index-grid__heading">
+        {{ params.heading.title }}
+      </h{{ params.heading.level }}>
     </div>
+  </div>
+  <ul class="tna-index-grid__items tna-container">
     {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
 
     {%- if params.columns == 1 -%}
@@ -39,7 +45,7 @@
     {%- endif -%}
 
     {%- for item in params.items -%}
-    <div class="{{ itemClasses | join(' ') }}">
+    <li class="{{ itemClasses | join(' ') }}">
       <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
         <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
         <span class="tna-index-grid__item-content">
@@ -50,7 +56,7 @@
           {%- endif -%}
         </span>
       </a>
-    </div>
+    </li>
     {%- endfor -%}
-  </div>
+  </ul>
 <nav>

package/nationalarchives/components/message/_index.scss

@@ -1,4 +1,4 @@
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 
 .tna-message {

package/nationalarchives/components/picture/_index.scss

@@ -1,9 +1,13 @@
 @use "../../tools/colour";
 
 .tna-picture {
-  margin: 0 0 1rem;
+  margin: 0 0 2rem;
   padding: 0;
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &__image-wrapper {
     // padding: 1rem 0;
 
@@ -21,6 +25,8 @@
     position: absolute;
     right: 1rem;
     bottom: 1rem;
+
+    font-size: 1rem;
   }
 
   &__transcript {
@@ -46,18 +52,11 @@
 
     border-bottom: 1px solid;
     @include colour.colour-border("keyline");
+  }
 
-    // &::after {
-    //   height: 1px;
-
-    //   position: absolute;
-    //   right: 20%;
-    //   bottom: 0;
-    //   left: 20%;
-
-    //   @include colour.colour-background("keyline");
-
-    //   content: "";
-    // }
+  @include colour.on-high-contrast {
+    border-width: 1px 1px 0;
+    @include colour.colour-border("keyline-dark");
+    border-style: solid;
   }
 }

package/nationalarchives/components/sensitive-image/sensitive-image.stories.js

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

package/nationalarchives/components/tabs/_index.scss

@@ -1,7 +1,11 @@
 @use "../../tools/colour";
 
 .tna-tabs {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   &__list {
     margin: 0 0 1rem;
@@ -124,7 +128,7 @@
     }
   }
 
-  @mixin high-contrast {
+  @include colour.on-high-contrast {
     &__list-item-link {
       padding-right: 1rem;
       padding-left: 1rem;
@@ -135,14 +139,4 @@
       @include colour.colour-border("keyline-dark");
     }
   }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
-
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
-    }
-  }
 }

package/nationalarchives/patterns/featured-collection/_index.scss

@@ -1,4 +1,4 @@
-@use "../../variables/colour" as colourVars;
+@use "../../variables/colour" as colourVars; // TODO
 
 .tna-featured-collection {
   padding-top: 2rem;

package/nationalarchives/patterns/featured-collection/featured-collection.stories.js

@@ -14,7 +14,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Patterns/Featured collection",
+  title: "Patterns/Experimental/Featured collection",
   argTypes,
 };