@brandsync/wc 1.10.0 → 1.12.0

package/dist/collection/components/bs-whats-new/bs-whats-new.cmp.test.js

@@ -0,0 +1,200 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const sr = (root) => root.shadowRoot;
+const part = (root, p) => sr(root).querySelector(`[part~="${p}"]`);
+const text = (el) => (el?.textContent ?? '').replace(/\s+/g, ' ').trim();
+const wait = (ms) => new Promise(r => setTimeout(r, ms));
+const ENTRIES = [
+    { id: 'reminders', category: 'features', tag: 'New feature', date: '24.09.2026', unread: true, heading: 'Smarter payment reminders', description: 'Reminders are now sent when each customer is most likely to pay.', actionLabel: 'Try it' },
+    { id: 'banks', category: 'improvements', tag: 'Improvement', date: '18.09.2026', unread: true, heading: 'Bank rules support EUR and SEK', description: 'Create rules for transactions in euro and Swedish krona.' },
+    { id: 'saft', category: 'fixes', tag: 'Fix', tagColor: 'success', date: '11.09.2026', heading: 'SAF-T export includes credit notes again', description: 'Credit notes from August are now included.' },
+];
+const entries = (root) => Array.from(sr(root).querySelectorAll('bs-whats-new-entry'));
+describe('bs-whats-new', () => {
+    it('defaults to the feed, built on bs-card, as a labelled region', async () => {
+        const { root } = await render(h("bs-whats-new", { entries: ENTRIES }));
+        expect(root).toEqualAttribute('type', 'feed');
+        expect(part(root, 'container').tagName).toBe('BS-CARD');
+        expect(part(root, 'container')).toEqualAttribute('role', 'region');
+        expect(part(root, 'container')).toEqualAttribute('aria-labelledby', 'heading');
+        expect(text(part(root, 'heading'))).toBe('What’s new');
+    });
+    describe('feed', () => {
+        it('is 400px wide (Figma) and lists one entry per update', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-whats-new", { entries: ENTRIES })));
+            const root = wrap.querySelector('bs-whats-new');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(400);
+            expect(entries(root)).toHaveLength(3);
+            expect(entries(root)[0].heading).toBe('Smarter payment reminders');
+            expect(entries(root)[2].tagColor).toBe('success');
+        });
+        it('has the four default filter tabs with All selected', async () => {
+            const { root } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            const tabs = Array.from(sr(root).querySelectorAll('bs-tab'));
+            expect(tabs.map(t => t.textContent.trim())).toEqual(['All', 'New Features', 'Improvements', 'Fixes']);
+            expect(tabs.map(t => t.value)).toEqual(['all', 'features', 'improvements', 'fixes']);
+            expect(tabs[0].selected).toBe(true);
+        });
+        it('filters entries by category when a tab is chosen, and emits bsFilterChange', async () => {
+            const { root, waitForChanges } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            const events = [];
+            root.addEventListener('bsFilterChange', (e) => events.push(e.detail));
+            sr(root).querySelector('bs-tabs').dispatchEvent(new CustomEvent('bsChange', { detail: { value: 'fixes' }, bubbles: true }));
+            await waitForChanges();
+            expect(entries(root).map(e => e.heading)).toEqual(['SAF-T export includes credit notes again']);
+            expect(events).toEqual([{ value: 'fixes' }]);
+            expect(root.filter).toBe('fixes');
+        });
+        it('shows an empty message when a filter has nothing', async () => {
+            const { root } = await render(h("bs-whats-new", { entries: ENTRIES, filter: "nothing" }));
+            expect(entries(root)).toHaveLength(0);
+            expect(text(sr(root).querySelector('.bs-wn__empty'))).toBe('Nothing new here yet.');
+        });
+        it('takes custom filters, and none hides the tabs', async () => {
+            const a = await render(h("bs-whats-new", { entries: ENTRIES, filters: [{ value: 'all', label: 'Everything' }] }));
+            expect(Array.from(sr(a.root).querySelectorAll('bs-tab')).map(t => t.textContent.trim())).toEqual(['Everything']);
+            const b = await render(h("bs-whats-new", { entries: ENTRIES, filters: [] }));
+            expect(part(b.root, 'filters')).toBeNull();
+        });
+        it('shows Mark all as read only while something is unread, and emits bsMarkAllRead', async () => {
+            const { root, waitForChanges } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            let n = 0;
+            root.addEventListener('bsMarkAllRead', () => n++);
+            part(root, 'mark-all-read').click();
+            await waitForChanges();
+            expect(n).toBe(1);
+            root.entries = ENTRIES.map(e => ({ ...e, unread: false }));
+            await waitForChanges();
+            expect(part(root, 'mark-all-read')).toBeNull();
+        });
+        it('passes the unread flag to each entry', async () => {
+            const { root } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            expect(entries(root).map(e => e.unread)).toEqual([true, true, false]);
+        });
+        it('emits bsEntryAction with the entry id', async () => {
+            const { root, waitForChanges } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            let detail;
+            root.addEventListener('bsEntryAction', (e) => (detail = e.detail));
+            entries(root)[0].dispatchEvent(new CustomEvent('bsAction'));
+            await waitForChanges();
+            expect(detail).toEqual({ id: 'reminders' });
+        });
+        it('draws a divider between entries, and before the release notes link when there is one', async () => {
+            const a = await render(h("bs-whats-new", { entries: ENTRIES }));
+            expect(entries(a.root).map(e => e.divider)).toEqual([true, true, false]);
+            const b = await render(h("bs-whats-new", { entries: ENTRIES, releaseNotesUrl: "/notes" }));
+            expect(entries(b.root).map(e => e.divider)).toEqual([true, true, true]);
+        });
+        it('shows the release notes link only when releaseNotesUrl is set', async () => {
+            const a = await render(h("bs-whats-new", { entries: ENTRIES }));
+            expect(part(a.root, 'release-notes')).toBeNull();
+            const b = await render(h("bs-whats-new", { entries: ENTRIES, releaseNotesUrl: "/notes" }));
+            const link = part(b.root, 'release-notes');
+            expect(link.getAttribute('href')).toBe('/notes');
+            expect(text(link)).toBe('See all release notes');
+        });
+        it('shows the close button only when closable, and emits bsClose', async () => {
+            const a = await render(h("bs-whats-new", { entries: ENTRIES }));
+            expect(part(a.root, 'close')).toBeNull();
+            const { root, waitForChanges } = await render(h("bs-whats-new", { entries: ENTRIES, closable: true }));
+            let n = 0;
+            root.addEventListener('bsClose', () => n++);
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(n).toBe(1);
+        });
+        it('renders an entry image from a URL', async () => {
+            const { root } = await render(h("bs-whats-new", { entries: [{ id: 'a', heading: 'A', image: 'data:image/gif;base64,R0lGODlhAQABAAAAACw=' }] }));
+            const img = entries(root)[0].querySelector('img[slot="image"]');
+            expect(img).not.toBeNull();
+        });
+        it('uses the Figma panel look: square corners, no rounding', async () => {
+            const { root } = await render(h("bs-whats-new", { entries: ENTRIES }));
+            const surface = part(root, 'container').shadowRoot.querySelector('.bs-card');
+            expect(getComputedStyle(surface).borderTopLeftRadius).toBe('0px');
+        });
+    });
+    describe('announcement', () => {
+        const props = { type: 'announcement', tag: 'New feature', heading: 'Payment reminders that pick the best time', points: ['Reminders go out at the time each customer usually pays', 'Fixed reminder days per customer still work', 'Turn it off any time under Settings › Reminders'], step: 1, total: 3 };
+        it('is 560px wide with the tag, heading, three points, "1 of 3" and Remind me later / Next', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-whats-new", { ...props })));
+            const root = wrap.querySelector('bs-whats-new');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(560);
+            expect(text(part(root, 'tag'))).toBe('New feature');
+            expect(text(part(root, 'heading'))).toBe('Payment reminders that pick the best time');
+            expect(sr(root).querySelectorAll('[part="points"] li')).toHaveLength(3);
+            expect(text(part(root, 'step'))).toBe('1 of 3');
+            expect(text(part(root, 'secondary'))).toBe('Remind me later');
+            expect(text(part(root, 'primary'))).toBe('Next');
+        });
+        it('emits bsSecondary, bsPrimary and bsClose', async () => {
+            const { root, waitForChanges } = await render(h("bs-whats-new", { ...props, closable: true }));
+            const events = [];
+            root.addEventListener('bsSecondary', () => events.push('secondary'));
+            root.addEventListener('bsPrimary', () => events.push('primary'));
+            root.addEventListener('bsClose', () => events.push('close'));
+            part(root, 'secondary').click();
+            part(root, 'primary').click();
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(events).toEqual(['secondary', 'primary', 'close']);
+        });
+        it('has no hero until an image is given or slotted, then a 220px hero', async () => {
+            const a = await render(h("bs-whats-new", { ...props }));
+            expect(getComputedStyle(part(a.root, 'hero')).display).toBe('none');
+            const b = await render(h("bs-whats-new", { ...props, image: "data:image/gif;base64,R0lGODlhAQABAAAAACw=" }));
+            expect(Math.round(part(b.root, 'hero').getBoundingClientRect().height)).toBe(220);
+            const host = document.createElement('div');
+            host.innerHTML = `<bs-whats-new type="announcement" heading="H">
+        <div slot="hero">hero</div>
+      </bs-whats-new>`;
+            document.body.appendChild(host);
+            await wait(200);
+            const el = host.querySelector('bs-whats-new');
+            expect(Math.round(part(el, 'hero').getBoundingClientRect().height)).toBe(220);
+            host.remove();
+        });
+        it('hides the step label without a total, and buttons with empty labels', async () => {
+            const { root } = await render(h("bs-whats-new", { ...props, total: 0, secondaryLabel: "", primaryLabel: "" }));
+            expect(text(part(root, 'step'))).toBe('');
+            expect(part(root, 'secondary')).toBeNull();
+            expect(part(root, 'primary')).toBeNull();
+        });
+        it('customises the step template', async () => {
+            const { root } = await render(h("bs-whats-new", { ...props, step: 2, stepLabel: "{step}/{total}" }));
+            expect(text(part(root, 'step'))).toBe('2/3');
+        });
+    });
+    describe('teaser', () => {
+        const props = { type: 'teaser', tag: 'New', date: '24.09.2026', heading: 'Smarter payment reminders', description: 'See what changed and 1 other update.' };
+        it('is 300px wide with the tag, date, heading, text and Open What’s new', async () => {
+            const { root: wrap } = await render(h("div", { style: { width: '800px' } }, h("bs-whats-new", { ...props, closable: true })));
+            const root = wrap.querySelector('bs-whats-new');
+            expect(part(root, 'container').getBoundingClientRect().width).toBe(300);
+            expect(text(part(root, 'tag'))).toBe('New');
+            expect(text(part(root, 'date'))).toBe('24.09.2026');
+            expect(text(part(root, 'heading'))).toBe('Smarter payment reminders');
+            expect(text(part(root, 'description'))).toBe('See what changed and 1 other update.');
+            expect(text(part(root, 'action'))).toBe('Open What’s new');
+            expect(part(root, 'close')).not.toBeNull();
+        });
+        it('emits bsOpen from the link and bsClose from the 24px close button', async () => {
+            const { root, waitForChanges } = await render(h("bs-whats-new", { ...props, closable: true }));
+            const events = [];
+            root.addEventListener('bsOpen', () => events.push('open'));
+            root.addEventListener('bsClose', () => events.push('close'));
+            part(root, 'action').click();
+            part(root, 'close').click();
+            await waitForChanges();
+            expect(events).toEqual(['open', 'close']);
+            expect(Math.round(part(root, 'close').getBoundingClientRect().width)).toBe(24);
+        });
+    });
+    it('renders the heading at the requested level, clamped to 1-6', async () => {
+        const tags = [];
+        for (const level of [1, 2, 9]) {
+            const { root } = await render(h("bs-whats-new", { entries: ENTRIES, headingLevel: level }));
+            tags.push(part(root, 'heading').tagName);
+        }
+        expect(tags).toEqual(['H1', 'H2', 'H6']);
+    });
+});

