@brandsync/wc 1.17.0 → 1.18.0

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

@@ -0,0 +1,171 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import axe from "axe-core";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, assertCssCustomProperties } from "../../test/helpers/conventions";
+import { COMPANIES, RECENT_IDS } from "./bs-company-switcher.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const settle = (ms = 80) => new Promise(r => setTimeout(r, ms));
+const make = async (props = {}) => {
+    const r = await render(h("div", { style: { width: '500px', minHeight: '600px' } }, h("bs-company-switcher", null)));
+    const el = r.root.querySelector('bs-company-switcher');
+    Object.assign(el, { companies: COMPANIES, currentId: 'nordic', recentIds: RECENT_IDS, ...props });
+    await r.waitForChanges();
+    await settle();
+    const type = async (query) => {
+        q(el, 'bs-input').dispatchEvent(new CustomEvent('bsInput', { detail: query }));
+        await r.waitForChanges();
+    };
+    const press = async (k) => {
+        await userEvent.keyboard(k);
+        await r.waitForChanges();
+    };
+    return { ...r, el, type, press };
+};
+const headers = (el) => qa(el, '[part="group-header"]').map(h => h.textContent);
+const rows = (el) => qa(el, '[part="row"]');
+describe('bs-company-switcher', () => {
+    it('renders a 260px trigger with initials avatar, name, org number and chevron', async () => {
+        const { el } = await make();
+        const trigger = q(el, '[part="trigger"]');
+        expect(Math.round(el.getBoundingClientRect().width)).toBe(260);
+        expect(Math.round(trigger.getBoundingClientRect().height)).toBe(54);
+        expect(q(el, 'bs-avatar').initials).toBe('NS');
+        expect(q(el, '[part="name"]').textContent).toBe('Nordic Sports AS');
+        expect(q(el, '[part="subtitle"]').textContent).toBe('Org. no. 923 456 789');
+        expect(q(el, '.bs-company-switcher__chevron')).not.toBeNull();
+        expect(trigger.getAttribute('aria-expanded')).toBe('false');
+        assertShadowParts(el.shadowRoot, ['trigger', 'name', 'subtitle', 'panel']);
+        assertCssCustomProperties(el, ['--bs-company-switcher-width', '--bs-company-switcher-panel-width', '--bs-company-switcher-shadow']);
+    });
+    it('opens on trigger click, reflects open, emits bsOpenChange and moves focus to the search field', async () => {
+        const { el, waitForChanges } = await make();
+        const got = [];
+        el.addEventListener('bsOpenChange', (e) => got.push(e.detail));
+        q(el, '[part="trigger"]').click();
+        await waitForChanges();
+        await settle();
+        expect(el.open).toBe(true);
+        expect(el.hasAttribute('open')).toBe(true);
+        expect(got).toEqual([true]);
+        expect(q(el, '[part="trigger"]').getAttribute('aria-expanded')).toBe('true');
+        expect(el.shadowRoot.activeElement?.tagName).toBe('BS-INPUT');
+        const panel = q(el, '[part="panel"]').getBoundingClientRect();
+        expect(Math.round(panel.width)).toBe(360);
+    });
+    it('shows Current, Recent and All companies groups with the check on the current row', async () => {
+        const { el } = await make({ open: true });
+        expect(headers(el)).toEqual(['Current', 'Recent', 'All companies · 3']);
+        expect(rows(el)).toHaveLength(6);
+        const current = rows(el)[0];
+        expect(current.selected).toBe(true);
+        expect(current.querySelector('[slot="trailing"]')).not.toBeNull();
+        expect(current.textContent).toContain('NO · Org. no. 923 456 789');
+        expect(q(el, '[role="listbox"]')).not.toBeNull();
+        assertShadowParts(el.shadowRoot, ['search', 'list', 'group', 'group-header', 'row', 'footer']);
+    });
+    it('filters by name or org. number, case-insensitively, with a matches header', async () => {
+        const { el, type } = await make({ open: true });
+        await type('FJORD');
+        expect(headers(el)).toEqual(['1 match']);
+        expect(rows(el)).toHaveLength(1);
+        await type('556 781');
+        expect(rows(el).map(r => r.textContent)).toEqual([expect.stringContaining('Baltic Freight AB')]);
+        await type('92');
+        expect(headers(el)).toEqual(['2 matches']);
+        await type('');
+        expect(headers(el)).toEqual(['Current', 'Recent', 'All companies · 3']);
+    });
+    it('shows the no-results state with the footer still present', async () => {
+        const { el, type } = await make({ open: true });
+        await type('zzz');
+        const empty = q(el, '[part="empty"]');
+        expect(empty.heading).toBe('No companies match “zzz”');
+        expect(empty.description).toBe('Check the spelling, or search by org. number.');
+        expect(q(el, '[part="list"]')).toBeNull();
+        expect(q(el, '[part="footer"]')).not.toBeNull();
+    });
+    it('navigates with arrow keys and switches with Enter', async () => {
+        const { el, press, waitForChanges } = await make({ open: true });
+        await settle();
+        const got = [];
+        el.addEventListener('bsCompanySwitch', (e) => got.push(e.detail));
+        await press('{ArrowDown}');
+        await press('{ArrowDown}');
+        const combo = q(el, '[role="combobox"]');
+        expect(combo.getAttribute('aria-activedescendant')).toBe(rows(el)[1].id);
+        await press('{ArrowUp}');
+        expect(combo.getAttribute('aria-activedescendant')).toBe(rows(el)[0].id);
+        await press('{ArrowDown}');
+        await press('{Enter}');
+        await waitForChanges();
+        expect(got.map(c => c.id)).toEqual(['fjord']);
+        expect(el.open).toBe(false);
+    });
+    it('switching a row by click emits bsCompanySwitch; the current row only closes', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsCompanySwitch', (e) => got.push(e.detail));
+        rows(el)[0].click();
+        await waitForChanges();
+        expect(got).toEqual([]);
+        expect(el.open).toBe(false);
+        el.open = true;
+        await waitForChanges();
+        rows(el)[2].click();
+        await waitForChanges();
+        expect(got.map(c => c.id)).toEqual(['aurora']);
+    });
+    it('stays open in the switching state when the handler sets switchingId', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        el.addEventListener('bsCompanySwitch', (e) => (el.switchingId = e.detail.id));
+        rows(el)[1].click();
+        await waitForChanges();
+        expect(el.open).toBe(true);
+        const row = rows(el)[1];
+        expect(row.querySelector('bs-spinner')).not.toBeNull();
+        expect(row.getAttribute('aria-busy')).toBe('true');
+        const trigger = q(el, '[part="trigger"]');
+        expect(trigger.getAttribute('aria-busy')).toBe('true');
+        expect(q(el, '[part="subtitle"]').textContent).toBe('Switching…');
+        expect(q(el, '.bs-company-switcher__trigger bs-spinner')).not.toBeNull();
+    });
+    it('closes on Escape and returns focus to the trigger', async () => {
+        const { el, press } = await make({ open: true });
+        await settle();
+        await press('{Escape}');
+        await settle();
+        expect(el.open).toBe(false);
+        expect(el.shadowRoot.activeElement).toBe(q(el, '[part="trigger"]'));
+    });
+    it('emits bsManageCompanies and bsAddCompanies from the footer', async () => {
+        const { el, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsManageCompanies', () => got.push('manage'));
+        el.addEventListener('bsAddCompanies', () => got.push('add'));
+        const [manage, add] = qa(el, '[part="footer"] bs-button');
+        expect(manage.textContent).toContain('Manage Companies');
+        expect(add.textContent).toContain('Add companies');
+        manage.click();
+        add.click();
+        await waitForChanges();
+        expect(got).toEqual(['manage', 'add']);
+    });
+    it('uses label props for i18n', async () => {
+        const { el, waitForChanges } = await make({ open: true, manageLabel: 'Administrer', searchPlaceholder: 'Finn selskap' });
+        await waitForChanges();
+        expect(q(el, 'bs-input').placeholder).toBe('Finn selskap');
+        expect(q(el, '[part="footer"]').textContent).toContain('Administrer');
+    });
+    it('has no axe violations open (apart from bs-popover\'s own trigger wrapper)', async () => {
+        const { el } = await make({ open: true });
+        // Known gap in bs-popover: its trigger wrapper <div> carries aria-expanded/haspopup without a role
+        // (bs-popover's own tests assert those attributes), so axe flags aria-allowed-attr on it.
+        const results = await axe.run(el);
+        const violations = results.violations
+            .map(v => ({ ...v, nodes: v.nodes.filter(n => !n.html.includes('bs-popover__trigger')) }))
+            .filter(v => v.nodes.length)
+            .map(v => `${v.id}: ${v.help}`);
+        expect(violations).toEqual([]);
+    });
+});

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

