Remove column layout from breadcrumbs

nationalarchives · Oct 12, 2023 · b477ae0 · b477ae0
1 parent 30286aa
commit b477ae0
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 ### Changed
+
+- Breadcrumbs are no longer contained within a container/column layout
+
 ### Deprecated
 ### Removed
 ### Fixed

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs b/src/nationalarchives/components/breadcrumbs/breadcrumbs.mjs
@@ -3,26 +3,16 @@ import uuidv4 from "../../lib/uuid.mjs";
 export class Breadcrumbs {
   constructor($module) {
     this.$module = $module;
-    this.$breadcrumbsListWrapper =
-      $module && $module.querySelector(".tna-breadcrumbs__wrapper");
     this.$breadcrumbsList =
-      $module &&
-      this.$breadcrumbsListWrapper &&
-      $module.querySelector(".tna-breadcrumbs__list");
+      $module && $module.querySelector(".tna-breadcrumbs__list");
     this.$breadcrumbs =
       $module &&
-      this.$breadcrumbsListWrapper &&
       this.$breadcrumbsList &&
       $module.querySelectorAll(".tna-breadcrumbs__item");
   }
 
   init() {
-    if (
-      !this.$module ||
-      !this.$breadcrumbsListWrapper ||
-      !this.$breadcrumbsList ||
-      !this.$breadcrumbs
-    ) {
+    if (!this.$module || !this.$breadcrumbsList || !this.$breadcrumbs) {
       return;
     }
 
@@ -48,9 +38,9 @@ export class Breadcrumbs {
       $expandButton.addEventListener("click", () => {
         this.$module.classList.remove("tna-breadcrumbs--collapsed");
         $expandable.remove();
-        this.$breadcrumbsListWrapper.setAttribute("tabindex", "0");
-        this.$breadcrumbsListWrapper.focus();
-        this.$breadcrumbsListWrapper.setAttribute("tabindex", "-1");
+        this.$module.setAttribute("tabindex", "0");
+        this.$module.focus();
+        this.$module.setAttribute("tabindex", "-1");
       });
 
       $expandable.appendChild($expandButton);

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss b/src/nationalarchives/components/breadcrumbs/breadcrumbs.scss
@@ -8,10 +8,8 @@
   padding-top: 1rem;
   padding-bottom: 1rem;
 
-  &__wrapper {
-    &:focus {
-      outline: none !important;
-    }
+  &:focus {
+    outline: none !important;
   }
 
   &__list {

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js b/src/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();
+};
diff --git a/src/nationalarchives/components/breadcrumbs/fixtures.json b/src/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
     }
   ]

diff --git a/src/nationalarchives/components/breadcrumbs/template.njk b/src/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>