@nationalarchives/frontend 0.1.12-prerelease → 0.1.14-prerelease

package/nationalarchives/components/header/_index.scss

@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 @use "../../variables/colour" as colourVars; // TODO
 @use "../../variables/grid";
@@ -11,7 +10,7 @@
 
   background-color: colourVars.$tna-black;
 
-  // @include colour.invert;
+  @include colour.invert;
 
   &__exit {
     padding-top: 0.5rem;
@@ -23,8 +22,14 @@
   }
 
   &__exit-link {
-    color: #fff;
     text-decoration: none;
+    @include typography.relative-font-size(16);
+
+    &,
+    &:link,
+    &:visited {
+      color: #fff;
+    }
 
     &:hover {
       text-decoration: underline;
@@ -109,11 +114,26 @@
     color: inherit;
     text-decoration: none;
 
-    &--href {
-      &:hover {
-        outline: 0.375rem #fff solid;
-      }
+    &,
+    &:link,
+    &:visited {
+      color: inherit;
     }
+
+    // &--href {
+    //   &:hover {
+    //       outline: 0.375rem #fff solid;
+    //       outline-offset: 1px;
+
+    //     // .tna-logo__background {
+    //     //   fill: #fff;
+    //     // }
+
+    //     // .tna-logo__foreground {
+    //     //   fill: #000;
+    //     // }
+    //   }
+    // }
   }
 
   .tna-logo {
@@ -123,6 +143,11 @@
     display: inline-block;
   }
 
+  &__logo-link--href:hover .tna-logo {
+    outline: 0.375rem #fff solid;
+    outline-offset: 1px;
+  }
+
   .tna-logo__foreground {
     fill: #fff;
   }
@@ -238,7 +263,9 @@
 
     .tna-header__logo-link {
       &:hover {
-        outline-color: #000;
+        .tna-logo {
+          outline-color: #000;
+        }
       }
     }
 
@@ -290,7 +317,7 @@
   }
 
   &__top-navigation-item {
-    margin-left: 0.75rem;
+    margin-left: 1.5rem;
 
     display: inline-block;
   }
@@ -299,6 +326,7 @@
     display: inline-block;
 
     text-decoration: none;
+    @include typography.relative-font-size(16);
 
     &,
     &:link,
@@ -358,8 +386,8 @@
       &,
       &:link,
       &:visited {
+        @include colour.uninvert;
         @include colour.colour-font("font-dark");
-
         @include colour.colour-background("page-background");
       }
       // transition:
@@ -411,9 +439,13 @@
     }
 
     &__navigation {
+      @include colour.uninvert;
       @include colour.colour-font("font-base");
       @include typography.relative-font-size(20);
 
+      align-items: stretch;
+      flex-direction: column;
+
       &.tna-column {
         padding-right: 0;
         padding-left: 0;
@@ -423,7 +455,7 @@
         display: none;
 
         &--open {
-          display: block;
+          display: flex;
         }
       }
     }

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

