@nationalarchives/frontend 0.1.20-prerelease → 0.1.22-prerelease

package/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js

@@ -1,5 +1,8 @@
 import Breadcrumbs from "./template.njk";
 import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   items: { control: "object" },
@@ -57,7 +60,68 @@ Standard.args = {
 };
 
 export const NoCollapse = Template.bind({});
+NoCollapse.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
 NoCollapse.args = {
   ...Standard.args,
   noCollapse: true,
 };
+
+export const Mobile = Template.bind({});
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+Mobile.args = {
+  ...Standard.args,
+};
+
+export const MobileExpanded = Template.bind({});
+MobileExpanded.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+MobileExpanded.args = {
+  ...Standard.args,
+};
+MobileExpanded.play = async ({ args, canvasElement, step }) => {
+  const canvas = within(canvasElement);
+
+  const $module = document.querySelector('[data-module="tna-breadcrumbs"]');
+  const $items = args.items.map((item) => canvas.getByText(item.text));
+  const $expandButton = document.querySelector(
+    ".tna-breadcrumbs__item--expandable button",
+  );
+
+  await expect($items[0]).toBeVisible();
+  await expect($items[1]).not.toBeVisible();
+  await expect($items[2]).not.toBeVisible();
+  await expect($items[3]).not.toBeVisible();
+  await expect($items[4]).toBeVisible();
+  await expect($expandButton).toBeVisible();
+
+  await userEvent.click($expandButton);
+
+  await expect($items[0]).toBeVisible();
+  await expect($items[1]).toBeVisible();
+  await expect($items[2]).toBeVisible();
+  await expect($items[3]).toBeVisible();
+  await expect($items[4]).toBeVisible();
+  await expect($expandButton).not.toBeVisible();
+
+  await expect($module).toHaveFocus();
+};

package/nationalarchives/components/breadcrumbs/fixtures.json

@@ -19,7 +19,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\"><div class=\"tna-container\"><nav class=\"tna-breadcrumbs__wrapper tna-column tna-column--full\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav></div></div>",
+      "html": "<nav class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>",
       "hidden": false
     },
     {
@@ -41,7 +41,7 @@
         ]
       },
       "noCollapse": true,
-      "html": "<div class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\"><div class=\"tna-container\"><nav class=\"tna-breadcrumbs__wrapper tna-column tna-column--full\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav></div></div>",
+      "html": "<nav class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>",
       "hidden": false
     }
   ]

package/nationalarchives/components/breadcrumbs/template.njk

@@ -2,18 +2,14 @@
 {%- if params.noCollapse -%}
   {%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
 {%- endif -%}
-<div class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <div class="tna-container">
-    <nav class="tna-breadcrumbs__wrapper tna-column tna-column--full" aria-label="Breadcrumb">
-      <ol class="tna-breadcrumbs__list">
-      {%- for item in params.items -%}
-        <li class="tna-breadcrumbs__item">
-          <a href="{{ item.href }}" class="tna-breadcrumbs__link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
-            {{ item.text }}
-          </a>
-        </li>
-      {%- endfor -%}
-      </ol>
-    </nav>
-  </div>
-</div>
+<nav class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" aria-label="Breadcrumb"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <ol class="tna-breadcrumbs__list">
+  {%- for item in params.items -%}
+    <li class="tna-breadcrumbs__item">
+      <a href="{{ item.href }}" class="tna-breadcrumbs__link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+        {{ item.text }}
+      </a>
+    </li>
+  {%- endfor -%}
+  </ol>
+</nav>

package/nationalarchives/components/button/_button-group.scss

@@ -7,7 +7,7 @@
   align-items: center;
   gap: 1rem;
 
-  @include spacing.space-below;
+  @include spacing.space-above;
 
   @include media.on-tiny {
     flex-direction: column;