From b477ae0988e725be592dffe823cc6e6af114e1f0 Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 12 Oct 2023 18:25:52 +0100 Subject: [PATCH] Remove column layout from breadcrumbs --- CHANGELOG.md | 3 + .../components/breadcrumbs/breadcrumbs.mjs | 20 ++---- .../components/breadcrumbs/breadcrumbs.scss | 6 +- .../breadcrumbs/breadcrumbs.stories.js | 64 +++++++++++++++++++ .../components/breadcrumbs/fixtures.json | 4 +- .../components/breadcrumbs/template.njk | 26 ++++---- 6 files changed, 87 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94cc5bfd..3ad3cb95 100644 --- 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 index ff967edd..de6f6050 100644 --- 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 index 9c8baa02..0cc84193 100644 --- 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 index 0c32cec3..fc842707 100644 --- 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 index 8465b984..f459a751 100644 --- a/src/nationalarchives/components/breadcrumbs/fixtures.json +++ b/src/nationalarchives/components/breadcrumbs/fixtures.json @@ -19,7 +19,7 @@ } ] }, - "html": "
", + "html": "", "hidden": false }, { @@ -41,7 +41,7 @@ ] }, "noCollapse": true, - "html": "
", + "html": "", "hidden": false } ] diff --git a/src/nationalarchives/components/breadcrumbs/template.njk b/src/nationalarchives/components/breadcrumbs/template.njk index baeecbcf..9c39226b 100644 --- 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 -%} -
-
- -
-
+