@brandsync/wc 1.17.0 → 1.18.0

package/dist/collection/components/bs-app-recent-item/bs-app-recent-item.stories.js

@@ -0,0 +1,28 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+import { ICONS } from "../bs-app-switcher/bs-app-switcher.stories";
+const meta = {
+    title: 'Components/bs-app-recent-item',
+    parameters: { layout: 'padded', docs: { description: { component: componentDescription('bs-app-recent-item') } } },
+    argTypes: { name: { control: 'text' }, description: { control: 'text' }, current: { control: 'boolean' }, disabled: { control: 'boolean' } },
+    args: { name: 'Accounting', description: 'Opened 10 min ago · Nordlys Handel AS', current: false, disabled: false },
+    render: args => html `
+    <div style="width: 328px">
+      <bs-app-recent-item .icon=${ICONS.accounting} name=${args.name} description=${args.description} ?current=${args.current} ?disabled=${args.disabled}></bs-app-recent-item>
+    </div>
+  `,
+};
+export default meta;
+export const Default = {};
+/** Default, Current and Disabled. Hover, pressed and focus come from the native element: point, press or Tab to see them. */
+export const States = {
+    render: () => html `
+    <div style="display:flex;flex-direction:column;gap:8px;width:328px">
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Default" description="Opened 10 min ago · Nordlys Handel AS"></bs-app-recent-item>
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Current" description="Opened 10 min ago · Nordlys Handel AS" current></bs-app-recent-item>
+      <bs-app-recent-item .icon=${ICONS.accounting} name="Disabled" description="Opened 10 min ago · Nordlys Handel AS" disabled></bs-app-recent-item>
+    </div>
+  `,
+};
+export const Current = { args: { current: true } };
+export const Disabled = { args: { disabled: true } };

package/dist/collection/components/bs-app-shell/bs-app-shell.js

