@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

package/nationalarchives/components/header/header.mjs

@@ -0,0 +1,108 @@
+import uuidv4 from "../../lib/uuid.mjs";
+
+export class Header {
+  constructor($module) {
+    this.$module = $module;
+    this.$toggleButtonWrapper =
+      $module && $module.querySelector(".tna-header__navigation-toggle");
+    this.$navigation =
+      $module && $module.querySelector(".tna-header__navigation");
+    this.$links =
+      $module &&
+      this.$navigation &&
+      this.$navigation.querySelectorAll("[tabindex='0']");
+    this.menuOpened = false;
+    this.mql = window.matchMedia("(max-width: 768px)");
+  }
+
+  init() {
+    if (!this.$module || !this.$toggleButtonWrapper || !this.$navigation) {
+      return;
+    }
+
+    // const uniqueLinkIds = []
+
+    // for (let i = 0; i < this.$links.length; i++) {
+    //   const uniqueLinkId = uuidv4()
+    //   this.$links[i].setAttribute("id", uniqueLinkId);
+    //   uniqueLinkIds.push(uniqueLinkId)
+    // }
+
+    const uniqueId = `menu-content-${uuidv4()}`;
+    this.$navigation.setAttribute("id", uniqueId);
+    // this.$navigation.setAttribute("aria-owns", uniqueLinkIds.join(","));
+
+    this.$toggleButton = document.createElement("button");
+    this.$toggleButton.innerText = "Menu";
+    this.$toggleButton.setAttribute("aria-controls", uniqueId);
+    this.$toggleButton.setAttribute("aria-haspopup", "true");
+    this.$toggleButton.classList.add("tna-header__navigation-toggle-button");
+
+    this.$hamburger = document.createElement("div");
+    this.$hamburger.classList.add("tna-header__hamburger");
+
+    this.$toggleButton.appendChild(this.$hamburger);
+    this.$toggleButtonWrapper.appendChild(this.$toggleButton);
+
+    this.syncState();
+
+    this.$toggleButton.addEventListener("click", () =>
+      this.handleToggleNavigation(),
+    );
+
+    if ("addEventListener" in this.mql) {
+      this.mql.addEventListener("change", () => this.syncState());
+      // this.mql.addEventListener("change", this.syncState.bind(this));
+    } else {
+      this.mql.addListener(() => this.syncState());
+      // this.mql.addListener(this.syncState.bind(this));
+    }
+  }
+
+  handleToggleNavigation() {
+    this.menuOpened = !this.menuOpened;
+    this.syncState();
+  }
+
+  syncState() {
+    if (this.mql.matches) {
+      if (this.menuOpened) {
+        this.$navigation.classList.add("tna-header__navigation--open");
+        this.$navigation.hidden = false;
+        this.$navigation.setAttribute("aria-hidden", "false");
+        this.$toggleButton.setAttribute("aria-expanded", "true");
+        this.$toggleButton.setAttribute("title", "Close menu");
+        this.$toggleButton.classList.add(
+          "tna-header__navigation-toggle-button--opened",
+        );
+
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "0");
+        }
+      } else {
+        this.$navigation.classList.remove("tna-header__navigation--open");
+        this.$navigation.hidden = true;
+        this.$navigation.setAttribute("aria-hidden", "true");
+        this.$toggleButton.setAttribute("aria-expanded", "false");
+        this.$toggleButton.setAttribute("title", "Open menu");
+        this.$toggleButton.classList.remove(
+          "tna-header__navigation-toggle-button--opened",
+        );
+
+        for (let i = 0; i < this.$links.length; i++) {
+          this.$links[i].setAttribute("tabindex", "-1");
+        }
+      }
+    } else {
+      this.$navigation.classList.add("tna-header__navigation--open");
+      this.$navigation.hidden = false;
+      this.$navigation.setAttribute("aria-hidden", "false");
+      this.$toggleButton.setAttribute("aria-expanded", "true");
+      this.$toggleButton.setAttribute("title", "Close menu");
+
+      for (let i = 0; i < this.$links.length; i++) {
+        this.$links[i].setAttribute("tabindex", "0");
+      }
+    }
+  }
+}

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

