@brandsync/wc 1.17.0 → 1.18.0

package/dist/collection/components/bs-page-header/bs-page-header.cmp.test.js

@@ -0,0 +1,206 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const Trail = () => (h("bs-breadcrumbs", { slot: "breadcrumb", label: "Breadcrumb" }, h("bs-breadcrumb", { href: "#sales" }, "Sales"), h("bs-breadcrumb", { href: "#invoices" }, "Invoices"), h("bs-breadcrumb", { current: true }, "INV-2041")));
+const Status = () => (h("bs-chip-informative", { slot: "status", color: "error", size: "sm" }, "Overdue"));
+const Actions = () => [
+    h("bs-button", { slot: "actions", variant: "outlined", size: "sm" }, "Send reminder"),
+    h("bs-button", { slot: "actions", size: "sm" }, "Register payment"),
+    h("bs-icon-button", { slot: "actions", variant: "outlined", size: "sm", ariaLabel: "More actions" }, h("svg", { viewBox: "0 0 16 16", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "2" }))),
+];
+const Tabs = () => (h("bs-tabs", { slot: "tabs", type: "bs-tab", value: "overview" }, h("bs-tab", { value: "overview", selected: true }, "Overview"), h("bs-tab", { value: "lines" }, "Lines"), h("bs-tab", { value: "payments" }, "Payments")));
+const make = async (props = {}, width = 1100, children = [Trail(), Status(), Actions(), Tabs()]) => {
+    const r = await render(h("div", { style: { width: `${width}px` } }, h("bs-page-header", { heading: "Invoices", meta: "214 invoices \u00B7 38 open \u00B7 5 overdue", ...props }, children)));
+    await new Promise(res => setTimeout(res, 80));
+    const el = r.root.querySelector('bs-page-header');
+    return { ...r, el };
+};
+describe('bs-page-header', () => {
+    it('renders the heading as an h1 by default and clamps headingLevel to 1-6', async () => {
+        const levels = [];
+        for (const level of [undefined, 2, 4, 9, 0, 'x']) {
+            const { el } = await make(level === undefined ? {} : { headingLevel: level });
+            levels.push(q(el, '[part="heading"]').tagName);
+        }
+        expect(levels).toEqual(['H1', 'H2', 'H4', 'H6', 'H1', 'H1']);
+        const { el } = await make();
+        expect(q(el, 'h1').textContent).toBe('Invoices');
+    });
+    it('is a plain div, not a landmark, and exposes the parts and custom properties', async () => {
+        const { el } = await make({ back: true, favoritable: true });
+        const root = q(el, '[part="container"]');
+        expect(root.tagName).toBe('DIV');
+        expect(root.getAttribute('role')).toBeNull();
+        assertShadowParts(el.shadowRoot, ['container', 'breadcrumb', 'row', 'main', 'back', 'title', 'heading', 'status', 'favorite', 'meta', 'actions', 'tabs', 'divider']);
+        assertCssCustomProperties(el, ['--bs-page-header-bg', '--bs-page-header-shadow', '--bs-page-header-sticky-offset', '--bs-page-header-z-index']);
+    });
+    it('renders the meta prop, and the meta slot overrides it', async () => {
+        const { el } = await make();
+        expect(q(el, '[part="meta"]').textContent).toBe('214 invoices · 38 open · 5 overdue');
+        const { el: el2 } = await make({}, 1100, [h("span", { slot: "meta" }, "Slotted meta")]);
+        expect(q(el2, 'slot[name="meta"]').assignedNodes()[0].textContent).toBe('Slotted meta');
+    });
+    it('removes empty areas from layout (no breadcrumb, actions, status or meta)', async () => {
+        const { el } = await make({ meta: undefined }, 1100, []);
+        for (const part of ['breadcrumb', 'status', 'meta', 'actions', 'tabs']) {
+            expect(getComputedStyle(q(el, `[part="${part}"]`)).display, part).toBe('none');
+        }
+    });
+    it('shows the back button only with `back`, named by backLabel, and emits bsBack', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="back"]')).toBeNull();
+        el.back = true;
+        el.backLabel = 'Tilbage';
+        await waitForChanges();
+        const back = q(el, '[part="back"]');
+        expect(back.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Tilbage');
+        let n = 0;
+        el.addEventListener('bsBack', () => n++);
+        back.shadowRoot.querySelector('button').click();
+        expect(n).toBe(1);
+    });
+    it('aligns the meta line with the title, not the back button', async () => {
+        const { el } = await make({ back: true });
+        const title = q(el, '[part="title"]').getBoundingClientRect();
+        const meta = q(el, '[part="meta"]').getBoundingClientRect();
+        expect(Math.round(meta.left)).toBe(Math.round(title.left));
+        expect(meta.top).toBeGreaterThanOrEqual(title.bottom - 1);
+    });
+    describe('favourite toggle', () => {
+        it('only exists with `favoritable`, is a pressed toggle with a constant label', async () => {
+            const { el, waitForChanges } = await make();
+            expect(q(el, '[part="favorite"]')).toBeNull();
+            el.favoritable = true;
+            await waitForChanges();
+            const fav = q(el, '[part="favorite"]');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Favourite');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-pressed')).toBe('false');
+            el.favorite = true;
+            await waitForChanges();
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-pressed')).toBe('true');
+            expect(fav.shadowRoot.querySelector('button').getAttribute('aria-label')).toBe('Favourite');
+        });
+        it('toggles on click, emitting bsFavoriteChange with the new value', async () => {
+            const { el, waitForChanges } = await make({ favoritable: true });
+            const seen = [];
+            el.addEventListener('bsFavoriteChange', (e) => seen.push(e.detail.favorite));
+            const click = () => q(el, '[part="favorite"]').shadowRoot.querySelector('button').click();
+            click();
+            await waitForChanges();
+            expect(el.favorite).toBe(true);
+            expect(el.hasAttribute('favorite')).toBe(true);
+            click();
+            await waitForChanges();
+            expect(el.favorite).toBe(false);
+            expect(seen).toEqual([true, false]);
+        });
+        it('keeps the old value when bsFavoriteChange is cancelled', async () => {
+            const { el, waitForChanges } = await make({ favoritable: true });
+            el.addEventListener('bsFavoriteChange', (e) => e.preventDefault());
+            q(el, '[part="favorite"]').shadowRoot.querySelector('button').click();
+            await waitForChanges();
+            expect(el.favorite).toBe(false);
+        });
+    });
+    it('draws the divider under the tabs only when there are tabs and the header is not compact', async () => {
+        const { el, waitForChanges } = await make();
+        expect(q(el, '[part="divider"]')).not.toBeNull();
+        el.compact = true;
+        await waitForChanges();
+        expect(q(el, '[part="divider"]')).toBeNull();
+        const { el: noTabs } = await make({}, 1100, [Trail()]);
+        expect(q(noTabs, '[part="divider"]')).toBeNull();
+    });
+    describe('compact', () => {
+        it('is sticky, with the level 2 shadow, a token z-index, and no breadcrumb or tabs', async () => {
+            const { el } = await make({ compact: true, back: true });
+            expect(el.hasAttribute('compact')).toBe(true);
+            const host = getComputedStyle(el);
+            expect(host.position).toBe('sticky');
+            expect(host.top).toBe('0px');
+            expect(host.zIndex).toBe('200');
+            const box = getComputedStyle(q(el, '[part="container"]'));
+            expect(box.boxShadow).toContain('0px 2px 4px');
+            expect(getComputedStyle(q(el, '[part="breadcrumb"]')).display).toBe('none');
+            expect(getComputedStyle(q(el, '[part="tabs"]')).display).toBe('none');
+        });
+        it('is one row of 80px with the meta inline after the title', async () => {
+            const { el } = await make({ compact: true, back: true, meta: 'Nordlys Handel AS · 4 250,00 kr' });
+            expect(Math.round(q(el, '[part="container"]').getBoundingClientRect().height)).toBe(80);
+            const title = q(el, '[part="title"]').getBoundingClientRect();
+            const meta = q(el, '[part="meta"]').getBoundingClientRect();
+            expect(meta.left).toBeGreaterThanOrEqual(title.right - 1);
+            expect(Math.abs(meta.top + meta.height / 2 - (title.top + title.height / 2))).toBeLessThan(4);
+        });
+        it('honours --bs-page-header-sticky-offset', async () => {
+            const { el } = await make({ compact: true });
+            el.style.setProperty('--bs-page-header-sticky-offset', '64px');
+            expect(getComputedStyle(el).top).toBe('64px');
+        });
+        it('sticks to the top of its scroll container', async () => {
+            const r = await render(h("div", { id: "scroller", style: { height: '200px', overflow: 'auto' } }, h("bs-page-header", { compact: true, heading: "Invoices", meta: "x" }), h("div", { style: { height: '1200px' } })));
+            const scroller = r.root;
+            scroller.scrollTop = 500;
+            await new Promise(res => setTimeout(res, 50));
+            const top = r.root.querySelector('bs-page-header').getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+            expect(Math.round(top)).toBe(0);
+        });
+    });
+    describe('narrow container', () => {
+        it('wraps the actions below the title block without overflowing, at 320px', async () => {
+            const { el } = await make({ back: true, favoritable: true }, 320);
+            const main = q(el, '[part="main"]').getBoundingClientRect();
+            const actions = q(el, '[part="actions"]').getBoundingClientRect();
+            expect(actions.top).toBeGreaterThanOrEqual(main.bottom - 1);
+            const host = el.getBoundingClientRect();
+            expect(host.width).toBe(320);
+            expect(el.scrollWidth).toBeLessThanOrEqual(320);
+            for (const b of Array.from(el.querySelectorAll('[slot="actions"]'))) {
+                const r = b.getBoundingClientRect();
+                expect(r.right).toBeLessThanOrEqual(host.right + 0.5);
+                expect(r.height).toBeGreaterThanOrEqual(44);
+            }
+        });
+        it('makes the built-in back and favourite buttons 44px', async () => {
+            const { el } = await make({ back: true, favoritable: true }, 375);
+            expect(q(el, '[part="back"]').getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
+            expect(q(el, '[part="favorite"]').getBoundingClientRect().width).toBeGreaterThanOrEqual(44);
+        });
+        it('lets a long title and the meta wrap, and scrolls the tab row inside itself', async () => {
+            const long = 'Invoice INV-2041 for Nordlys Handel AS and a very long supplementary description that must wrap';
+            const { el } = await make({ heading: long, meta: long, back: true }, 320, [
+                Trail(),
+                Status(),
+                Actions(),
+                h("bs-tabs", { slot: "tabs", type: "bs-tab" }, ['Overview', 'Lines', 'Payments', 'Activity', 'Attachments', 'History'].map(t => (h("bs-tab", null, t)))),
+            ]);
+            expect(el.scrollWidth).toBeLessThanOrEqual(320);
+            expect(q(el, '[part="heading"]').getBoundingClientRect().height).toBeGreaterThan(40);
+            const tabs = q(el, '[part="tabs"]');
+            expect(getComputedStyle(tabs).overflowX).toBe('auto');
+            expect(tabs.scrollWidth).toBeGreaterThan(tabs.clientWidth);
+            expect(tabs.getBoundingClientRect().right).toBeLessThanOrEqual(320);
+        });
+        it('keeps the wide layout (actions beside the title) at 640px and wider', async () => {
+            const { el } = await make({}, 640);
+            const main = q(el, '[part="main"]').getBoundingClientRect();
+            const actions = q(el, '[part="actions"]').getBoundingClientRect();
+            expect(actions.left).toBeGreaterThanOrEqual(main.right - 1);
+            expect(actions.top).toBeLessThan(main.bottom);
+        });
+    });
+    it('has no axe violations in each configuration', async () => {
+        const configs = [
+            [{}, 1100],
+            [{ back: true, favoritable: true }, 1100],
+            [{ back: true, favoritable: true, favorite: true }, 375],
+            [{ compact: true, back: true }, 1100],
+        ];
+        for (const [props, width] of configs) {
+            const { el } = await make(props, width);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${v.id}: ${v.help}`), JSON.stringify(props)).toEqual([]);
+        }
+    });
+});

package/dist/collection/components/bs-page-header/bs-page-header.css

@@ -0,0 +1,252 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  /* The header reacts to its own width (it sits in a page's content area), not the viewport's. */
+  container-type: inline-size;
+  max-width: 100%;
+  --bs-page-header-bg: var(--bs-surface-base);
+  --bs-page-header-padding-x: var(--bs-spacing-200);
+  --bs-page-header-padding-y: var(--bs-spacing-300);
+  --bs-page-header-gap: var(--bs-spacing-150);
+  --bs-page-header-title-gap: var(--bs-spacing-150);
+  --bs-page-header-actions-gap: var(--bs-spacing-100);
+  --bs-page-header-text-color: var(--bs-text-default);
+  --bs-page-header-meta-color: var(--bs-text-secondary);
+  --bs-page-header-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-25) var(--bs-shadow-blur-50) var(--bs-elevation-medium);
+  --bs-page-header-sticky-offset: 0px;
+  --bs-page-header-z-index: var(--bs-z-index-sticky);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The compact header is the condensed state of a record header once the page scrolls: it sticks to the top of
+   its scroll container. Its own height is 80px, so give that container scroll-padding-top of the same size. */
+:host([compact]) {
+  position: sticky;
+  top: var(--bs-page-header-sticky-offset);
+  z-index: var(--bs-page-header-z-index);
+}
+
+.bs-page-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-page-header-gap);
+  box-sizing: border-box;
+  padding: var(--bs-page-header-padding-y) var(--bs-page-header-padding-x);
+  background: var(--bs-page-header-bg);
+  color: var(--bs-page-header-text-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+}
+
+/* An empty slot's wrapper is removed from layout so it adds no gap. `display: none` keeps the slot assigned, so
+   slotchange still fires when content is added later. */
+.bs-page-header .bs-page-header__empty {
+  display: none;
+}
+
+.bs-page-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-page-header-gap);
+}
+
+/* Title block: [back] [title row] on the first row, the meta line under the title (aligned with it, not the back
+   button). */
+.bs-page-header__main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bs-page-header__main--back {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bs-spacing-100);
+}
+
+.bs-page-header__back {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+}
+
+.bs-page-header__title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--bs-page-header-title-gap);
+  min-width: 0;
+  grid-row: 1;
+  grid-column: -2 / -1;
+}
+
+.bs-page-header__title--controls {
+  min-height: var(--bs-scale-500);
+}
+
+/* The built-in back and favourite icons are 20px, as in the Figma (the 40px button's default glyph is 16px). */
+.bs-page-header__back,
+.bs-page-header__favorite {
+  --bs-icon-button-icon-size-sm: var(--bs-scale-250);
+}
+
+.bs-page-header__heading {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--bs-page-header-text-color);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-heading-h4);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h4) * 1px);
+}
+
+.bs-page-header__status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-page-header__meta {
+  grid-row: 2;
+  grid-column: -2 / -1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--bs-page-header-meta-color);
+  font-size: var(--bs-fontsize-body-sm);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-page-header__actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--bs-page-header-actions-gap);
+}
+
+/* The tab row. It scrolls sideways inside itself when the tabs do not fit, and never widens the page. The small
+   padding keeps the tabs' focus ring from being clipped; the divider below overlaps it so the selected tab's
+   underline sits directly on the divider. */
+.bs-page-header__tabs {
+  min-width: 0;
+  padding: var(--bs-spacing-50) var(--bs-spacing-50) var(--bs-spacing-50);
+  margin: calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-spacing-50));
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.bs-page-header__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+/* With tabs the header ends at the full-width divider: no bottom padding, and the divider runs edge to edge. */
+.bs-page-header--tabs {
+  padding-bottom: 0;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-page-header--tabs .bs-page-header__row {
+  margin-bottom: var(--bs-spacing-50);
+}
+
+.bs-page-header__divider {
+  margin: calc(-1 * var(--bs-spacing-50)) calc(-1 * var(--bs-page-header-padding-x)) 0;
+  width: auto;
+}
+
+/* Compact: one row of 80px (40px controls + 20px above and below), a level 2 shadow, no breadcrumb or tabs. */
+.bs-page-header--compact {
+  --bs-page-header-padding-y: var(--bs-spacing-250);
+  box-shadow: var(--bs-page-header-shadow);
+}
+
+.bs-page-header--compact .bs-page-header__breadcrumb,
+.bs-page-header--compact .bs-page-header__tabs {
+  display: none;
+}
+
+.bs-page-header--compact .bs-page-header__main {
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--bs-page-header-title-gap);
+}
+
+.bs-page-header--compact .bs-page-header__main--back {
+  grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+.bs-page-header--compact .bs-page-header__back {
+  margin-inline-end: calc(-1 * var(--bs-spacing-50));
+}
+
+.bs-page-header--compact .bs-page-header__title {
+  grid-column: auto;
+}
+
+.bs-page-header--compact .bs-page-header__meta {
+  grid-row: 1;
+  grid-column: auto;
+}
+
+/* Narrow header (below 640px, where the title block and the actions stop fitting side by side; documentation
+   only -- CSS can't read a custom property in a container query): the actions wrap below the title block and
+   keep their width, the title and meta wrap, slotted buttons are at least 44px tall (--bs-scale-550), and the
+   tab row scrolls sideways inside itself. */
+@container (max-width: 639px) {
+  .bs-page-header {
+    --bs-page-header-padding-x: var(--bs-spacing-200);
+  }
+
+  .bs-page-header__row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bs-page-header__actions {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .bs-page-header__actions ::slotted(*) {
+    flex: 0 0 auto;
+    max-width: 100%;
+  }
+
+  .bs-page-header__actions ::slotted(bs-button) {
+    --bs-button-height-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header__actions ::slotted(bs-icon-button) {
+    --bs-icon-button-size-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header__back,
+  .bs-page-header__favorite {
+    --bs-icon-button-size-sm: var(--bs-scale-550);
+  }
+
+  .bs-page-header--compact .bs-page-header__main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .bs-page-header--compact .bs-page-header__main--back {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .bs-page-header--compact .bs-page-header__back {
+    margin-inline-end: 0;
+  }
+
+  .bs-page-header--compact .bs-page-header__title {
+    grid-column: -2 / -1;
+  }
+
+  .bs-page-header--compact .bs-page-header__meta {
+    grid-row: 2;
+    grid-column: -2 / -1;
+  }
+}