@nationalarchives/frontend 0.1.10-prerelease → 0.1.12-prerelease

package/nationalarchives/components/header/template.njk

@@ -1,8 +1,8 @@
-{%- set classes = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.colour -%}
-  {%- set classes = classes.concat('tna-header--' + params.colour) -%}
+  {%- set containerClasses = containerClasses.concat('tna-header--' + params.colour) -%}
 {%- endif -%}
-<header class="tna-header {{ classes | join(' ') }}" data-module="tna-header" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<header class="tna-header {{ containerClasses | join(' ') }}" data-module="tna-header" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {%- if params.exit -%}
   <div class="tna-header__exit">
     <div class="tna-container">
@@ -19,30 +19,12 @@
   {%- endif -%}
   <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"{%- else -%}span class="tna-header__logo-link"{%- endif -%}>
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve" class="tna-logo" width="100" height="100">
-          <rect class="tna-logo__background" fill="none" width="160" height="160"/>
+      <{%- 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">
+          <path fill="#fff" d="M0 0h160v160H0z" class="tna-logo__background"/>
           <g class="tna-logo__foreground" fill="#000">
-            <path d="M1.9,107.2h156.3V158H1.9V107.2z M1.9,54.5h79.1h77.2v50.8H1.9V54.5z M1.9,1.9h77.2v50.8H1.9V1.9z M80.9,1.9 h77.2v50.8H80.9C80.9,52.7,80.9,1.9,80.9,1.9z M80.9,0H0v52.7v1.9v50.8v1.9v52.7h160v-52.7v-1.9V52.7V0H80.9z"/>
-            <polygon points="21.3,19.5 15.9,19.5 15.9,16.5 30.2,16.5 30.2,19.5 24.8,19.5 24.8,37.9 21.3,37.9 "/>
-            <polygon points="31.6,16.5 35,16.5 35,25.5 43.4,25.5 43.4,16.5 46.8,16.5 46.8,37.9 43.4,37.9 43.4,28.6 35,28.6 35,37.9 31.6,37.9 "/>
-            <polygon points="50.9,16.5 63.1,16.5 63.1,19.5 54.3,19.5 54.3,25.6 61.7,25.6 61.7,28.6 54.3,28.6 54.3,34.9 63.1,34.9 63.1,37.9 50.9,37.9 "/>
-            <path d="M19.7,69.2h3.8l6.4,12.5c0.6,1.1,1.1,2.7,1.6,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5C19.7,90.6,19.7,69.2,19.7,69.2z"/>
-            <path d="M47.8,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8H45c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H47.8z M43,69.2h4.2l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L43,69.2z"/>
-            <polygon points="57.2,72.3 51.8,72.3 51.8,69.2 66,69.2 66,72.3 60.6,72.3 60.6,90.7 57.2,90.7 "/>
-            <rect x="67.8" y="69.2" width="3.5" height="21.4"/>
-            <path d="M87.5,80c0-5.3-1.7-8-4.8-8c-3.2,0-4.8,2.7-4.8,8c0,5.2,1.6,7.9,4.8,7.9C85.9,87.9,87.5,85.2,87.5,80 M74.2,80c0-7,3-11.1,8.5-11.1c5.4,0,8.4,4.1,8.4,11.1c0,6.9-3,11-8.4,11C77.3,91,74.2,86.9,74.2,80"/>
-            <path d="M94.3,69.2H98l6.4,12.5c0.6,1.1,1.2,2.7,1.7,4h0.2c-0.2-1.7-0.3-3.6-0.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-0.7-1.4-1.2-2.7-1.7-4.2h-0.2c0.2,1.4,0.3,3.3,0.3,5v11.5h-3.5V69.2z"/>
-            <path d="M122.4,82.6l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H122.4z M117.6,69.2h4.2l6.2,21.4h-3.5l-1.5-5.2h-6.6l-1.4,5.2h-3.6L117.6,69.2z"/>
-            <polygon points="129.9,69.2 133.4,69.2 133.4,87.6 141.8,87.6 141.8,90.7 129.9,90.7 "/>
-            <path d="M26.9,135.2l-1.7-6.3c-0.3-1.1-0.6-2.2-0.9-3.8h-0.2c-0.3,1.6-0.5,2.6-0.8,3.8l-1.7,6.3H26.9z M22.1,121.8h4.2l6.2,21.4H29l-1.5-5.2h-6.6l-1.4,5.2h-3.6L22.1,121.8z"/>
-            <path d="M39.9,132.5c2.5,0,3.4-1.6,3.4-3.9c0-2.2-1-3.8-3.4-3.8h-2.7v7.7H39.9z M33.8,121.8h6.4c4.5,0,6.7,2.4,6.7,6.6c0,3.1-1.5,5.6-3.7,6.3v0.2c1,1.1,4,7.5,4.8,7.9v0.5h-3.8c-1-0.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5L33.8,121.8L33.8,121.8z"/>
-            <path d="M52.9,132.5c0,5.3,1.9,8,4.8,8c2.9,0,4-2,4-5.2l3.5,0.1c0,0.2,0.1,0.4,0.1,0.6c0,4.4-2.1,7.5-7.5,7.5c-5.2,0-8.5-3.9-8.5-11.1c0-7.1,3.3-11,8.5-11c6.4,0,7.5,4.6,7.5,7.2c0,0.3,0,0.7-0.1,0.9l-3.5,0.1c0-3.3-1.2-5.2-4-5.2C54.8,124.6,52.9,127.3,52.9,132.5"/>
-            <polygon points="68,121.8 71.5,121.8 71.5,130.9 79.8,130.9 79.8,121.8 83.3,121.8 83.3,143.3 79.8,143.3 79.8,133.9 71.5,133.9 71.5,143.3 68,143.3 "/>
-            <rect x="87.9" y="121.8" width="3.5" height="21.4"/>
-            <path d="M94.2,121.8h3.6l3.2,12.3c0.5,1.9,0.8,3.6,1.1,5.6h0.2c0.3-2,0.6-3.7,1.1-5.6l3.2-12.3h3.6l-6.1,21.4h-4.1L94.2,121.8z"/>
-            <polygon points="112.7,121.8 125,121.8 125,124.9 116.2,124.9 116.2,130.9 123.6,130.9 123.6,133.9 116.2,133.9 116.2,140.2 125,140.2 125,143.3 112.7,143.3 "/>
-            <path d="M130.4,136c0,0.2-0.1,0.5-0.1,0.8c0,1.9,0.8,3.7,3.4,3.7c2.1,0,3.3-1.2,3.3-2.9c0-1.6-0.7-2.4-2.2-3l-3.4-1.3c-2.4-0.9-4.2-2.4-4.2-5.7c0-3.5,2.3-6.1,6.6-6.1c5.5,0,6.4,3.6,6.4,5.9c0,0.3,0,0.7-0.1,1.1l-3.4,0.1c0-0.2,0.1-0.5,0.1-0.7c0-1.7-0.6-3.2-3-3.2c-2.1,0-3,1.2-3,2.8c0,1.7,0.9,2.5,2.2,2.9l3.5,1.3c2.6,1,4.3,2.6,4.3,5.8c0,3.6-2.4,6.1-7,6.1c-5.9,0-6.8-3.9-6.8-6.5c0-0.3,0-0.6,0.1-1L130.4,136z"/>
+            <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"/>
+            <path d="M21.3 19.5h-5.4v-3h14.3v3h-5.4v18.4h-3.5zM31.6 16.5H35v9h8.4v-9h3.4v21.4h-3.4v-9.3H35v9.3h-3.4zM50.9 16.5h12.2v3h-8.8v6.1h7.4v3h-7.4v6.3h8.8v3H50.9zM19.7 69.2h3.8l6.4 12.5c.6 1.1 1.1 2.7 1.6 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.5v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2H23c.2 1.4.3 3.3.3 5v11.5h-3.5c-.1 0-.1-21.4-.1-21.4zM47.8 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8H45c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zM43 69.2h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6L43 69.2zM57.2 72.3h-5.4v-3.1H66v3.1h-5.4v18.4h-3.4zM67.8 69.2h3.5v21.4h-3.5zM87.5 80c0-5.3-1.7-8-4.8-8-3.2 0-4.8 2.7-4.8 8 0 5.2 1.6 7.9 4.8 7.9 3.2 0 4.8-2.7 4.8-7.9m-13.3 0c0-7 3-11.1 8.5-11.1 5.4 0 8.4 4.1 8.4 11.1 0 6.9-3 11-8.4 11s-8.5-4.1-8.5-11M94.3 69.2H98l6.4 12.5c.6 1.1 1.2 2.7 1.7 4h.2c-.2-1.7-.3-3.6-.3-4.8V69.2h3.4v21.4h-3.7l-6.3-12.3c-.7-1.4-1.2-2.7-1.7-4.2h-.2c.2 1.4.3 3.3.3 5v11.5h-3.5V69.2zM122.4 82.6l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4h-3.5l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM129.9 69.2h3.5v18.4h8.4v3.1h-11.9zM26.9 135.2l-1.7-6.3c-.3-1.1-.6-2.2-.9-3.8h-.2c-.3 1.6-.5 2.6-.8 3.8l-1.7 6.3h5.3zm-4.8-13.4h4.2l6.2 21.4H29l-1.5-5.2h-6.6l-1.4 5.2h-3.6l6.2-21.4zM39.9 132.5c2.5 0 3.4-1.6 3.4-3.9 0-2.2-1-3.8-3.4-3.8h-2.7v7.7h2.7zm-6.1-10.7h6.4c4.5 0 6.7 2.4 6.7 6.6 0 3.1-1.5 5.6-3.7 6.3v.2c1 1.1 4 7.5 4.8 7.9v.5h-3.8c-1-.6-3.6-7.2-4.4-7.8h-2.5v7.8h-3.5v-21.5zM52.9 132.5c0 5.3 1.9 8 4.8 8s4-2 4-5.2l3.5.1c0 .2.1.4.1.6 0 4.4-2.1 7.5-7.5 7.5-5.2 0-8.5-3.9-8.5-11.1 0-7.1 3.3-11 8.5-11 6.4 0 7.5 4.6 7.5 7.2 0 .3 0 .7-.1.9l-3.5.1c0-3.3-1.2-5.2-4-5.2-2.9.2-4.8 2.9-4.8 8.1M68 121.8h3.5v9.1h8.3v-9.1h3.5v21.5h-3.5v-9.4h-8.3v9.4H68zM87.9 121.8h3.5v21.4h-3.5zM94.2 121.8h3.6l3.2 12.3c.5 1.9.8 3.6 1.1 5.6h.2c.3-2 .6-3.7 1.1-5.6l3.2-12.3h3.6l-6.1 21.4H100l-5.8-21.4zM112.7 121.8H125v3.1h-8.8v6h7.4v3h-7.4v6.3h8.8v3.1h-12.3zM130.4 136c0 .2-.1.5-.1.8 0 1.9.8 3.7 3.4 3.7 2.1 0 3.3-1.2 3.3-2.9 0-1.6-.7-2.4-2.2-3l-3.4-1.3c-2.4-.9-4.2-2.4-4.2-5.7 0-3.5 2.3-6.1 6.6-6.1 5.5 0 6.4 3.6 6.4 5.9 0 .3 0 .7-.1 1.1l-3.4.1c0-.2.1-.5.1-.7 0-1.7-.6-3.2-3-3.2-2.1 0-3 1.2-3 2.8 0 1.7.9 2.5 2.2 2.9l3.5 1.3c2.6 1 4.3 2.6 4.3 5.8 0 3.6-2.4 6.1-7 6.1-5.9 0-6.8-3.9-6.8-6.5 0-.3 0-.6.1-1l3.3-.1z"/>
           </g>
         </svg>
         {%- if params.logo.strapline -%}
@@ -50,16 +32,31 @@
         {%- endif -%}
       </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
     </div>
-    {%- if params.navigation -%}
+    {%- if params.navigation or params.topNavigation -%}
     <div class="tna-column tna-column--flex-1- tna-header__navigation-toggle"><!-- POPULATED BY JAVASCRIPT IF ENABLED --></div>
     <nav class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-header__navigation" aria-label="Main site navigation">
+      {%- if params.navigation -%}
       <ul class="tna-header__navigation-items">
-      {%- for item in params.navigation -%}
+        {%- for item in params.navigation -%}
         <li class="tna-header__navigation-item">
-          <a href="{{ item.href }}" class="tna-header__navigation-item-link{%- if item.selected %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" {%- if item.selected %} aria-current="true"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+          <a href="{{ item.href }}" class="tna-header__navigation-item-link{%- if item.selected %} tna-header__navigation-item-link--selected{% endif %}" tabindex="0" {%- if item.selected %} aria-current="true"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %}>
+            {{ item.text }}
+          </a>
         </li>