package/dist/collection/components/bs-whats-new/bs-whats-new.css

@@ -0,0 +1,315 @@
+/**
+ * @prop --bs-whats-new-width: Width of the `feed` (400px), `announcement` (560px) and `teaser` (300px). Never wider than the container.
+ * @prop --bs-whats-new-padding: Padding of the `feed` and `teaser` cards and the `announcement` body. Aliased to --bs-spacing-200 (16px); the teaser uses 12px.
+ * @prop --bs-whats-new-color: Heading and text colour. Aliased to --bs-text-default.
+ * @prop --bs-whats-new-color-secondary: Date, description and step count colour. Aliased to --bs-text-secondary.
+ * @prop --bs-whats-new-border: The feed's left edge line. Aliased to --bs-border-default.
+ * @prop --bs-whats-new-hero-bg: Background of the announcement's hero area. Aliased to --bs-color-primary-container.
+ * @prop --bs-whats-new-hero-height: Height of the announcement's hero. 220px (Figma).
+ * @prop --bs-whats-new-link: Colour of the release notes link. Aliased to --bs-text-link.
+ * @prop --bs-whats-new-link-underline: Underline of the release notes link. Aliased to --bs-border-info.
+ */
+:host {
+  display: block;
+  max-width: 100%;
+
+  --bs-whats-new-width: 400px;
+  --bs-whats-new-padding: var(--bs-spacing-200);
+  --bs-whats-new-color: var(--bs-text-default);
+  --bs-whats-new-color-secondary: var(--bs-text-secondary);
+  --bs-whats-new-border: var(--bs-border-default);
+  --bs-whats-new-hero-bg: var(--bs-color-primary-container);
+  --bs-whats-new-hero-height: 220px;
+  --bs-whats-new-link: var(--bs-text-link);
+  --bs-whats-new-link-underline: var(--bs-border-info);
+
+  width: var(--bs-whats-new-width);
+}
+
+:host([type='announcement']) {
+  --bs-whats-new-width: 560px;
+}
+
+:host([type='teaser']) {
+  --bs-whats-new-width: 300px;
+  --bs-whats-new-padding: var(--bs-spacing-150);
+}
+
+/* bs-card supplies the surface; this only sets how it looks here. */
+.bs-wn--feed {
+  --bs-card-radius: 0;
+  --bs-card-padding: var(--bs-whats-new-padding);
+  /* Figma: a docked panel -- a soft shadow and a line on its left edge (an inset shadow draws that line). */
+  --bs-card-shadow: 0 2px 2px var(--bs-elevation-medium), inset 1px 0 0 var(--bs-whats-new-border);
+}
+
+.bs-wn--announcement {
+  position: relative;
+  --bs-card-radius: var(--bs-border-radius-200);
+  --bs-card-padding: 0;
+  --bs-card-shadow: 0 2px 4px var(--bs-elevation-medium);
+}
+
+.bs-wn--teaser {
+  --bs-card-radius: var(--bs-border-radius-100);
+  --bs-card-padding: var(--bs-whats-new-padding);
+  --bs-card-shadow: 0 4px 4px var(--bs-elevation-high);
+}
+
+.bs-wn {
+  color: var(--bs-whats-new-color);
+}
+
+.bs-wn p,
+.bs-wn ul,
+.bs-wn h1,
+.bs-wn h2,
+.bs-wn h3,
+.bs-wn h4,
+.bs-wn h5,
+.bs-wn h6 {
+  margin: 0;
+}
+
+.bs-wn__heading {
+  font-size: var(--bs-font-size-2xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: 32px;
+}
+
+.bs-wn__heading--lg {
+  align-self: stretch;
+}
+
+.bs-wn__heading--sm {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: 20px;
+}
+
+.bs-wn__spacer {
+  flex: 1 1 0;
+}
+
+.bs-wn__text-button {
+  --bs-button-subtle-color: var(--bs-text-action);
+  --bs-button-height-sm: var(--bs-spacing-400);
+  --bs-button-padding-x-sm: var(--bs-spacing-150);
+}
+
+.bs-wn__text-button--md {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+.bs-wn__close {
+  flex: none;
+}
+
+.bs-wn__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Figma: the teaser's close button is 24px (bs-icon-button's own sizes are 16 / 40 / 44 / 48), with the
+   same 20px icon. */
+.bs-wn__close--compact {
+  --bs-icon-button-size-md: 24px;
+}
+
+/* --- feed ----------------------------------------------------------------------------------- */
+.bs-wn__feed {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-wn__head {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+}
+
+/* The tabs row can be wider than the panel; it scrolls sideways, without a scrollbar, as in the Figma. */
+.bs-wn__filters {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.bs-wn__filters::-webkit-scrollbar {
+  display: none;
+}
+
+.bs-wn__entries {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--bs-spacing-200);
+  padding-bottom: var(--bs-spacing-100);
+}
+
+.bs-wn__empty {
+  padding: var(--bs-spacing-300) 0;
+  color: var(--bs-whats-new-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+  text-align: center;
+}
+
+.bs-wn__footer {
+  display: flex;
+  align-items: center;
+  padding-top: var(--bs-spacing-150);
+}
+
+.bs-wn__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--bs-spacing-25);
+  color: var(--bs-whats-new-link);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  text-decoration: none;
+}
+
+.bs-wn__link-text {
+  border-bottom: 1px solid var(--bs-whats-new-link-underline);
+}
+
+.bs-wn__link svg {
+  width: 16px;
+  height: 16px;
+}
+
+.bs-wn__link:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}
+
+/* --- announcement --------------------------------------------------------------------------- */
+.bs-wn__announcement {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-wn--announcement .bs-wn__close {
+  position: absolute;
+  z-index: 1;
+  top: var(--bs-spacing-50);
+  inset-inline-end: var(--bs-spacing-50);
+}
+
+.bs-wn__hero {
+  display: none;
+  height: var(--bs-whats-new-hero-height);
+  background: var(--bs-whats-new-hero-bg);
+  overflow: hidden;
+}
+
+.bs-wn__hero--visible {
+  display: block;
+}
+
+.bs-wn__hero img,
+::slotted([slot='hero']) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bs-wn__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-spacing-150);
+  padding: var(--bs-whats-new-padding);
+}
+
+.bs-wn__points {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-150);
+  align-self: stretch;
+  padding: 0;
+  list-style: none;
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-wn__points li {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-150);
+}
+
+.bs-wn__check {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  color: var(--bs-icon-action);
+}
+
+.bs-wn__announcement-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  align-self: stretch;
+  padding-top: var(--bs-spacing-100);
+}
+
+.bs-wn__step {
+  color: var(--bs-whats-new-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.bs-wn__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  margin-inline-start: auto;
+}
+
+.bs-wn__actions bs-button {
+  --bs-button-height-md: var(--bs-spacing-550);
+}
+
+/* --- teaser --------------------------------------------------------------------------------- */
+.bs-wn__teaser {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--bs-spacing-75);
+}
+
+.bs-wn__teaser-row {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  align-self: stretch;
+}
+
+.bs-wn__date {
+  color: var(--bs-whats-new-color-secondary);
+  font-size: var(--bs-font-size-xs);
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.bs-wn__description {
+  color: var(--bs-whats-new-color-secondary);
+  font-size: var(--bs-font-size-sm);
+  line-height: 20px;
+}
+
+.bs-wn__link-button {
+  --bs-button-padding-x-label-side: var(--bs-spacing-150);
+  --bs-button-padding-x-icon-side: var(--bs-spacing-100);
+  margin-inline-start: calc(var(--bs-spacing-150) * -1);
+}
+
+.bs-wn__link-button svg {
+  width: 20px;
+  height: 20px;
+}