@brandsync/wc 1.9.0 → 1.11.0

package/dist/types/components/bs-whats-new/bs-whats-new.d.ts

@@ -0,0 +1,147 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BsWhatsNewEntryTagColor } from '../bs-whats-new-entry/bs-whats-new-entry';
+export type BsWhatsNewType = 'feed' | 'announcement' | 'teaser';
+export interface BsWhatsNewItem {
+    /** Identifier echoed back in `bsEntryAction`. */
+    id: string;
+    /** Which filter tab this entry belongs to (matches a `filters[].value`). */
+    category?: string;
+    tag?: string;
+    tagColor?: BsWhatsNewEntryTagColor;
+    /** The date as text, formatted for the reader. */
+    date?: string;
+    unread?: boolean;
+    heading: string;
+    description?: string;
+    actionLabel?: string;
+    /** URL of an image shown above the title. */
+    image?: string;
+}
+export interface BsWhatsNewFilter {
+    value: string;
+    label: string;
+}
+/**
+ * A product's "What's new" surface, in three forms matching the Figma component:
+ *
+ * - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
+ *   `bs-whats-new-entry`) and a link to the full release notes.
+ * - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
+ *   and Remind me later / Next.
+ * - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
+ *
+ * The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
+ * track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
+ * flags) and reacts to the events.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
+ * `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
+ *
+ * ## When to use
+ * - Telling users about changes to the product, in a place they can come back to.
+ *
+ * ## When not to use
+ * - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
+ * - A guided walk through the interface -- use `bs-product-tour`.
+ *
+ * @slot hero - The hero image of the `announcement` (or any media). Use `image` for a plain URL.
+ * @part container - The card.
+ * @part heading - The heading.
+ * @part close - The close button.
+ * @part mark-all-read - The "Mark all as read" button (`feed`).
+ * @part filters - The filter tabs (`feed`).
+ * @part entries - The list of updates (`feed`).
+ * @part entry - Each update (`feed`).
+ * @part release-notes - The release notes link (`feed`).
+ * @part hero - The hero area (`announcement`).
+ * @part tag - The tag chip (`announcement`, `teaser`).
+ * @part points - The bullet list (`announcement`).
+ * @part step - The "1 of 3" label (`announcement`).
+ * @part secondary - The Remind me later button (`announcement`).
+ * @part primary - The Next button (`announcement`).
+ * @part date - The date (`teaser`).
+ * @part description - The text (`teaser`).
+ * @part action - The Open What's new link (`teaser`).
+ */
+export declare class BsWhatsNew {
+    /** Which form: `feed`, `announcement` or `teaser`. */
+    type: BsWhatsNewType;
+    /** Heading. Defaults to "What's new" for `feed`; set it for the other forms. */
+    heading?: string;
+    /** HTML heading level, 1-6. */
+    headingLevel: number;
+    /** Shows a close button. */
+    closable: boolean;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?,
+     * actionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's
+     * non-string props rule. */
+    entries: BsWhatsNewItem[];
+    /** The filter tabs: `[{ value, label }]`. `value: "all"` shows every entry; any other value shows the
+     * entries whose `category` matches. Defaults to All, New Features, Improvements and Fixes
+     * (categories `features`, `improvements`, `fixes`). Set `[]` for no tabs. */
+    filters: BsWhatsNewFilter[];
+    /** The selected filter's `value`. Mutable: choosing a tab updates it. */
+    filter: string;
+    /** Label of the "Mark all as read" button, shown while any entry is `unread`. */
+    markAllReadLabel: string;
+    /** Text of the release notes link. */
+    releaseNotesLabel: string;
+    /** URL of the full release notes. The link is only shown when this is set. */
+    releaseNotesUrl?: string;
+    /** Text shown when the selected filter has no entries. */
+    emptyLabel: string;
+    /** Tag text (`announcement`, `teaser`), e.g. "New feature". */
+    tag?: string;
+    /** Colour of the tag. */
+    tagColor: BsWhatsNewEntryTagColor;
+    /** URL of the hero image (`announcement`). Or slot your own into `hero`. */
+    image?: string;
+    /** The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md. */
+    points: string[];
+    /** Current step, 1-based (`announcement`). Used with `total`. */
+    step: number;
+    /** Number of announcements in the sequence (`announcement`). The step label is hidden when 0. */
+    total: number;
+    /** Template of the step label; `{step}` and `{total}` are replaced. */
+    stepLabel: string;
+    /** Label of the secondary button (`announcement`). Empty hides it. */
+    secondaryLabel: string;
+    /** Label of the primary button (`announcement`). Empty hides it. */
+    primaryLabel: string;
+    /** The date as text (`teaser`). */
+    date?: string;
+    /** The line under the heading (`teaser`). */
+    description?: string;
+    /** Label of the link (`teaser`). */
+    actionLabel: string;
+    /** Fires when "Mark all as read" is pressed (`feed`). Update the entries' `unread` yourself. */
+    bsMarkAllRead: EventEmitter<void>;
+    /** Fires when an entry's action link is pressed (`feed`): `{ id }`. */
+    bsEntryAction: EventEmitter<{
+        id: string;
+    }>;
+    /** Fires when the user picks a filter tab (`feed`): `{ value }`. */
+    bsFilterChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when the close button is pressed. */
+    bsClose: EventEmitter<void>;
+    /** Fires when the primary button (`announcement`) is pressed. */
+    bsPrimary: EventEmitter<void>;
+    /** Fires when the secondary button (`announcement`) is pressed. */
+    bsSecondary: EventEmitter<void>;
+    /** Fires when the teaser's link is pressed (`teaser`) -- open the feed. */
+    bsOpen: EventEmitter<void>;
+    /** True while something is assigned to the `hero` slot, so the hero area only exists then. */
+    hasHeroSlot: boolean;
+    private heading_;
+    private renderClose;
+    private renderTag;
+    private renderFeed;
+    private onFilter;
+    private renderAnnouncement;
+    private renderTeaser;
+    render(): any;
+}