-      {%- endfor -%}
+        {%- endfor -%}
       </ul>
+      {%- endif -%}
+      {%- if params.topNavigation -%}
+      <ul class="tna-header__top-navigation-items">
+        {%- for item in params.topNavigation -%}
+        <li class="tna-header__top-navigation-item">
+          <a href="{{ item.href }}" class="tna-header__top-navigation-item-link" tabindex="0" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+            {{ item.text }}
+          </a>
+        </li>
+        {%- endfor -%}
+      </ul>
+      {%- endif -%}
     </nav>
     {%- endif -%}
   </div>

package/nationalarchives/components/hero/_index.scss

@@ -1,3 +1,5 @@
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../tools/colour";
 @use "../../tools/media";
 
 .tna-hero {
@@ -5,14 +7,11 @@
   padding-top: 5.25rem;
   padding-bottom: 3.25rem;
 
-  display: -ms-flexbox;
   display: flex;
   align-items: flex-end;
 
   position: relative;
 
-  background-color: #26262a; // Variable
-
   &__image {
     width: 100%;
     height: 100%;
@@ -36,6 +35,8 @@
     right: 1.25rem;
     bottom: 1.25rem;
     z-index: 3;
+
+    @include colour.colour-font("font-base");
   }
 
   &__image-details-summary {
@@ -88,7 +89,7 @@
   &__content-inner {
     padding: 2.5rem 1.5rem;
 
-    background-color: #fff;
+    @include colour.colour-background("page-background");
   }
 
   &__heading {
@@ -104,6 +105,9 @@
 
     display: block;
 
+    @include colour.invert;
+    // @extend %tna-invert;
+
     &__image {
       height: 320px;
 
@@ -133,9 +137,9 @@
     }
 
     &__content-inner {
-      color: #fff;
+      padding: 1.5rem 0;
 
-      background-color: inherit;
+      background-color: transparent;
     }
 
     &__heading {
@@ -143,6 +147,8 @@
     }
 
     &__body {
+      margin-top: 1rem;
+
       color: inherit;
     }
   }
@@ -152,4 +158,25 @@
       height: 240px;
     }
   }
