@nationalarchives/frontend 0.1.14-prerelease → 0.1.16-prerelease

package/nationalarchives/components/header/_index.scss

@@ -6,11 +6,11 @@
 @use "../../tools/media";
 
 .tna-header {
-  color: #fff;
+  @include colour.invert;
 
-  background-color: colourVars.$tna-black;
+  color: colour.brand-colour("white");
 
-  @include colour.invert;
+  background-color: colour.brand-colour("black");
 
   &__exit {
     padding-top: 0.5rem;
@@ -103,8 +103,8 @@
   }
 
   &__logo {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   &__logo-link {
@@ -137,8 +137,8 @@
   }
 
   .tna-logo {
-    width: 6.25rem;
-    height: 6.25rem;
+    width: 6rem;
+    height: 6rem;
 
     display: inline-block;
   }
@@ -148,6 +148,11 @@
     outline-offset: 1px;
   }
 
+  &__logo-link--href:active .tna-logo,
+  &__logo-link--href:focus .tna-logo {
+    outline: none;
+  }
+
   .tna-logo__foreground {
     fill: #fff;
   }
@@ -259,7 +264,7 @@
   &--orange,
   &--green,
   &--blue {
-    color: colourVars.$tna-black;
+    color: colour.brand-colour("black");
 
     .tna-header__logo-link {
       &:hover {
@@ -274,28 +279,28 @@
     }
 
     .tna-header__hamburger {
-      background-color: colourVars.$tna-black;
+      background-color: colour.brand-colour("black");
     }
   }
 
   &--yellow {
-    background-color: colourVars.$tna-yellow;
+    background-color: colour.brand-colour("yellow");
   }
 
   &--pink {
-    background-color: colourVars.$tna-pink;
+    background-color: colour.brand-colour("pink");
   }
 
   &--orange {
-    background-color: colourVars.$tna-orange;
+    background-color: colour.brand-colour("orange");
   }
 
   &--green {
-    background-color: colourVars.$tna-green;
+    background-color: colour.brand-colour("green");
   }
 
   &--blue {
-    background-color: colourVars.$tna-blue;
+    background-color: colour.brand-colour("blue");
   }
 
   &__navigation {
@@ -403,8 +408,6 @@
   }
 
   @include media.on-mobile {
-    $compensated-container-padding: grid.$gutter-width-mobile + 0.75rem;
-
     &__contents {
       &.tna-container {
         padding-right: 0;
@@ -417,8 +420,8 @@
       padding-bottom: 1rem;
 
       &.tna-column {
-        padding-right: $compensated-container-padding;
-        padding-left: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
+        padding-left: grid.$gutter-width-mobile;
       }
     }
 
@@ -433,7 +436,7 @@
 
     &__navigation-toggle {
       &.tna-column {
-        padding-right: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
         padding-left: 0;
       }
     }
@@ -467,8 +470,7 @@
 
       @include colour.colour-background("page-background");
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__top-navigation-item {
@@ -490,19 +492,18 @@
 
       display: block;
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__navigation-item-link {
-      padding-right: $compensated-container-padding;
-      padding-left: $compensated-container-padding;
+      padding-right: grid.$gutter-width-mobile;
+      padding-left: grid.$gutter-width-mobile + 1rem;
 
       display: block;
 
       position: relative;
 
-      line-height: 1.6;
+      line-height: #{math.div(1, 1.125) * 2};
 
       &::after {
         width: 0;

package/nationalarchives/components/header/header.stories.js

@@ -39,8 +39,8 @@ const Template = ({
   exit,
   classes,
   attributes,
-}) => {
-  return Header({
+}) =>
+  Header({
     params: {
       logo,
       topNavigation,
@@ -51,7 +51,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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,14 +3,17 @@
 
 .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;
 
   position: relative;
 
+  @include colour.invert-on-mobile;
+
   &__image {
     width: 100%;
     height: 100%;
@@ -104,8 +107,6 @@
 
     display: block;
 
-    @include colour.invert;
-
     &__image {
       height: 320px;
 
@@ -141,13 +142,10 @@
     }
 
     &__heading {
-      color: inherit;
     }
 
     &__body {
       margin-top: 1rem;
-
-      color: inherit;
     }
   }
 
@@ -157,24 +155,13 @@
     }
   }
 
-  @mixin high-contrast {
+  @include colour.on-high-contrast {
     &__content-inner {
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
 
       @include media.on-mobile {
         border: none;
       }
     }
   }
-
-  .tna-template--high-contrast-theme & {
-    @include high-contrast;
-  }
-
-  @media (prefers-contrast: more) {
-    .tna-template--system-theme & {
-      @include high-contrast;
-    }
-  }
 }

package/nationalarchives/components/hero/hero.stories.js

@@ -23,8 +23,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ heading, body, text, image, classes, attributes }) => {
-  return Hero({
+const Template = ({ heading, body, text, image, classes, attributes }) =>
+  Hero({
     params: {
       heading,
       body,
@@ -34,7 +34,6 @@ const Template = ({ heading, body, text, image, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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,17 @@
 
     @include colour.invert;
     text-decoration: none;
+
+    @include colour.on-high-contrast {
+      @include colour.colour-border("keyline-dark", 1px);
+    }
   }
 
   &__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" },
@@ -32,8 +32,8 @@ const Template = ({
   columnsTiny,
   classes,
   attributes,
-}) => {
-  return IndexGrid({
+}) =>
+  IndexGrid({
     params: {
       heading,
       items,
@@ -45,7 +45,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 const exampleItem = {
   href: "#",
@@ -58,7 +57,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,3 @@
-@use "../../variables/colour" as colourVars;
 @use "../../tools/colour";
 
 .tna-message {
@@ -7,17 +6,16 @@
   display: flex;
   align-items: center;
 
-  color: colourVars.$tna-black;
+  color: colour.brand-colour("black");
 
   @include colour.colour-background("keyline");
 
-  border-left: 0.5rem transparent solid;
-  @include colour.colour-border("keyline-dark");
+  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
 
   // &--yellow {
-  background-color: colourVars.$tna-cream;
+  background-color: colour.brand-colour("cream");
 
-  border-left-color: colourVars.$tna-yellow;
+  border-left-color: colour.brand-colour("yellow");
   // }
 
   &__icon {

package/nationalarchives/components/message/phase-banner.stories.js

@@ -18,15 +18,14 @@ export default {
   argTypes,
 };
 
-const Template = ({ message, classes, attributes }) => {
-  return Message({
+const Template = ({ message, classes, attributes }) =>
+  Message({
     params: {
       message,
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/phase-banner/phase-banner.stories.js

@@ -22,8 +22,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ phase, message, classes, attributes }) => {
-  return PhaseBanner({
+const Template = ({ phase, message, classes, attributes }) =>
+  PhaseBanner({
     params: {
       phase,
       message,
@@ -31,7 +31,6 @@ const Template = ({ phase, message, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Discovery = Template.bind({});
 Discovery.args = {

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 {
@@ -44,20 +50,11 @@
 
     text-align: center;
 
-    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");
+    @include colour.colour-border("keyline", 1px, solid, bottom);
+  }
 
-    //   content: "";
-    // }
+  @include colour.on-high-contrast {
+    @include colour.colour-border("keyline-dark", 1px);
+    border-bottom-width: 0;
   }
 }

package/nationalarchives/components/picture/picture.stories.js

@@ -34,8 +34,8 @@ const Template = ({
   translation,
   classes,
   attributes,
-}) => {
-  return Picture({
+}) =>
+  Picture({
     params: {
       src,
       width,
@@ -48,7 +48,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/profile/profile.stories.js

@@ -17,14 +17,13 @@ export default {
   argTypes,
 };
 
-const Template = ({ classes, attributes }) => {
-  return Profile({
+const Template = ({ classes, attributes }) =>
+  Profile({
     params: {
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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

@@ -19,12 +19,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Experimental/Components/Sensitive image",
+  title: "Components/Sensitive image",
   argTypes,
 };
 
-const Template = ({ image, warning, action, classes, attributes }) => {
-  return SensitiveImage({
+const Template = ({ image, warning, action, classes, attributes }) =>
+  SensitiveImage({
     params: {
       image,
       warning,
@@ -33,7 +33,6 @@ const Template = ({ image, warning, action, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/skip-link/_index.scss

@@ -0,0 +1,63 @@
+@use "../../tools/colour";
+
+.tna-skip-link {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 1rem !important;
+
+  display: block !important;
+
+  position: absolute !important;
+
+  overflow: hidden !important;
+
+  white-space: nowrap !important;
+
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("button-primary-text", $important: true);
+  }
+
+  &:active,
+  &:focus {
+    width: auto !important;
+    height: auto !important;
+    margin: inherit !important;
+
+    position: static !important;
+
+    overflow: visible !important;
+
+    white-space: inherit !important;
+
+    clip: auto !important;
+    -webkit-clip-path: none !important;
+    clip-path: none !important;
+  }
+
+  &:focus {
+    @include colour.colour-background(
+      "button-primary-background",
+      $important: true
+    );
+
+    @include colour.colour-border("focus-outline", 0.3125rem, $important: true);
+
+    outline: none !important;
+  }
+
+  &:hover {
+    @include colour.colour-font("button-primary-hover-text", $important: true);
+
+    @include colour.colour-background(
+      "button-primary-hover-background",
+      $important: true
+    );
+  }
+}

package/nationalarchives/components/skip-link/fixtures.json

@@ -0,0 +1,11 @@
+{
+  "component": "skip link",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {},
+      "html": "<a href=\"#main-content\" class=\"tna-skip-link \">Skip to main content</a>",
+      "hidden": false
+    }
+  ]
+}