@brandsync/wc 1.9.0 → 1.11.0

package/dist/collection/components/bs-qr-code/bs-qr-code.cmp.test.js

@@ -0,0 +1,152 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+// A 5x5 matrix with a known number of dark modules.
+const MATRIX = [
+    [true, true, false, true, true],
+    [true, false, false, false, true],
+    [false, false, true, false, false],
+    [true, false, false, false, true],
+    [true, true, false, true, true],
+];
+describe('bs-qr-code', () => {
+    it('renders heading, description, url chip and both actions by default', async () => {
+        const { root } = await render(h("bs-qr-code", { description: "Scan to open SO-10482", url: "egsync.no/d/SO-10482" }));
+        expect(part(root, 'title').textContent).toBe('Share the order');
+        expect(part(root, 'description').textContent).toBe('Scan to open SO-10482');
+        expect(part(root, 'url').textContent).toBe('egsync.no/d/SO-10482');
+        expect(part(root, 'download').textContent).toContain('Download PNG');
+        expect(part(root, 'copy').textContent).toContain('Copy link');
+        expect(part(root, 'amount')).toBeNull();
+    });
+    it('draws a matrix as an svg with one path and the right viewBox', async () => {
+        const { root } = await render(h("bs-qr-code", { matrix: MATRIX }));
+        const svg = sr(root).querySelector('svg.bs-qr-code__matrix');
+        expect(svg).toEqualAttribute('viewBox', '0 0 5 5');
+        expect(svg).toEqualAttribute('role', 'img');
+        expect(svg).toEqualAttribute('aria-label', 'QR code');
+        const d = svg.querySelector('path').getAttribute('d');
+        // Row 0 has runs [0..2) and [3..5); the middle row has a single module.
+        expect(d).toContain('M0 0h2v1h-2z');
+        expect(d).toContain('M3 0h2v1h-2z');
+        expect(d).toContain('M2 2h1v1h-1z');
+    });
+    it('prefers the code slot over the matrix', async () => {
+        const { root } = await render(h("bs-qr-code", { matrix: MATRIX }, h("img", { slot: "code", alt: "mine" })));
+        const slot = sr(root).querySelector('slot[name="code"]');
+        expect(slot.assignedElements().length).toBe(1);
+    });
+    it('payment type shows the amount and label instead of the url', async () => {
+        const { root } = await render(h("bs-qr-code", { type: "payment", amount: "148,00 kr", url: "x.no" }));
+        expect(part(root, 'amount').textContent).toContain('Total');
+        expect(part(root, 'amount').textContent).toContain('148,00 kr');
+        expect(part(root, 'url')).toBeNull();
+    });
+    it('shows an expiry chip only when expiry is set', async () => {
+        const a = await render(h("bs-qr-code", null));
+        expect(part(a.root, 'expiry')).toBeNull();
+        const b = await render(h("bs-qr-code", { expiry: "Expires in 04:59" }));
+        expect(part(b.root, 'expiry').textContent).toContain('Expires in 04:59');
+    });
+    it('hides the actions, or each one', async () => {
+        const a = await render(h("bs-qr-code", { hideActions: true }));
+        expect(part(a.root, 'actions')).toBeNull();
+        const b = await render(h("bs-qr-code", { hideDownload: true }));
+        expect(part(b.root, 'download')).toBeNull();
+        expect(part(b.root, 'copy')).not.toBeNull();
+        const c = await render(h("bs-qr-code", { hideCopy: true }));
+        expect(part(c.root, 'copy')).toBeNull();
+    });
+    it('only renders the close button when closable, and emits bsClose', async () => {
+        const a = await render(h("bs-qr-code", null));
+        expect(part(a.root, 'close')).toBeNull();
+        const { root, waitForChanges } = await render(h("bs-qr-code", { closable: true }));
+        let closed = 0;
+        root.addEventListener('bsClose', () => closed++);
+        part(root, 'close').click();
+        await waitForChanges();
+        expect(closed).toBe(1);
+    });
+    it('emits bsDownload and bsCopy({ url }) from the default state', async () => {
+        const { root, waitForChanges } = await render(h("bs-qr-code", { url: "egsync.no/d/1" }));
+        const events = [];
+        root.addEventListener('bsDownload', () => events.push('download'));
+        root.addEventListener('bsCopy', (e) => events.push(['copy', e.detail]));
+        part(root, 'download').click();
+        part(root, 'copy').click();
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 50));
+        expect(events).toEqual(['download', ['copy', { url: 'egsync.no/d/1' }]]);
+    });
+    describe('states', () => {
+        it.each(['loading', 'error', 'expired'])('%s overlays the code and disables the actions', async (state) => {
+            const { root, waitForChanges } = await render(h("bs-qr-code", { state: state }));
+            expect(part(root, 'overlay')).not.toBeNull();
+            expect(part(root, 'download').disabled).toBe(true);
+            expect(part(root, 'copy').disabled).toBe(true);
+            let fired = 0;
+            root.addEventListener('bsDownload', () => fired++);
+            part(root, 'download').click();
+            await waitForChanges();
+            expect(fired).toBe(0);
+        });
+        it('loading shows a spinner and its label', async () => {
+            const { root } = await render(h("bs-qr-code", { state: "loading" }));
+            expect(sr(root).querySelector('bs-progress')).not.toBeNull();
+            expect(part(root, 'overlay').textContent).toContain('Generating code');
+        });
+        it('error shows a message and Retry, which emits bsRetry', async () => {
+            const { root, waitForChanges } = await render(h("bs-qr-code", { state: "error" }));
+            expect(part(root, 'overlay').textContent).toContain("Couldn't load code");
+            let retries = 0;
+            root.addEventListener('bsRetry', () => retries++);
+            part(root, 'overlay').querySelector('bs-button').click();
+            await waitForChanges();
+            expect(retries).toBe(1);
+        });
+        it('expired shows Refresh, which emits bsRefresh', async () => {
+            const { root, waitForChanges } = await render(h("bs-qr-code", { state: "expired" }));
+            expect(part(root, 'overlay').textContent).toContain('Code expired');
+            let refreshes = 0;
+            root.addEventListener('bsRefresh', () => refreshes++);
+            part(root, 'overlay').querySelector('bs-button').click();
+            await waitForChanges();
+            expect(refreshes).toBe(1);
+        });
+        it('scanned says "Scanned" (or "Payment received") and hides the actions', async () => {
+            const a = await render(h("bs-qr-code", { state: "scanned" }));
+            expect(part(a.root, 'overlay').textContent).toContain('Scanned');
+            expect(part(a.root, 'actions')).toBeNull();
+            const b = await render(h("bs-qr-code", { state: "scanned", type: "payment", amount: "1 kr" }));
+            expect(part(b.root, 'overlay').textContent).toContain('Payment received');
+            const c = await render(h("bs-qr-code", { state: "scanned", scannedLabel: "Done" }));
+            expect(part(c.root, 'overlay').textContent).toContain('Done');
+        });
+    });
+    describe('size', () => {
+        it.each([
+            ['sm', 128],
+            ['md', 200],
+            ['lg', 288],
+        ])('size %s draws a %ipx code (Figma)', async (size, px) => {
+            const { root } = await render(h("bs-qr-code", { size: size, matrix: MATRIX }));
+            expect(part(root, 'code').getBoundingClientRect().width).toBe(px);
+        });
+        it('the card is 352px wide at md with both actions (Figma)', async () => {
+            const { root } = await render(h("bs-qr-code", { description: "Scan to open SO-10482 on your phone" }));
+            expect(root.getBoundingClientRect().width).toBe(352);
+        });
+    });
+    it('keeps the quiet zone white and the modules black regardless of theme tokens', async () => {
+        const { root } = await render(h("bs-qr-code", { matrix: MATRIX }));
+        expect(getComputedStyle(part(root, 'code')).backgroundColor).toBe('rgb(255, 255, 255)');
+        expect(getComputedStyle(part(root, 'code')).color).toBe('rgb(0, 0, 0)');
+    });
+    it('shows the logo plate only when a logo is slotted', async () => {
+        const a = await render(h("bs-qr-code", null));
+        expect(getComputedStyle(part(a.root, 'logo')).display).toBe('none');
+        const b = await render(h("bs-qr-code", null, h("img", { slot: "logo", alt: "logo" })));
+        await new Promise(r => setTimeout(r, 50));
+        expect(getComputedStyle(part(b.root, 'logo')).display).toBe('flex');
+    });
+});