@@ -24,7 +24,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Header",
+  title: "Components/Header",
   argTypes,
   parameters: {
     chromatic: { delay: 1000 },
@@ -59,20 +59,20 @@ Standard.args = {
     strapline: "Beta",
     href: "#/",
   },
-  // topNavigation: [
-  //   {
-  //     text: "Top item 1",
-  //     href: "#/top-1"
-  //   },
-  //   {
-  //     text: "Top item 2",
-  //     href: "#/top-2",
-  //   },
-  //   {
-  //     text: "Top item 3",
-  //     href: "#/top-3",
-  //   },
-  // ],
+  topNavigation: [
+    {
+      text: "Top item 1",
+      href: "#/top-1",
+    },
+    {
+      text: "Top item 2",
+      href: "#/top-2",
+    },
+    {
+      text: "Top item 3",
+      href: "#/top-3",
+    },
+  ],
   navigation: [
     {
       text: "Alpha",
@@ -125,15 +125,17 @@ Desktop.args = {
   classes: "tna-header--demo",
 };
 Desktop.play = async ({ canvasElement }) => {
-  const navigationItems = canvasElement.querySelector(
+  await new Promise((r) => setTimeout(r, 100));
+
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-button`,
   );
 
-  await expect(navigationItems).toBeVisible();
-  await expect(navigationToggle).not.toBeVisible();
+  await expect($navigationItems).toBeVisible();
+  await expect($navigationToggle).not.toBeVisible();
 };
 
 export const Mobile = Template.bind({});
@@ -164,46 +166,89 @@ Mobile.args = {
   classes: "tna-header--demo",
 };
 Mobile.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
 
-  const navigationItems = canvasElement.querySelector(
+  const $navigationItems = canvasElement.querySelector(
     `.tna-header__navigation-items`,
   );
-  const [linkA, linkB, linkC] = args.navigation.map((navigationItem) =>
+  const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
     canvas.getByText(navigationItem.text),
   );
-  const navigationToggle = canvasElement.querySelector(
+  const $navigationToggle = canvasElement.querySelector(
     `.tna-header__navigation-toggle-button`,
   );
 
   await step("Initial load", async () => {
-    await expect(navigationItems).not.toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect(linkA).not.toBeVisible();
-    await expect(linkB).not.toBeVisible();
-    await expect(linkC).not.toBeVisible();
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
   });
 
   await step("Open the menu", async () => {
-    await userEvent.click(navigationToggle);
-    await expect(navigationItems).toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "true");
-    await expect(linkA).toBeVisible();
-    await expect(linkB).toBeVisible();
-    await expect(linkC).toBeVisible();
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "true");
+    await expect($linkA).toBeVisible();
+    await expect($linkB).toBeVisible();
+    await expect($linkC).toBeVisible();
   });
 
   await step("Close the menu", async () => {
-    await userEvent.click(navigationToggle);
-    await expect(navigationItems).not.toBeVisible();
-    await expect(navigationToggle).toBeVisible();
-    await expect(navigationToggle).toHaveAttribute("aria-expanded", "false");
-    await expect(linkA).not.toBeVisible();
-    await expect(linkB).not.toBeVisible();
-    await expect(linkC).not.toBeVisible();
+    await userEvent.click($navigationToggle);
+    await expect($navigationItems).not.toBeVisible();
+    await expect($navigationToggle).toBeVisible();
+    await expect($navigationToggle).toHaveAttribute("aria-expanded", "false");
+    await expect($linkA).not.toBeVisible();
+    await expect($linkB).not.toBeVisible();
+    await expect($linkC).not.toBeVisible();
   });
 
-  navigationToggle.blur();
+  $navigationToggle.blur();
 };
+
+// export const NoJavascript = Template.bind({});
+// NoJavascript.args = {
+//   navigation: [
+//     {
+//       text: "Alpha",
+//       href: "#/alpha",
+//       selected: true,
+//     },
+//     {
+//       text: "Beta",
+//       href: "#/beta",
+//     },
+//     {
+//       text: "Gamma",
+//       href: "#/gamma",
+//     },
+//   ],
+//   classes: "tna-header--demo",
+// };
+// NoJavascript.play = async ({ args, canvasElement, step }) => {
+//   document.documentElement.classList.remove("tna-template--js-enabled");
+//   canvasElement.innerHTML = canvasElement.innerHTML;
+//   const $navigationToggleWrapper = canvasElement.querySelector(
+//     `.tna-header__navigation-toggle`,
+//   );
+//   $navigationToggleWrapper.innerHTML = "";
+
+//   const canvas = within(canvasElement);
+
+//   // const $navigationItems = canvasElement.querySelector(
+//   //   `.tna-header__navigation-items`,
+//   // );
+//   // const [$linkA, $linkB, $linkC] = args.navigation.map((navigationItem) =>
+//   //   canvas.getByText(navigationItem.text),
+//   // );
+//   // await expect($navigationItems).toBeVisible();
+//   // await expect($linkA).toBeVisible();
+//   // await expect($linkB).toBeVisible();
+//   // await expect($linkC).toBeVisible();
+// };

package/nationalarchives/components/hero/_index.scss

@@ -1,4 +1,3 @@
-@use "../../utilities/global"; // To get %tna-invert
 @use "../../tools/colour";
 @use "../../tools/media";
 
@@ -106,7 +105,6 @@
     display: block;
 
     @include colour.invert;
-    // @extend %tna-invert;
 
     &__image {
       height: 320px;

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

@@ -51,6 +51,8 @@ Standard.args = {
 };
 
 Standard.play = async ({ args, canvasElement, step }) => {
+  await new Promise((r) => setTimeout(r, 100));
+
   const canvas = within(canvasElement);
   const image = canvas.getByAltText(args.image.alt);
   const title = canvas.getByText(args.heading);

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

@@ -0,0 +1,44 @@
+@use "../../tools/colour";
+
+.tna-index-grid {
+  &__item-wrapper {
+    margin-bottom: 2rem;
+  }
+
+  &__item {
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    @include colour.invert;
+    text-decoration: none;
+  }
+
+  &__item-image {
+    width: 100%;
+    height: auto;
+  }
+
+  &__item-content {
+    padding: 1rem;
+
+    flex: 1;
+  }
+
+  &__item-title {
+    text-decoration: underline;
+
+    .tna-index-grid__item:hover & {
+      &,
+      &:link,
+      &:visited {
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
+
+  &__item-subtitle {
+    @include colour.colour-font("font-light");
+  }
+}

package/nationalarchives/components/index-grid/fixtures.json

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

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

@@ -0,0 +1,78 @@
+import IndexGrid from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  heading: { control: "text" },
+  items: { control: "object" },
+  columns: { control: "number" },
+  columnsMedium: { control: "number" },
+  columnsSmall: { control: "number" },
+  columnsTiny: { control: "number" },
+  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/Index grid",
+  argTypes,
+};
+
+const Template = ({
+  heading,
+  items,
+  columns,
+  columnsMedium,
+  columnsSmall,
+  columnsTiny,
+  classes,
+  attributes,
+}) => {
+  return IndexGrid({
+    params: {
+      heading,
+      items,
+      columns,
+      columnsMedium,
+      columnsSmall,
+      columnsTiny,
+      classes,
+      attributes,
+    },
+  });
+};
+
+const exampleItem = {
+  href: "#",
+  src: "https://picsum.photos/id/237/800/600",
+  alt: "Photo of a puppy",
+  width: "800",
+  height: "600",
+  title: "Cat",
+  subtitle: "4 photos",
+};
+export const Standard = Template.bind({});
+Standard.args = {
+  heading: "My dogs",
+  items: Array(12)
+    .fill({ ...exampleItem })
+    .map((item, index) => {
+      const pseudoRandom = ((index * 29) % 8) + 1;
+      return {
+        ...item,
+        href: `#/category-${index}`,
+        title: `Category #${index + 101}`,
+        subtitle: `${pseudoRandom} photos`,
+      };
+    }),
+  columns: 4,
+  columnsMedium: 3,
+  columnsSmall: 2,
+  columnsTiny: 1,
+  classes: "tna-index-grid--demo",
+};

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

@@ -0,0 +1,94 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "subtitle",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "columns",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "columnsMedium",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "columnsSmall",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "columnsTiny",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the container."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the container."
+  }
+]

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