package/dist/types/components/bs-whats-new/bs-whats-new.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsWhatsNewArgs {
+    type: 'feed' | 'announcement' | 'teaser';
+    heading: string;
+    closable: boolean;
+    releaseNotesUrl: string;
+}
+declare const meta: Meta<BsWhatsNewArgs>;
+export default meta;
+type Story = StoryObj<BsWhatsNewArgs>;
+export declare const Feed: Story;
+export declare const Announcement: Story;
+export declare const Teaser: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsWhatsNewEntryTagColor = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/**
+ * One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
+ * an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
+ * "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
+ * (`bs-whats-new`), a list, or a page of release notes.
+ *
+ * **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
+ *
+ * ## When to use
+ * - Announcing a change to the product, with enough detail to know whether it matters.
+ *
+ * ## When not to use
+ * - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
+ *
+ * @slot image - An image (or any media) shown above the title. Nothing is shown when empty.
+ * @part meta - The row with the tag, date and unread dot.
+ * @part tag - The tag chip.
+ * @part date - The date.
+ * @part unread - The unread dot.
+ * @part image - The wrapper around the image slot.
+ * @part heading - The title.
+ * @part description - The description.
+ * @part action - The action button.
+ * @part divider - The rule under the entry.
+ */
+export declare class BsWhatsNewEntry {
+    /** The tag text, e.g. "New feature". No tag when empty. */
+    tag?: string;
+    /** Colour of the tag: `info` (default), `success`, `warning`, `error` or `neutral`. */
+    tagColor: BsWhatsNewEntryTagColor;
+    /** The date as text, already formatted for the reader (e.g. "24.09.2026"). */
+    date?: string;
+    /** Shows a dot after the date for an update the user hasn't seen. */
+    unread: boolean;
+    /** Title. */
+    heading?: string;
+    /** HTML heading level for the title, 1-6. */
+    headingLevel: number;
+    /** Short description under the title. */
+    description?: string;
+    /** Label of the action link (e.g. "Try it"). No action when empty. */
+    actionLabel?: string;
+    /** Draws a rule under the entry, to separate it from the next one. */
+    divider: boolean;
+    /** Visually hidden text for the unread dot. */
+    unreadLabel: string;
+    /** Fires when the action link is pressed. */
+    bsAction: EventEmitter<void>;
+    hasImage: boolean;
+    render(): any;
+}

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsWhatsNewEntryArgs {
+    tag: string;
+    tagColor: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    date: string;
+    unread: boolean;
+    heading: string;
+    description: string;
+    actionLabel: string;
+    divider: boolean;
+}
+declare const meta: Meta<BsWhatsNewEntryArgs>;
+export default meta;
+type Story = StoryObj<BsWhatsNewEntryArgs>;
+export declare const Default: Story;
+export declare const WithImageAndAction: Story;
+export declare const Fix: Story;
+export declare const TitleOnly: Story;