@@ -38,7 +38,7 @@ export class BsAppShell {
     /** When true the host is `height: 100%`; when false it is content-sized with `min-height: 100vh`. */
     fullHeight = true;
     render() {
-        return (h("div", { key: 'bb129be6f9df534225bd91bc49b218cd297b9f50', class: "bs-app-shell", part: "container" }, h("div", { key: 'b7557918e3a7c0c54c5e96c73af17af25276e227', class: "bs-app-shell__header", part: "header" }, h("slot", { key: '135463253e19c6a2d5ff86b04413e6838f824a89', name: "header" })), h("div", { key: '6c261a296a432f8de89308ad846f879b0222ad38', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'ab2bcf3c3deebef265b9bd363a398f27a0dd08e5', name: "navigation" })), h("main", { key: 'c5c464164626c5556db4b13f21d1a1b160b4cd0b', class: "bs-app-shell__main", part: "main" }, h("slot", { key: 'b10f392415fae0ff71064034e8731a1d389c2c2b' })), h("div", { key: 'cef45e2cf170b9cada37921339fc42349e8a2bab', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: 'fc72f095f04b9ed1adb60853d7bd94c7a9d3fc8b', name: "aside" }))));
+        return (h("div", { key: 'e81aecf9ac19aff77ce4f6024bb48d051a9240a7', class: "bs-app-shell", part: "container" }, h("div", { key: '3bd113852f0db029d2515d9fe88292746e85764f', class: "bs-app-shell__header", part: "header" }, h("slot", { key: 'a538e654c63deb0bc3ad6075fc85ecde683e7587', name: "header" })), h("div", { key: '3b36be978c2db51d44fa807799e96aadc082fb77', class: "bs-app-shell__navigation", part: "navigation" }, h("slot", { key: 'eb74b091c1810fd6f981b3d1b553a17f01d9d3fc', name: "navigation" })), h("main", { key: 'f822e4277e77ec40d66e9ae49cf4bbf812c49ff3', class: "bs-app-shell__main", part: "main" }, h("slot", { key: '5fc343fcbfb1ed1e058ce27ca7be2d518b911927' })), h("div", { key: 'cee504b33b4cb5b4c38d3c4e61da8f31277fb865', class: "bs-app-shell__aside", part: "aside" }, h("slot", { key: '1c7cb896f2b9ef2b7aeccc5ed0b14c9c1317218c', name: "aside" }))));
     }
     static get is() { return "bs-app-shell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-app-switcher/bs-app-switcher.cmp.test.js

@@ -0,0 +1,179 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { APPS, RECENT } from "./bs-app-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const settle = (ms = 60) => new Promise(r => setTimeout(r, ms));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '420px' } }, h("bs-app-switcher", null)));
+    const el = r.root.querySelector('bs-app-switcher');
+    Object.assign(el, { apps: APPS, ...props });
+    await r.waitForChanges();
+    await settle();
+    const type = async (query) => {
+        q(el, 'bs-input').dispatchEvent(new CustomEvent('bsInput', { detail: query }));
+        await r.waitForChanges();
+    };
+    return { ...r, el, type };
+};
+const headers = (el) => qa(el, '[part="group-header"]').map(h => h.textContent);
+const events = (el, ...names) => {
+    const got = [];
+    for (const n of names)
+        el.addEventListener(n, e => got.push([n, e.detail]));
+    return got;
+};
+describe('bs-app-switcher', () => {
+    it('renders a 360px panel with heading, Manage, search, a 3-column grid and the footer link', async () => {
+        const { el } = await make();
+        expect(Math.round(q(el, '[part="panel"]').getBoundingClientRect().width)).toBe(360);
+        expect(q(el, '[part="heading"]').textContent).toBe('EG apps');
+        expect(q(el, '[part="manage"]').textContent).toBe('Manage');
+        expect(headers(el)).toEqual(['Your apps']);
+        expect(qa(el, '[part="tile"]').length).toBe(9);
+        const tops = new Set(qa(el, '[part="tile"]').slice(0, 3).map(t => Math.round(t.getBoundingClientRect().top)));
+        expect(tops.size).toBe(1);
+        expect(Math.round(qa(el, '[part="tile"]')[0].getBoundingClientRect().height)).toBe(100);
+        expect(q(el, '[part="browse"]').textContent).toContain('Browse all EG products');
+        assertShadowParts(el.shadowRoot, ['panel', 'header', 'heading', 'manage', 'search', 'group', 'group-header', 'grid', 'tile', 'footer', 'browse']);
+        assertCssCustomProperties(el, ['--bs-app-switcher-width', '--bs-app-switcher-radius', '--bs-app-switcher-shadow']);
+    });
+    it('shows Recent rows and All apps compact tiles when there are recent apps, and marks the current app', async () => {
+        const { el } = await make({ recent: RECENT, currentId: 'accounting' });
+        expect(headers(el)).toEqual(['Recent', 'All apps']);
+        const rows = qa(el, '[part="row"]');
+        expect(rows.length).toBe(3);
+        expect(rows[0].description).toBe('Opened 10 min ago · Nordlys Handel AS');
+        expect(Math.round(rows[0].getBoundingClientRect().height)).toBe(52);
+        const tiles = qa(el, '[part="tile"]');
+        expect(tiles.length).toBe(9);
+        expect(tiles[0].size).toBe('compact');
+        expect(tiles[0].current).toBe(true);
+        expect(tiles[1].current).toBe(false);
+    });
+    it('filters by name or description with a result count, and announces it', async () => {
+        const { el, type } = await make({ recent: RECENT });
+        await type('pay');
+        expect(headers(el)).toEqual(['2 results']);
+        expect(qa(el, '[part="row"]').map(r => r.name)).toEqual(['Payroll', 'Bank']);
+        expect(qa(el, '[part="row"]')[0].description).toBe('Salaries, payslips and holiday pay');
+        expect(el.query).toBe('pay');
+        expect(q(el, '[role="status"]').textContent).toBe('2 results');
+        await type('stock');
+        expect(headers(el)).toEqual(['1 result']);
+    });
+    it('shows the no-results state with the query, and Clear search restores the groups', async () => {
+        const { el, type, waitForChanges } = await make();
+        const got = events(el, 'bsClearSearch', 'bsQueryChange');
+        await type('lønn');
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('No apps match “lønn”');
+        expect(q(el, '[role="status"]').textContent).toBe('No apps match “lønn”');
+        empty.querySelector('bs-button').click();
+        await waitForChanges();
+        expect(el.query).toBe('');
+        expect(got.map(g => g[0])).toEqual(['bsQueryChange', 'bsQueryChange', 'bsClearSearch']);
+        expect(headers(el)).toEqual(['Your apps']);
+    });
+    it('Escape clears the search and stops the event; with an empty field it is left alone', async () => {
+        const { el, type, waitForChanges } = await make();
+        let escapes = 0;
+        el.parentElement.addEventListener('keydown', e => e.key === 'Escape' && escapes++);
+        await type('pay');
+        q(el, 'bs-input').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(el.query).toBe('');
+        expect(escapes).toBe(0);
+        q(el, 'bs-input').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true, cancelable: true }));
+        expect(escapes).toBe(1);
+    });
+    it('loading shows aria-busy skeleton tiles, announces the label, and hides the search', async () => {
+        const { el } = await make({ status: 'loading' });
+        expect(q(el, '[aria-busy="true"]')).not.toBeNull();
+        expect(qa(el, 'bs-skeleton').length).toBeGreaterThanOrEqual(18);
+        expect(q(el, 'bs-input')).toBeNull();
+        expect(q(el, '[role="status"]').textContent).toBe('Loading apps…');
+    });
+    it('error shows an alert with Try again, which fires bsRetry', async () => {
+        const { el } = await make({ status: 'error' });
+        const got = events(el, 'bsRetry');
+        expect(q(el, '[role="alert"]')).not.toBeNull();
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('Couldn’t load your apps');
+        expect(empty.intent).toBe('error');
+        empty.querySelector('bs-button').click();
+        expect(got.length).toBe(1);
+    });
+    it('empty (no apps) shows Request access, which fires bsRequestAccess', async () => {
+        const { el } = await make({ apps: [] });
+        const got = events(el, 'bsRequestAccess');
+        expect(q(el, '[part="empty"]').heading).toBe('No apps assigned yet');
+        expect(q(el, 'bs-input')).toBeNull();
+        q(el, '[part="empty"] bs-button').click();
+        expect(got.length).toBe(1);
+    });
+    it('fires bsAppSelect (cancelable) and bsManage / bsBrowseAll', async () => {
+        const { el } = await make({ apps: APPS, currentId: 'bank' });
+        const got = events(el, 'bsAppSelect', 'bsManage', 'bsBrowseAll');
+        qa(el, '[part="tile"]')[2].click();
+        q(el, '[part="manage"]').click();
+        q(el, '[part="browse"]').click();
+        expect(got.map(g => g[0])).toEqual(['bsAppSelect', 'bsManage', 'bsBrowseAll']);
+        expect(got[0][1].id).toBe('payroll');
+    });
+    it('does not fire bsAppSelect for a disabled app, and preventDefault cancels the click', async () => {
+        const { el, waitForChanges } = await make({ apps: [{ ...APPS[0], disabled: true }, APPS[1]] });
+        const got = events(el, 'bsAppSelect');
+        qa(el, '[part="tile"]')[0].click();
+        expect(got.length).toBe(0);
+        el.addEventListener('bsAppSelect', e => e.preventDefault());
+        const btn = qa(el, '[part="tile"]')[1].shadowRoot.querySelector('button');
+        // dispatchEvent returns false when a listener called preventDefault.
+        const notPrevented = btn.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true, cancelable: true }));
+        await waitForChanges();
+        expect(notPrevented).toBe(false);
+    });
+    it('names the panel by its heading and each group by its header', async () => {
+        const { el } = await make({ recent: RECENT });
+        const panel = q(el, '[part="panel"]');
+        expect(panel.getAttribute('role')).toBe('region');
+        expect(el.shadowRoot.getElementById(panel.getAttribute('aria-labelledby'))?.textContent).toBe('EG apps');
+        for (const g of qa(el, '[part="group"]')) {
+            expect(el.shadowRoot.getElementById(g.getAttribute('aria-labelledby'))).not.toBeNull();
+        }
+    });
+    it('renders Manage and Browse as links when given URLs', async () => {
+        const { el } = await make({ manageHref: '#m', browseHref: '#b' });
+        expect(q(el, '[part="manage"]').tagName).toBe('A');
+        expect(q(el, '[part="browse"]').getAttribute('href')).toBe('#b');
+    });
+    it('translates every string through its label prop', async () => {
+        const { el } = await make({ heading: 'EG apper', manageLabel: 'Administrer', yourAppsLabel: 'Dine apper', browseLabel: 'Se alle' });
+        expect(q(el, '[part="heading"]').textContent).toBe('EG apper');
+        expect(q(el, '[part="manage"]').textContent).toBe('Administrer');
+        expect(headers(el)).toEqual(['Dine apper']);
+        expect(q(el, '[part="browse"]').textContent).toContain('Se alle');
+    });
+    it('has no axe violations in any state', async () => {
+        const states = {
+            default: {},
+            links: { manageHref: '#m', browseHref: '#b' },
+            recent: { recent: RECENT, currentId: 'accounting' },
+            disabled: { apps: [{ ...APPS[0], disabled: true }, ...APPS.slice(1)] },
+            loading: { status: 'loading' },
+            error: { status: 'error' },
+            empty: { apps: [] },
+        };
+        for (const [name, props] of Object.entries(states)) {
+            const { el } = await make(props);
+            const results = await axe.run(el);
+            expect(results.violations.map(v => `${name} ${v.id}: ${v.help}`)).toEqual([]);
+        }
+        const { el, type } = await make();
+        await type('pay');
+        expect((await axe.run(el)).violations.map(v => `searching ${v.id}: ${v.help}`)).toEqual([]);
+        await type('lønn');
+        expect((await axe.run(el)).violations.map(v => `no-results ${v.id}: ${v.help}`)).toEqual([]);
+    });
+});