@@ -0,0 +1,3 @@
+{% macro tnaIndexGrid(params) %}
+  {%- include "nationalarchives/components/index-grid/template.njk" -%}
+{% endmacro %}

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

@@ -0,0 +1,56 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<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>
+    </div>
+    {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
+
+    {%- if params.columns == 1 -%}
+      {%- set itemClasses = itemClasses.concat('tna-column--full') -%}
+    {%- else -%}
+      {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columns) -%}
+    {%- endif -%}
+
+    {%- if params.columnsMedium -%}
+      {%- if params.columnsMedium == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-medium') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsMedium + '-medium') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- if params.columnsSmall -%}
+      {%- if params.columnsSmall == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-small') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsSmall + '-small') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- if params.columnsTiny -%}
+      {%- if params.columnsTiny == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-tiny') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsTiny + '-tiny') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- for item in params.items -%}
+    <div 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">
+          <span class="tna-index-grid__item-title">{{ item.title }}</span>
+          {%- if item.subtitle -%}
+          <br>
+          <span class="tna-index-grid__item-subtitle">{{ item.subtitle }}</span>
+          {%- endif -%}
+        </span>
+      </a>
+    </div>
+    {%- endfor -%}
+  </div>
+<nav>

package/nationalarchives/components/message/_index.scss

@@ -0,0 +1,29 @@
+@use "../../variables/colour" as colourVars;
+@use "../../tools/colour";
+
+.tna-message {
+  padding: 1rem;
+
+  display: flex;
+  align-items: center;
+
+  color: colourVars.$tna-black;
+
+  @include colour.colour-background("keyline");
+
+  border-left: 0.5rem transparent solid;
+  @include colour.colour-border("keyline-dark");
+
+  // &--yellow {
+  background-color: colourVars.$tna-cream;
+
+  border-left-color: colourVars.$tna-yellow;
+  // }
+
+  &__icon {
+    margin-right: 1rem;
+  }
+
+  &__message {
+  }
+}

package/nationalarchives/components/message/fixtures.json

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

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

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

package/nationalarchives/components/message/macro.njk

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