@brandsync/wc 1.16.0 → 1.17.0

package/dist/collection/components/bs-command-palette/bs-command-palette.cmp.test.js

@@ -0,0 +1,207 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { userEvent } from "vitest/browser";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+import { DEFAULT_ROWS, SEARCHING_ROWS, COMMANDS_ONLY_ROWS, TRY_INSTEAD_ROWS } from "./bs-command-palette.stories";
+const q = (el, s) => el.shadowRoot.querySelector(s);
+const qa = (el, s) => Array.from(el.shadowRoot.querySelectorAll(s));
+const items = (el) => Array.from(el.querySelectorAll('bs-search-item'));
+const settle = (ms = 60) => new Promise(r => setTimeout(r, ms));
+const rows = (list) => list.map(r => (h("bs-search-item", { slot: r.section, value: r.value, trailing: r.keys ? undefined : r.trailing }, r.match ? h("strong", null, r.match) : null, r.label, r.rest, r.description ? h("span", { slot: "description" }, r.description) : null, r.keys ? h("bs-key-caps", { slot: "trailing", keys: r.keys }) : null)));
+const make = async (props = {}, list = DEFAULT_ROWS) => {
+    const r = await render(h("div", null, h("button", { id: "opener" }, "opener"), h("bs-command-palette", null, rows(list))));
+    const el = r.root.querySelector('bs-command-palette');
+    Object.assign(el, props);
+    await r.waitForChanges();
+    await settle(250); // lets the 120ms open animation finish
+    const press = async (k) => {
+        await userEvent.keyboard(k);
+        await r.waitForChanges();
+    };
+    return { ...r, el, press, opener: r.root.querySelector('#opener') };
+};
+const dialog = (el) => q(el, 'dialog');
+const headers = (el) => qa(el, '[part="section-header"]').map(h => h.textContent);
+const activeLabels = (el) => items(el).filter(i => i.hasAttribute('active')).map(i => i.getAttribute('value'));
+describe('bs-command-palette', () => {
+    it('is closed by default', async () => {
+        const { el } = await make();
+        expect(dialog(el).open).toBe(false);
+        assertShadowParts(el.shadowRoot, ['dialog', 'panel', 'search', 'input', 'results', 'section', 'section-header', 'footer', 'hint']);
+    });
+    it('opens and closes via prop, show() and close(); focuses the input and restores focus', async () => {
+        const { el, opener, waitForChanges } = await make();
+        opener.focus();
+        el.open = true;
+        await waitForChanges();
+        await settle();
+        expect(dialog(el).open).toBe(true);
+        expect(el.hasAttribute('open')).toBe(true);
+        expect(el.shadowRoot.activeElement?.tagName).toBe('BS-INPUT');
+        el.open = false;
+        await waitForChanges();
+        expect(dialog(el).open).toBe(false);
+        expect(document.activeElement).toBe(opener);
+        await el.show();
+        await waitForChanges();
+        expect(dialog(el).open).toBe(true);
+        await el.close();
+        await waitForChanges();
+        expect(dialog(el).open).toBe(false);
+    });
+    it('closes on Escape and on scrim click, emitting bsOpenChange', async () => {
+        const { el, press, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsOpenChange', (e) => got.push(e.detail));
+        await press('{Escape}');
+        expect(el.open).toBe(false);
+        el.open = true;
+        await waitForChanges();
+        dialog(el).click();
+        await waitForChanges();
+        expect(el.open).toBe(false);
+        expect(got).toEqual([false, false]);
+    });
+    it('toggles with the hotkey', async () => {
+        const { el, waitForChanges } = await make({ hotkey: 'mod+k' });
+        const mac = /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+        const fire = () => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', ctrlKey: !mac, metaKey: mac, bubbles: true, cancelable: true }));
+        fire();
+        await waitForChanges();
+        expect(el.open).toBe(true);
+        fire();
+        await waitForChanges();
+        expect(el.open).toBe(false);
+    });
+    it('has the Figma geometry', async () => {
+        const { el } = await make({ open: true });
+        const panel = q(el, '[part="panel"]');
+        const cs = getComputedStyle(panel);
+        expect(getComputedStyle(el).getPropertyValue('--bs-command-palette-width').trim()).toBe('640px');
+        expect(Math.round(panel.getBoundingClientRect().width)).toBe(Math.round(dialog(el).getBoundingClientRect().width));
+        expect(cs.borderRadius).toBe('12px');
+        expect(cs.overflow).toBe('clip');
+        expect(getComputedStyle(q(el, '[part="search"]')).padding).toBe('12px');
+        const f = getComputedStyle(q(el, '[part="footer"]'));
+        expect(f.paddingTop).toBe('10px');
+        expect(f.paddingLeft).toBe('16px');
+        expect(f.columnGap).toBe('16px');
+        const r = getComputedStyle(q(el, '[part="results"]'));
+        expect(r.padding).toBe('8px');
+        expect(r.rowGap).toBe('8px');
+        expect(Math.round(q(el, 'bs-input').getBoundingClientRect().height)).toBe(44);
+        expect(Math.round(items(el)[0].getBoundingClientRect().height)).toBe(48);
+    });
+    it('renders only filled sections, in order', async () => {
+        const { el } = await make({ open: true });
+        expect(headers(el)).toEqual(['Recent', 'Suggested', 'Navigation']);
+        const s = await make({ open: true, status: 'results' }, SEARCHING_ROWS);
+        expect(headers(s.el)).toEqual(['Commands', 'Navigation', 'Records']);
+    });
+    it('derives commandsOnly, swaps the footer hint and emits the detail', async () => {
+        const { el, waitForChanges } = await make({ open: true }, COMMANDS_ONLY_ROWS);
+        const got = [];
+        el.addEventListener('bsInput', (e) => got.push(e.detail));
+        expect(q(el, '[part="footer"]').innerText).toContain('Commands only');
+        await userEvent.keyboard('> theme');
+        await waitForChanges();
+        expect(el.commandsOnly).toBe(true);
+        expect(el.hasAttribute('commands-only')).toBe(true);
+        expect(q(el, '[part="footer"]').innerText).toContain('All results');
+        expect(got[got.length - 1]).toEqual({ value: '> theme', query: 'theme', commandsOnly: true });
+        el.value = 'x';
+        await waitForChanges();
+        expect(el.commandsOnly).toBe(false);
+    });
+    it('shows the empty view, did-you-mean event and try-instead section', async () => {
+        const { el, waitForChanges } = await make({ open: true, status: 'empty', didYouMean: 'theme', emptyHeading: 'No commands or records for “thme”' }, TRY_INSTEAD_ROWS);
+        const empty = q(el, '[part="empty"]');
+        expect(empty.textContent).toContain('No commands or records for “thme”');
+        expect(empty.textContent).toContain('Check the spelling, or search records instead.');
+        expect(empty.textContent).toContain('Did you mean');
+        expect(headers(el)).toEqual(['Try instead']);
+        const got = [];
+        el.addEventListener('bsSuggestion', (e) => got.push(e.detail));
+        q(el, '.bs-command-palette__link').click();
+        await waitForChanges();
+        expect(got).toEqual(['theme']);
+    });
+    it('shows the loading view with aria-busy', async () => {
+        const { el } = await make({ open: true, status: 'loading' });
+        expect(q(el, '[part="results"]').getAttribute('aria-busy')).toBe('true');
+        expect(q(el, 'bs-spinner')).not.toBeNull();
+        expect(headers(el)).toEqual([]);
+    });
+    it('activates the first result by default and wraps arrow navigation', async () => {
+        const { el, press } = await make({ open: true });
+        const ids = items(el).map(i => i.getAttribute('value'));
+        expect(activeLabels(el)).toEqual([ids[0]]);
+        expect(q(el, '[role="combobox"]').ariaActiveDescendantElement).toBe(items(el)[0]);
+        await press('{ArrowUp}');
+        expect(activeLabels(el)).toEqual([ids[ids.length - 1]]);
+        await press('{ArrowDown}');
+        expect(activeLabels(el)).toEqual([ids[0]]);
+        await press('{ArrowDown}');
+        expect(activeLabels(el)).toEqual([ids[1]]);
+    });
+    it('Enter selects and closes, unless keepOpenOnSelect', async () => {
+        const { el, press, waitForChanges } = await make({ open: true });
+        const got = [];
+        el.addEventListener('bsSelect', (e) => got.push(e.detail));
+        await press('{ArrowDown}');
+        await press('{Enter}');
+        expect(got[0]).toEqual({ value: 'i-20931', section: 'recent', commandsOnly: false });
+        expect(el.open).toBe(false);
+        el.keepOpenOnSelect = true;
+        el.open = true;
+        await waitForChanges();
+        await settle();
+        await press('{Enter}');
+        expect(got.length).toBe(2);
+        expect(el.open).toBe(true);
+    });
+    it('shows a scope chip and emits bsScopeExit on Backspace in an empty field', async () => {
+        const { el, press } = await make({ open: true, scopeLabel: 'Customers' });
+        expect(q(el, 'bs-chip-informative').textContent).toContain('Customers');
+        let n = 0;
+        el.addEventListener('bsScopeExit', () => n++);
+        await press('{Backspace}');
+        expect(n).toBe(1);
+    });
+    it('uses the level-4 shadow, stronger in dark mode, and themed text', async () => {
+        await userEvent.unhover(document.body);
+        const shadow = async (dark) => {
+            if (dark)
+                document.documentElement.setAttribute('data-theme', 'dark');
+            try {
+                const { el } = await make({ open: true });
+                return getComputedStyle(q(el, '[part="panel"]')).boxShadow;
+            }
+            finally {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        };
+        expect(await shadow(false)).toBe('rgba(0, 0, 0, 0.12) 0px 8px 16px 0px');
+        expect(await shadow(true)).toBe('rgba(0, 0, 0, 0.25) 0px 8px 16px 0px');
+        document.documentElement.setAttribute('data-theme', 'dark');
+        try {
+            const { el } = await make({ open: true, status: 'empty' }, TRY_INSTEAD_ROWS);
+            const p = document.createElement('div');
+            p.style.color = 'var(--bs-text-default)';
+            document.body.appendChild(p);
+            const expected = getComputedStyle(p).color;
+            p.remove();
+            expect(getComputedStyle(q(el, '.bs-command-palette__empty-heading')).color).toBe(expected);
+        }
+        finally {
+            document.documentElement.removeAttribute('data-theme');
+        }
+    });
+    it('passes axe on default, commands-only and empty views', async () => {
+        const a = await make({ open: true });
+        await runAxeCheck(a.el);
+        const b = await make({ open: true, value: '> theme', status: 'results' }, COMMANDS_ONLY_ROWS);
+        await runAxeCheck(b.el);
+        const c = await make({ open: true, status: 'empty' }, TRY_INSTEAD_ROWS);
+        await runAxeCheck(c.el);
+    });
+});

package/dist/collection/components/bs-command-palette/bs-command-palette.css

@@ -0,0 +1,214 @@
+:host {
+  display: contents;
+  --bs-command-palette-width: 640px;
+  --bs-command-palette-top: 12vh;
+  --bs-command-palette-max-height: 60vh;
+  --bs-command-palette-radius: var(--bs-border-radius-150);
+  --bs-command-palette-bg: var(--bs-surface-base);
+  /* Figma "elevation/level 4": 0 8px 16px in --bs-elevation-higher (12% black in light mode, 25% in dark mode). */
+  --bs-command-palette-shadow: 0 var(--bs-shadow-position-100) var(--bs-shadow-blur-200) 0 var(--bs-elevation-higher);
+  --bs-command-palette-overlay: var(--bs-surface-overlay);
+  --bs-command-palette-footer-bg: var(--bs-surface-container);
+  --bs-command-palette-divider-color: var(--bs-border-default);
+  --bs-command-palette-header-border-color: var(--bs-border-neutral-container);
+  --bs-command-palette-header-color: var(--bs-text-muted);
+  --bs-command-palette-hint-color: var(--bs-text-secondary);
+  --bs-command-palette-z-index: var(--bs-z-index-modal);
+}
+
+.bs-command-palette {
+  box-sizing: border-box;
+  width: min(var(--bs-command-palette-width), calc(100vw - 2 * var(--bs-spacing-200)));
+  max-width: none;
+  max-height: none;
+  margin: var(--bs-command-palette-top) auto auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bs-text-default);
+  overflow: visible;
+  z-index: var(--bs-command-palette-z-index);
+}
+
+.bs-command-palette::backdrop {
+  background: var(--bs-command-palette-overlay, var(--bs-surface-overlay));
+}
+
+.bs-command-palette__panel {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: clip;
+  border-radius: var(--bs-command-palette-radius);
+  background: var(--bs-command-palette-bg);
+  box-shadow: var(--bs-command-palette-shadow);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bs-command-palette[open] .bs-command-palette__panel {
+    animation: bs-command-palette-in 120ms ease-out;
+  }
+}
+
+@keyframes bs-command-palette-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.bs-command-palette__search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-150);
+}
+
+.bs-command-palette__field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.bs-command-palette__field bs-input {
+  width: 100%;
+}
+
+.bs-command-palette__scope {
+  flex: none;
+}
+
+/* Figma "Shortcut": right 9px, vertically centred in the 44px field. */
+.bs-command-palette__esc {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--bs-spacing-150) + 9px);
+  transform: translateY(-50%);
+  display: inline-flex;
+  pointer-events: none;
+}
+
+.bs-command-palette__divider {
+  height: 1px;
+  background: var(--bs-command-palette-divider-color);
+}
+
+.bs-command-palette__results {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-100);
+  max-height: var(--bs-command-palette-max-height);
+  overflow-y: auto;
+}
+
+.bs-command-palette__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-command-palette__section {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-command-palette__section-header {
+  padding: var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);
+  border-bottom: 1px solid var(--bs-command-palette-header-border-color);
+  color: var(--bs-command-palette-header-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-command-palette__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
+  color: var(--bs-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-command-palette__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
+  text-align: center;
+}
+
+.bs-command-palette__empty-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--bs-icon-default);
+}
+
+.bs-command-palette__empty-heading {
+  color: var(--bs-text-default);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 24px;
+}
+
+.bs-command-palette__empty-description {
+  color: var(--bs-text-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-command-palette__link {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--bs-border-info);
+  background: none;
+  color: var(--bs-text-link);
+  font: inherit;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+.bs-command-palette__link:focus-visible {
+  outline: 2px solid var(--bs-border-info);
+  outline-offset: 2px;
+}
+
+.bs-command-palette__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-200);
+  padding: 10px var(--bs-spacing-200);
+  background: var(--bs-command-palette-footer-bg);
+}
+
+.bs-command-palette__hint {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-command-palette-hint-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.bs-command-palette__spacer {
+  flex: 1 1 0;
+}
+
+.bs-command-palette__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}