Add optional phase banners to the top of the header components

.github/workflows/tests.yml

@@ -10,6 +10,10 @@ on:
       - 'README.md'
     tags-ignore:
       - '**'
+  pull_request:
+    types:
+      - opened
+      - synchronize
 
 concurrency:
   group: tests-${{ github.ref }}

CHANGELOG.md

@@ -10,10 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added `labelText` option to breadcrumbs to enable custom `aria-label` attributes
+- Phase banners can be added at the top of the header and global header components
 
 ### Changed
 ### Deprecated
 ### Removed
+
+- Remove `accent` option of the phase banner component
+
 ### Fixed
 
 - Clicking on a gallery item doesn't break keyboard navigation for the gallery

src/nationalarchives/components/global-header/global-header.scss

@@ -7,8 +7,6 @@
 @use "../../tools/typography";
 
 .tna-global-header {
-  padding-top: spacing.space(1);
-
   @include colour.contrast;
   background: linear-gradient(
     0deg,
@@ -29,6 +27,7 @@
   }
 
   &__main {
+    padding-top: spacing.space(1);
     padding-bottom: spacing.space(1.5);
   }
 

src/nationalarchives/components/global-header/global-header.stories.js

@@ -10,6 +10,7 @@ const argTypes = {
   collapseOnMedium: { control: "boolean" },
   navigationId: { control: "text" },
   topNavigationId: { control: "text" },
+  phaseBanner: { control: "object" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -35,6 +36,7 @@ const Template = ({
   collapseOnMedium,
   navigationId,
   topNavigationId,
+  phaseBanner,
   classes,
   attributes,
 }) =>
@@ -46,6 +48,7 @@ const Template = ({
       collapseOnMedium,
       navigationId,
       topNavigationId,
+      phaseBanner,
       classes,
       attributes,
     },
@@ -366,3 +369,58 @@ Mobile.play = async ({ args, canvasElement, step }) => {
 
   $navigationToggle.blur();
 };
+
+export const WithPhaseBanner = Template.bind({});
+WithPhaseBanner.args = {
+  logo: {
+    href: "#/",
+  },
+  topNavigation: [
+    {
+      text: "Search",
+      href: "https://www.nationalarchives.gov.uk/search/",
+      icon: "search",
+    },
+    {
+      text: "Shop",
+      href: "https://shop.nationalarchives.gov.uk/",
+      icon: "shop",
+    },
+    {
+      text: "Sign in",
+      href: "#/sign-in",
+      icon: "user",
+    },
+  ],
+  navigation: [
+    {
+      text: "Visit",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/",
+    },
+    {
+      text: "What’s on",
+      href: "https://www.nationalarchives.gov.uk/about/visit-us/whats-on/",
+    },
+    {
+      text: "Explore the collection",
+      href: "https://beta.nationalarchives.gov.uk/explore-the-collection/",
+    },
+    {
+      text: "Help using the archive",
+      href: "https://www.nationalarchives.gov.uk/help-with-your-research/",
+    },
+    {
+      text: "Education",
+      href: "https://www.nationalarchives.gov.uk/education/",
+    },
+    {
+      text: "Professional guidance and services",
+      href: "https://www.nationalarchives.gov.uk/professional-guidance-and-services/",
+    },
+  ],
+  phaseBanner: {
+    phase: "beta",
+    message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+  },
+  classes: "tna-global-header--demo",
+};

src/nationalarchives/components/global-header/macro-options.json

@@ -89,6 +89,13 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "phaseBanner",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "paramsFrom": "phase-banner"
+  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/global-header/template.njk

@@ -1,9 +1,14 @@
+{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.collapseOnMedium -%}
   {%- set containerClasses = containerClasses.concat('tna-global-header--collapse-on-medium') -%}
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <header class="tna-global-header{% if classes %} {{ classes }}{% endif %}" data-module="tna-global-header"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+  {% if params.phaseBanner -%}
+  {{ tnaPhaseBanner(params.phaseBanner) }}
+  {% endif -%}
   <div class="tna-container tna-global-header__main">
     <div class="tna-column tna-column--flex-1 tna-column--order-2">
       <span class="tna-global-header__logo-wrapper">

src/nationalarchives/components/header/header.stories.js

@@ -10,6 +10,7 @@ const argTypes = {
   accent: {
     control: "boolean",
   },
+  phaseBanner: { control: "object" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -33,6 +34,7 @@ const Template = ({
   topNavigation,
   navigation,
   accent,
+  phaseBanner,
   classes,
   attributes,
 }) =>
@@ -42,6 +44,7 @@ const Template = ({
       topNavigation,
       navigation,
       accent,
+      phaseBanner,
       classes,
       attributes,
     },
@@ -224,3 +227,42 @@ Mobile.play = async ({ args, canvasElement, step }) => {
 
   $navigationToggle.blur();
 };
+
+export const WithPhaseBanner = Template.bind({});
+WithPhaseBanner.args = {
+  logo: {
+    strapline: "Design System",
+    href: "#/",
+  },
+  topNavigation: [
+    {
+      text: "Top item 1",
+      href: "#/top-1",
+    },
+    {
+      text: "Top item 2",
+      href: "#/top-2",
+      icon: "heart",
+    },
+  ],
+  navigation: [
+    {
+      text: "Alpha",
+      href: "#/alpha",
+      selected: true,
+    },
+    {
+      text: "Beta",
+      href: "#/beta",
+    },
+    {
+      text: "Gamma",
+      href: "#/gamma",
+    },
+  ],
+  phaseBanner: {
+    phase: "beta",
+    message: `This is a new service – <a href="#">give us your feedback</a> to help improve it.`,
+  },
+  classes: "tna-header--demo",
+};

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

@@ -101,6 +101,13 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "phaseBanner",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "paramsFrom": "phase-banner"
+  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/header/template.njk

@@ -1,9 +1,14 @@
+{% from "nationalarchives/components/phase-banner/macro.njk" import tnaPhaseBanner %}
+
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 {%- if params.accent -%}
   {%- set containerClasses = containerClasses.concat('tna-background-accent') -%}
 {%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <header class="tna-header{% if classes %} {{ classes }}{% endif %}" data-module="tna-header"{% for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
+  {% if params.phaseBanner -%}
+  {{ tnaPhaseBanner(params.phaseBanner) }}
+  {% endif -%}
   <div class="tna-container tna-header__contents">
     <div class="tna-column tna-header__logo-wrapper">
       {% if params.logo.href -%}

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

@@ -11,12 +11,6 @@
     "required": true,
     "description": ""
   },
-  {
-    "name": "accent",
-    "type": "boolean",
-    "required": false,
-    "description": ""
-  },
   {
     "name": "classes",
     "type": "string",

src/nationalarchives/components/phase-banner/phase-banner.scss

@@ -11,8 +11,6 @@
 
   @include typography.font-size(16);
 
-  border-bottom: 1px transparent solid;
-
   .tna-container {
     align-items: center;
   }

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

@@ -6,7 +6,6 @@ const argTypes = {
     control: "text",
   },
   message: { control: "text" },
-  accent: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };

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

@@ -1,7 +1,4 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- if params.accent -%}
-  {%- set containerClasses = containerClasses.concat('tna-background-accent') -%}
-{%- endif -%}
 {%- set classes = containerClasses | join(' ') -%}
 <div class="tna-phase-banner{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
   <div class="tna-container">