@brandsync/wc 0.0.7 → 0.0.9

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.js

@@ -0,0 +1,270 @@
+import { h } from "@stencil/core";
+/**
+ * A full-width status banner for use directly above `bs-composer`, surfacing a message about the
+ * composer's current state (e.g. a send failure, an informational notice) with an optional
+ * "Continue"-style action button and an optional close button.
+ *
+ * ## When to use
+ * - A message tied to the composer itself (send failed, rate-limited, draft restored, etc.) that
+ *   needs to sit directly above it, not a general-purpose alert -- see `CONVENTIONS.md` if this
+ *   library gains a generic banner/alert component later, and prefer that instead once it exists.
+ *
+ * ## When not to use
+ * - A toast/snackbar notification unrelated to the composer -- this component is not
+ *   self-dismissing and has no positioning of its own (it's a static block, not an overlay).
+ *
+ * @slot icon - Overrides the default leading icon. Only rendered when `showIcon` is true.
+ * @part icon - The leading icon wrapper.
+ * @part message - The message text.
+ * @part action - The optional "Continue"-style action button.
+ * @part close - The optional close button.
+ * @prop --bs-composer-status-banner-radius - Corner radius of the top-left/top-right corners
+ *   (bottom corners are square, so this sits flush above `bs-composer`). Aliased to
+ *   `--bs-border-radius-150`.
+ * @prop --bs-composer-status-banner-padding-x - Horizontal padding. Aliased to `--bs-spacing-150`.
+ * @prop --bs-composer-status-banner-padding-top - Top padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-composer-status-banner-padding-bottom - Bottom padding. Aliased to `--bs-spacing-200`.
+ * @prop --bs-composer-status-banner-gap - Gap between the message group and the action/close
+ *   controls. Aliased to `--bs-spacing-100`.
+ * @prop --bs-composer-status-banner-icon-gap - Gap between the icon and the message text.
+ *   Aliased to `--bs-spacing-75`.
+ * @prop --bs-composer-status-banner-error-bg - Background for `type="error"`. Aliased to
+ *   `--bs-color-error-container`.
+ * @prop --bs-composer-status-banner-error-text - Text/icon color for `type="error"`. Aliased to
+ *   `--bs-text-error`.
+ * @prop --bs-composer-status-banner-error-action-bg - Action button background for
+ *   `type="error"`. Aliased to `--bs-color-error-default`.
+ * @prop --bs-composer-status-banner-error-action-bg-hover - Aliased to `--bs-color-error-hover`.
+ * @prop --bs-composer-status-banner-info-bg - Background for `type="info"`. Aliased to
+ *   `--bs-color-info-container`.
+ * @prop --bs-composer-status-banner-info-text - Text/icon color for `type="info"`. Aliased to
+ *   `--bs-text-info`.
+ * @prop --bs-composer-status-banner-info-action-bg - Action button background for `type="info"`.
+ *   Aliased to `--bs-color-info-default`.
+ * @prop --bs-composer-status-banner-info-action-bg-hover - Aliased to `--bs-color-info-hover`.
+ * @prop --bs-composer-status-banner-neutral-bg - Background for `type="neutral"`. Aliased to
+ *   `--bs-color-neutral-container`.
+ * @prop --bs-composer-status-banner-neutral-text - Text/icon color for `type="neutral"`. Aliased
+ *   to `--bs-text-default`.
+ * @prop --bs-composer-status-banner-neutral-action-bg - Action button background for
+ *   `type="neutral"`. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-composer-status-banner-neutral-action-bg-hover - Aliased to
+ *   `--bs-color-neutral-container-hover`.
+ * @prop --bs-composer-status-banner-neutral-action-border - Action button border for
+ *   `type="neutral"` (the only variant whose action button is outlined). Aliased to
+ *   `--bs-border-neutral-container`.
+ * @prop --bs-composer-status-banner-warning-bg - Background for `type="warning"`. Aliased to
+ *   `--bs-color-warning-container`.
+ * @prop --bs-composer-status-banner-warning-text - Text/icon color for `type="warning"`. Aliased
+ *   to `--bs-text-warning`.
+ * @prop --bs-composer-status-banner-warning-action-bg - Action button background for
+ *   `type="warning"`. Aliased to `--bs-color-warning-default`.
+ * @prop --bs-composer-status-banner-warning-action-bg-hover - Aliased to
+ *   `--bs-color-warning-hover`.
+ * @prop --bs-composer-status-banner-close-hover-bg - Close button hover background (same across
+ *   every `type`). Aliased to `--bs-color-neutral-container-hover`.
+ */
+export class BsComposerStatusBanner {
+    /** Which severity/style to render. Drives background, text/icon color, and the action button's color. */
+    type = 'error';
+    /** The message text. */
+    message = 'This is a message';
+    /** Whether the leading icon (default: clock) is rendered. */
+    showIcon = true;
+    /** Whether the "Continue"-style action button is rendered. */
+    showButton = false;
+    /** Label for the action button, only rendered when `showButton` is true. */
+    actionLabel = 'Continue';
+    /** Whether the close button is rendered. */
+    allowClose = true;
+    /** Fires when the action button is clicked. Only relevant when `showButton` is true. */
+    bsAction;
+    /** Fires when the close button is clicked. Only relevant when `allowClose` is true. */
+    bsClose;
+    onActionClick = () => {
+        this.bsAction.emit();
+    };
+    onCloseClick = () => {
+        this.bsClose.emit();
+    };
+    render() {
+        return (h("div", { key: 'b51067b9af0210682fc60b5340560bf6ee42d655', class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'a6774d57e22e1b39fe0c9add8d96ed1c349bfeae', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '6a2b131a63a2d2cbe33f62519d1602752bc98204', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '6123c6a61652dfb504cf2e140a012fcba27e7468', name: "icon" }, h(ClockIcon, { key: '5415d7c71e2976a552955606e7288a4b806f1dbe' })))), h("p", { key: '1580b9f2b53390c32e38763c0cef23cb5d7ffa4c', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: 'bb08fce8f48253787015308bfc66e04835069670', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: 'b9d64c66155cb8c5b884b48a442c9e0d09be9111', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": "Dismiss", onClick: this.onCloseClick }, h(CloseIcon, { key: '2779b3af1d5348ee510cd1fe4978cbfbbfb33c5e' })))));
+    }
+    static get is() { return "bs-composer-status-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-composer-status-banner.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-composer-status-banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsComposerStatusBannerType",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"warning\"",
+                    "references": {
+                        "BsComposerStatusBannerType": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-composer-status-banner/bs-composer-status-banner.tsx",
+                            "id": "src/components/bs-composer-status-banner/bs-composer-status-banner.tsx::BsComposerStatusBannerType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which severity/style to render. Drives background, text/icon color, and the action button's color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'error'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The message text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "'This is a message'"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the leading icon (default: clock) is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "showButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the \"Continue\"-style action button is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-button",
+                "defaultValue": "false"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the action button, only rendered when `showButton` is true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label",
+                "defaultValue": "'Continue'"
+            },
+            "allowClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the close button is rendered."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-close",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsAction",
+                "name": "bsAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the action button is clicked. Only relevant when `showButton` is true."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is clicked. Only relevant when `allowClose` is true."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const ClockIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-width": "1.3" }), h("path", { d: "M10 5.83V10L12.5 11.67", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M15 5L5 15", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15 15L5 5", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/collection/components/bs-composer-status-banner/bs-composer-status-banner.stories.js

@@ -0,0 +1,75 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const types = ['error', 'info', 'neutral', 'warning'];
+const meta = {
+    title: 'Genie AI Components/bs-composer-status-banner',
+    parameters: { docs: { description: { component: componentDescription('bs-composer-status-banner') } } },
+    render: args => html `
+    <bs-composer-status-banner
+      type=${args.type}
+      message=${args.message}
+      ?show-icon=${args.showIcon}
+      ?show-button=${args.showButton}
+      action-label=${args.actionLabel}
+      ?allow-close=${args.allowClose}
+    ></bs-composer-status-banner>
+  `,
+    argTypes: {
+        type: { control: 'select', options: types, description: propDescription('bs-composer-status-banner', 'type') },
+        message: { control: 'text', description: propDescription('bs-composer-status-banner', 'message') },
+        showIcon: { control: 'boolean', description: propDescription('bs-composer-status-banner', 'showIcon') },
+        showButton: { control: 'boolean', description: propDescription('bs-composer-status-banner', 'showButton') },
+        actionLabel: { control: 'text', description: propDescription('bs-composer-status-banner', 'actionLabel') },
+        allowClose: { control: 'boolean', description: propDescription('bs-composer-status-banner', 'allowClose') },
+    },
+    args: {
+        type: 'error',
+        message: 'This is a message',
+        showIcon: true,
+        showButton: false,
+        actionLabel: 'Continue',
+        allowClose: true,
+    },
+};
+export default meta;
+export const Default = {};
+export const Info = {
+    args: { type: 'info' },
+};
+export const Neutral = {
+    args: { type: 'neutral' },
+};
+export const Warning = {
+    args: { type: 'warning' },
+};
+export const WithAction = {
+    name: 'With action button',
+    args: { showButton: true },
+};
+export const AllTypes = {
+    name: 'All types',
+    render: () => html `
+    <div style="display:flex; flex-direction:column; gap:8px; max-width: 600px;">
+      ${types.map(type => html ` <bs-composer-status-banner type=${type} show-button></bs-composer-status-banner> `)}
+    </div>
+  `,
+};
+const SAMPLE_IMAGE = 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop';
+export const AboveComposer = {
+    name: 'Above bs-composer',
+    render: () => html `
+    <div style="display:flex; flex-direction:column; max-width: 420px;">
+      <bs-composer-status-banner
+        type="info"
+        message="Uploading files, please wait."
+        style="margin-bottom: calc(-1 * var(--bs-spacing-150));"
+      ></bs-composer-status-banner>
+      <bs-composer aria-label="Message">
+        <bs-attachment-list slot="attachments">
+          <bs-attachment type="image" image-src=${SAMPLE_IMAGE} loading></bs-attachment>
+          <bs-attachment type="pdf" file-name="Dummy-pdf-in-here" loading></bs-attachment>
+        </bs-attachment-list>
+      </bs-composer>
+    </div>
+  `,
+};

package/dist/collection/components/bs-data-table/bs-data-table.js

@@ -54,11 +54,11 @@ export class BsDataTable {
         this.bsRowSelect.emit({ id: row.id, selected });
     };
     render() {
-        return (h("table", { key: '8276a72f6539690dd8189cd29e42993c3d61862c', part: "table", class: "bs-data-table" }, h("thead", { key: '2d3e42222eec0bcbe3d06f26f7a3ae53dd5ccdc0', part: "head" }, h("tr", { key: '45994ea59d9a1a347bb8abdf25d7b1b919822a61' }, this.selectable && h("th", { key: '05d5efa74feee1545e1c4b9dfc45acd7ffd10e6a', class: "bs-data-table__select-col" }), this.columns.map(column => {
+        return (h("table", { key: '9b16ade44ff85120e9629722de8e8c1738835c1b', part: "table", class: "bs-data-table" }, h("thead", { key: '644eed606e68782ada42c289bb7bfc8d6de4affb', part: "head" }, h("tr", { key: '4e4ea75018796c77f14703c1c1402022f8c8cde9' }, this.selectable && h("th", { key: '85460f7c2eab6ad0f3604f72bcd81a4aa8699c03', class: "bs-data-table__select-col" }), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '9c1dc006341b63e5d22df655836f326ba27e7b9d', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: '024cb8a25cc6471e7074d119b78e6a8e22f86450', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.