@@ -0,0 +1,196 @@
+:host {
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--bs-company-switcher-width);
+  max-width: 100%;
+  --bs-company-switcher-width: 260px;
+  --bs-company-switcher-panel-width: 360px;
+  --bs-company-switcher-radius: var(--bs-border-radius-100);
+  --bs-company-switcher-trigger-bg: transparent;
+  --bs-company-switcher-trigger-bg-hover: var(--bs-surface-hover);
+  --bs-company-switcher-trigger-bg-pressed: var(--bs-surface-pressed);
+  --bs-company-switcher-trigger-bg-open: var(--bs-surface-selected);
+  --bs-company-switcher-focus-ring: var(--bs-border-neutral-focus);
+  --bs-company-switcher-panel-bg: var(--bs-surface-base);
+  --bs-company-switcher-panel-border-color: var(--bs-border-default);
+  --bs-company-switcher-shadow: var(--bs-shadow-md);
+  --bs-company-switcher-max-height: 320px;
+  --bs-company-switcher-text-color: var(--bs-text-default);
+  --bs-company-switcher-muted-color: var(--bs-text-secondary);
+  --bs-company-switcher-header-color: var(--bs-text-muted);
+  --bs-company-switcher-z-index: var(--bs-z-index-popover);
+}
+
+.bs-company-switcher {
+  display: block;
+  width: 100%;
+  --bs-popover-radius: var(--bs-company-switcher-radius);
+  --bs-popover-shadow: var(--bs-company-switcher-shadow);
+  --bs-popover-z-index: var(--bs-company-switcher-z-index);
+  --bs-popover-min-width: 0px;
+  --bs-popover-bg: transparent;
+}
+
+.bs-company-switcher__trigger {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+  width: 100%;
+  min-height: 54px;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border: 0;
+  border-radius: var(--bs-company-switcher-radius);
+  background: var(--bs-company-switcher-trigger-bg);
+  color: var(--bs-company-switcher-text-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+
+.bs-company-switcher__trigger:hover {
+  background: var(--bs-company-switcher-trigger-bg-hover);
+}
+
+.bs-company-switcher__trigger:active {
+  background: var(--bs-company-switcher-trigger-bg-pressed);
+}
+
+:host([open]) .bs-company-switcher__trigger,
+.bs-company-switcher__trigger[aria-busy='true'] {
+  background: var(--bs-company-switcher-trigger-bg-open);
+}
+
+.bs-company-switcher__trigger:focus-visible {
+  outline: 2px solid var(--bs-company-switcher-focus-ring);
+  outline-offset: 2px;
+}
+
+.bs-company-switcher__avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.bs-company-switcher__text {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-company-switcher__name {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__subtitle {
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__name,
+.bs-company-switcher__subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-company-switcher__trail {
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-default);
+}
+
+.bs-company-switcher__panel {
+  display: block;
+  width: var(--bs-company-switcher-panel-width);
+  max-width: calc(100vw - var(--bs-spacing-200));
+  --bs-card-bg: var(--bs-company-switcher-panel-bg);
+  --bs-card-radius: var(--bs-company-switcher-radius);
+  --bs-card-padding: 0px;
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-company-switcher-panel-border-color);
+  --bs-card-shadow: none;
+}
+
+.bs-company-switcher__search {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__search bs-input {
+  width: 100%;
+}
+
+.bs-company-switcher__list {
+  box-sizing: border-box;
+  max-height: var(--bs-company-switcher-max-height);
+  overflow-y: auto;
+  padding: 0 var(--bs-spacing-100) var(--bs-spacing-100);
+}
+
+.bs-company-switcher__group-header {
+  padding: var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);
+  color: var(--bs-company-switcher-header-color);
+  font-family: var(--bs-typography-font-family-body, Roboto), sans-serif;
+  font-size: var(--bs-font-size-xs);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 16px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.bs-company-switcher__row {
+  --bs-list-item-min-height: 52px;
+  --bs-list-item-padding-y: var(--bs-spacing-100);
+  --bs-list-item-padding-x: var(--bs-spacing-100);
+  --bs-list-item-gap: var(--bs-spacing-150);
+}
+
+.bs-company-switcher__row--active {
+  --bs-list-item-bg: var(--bs-surface-hover);
+}
+
+.bs-company-switcher__row-name {
+  display: block;
+  color: var(--bs-company-switcher-text-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-company-switcher__row-sub {
+  display: block;
+  color: var(--bs-company-switcher-muted-color);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-company-switcher__check {
+  width: 20px;
+  height: 20px;
+  color: var(--bs-icon-action, var(--bs-icon-default));
+}
+
+.bs-company-switcher__empty {
+  --bs-empty-state-padding-y: var(--bs-spacing-400);
+}
+
+.bs-company-switcher__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+}
+
+.bs-company-switcher__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}