+
+  @mixin high-contrast {
+    &__content-inner {
+      border: 1px transparent solid;
+      @include colour.colour-border("keyline-dark");
+
+      @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/fixtures.json

@@ -1,4 +1,19 @@
 {
   "component": "hero",
-  "fixtures": []
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {
+        "heading": "Title",
+        "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
+        }
+      },
+      "html": "<header class=\"tna-hero \"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"1996\" height=\"1331\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></header>",
+      "hidden": false
+    }
+  ]
 }

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

@@ -41,9 +41,11 @@ Standard.args = {
   heading: "Title",
   body: "<p>Body</p>",
   image: {
-    src: "https://picsum.photos/id/29/640/360",
-    alt: "A placeholder image",
-    information: "Photo of some mountains by a famous photographer, ©2012",
+    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,
+    information: "An interesting photo by a famous photographer ©2023",
   },
   classes: "tna-hero--demo",
 };
@@ -74,3 +76,15 @@ Standard.play = async ({ args, canvasElement, step }) => {
     await expect(information).not.toBeVisible();
   });
 };
+
+export const TitleOnly = Template.bind({});
+TitleOnly.args = {
+  heading: "Title",
+  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,
+  },
+  classes: "tna-hero--demo",
+};

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

@@ -20,7 +20,7 @@
   {
     "name": "image",
     "type": "object",
-    "required": false,
+    "required": true,
     "description": "",
     "params": [
       {
@@ -35,6 +35,18 @@
         "required": true,
         "description": ""
       },
+      {
+        "name": "width",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
       {
         "name": "information",
         "type": "string",

package/nationalarchives/components/hero/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaHero(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/hero/template.njk" -%}
 {% endmacro %}

package/nationalarchives/components/hero/template.njk

@@ -1,6 +1,6 @@
-{%- set classes = [params.classes] if params.classes else [] -%}
-<header class="tna-hero {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image">
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<header class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image" width="{{ params.image.width }}" height="{{ params.image.height }}">
   {%- if params.image.information -%}
   <details class="tna-hero__image-details">
     <summary class="tna-hero__image-details-summary">
@@ -19,13 +19,15 @@
           {{ params.heading }}
         </h1>
         {%- endif -%}
-        <div class="tna-hero__body">
         {%- if params.text -%}
+        <div class="tna-hero__body">
           <p>{{ params.text }}</p>
+        </div>
         {%- elseif params.body -%}
+        <div class="tna-hero__body">
           {{ params.body | safe }}
-        {%- endif -%}
         </div>
+        {%- endif -%}
       </div>
     </div>
   </div>

package/nationalarchives/components/phase-banner/_index.scss

@@ -1,10 +1,15 @@
+@use "../../tools/colour";
 @use "../../tools/media";
 @use "../../tools/typography";
 
 .tna-phase-banner {
+  @include colour.fixed;
+
   padding-top: 0.375rem;
   padding-bottom: 0.375rem;
 
+  background-color: #d9d9d6;
+
   .tna-container {
     align-items: center;
     flex-wrap: nowrap;
@@ -37,7 +42,19 @@
     }
   }
 
+  &--discovery {
+    background-color: #fad3d4;
+  }
+
+  &--alpha {
+    background-color: #f9e1bc;
+  }
+
   &--beta {
     background-color: #f9f7e2;
   }
+
+  &--live {
+    background-color: #dde5d5;
+  }
 }

package/nationalarchives/components/phase-banner/fixtures.json

@@ -1,13 +1,80 @@
 {
   "component": "phase-banner",
   "fixtures": [
+    {
+      "name": "discovery",
+      "options": {
+        "phase": "discovery",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--discovery\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Discovery</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "alpha",
+      "options": {
+        "phase": "alpha",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--alpha\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Alpha</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
     {
       "name": "beta",
       "options": {
-        "phase": "Beta",
+        "phase": "beta",
+        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "live",
+      "options": {
+        "phase": "live",
         "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
       },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\">\n  <div class=\"tna-container\">\n    <div class=\"tna-column\">\n      <span class=\"tna-phase-banner__phase\">\n        Beta\n      </span>\n    </div>\n    <div class=\"tna-column\">\n      <p class=\"tna-phase-banner__message\">\n        This is a new service – <a href='#'>give us your feedback</a> to help improve it.\n      </p>\n    </div>\n  </div>\n</div>",
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "capital letters",
+      "options": {
+        "phase": "BETA",
+        "message": "Message"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "unknown phase",
+      "options": {
+        "phase": "unknown",
+        "message": "Message"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--unknown\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Unknown</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "phase": "live",
+        "message": "Message",
+        "classes": "tna-phase-banner--fixture"
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--fixture tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "phase": "live",
+        "message": "Message",
+        "attributes": {
+          "data-fixturetest": "pass"
+        }
+      },
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\" data-fixturetest=\"pass\"><div class=\"tna-container\"><div class=\"tna-column\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/phase-banner/macro.njk

@@ -1,3 +1,3 @@
 {% macro tnaPhaseBanner(params) %}
-  {%- include "./template.njk" -%}
+  {%- include "nationalarchives/components/phase-banner/template.njk" -%}
 {% endmacro %}

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

@@ -2,7 +2,10 @@ import PhaseBanner from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  phase: { control: "text" },
+  phase: {
+    control: "radio",
+    options: ["discovery", "alpha", "beta", "live"],
+  },
   message: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -15,7 +18,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Phase banner",
+  title: "Work in progress/Components/Phase banner",
   argTypes,
 };
 
@@ -30,9 +33,32 @@ const Template = ({ phase, message, classes, attributes }) => {
   });
 };
 
-export const Standard = Template.bind({});
-Standard.args = {
-  phase: "Beta",
+export const Discovery = Template.bind({});
+Discovery.args = {
+  phase: "discovery",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Alpha = Template.bind({});
+Alpha.args = {
+  phase: "alpha",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Beta = Template.bind({});
+Beta.args = {
+  phase: "beta",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Live = Template.bind({});
+Live.args = {
+  phase: "live",
+  message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+};
+
+export const Unknown = Template.bind({});
+Unknown.args = {
+  phase: "unknown",
   message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
-  classes: "tna-phase-banner--demo",
 };

package/nationalarchives/components/phase-banner/template.njk

@@ -1,10 +1,10 @@
-{%- set classes = [params.classes] if params.classes else [] -%}
-{%- set classes = classes.concat('tna-phase-banner--' + params.phase | lower) -%}
-<div class="tna-phase-banner {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- set containerClasses = containerClasses.concat('tna-phase-banner--' + params.phase | lower) -%}
+<div class="tna-phase-banner {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
     <div class="tna-column">
       <span class="tna-phase-banner__phase">
-        {{ params.phase }}
+        {{ params.phase | capitalize }}
       </span>
     </div>
     <div class="tna-column">

package/nationalarchives/components/picture/_index.scss

@@ -0,0 +1,77 @@
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../tools/colour";
+
+.tna-picture {
+  margin: 0 0 1rem;
+  padding: 0;
+
+  &__image-wrapper {
+    // padding: 1rem 0;
+
+    position: relative;
+
+    background-color: #f4f4f4;
+  }
+
+  &__image {
+    height: auto;
+    margin: 0 auto;
+  }
+
+  &__toggle-transcript {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  &__transcript {
+    // @include colour.invert;
+    @extend %tna-invert;
+
+    padding: 1rem 1.5rem 0.5rem;
+
+    .tna-template--clicked &:focus {
+      outline: none;
+    }
+
+    .tna-tabs__list-item-link {
+      @include colour.colour-font("font-dark", true);
+
+      &::after {
+        @include colour.colour-background("keyline-dark", true);
+      }
+
+      .tna-template--js-enabled & {
+        @include colour.colour-font("font-light", true);
+
+        &--selected {
+          @include colour.colour-font("font-dark", true);
+        }
+      }
+    }
+  }
+
+  &__caption {
+    padding: 1rem 0;
+
+    // position: relative;
+
+    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");
+
+    //   content: "";
+    // }
+  }
+}

package/nationalarchives/components/picture/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "picture",
+  "fixtures": []
+}