@@ -0,0 +1,68 @@
+import Header from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  logo: { control: "object" },
+  navigation: { control: "object" },
+  colour: {
+    control: "radio",
+    options: ["black", "yellow", "pink", "orange", "green", "blue"],
+  },
+  exit: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Header",
+  argTypes,
+};
+
+const Template = ({ logo, navigation, colour, exit, classes, attributes }) => {
+  return Header({
+    params: {
+      logo,
+      navigation,
+      colour,
+      exit,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  logo: {
+    strapline: "Beta",
+    href: "#/",
+  },
+  navigation: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+      selected: true,
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+  ],
+  colour: "yellow",
+  exit: {
+    text: "Go to the current National Archives website",
+    href: "#",
+    target: "_blank",
+  },
+  classes: "tna-header--demo",
+};

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

@@ -0,0 +1,104 @@
+[
+  {
+    "name": "logo",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "href",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "strapline",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "navigation",
+    "type": "array",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "selected",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "colour",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "exit",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "target",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the header."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the header."
+  }
+]

package/nationalarchives/components/header/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaHeader(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/header/template.njk

@@ -0,0 +1,66 @@
+{%- set classes = [params.classes] if params.classes else [] -%}
+{%- if params.colour -%}
+  {%- set classes = classes.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 %}>
+  {%- if params.exit -%}
+  <div class="tna-header__exit">
+    <div class="tna-container">
+      <div class="tna-column tna-column--full">
+        <a href="{{ params.exit.href }}" class="tna-header__exit-link"{%- if params.exit.target -%} target="{{ params.exit.target }}"{%- endif -%}>
+          {{ params.exit.text }}
+          {%- if params.exit.target == "_blank" -%}
+          <span class="tna-header__exit-link-icon"></span>
+          {%- endif -%}
+        </a>
+      </div>
+    </div>
+  </div>
+  {%- 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"/>
+          <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"/>
+          </g>
+        </svg>
+        {%- if params.logo.strapline -%}
+        <span class="tna-header__logo-strapline">{{ params.logo.strapline }}</span>
+        {%- endif -%}
+      </{%- if params.logo.href -%}a{%- else -%}span{%- endif -%}>
+    </div>
+    {%- if params.navigation -%}
+    <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">
+      <ul class="tna-header__navigation-items">
+      {%- 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>
+        </li>
+      {%- endfor -%}
+      </ul>
+    </nav>
+    {%- endif -%}
+  </div>
+</header>

package/nationalarchives/components/hero/_index.scss

@@ -7,7 +7,7 @@
 
   display: -ms-flexbox;
   display: flex;
-  align-items: end;
+  align-items: flex-end;
 
   position: relative;
 
@@ -96,6 +96,7 @@
   }
 
   &__body {
+    margin-top: 1.5rem;
   }
 
   @include media.on-mobile {
@@ -138,9 +139,11 @@
     }
 
     &__heading {
+      color: inherit;
     }
 
     &__body {
+      color: inherit;
     }
   }
 

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

@@ -1,5 +1,4 @@
 import Hero from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
@@ -15,7 +14,7 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
@@ -49,26 +48,29 @@ Standard.args = {
   classes: "tna-hero--demo",
 };
 
-Standard.play = async ({ args, canvasElement }) => {
+Standard.play = async ({ args, canvasElement, step }) => {
   const canvas = within(canvasElement);
   const image = canvas.getByAltText(args.image.alt);
   const title = canvas.getByText(args.heading);
   const summary = canvasElement.querySelector(
-    ".tna-hero__image-details-summary"
+    ".tna-hero__image-details-summary",
   );
   const information = canvas.getByText(args.image.information);
 
-  await expect(image).toBeVisible();
-  await expect(title).toBeVisible();
-  await expect(summary).toBeVisible();
-  await expect(information).not.toBeVisible();
+  await step("Initial load", async () => {
+    await expect(image).toBeVisible();
+    await expect(title).toBeVisible();
+    await expect(summary).toBeVisible();
+    await expect(information).not.toBeVisible();
+  });
 
-  await userEvent.click(summary);
-  await expect(image).toBeVisible();
-  await expect(title).toBeVisible();
-  await expect(summary).toBeVisible();
-  await expect(information).toBeVisible();
+  await step("Open information", async () => {
+    await userEvent.click(summary);
+    await expect(information).toBeVisible();
+  });
 
-  await userEvent.click(summary);
-  await expect(information).not.toBeVisible();
+  await step("Close information", async () => {
+    await userEvent.click(summary);
+    await expect(information).not.toBeVisible();
+  });
 };

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

@@ -2,7 +2,7 @@
   {
     "name": "heading",
     "type": "string",
-    "required": false,
+    "required": true,
     "description": ""
   },
   {
@@ -47,12 +47,12 @@
     "name": "classes",
     "type": "string",
     "required": false,
-    "description": "Classes to add to the card."
+    "description": "Classes to add to the hero."
   },
   {
     "name": "attributes",
     "type": "object",
     "required": false,
-    "description": "HTML attributes (for example data attributes) to add to the card."
+    "description": "HTML attributes (for example data attributes) to add to the hero."
   }
 ]

package/nationalarchives/components/hero/template.njk

@@ -1,32 +1,32 @@
 {%- 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">
-    {%- if params.image.information -%}
-    <details class="tna-hero__image-details">
-        <summary class="tna-hero__image-details-summary">
-            <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
-        </summary>
-        <div class="tna-hero__image-information">
-            <p>{{ params.image.information }}</p>
-        </div>
-    </details>
-    {%- endif -%}
-    <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">
-                {%- if params.heading -%}
-                <h1 class="tna-heading tna-heading--xl tna-hero__heading">
-                    {{ params.heading }}
-                </h1>
-                {%- endif -%}
-                <div class="tna-hero__body">
-                {%- if params.text -%}
-                    <p>{{ params.text }}</p>
-                {%- elseif params.body -%}
-                    {{ params.body | safe }}
-                {%- endif -%}
-                </div>
-            </div>
+  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image">
+  {%- if params.image.information -%}
+  <details class="tna-hero__image-details">
+    <summary class="tna-hero__image-details-summary">
+      <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
+    </summary>
+    <div class="tna-hero__image-information">
+      <p>{{ params.image.information }}</p>
+    </div>
+  </details>
+  {%- endif -%}
+  <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">
+        {%- if params.heading -%}
+        <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+          {{ params.heading }}
+        </h1>
+        {%- endif -%}
+        <div class="tna-hero__body">
+        {%- if params.text -%}
+          <p>{{ params.text }}</p>
+        {%- elseif params.body -%}
+          {{ params.body | safe }}
+        {%- endif -%}
         </div>
+      </div>
     </div>
+  </div>
 </header>

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

@@ -0,0 +1,43 @@
+@use "../../tools/media";
+@use "../../tools/typography";
+
+.tna-phase-banner {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+
+  .tna-container {
+    align-items: center;
+    flex-wrap: nowrap;
+
+    // @include media.on-tiny {
+    //   flex-wrap: wrap;
+    // }
+  }
+
+  &__phase {
+    margin: 0.25rem 0;
+    padding: 0 0.5rem;
+
+    display: block;
+
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.5;
+
+    background-color: #fff;
+  }
+
+  &__message {
+    margin: 0.25rem 0;
+
+    // @include typography.relative-font-size(14);
+
+    a {
+      color: inherit;
+    }
+  }
+
+  &--beta {
+    background-color: #f9f7e2;
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "component": "phase-banner",
+  "fixtures": [
+    {
+      "name": "beta",
+      "options": {
+        "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\">\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>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/phase-banner/macro-options.json

@@ -0,0 +1,26 @@
+[
+  {
+    "name": "phase",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "message",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the phase banner."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the phase banner."
+  }
+]

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

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

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

@@ -0,0 +1,38 @@
+import PhaseBanner from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  phase: { control: "text" },
+  message: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Phase banner",
+  argTypes,
+};
+
+const Template = ({ phase, message, classes, attributes }) => {
+  return PhaseBanner({
+    params: {
+      phase,
+      message,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  phase: "Beta",
+  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

@@ -0,0 +1,16 @@
+{%- 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 %}>
+  <div class="tna-container">
+    <div class="tna-column">
+      <span class="tna-phase-banner__phase">
+        {{ params.phase }}
+      </span>
+    </div>
+    <div class="tna-column">
+      <p class="tna-phase-banner__message">
+        {{ params.message | safe }}
+      </p>
+    </div>
+  </div>
+</div>