package/dist/collection/components/bs-app-switcher/bs-app-switcher.css

@@ -0,0 +1,173 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: var(--bs-app-switcher-width);
+  max-width: 100%;
+  --bs-app-switcher-width: 360px;
+  --bs-app-switcher-radius: var(--bs-border-radius-150);
+  --bs-app-switcher-bg: var(--bs-surface-base);
+  --bs-app-switcher-border-color: var(--bs-border-default);
+  --bs-app-switcher-shadow: var(--bs-shadow-position-0) var(--bs-shadow-position-100) var(--bs-shadow-blur-200) var(--bs-elevation-higher);
+  --bs-app-switcher-padding: var(--bs-spacing-150);
+  --bs-app-switcher-text-color: var(--bs-text-default);
+  --bs-app-switcher-header-color: var(--bs-text-secondary);
+  --bs-app-switcher-link-color: var(--bs-text-action);
+  --bs-app-switcher-focus-ring: var(--bs-border-neutral-focus);
+}
+
+.bs-app-switcher {
+  display: block;
+  position: relative;
+  --bs-card-bg: var(--bs-app-switcher-bg);
+  --bs-card-radius: var(--bs-app-switcher-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-app-switcher-border-color);
+  --bs-card-shadow: var(--bs-app-switcher-shadow);
+}
+
+.bs-app-switcher__header,
+.bs-app-switcher__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bs-spacing-150) var(--bs-spacing-200);
+}
+
+.bs-app-switcher__heading {
+  margin: 0;
+  color: var(--bs-app-switcher-text-color);
+  font-family: var(--bs-typography-font-family-heading, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-heading-h6);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h6) * 1px);
+}
+
+.bs-app-switcher__manage,
+.bs-app-switcher__browse {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--bs-border-radius-50);
+  background: none;
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  cursor: pointer;
+}
+
+.bs-app-switcher__manage {
+  color: var(--bs-app-switcher-text-color);
+  font-size: var(--bs-fontsize-body-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+  text-decoration: none;
+}
+
+.bs-app-switcher__browse {
+  color: var(--bs-app-switcher-link-color);
+  font-size: var(--bs-fontsize-caption-sm);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  text-decoration: underline;
+}
+
+.bs-app-switcher__manage:hover,
+.bs-app-switcher__browse:hover {
+  color: var(--bs-text-action-hover);
+}
+
+.bs-app-switcher__manage:focus-visible,
+.bs-app-switcher__browse:focus-visible {
+  outline: var(--bs-spacing-25) solid var(--bs-app-switcher-focus-ring);
+  outline-offset: var(--bs-spacing-25);
+}
+
+.bs-app-switcher__external {
+  width: var(--bs-spacing-150);
+  height: var(--bs-spacing-150);
+  flex: none;
+}
+
+.bs-app-switcher__search {
+  padding: var(--bs-spacing-150) var(--bs-app-switcher-padding) var(--bs-spacing-50);
+}
+
+.bs-app-switcher__search bs-input {
+  width: 100%;
+}
+
+.bs-app-switcher__body {
+  padding: var(--bs-spacing-50) var(--bs-app-switcher-padding) var(--bs-spacing-150);
+}
+
+.bs-app-switcher__group-header {
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  color: var(--bs-app-switcher-header-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-fontsize-caption-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-caption-sm) * 1px);
+  letter-spacing: var(--bs-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.bs-app-switcher__grid,
+.bs-app-switcher__list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bs-app-switcher__grid--grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--bs-spacing-150);
+}
+
+.bs-app-switcher__grid--compact {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--bs-spacing-100);
+}
+
+.bs-app-switcher__section-divider {
+  display: block;
+  width: calc(100% + var(--bs-app-switcher-padding) * 2);
+  margin: 0 calc(var(--bs-app-switcher-padding) * -1);
+}
+
+.bs-app-switcher__empty {
+  --bs-empty-state-padding-y: var(--bs-spacing-300);
+}
+
+.bs-app-switcher__skeleton-header {
+  --bs-skeleton-width: var(--bs-sizing-1000);
+  display: block;
+  padding: var(--bs-spacing-100);
+}
+
+.bs-app-switcher__skeleton-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-app-switcher__skeleton-icon {
+  --bs-skeleton-width: calc(var(--bs-sizing-500) + var(--bs-spacing-50));
+  --bs-skeleton-rect-height: calc(var(--bs-sizing-500) + var(--bs-spacing-50));
+}
+
+.bs-app-switcher__skeleton-label {
+  --bs-skeleton-width: var(--bs-sizing-800);
+}
+
+.bs-app-switcher__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}