package/dist/collection/components/bs-qr-code/bs-qr-code.css

@@ -0,0 +1,307 @@
+/**
+ * @prop --bs-qr-code-bg: Card background. Aliased to --bs-paper-bg-base (the `bs-card` base surface).
+ * @prop --bs-qr-code-border: Card border color. Aliased to --bs-border-default.
+ * @prop --bs-qr-code-radius: Card corner radius. Aliased to --bs-border-radius-150.
+ * @prop --bs-qr-code-padding: Card padding. Set per `size`: --bs-spacing-200 / 300 / 400 (16 / 24 / 32px).
+ * @prop --bs-qr-code-gap: Gap between the card's rows. Set per `size`: 12 / 16 / 20px.
+ * @prop --bs-qr-code-code-size: Width/height of the code square. Set per `size`: 128 / 200 / 288px.
+ * @prop --bs-qr-code-quiet-zone: White padding around the code. Set per `size`: 8 / 12 / 12px.
+ * @prop --bs-qr-code-quiet-zone-bg: Quiet-zone colour. Aliased to --bs-text-static-white; static in dark mode too, because scanners need the contrast.
+ * @prop --bs-qr-code-module-color: Colour of the dark modules in `matrix`. Aliased to --bs-text-static-black; static in dark mode too.
+ * @prop --bs-qr-code-qr-border: Border of the quiet-zone box. Aliased to --bs-border-default.
+ * @prop --bs-qr-code-qr-radius: Corner radius of the quiet-zone box. Aliased to --bs-border-radius-100.
+ * @prop --bs-qr-code-color: Heading and value colour. Aliased to --bs-text-default.
+ * @prop --bs-qr-code-color-secondary: Description and amount-label colour. Aliased to --bs-text-secondary.
+ * @prop --bs-qr-code-url-bg: Background of the URL chip. Aliased to --bs-surface-container.
+ * @prop --bs-qr-code-url-radius: Corner radius of the URL chip. 6px (Figma).
+ * @prop --bs-qr-code-download-min-width: Minimum width of the Download button. Set per `size`: 168px (sm: 139px) -- Figma.
+ * @prop --bs-qr-code-copy-min-width: Minimum width of the Copy link button. Set per `size`: 126px (sm: 102px) -- Figma.
+ * @prop --bs-qr-code-logo-size: Size of the logo over the code, as a fraction of the code. 20%.
+ */
+:host {
+  display: inline-block;
+  max-width: 100%;
+
+  --bs-qr-code-bg: var(--bs-paper-bg-base);
+  --bs-qr-code-border: var(--bs-border-default);
+  --bs-qr-code-radius: var(--bs-border-radius-150);
+  --bs-qr-code-quiet-zone-bg: var(--bs-text-static-white);
+  --bs-qr-code-module-color: var(--bs-text-static-black);
+  --bs-qr-code-qr-border: var(--bs-border-default);
+  --bs-qr-code-qr-radius: var(--bs-border-radius-100);
+  --bs-qr-code-color: var(--bs-text-default);
+  --bs-qr-code-color-secondary: var(--bs-text-secondary);
+  --bs-qr-code-url-bg: var(--bs-surface-container);
+  --bs-qr-code-url-radius: 6px;
+  --bs-qr-code-logo-size: 20%;
+
+  /* size: md (default) */
+  --bs-qr-code-padding: var(--bs-spacing-300);
+  --bs-qr-code-gap: var(--bs-spacing-200);
+  --bs-qr-code-code-size: 200px;
+  --bs-qr-code-quiet-zone: var(--bs-spacing-150);
+  --bs-qr-code-amount-size: var(--bs-font-size-2xl);
+  --bs-qr-code-amount-line-height: 32px;
+  --bs-qr-code-download-min-width: 168px;
+  --bs-qr-code-copy-min-width: 126px;
+}
+
+:host([size='sm']) {
+  --bs-qr-code-padding: var(--bs-spacing-200);
+  --bs-qr-code-gap: var(--bs-spacing-150);
+  --bs-qr-code-code-size: 128px;
+  --bs-qr-code-quiet-zone: var(--bs-spacing-100);
+  --bs-qr-code-amount-size: var(--bs-font-size-xl);
+  --bs-qr-code-amount-line-height: 24px;
+  --bs-qr-code-download-min-width: 139px;
+  --bs-qr-code-copy-min-width: 102px;
+}
+
+:host([size='lg']) {
+  --bs-qr-code-padding: var(--bs-spacing-400);
+  --bs-qr-code-gap: var(--bs-spacing-250);
+  --bs-qr-code-code-size: 288px;
+  --bs-qr-code-amount-size: 32px;
+  --bs-qr-code-amount-line-height: 40px;
+}
+
+.bs-qr-code {
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+  color: var(--bs-qr-code-color);
+  /* bs-card supplies the surface; this only sets how it looks here. */
+  --bs-card-bg: var(--bs-qr-code-bg);
+  --bs-card-radius: var(--bs-qr-code-radius);
+  --bs-card-padding: var(--bs-qr-code-padding);
+  --bs-card-border-width: 1px;
+  --bs-card-border-color: var(--bs-qr-code-border);
+  --bs-card-shadow: none;
+}
+
+.bs-qr-code__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-qr-code-gap);
+}
+
+.bs-qr-code__close {
+  position: absolute;
+  top: var(--bs-spacing-100);
+  inset-inline-end: var(--bs-spacing-100);
+}
+
+.bs-qr-code__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-qr-code__head {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 272px;
+  max-width: 100%;
+  text-align: center;
+}
+
+.bs-qr-code__head p,
+.bs-qr-code__amount p,
+.bs-qr-code__overlay p {
+  margin: 0;
+}
+
+.bs-qr-code__title {
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-qr-code__description {
+  color: var(--bs-qr-code-color-secondary);
+  font-size: var(--bs-font-size-md);
+  line-height: 24px;
+}
+
+/* The quiet-zone box. Overlays are positioned against it (and cover its border). */
+.bs-qr-code__qr {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  padding: var(--bs-qr-code-quiet-zone);
+  border: 1px solid var(--bs-qr-code-qr-border);
+  border-radius: var(--bs-qr-code-qr-radius);
+  background: var(--bs-qr-code-quiet-zone-bg);
+  overflow: hidden;
+}
+
+.bs-qr-code__code {
+  position: relative;
+  width: var(--bs-qr-code-code-size);
+  height: var(--bs-qr-code-code-size);
+  background: var(--bs-qr-code-quiet-zone-bg);
+  color: var(--bs-qr-code-module-color);
+}
+
+.bs-qr-code__matrix,
+::slotted([slot='code']) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.bs-qr-code__logo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bs-qr-code-logo-size);
+  height: var(--bs-qr-code-logo-size);
+  padding: 4px;
+  border-radius: var(--bs-border-radius-50);
+  background: var(--bs-qr-code-quiet-zone-bg);
+  transform: translate(-50%, -50%);
+}
+
+/* Only draw the logo's white plate when something is slotted into it. */
+.bs-qr-code__logo {
+  display: none;
+}
+
+.bs-qr-code__logo--visible {
+  display: flex;
+}
+
+::slotted([slot='logo']) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.bs-qr-code__overlay {
+  position: absolute;
+  inset: -1px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-100);
+  padding: var(--bs-spacing-150);
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.bs-qr-code__overlay--loading {
+  background: var(--bs-color-neutral-container);
+}
+
+.bs-qr-code__overlay--error {
+  background: var(--bs-surface-container);
+}
+
+.bs-qr-code__overlay--expired,
+.bs-qr-code__overlay--scanned {
+  background: var(--bs-surface-base);
+}
+
+.bs-qr-code__overlay-caption {
+  color: var(--bs-qr-code-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-qr-code__overlay-text {
+  color: var(--bs-qr-code-color);
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  line-height: 20px;
+}
+
+.bs-qr-code__overlay-text--strong {
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-qr-code__status-icon {
+  width: 32px;
+  height: 32px;
+  color: var(--bs-qr-code-color-secondary);
+}
+
+.bs-qr-code__status-icon--error {
+  color: var(--bs-icon-error);
+}
+
+.bs-qr-code__status-icon--scanned {
+  width: 44px;
+  height: 44px;
+  color: var(--bs-icon-success);
+}
+
+.bs-qr-code__overlay bs-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+.bs-qr-code__amount {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.bs-qr-code__amount-label {
+  color: var(--bs-qr-code-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+}
+
+.bs-qr-code__amount-value {
+  font-size: var(--bs-qr-code-amount-size);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: var(--bs-qr-code-amount-line-height);
+}
+
+.bs-qr-code__url {
+  padding: 4px 10px;
+  border-radius: var(--bs-qr-code-url-radius);
+  background: var(--bs-qr-code-url-bg);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.bs-qr-code__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+/* Figma: the actions have fixed widths (168/126px, 139/102px at sm), which bs-button's own padding
+   doesn't quite reproduce. Minimums, so a longer (translated) label can still grow the button. */
+.bs-qr-code__actions bs-button {
+  display: inline-flex;
+}
+
+.bs-qr-code__actions bs-button::part(button) {
+  width: 100%;
+}
+
+.bs-qr-code__actions bs-button[part='download'] {
+  min-width: var(--bs-qr-code-download-min-width);
+}
+
+.bs-qr-code__actions bs-button[part='copy'] {
+  min-width: var(--bs-qr-code-copy-min-width);
+}
+
+/* Figma: the small card's actions are 32px high (bs-button's sm is 40px). */
+:host([size='sm']) .bs-qr-code__actions bs-button {
+  --bs-button-height-sm: var(--bs-spacing-400);
+}