@brandsync/wc 0.0.7 → 0.0.9

package/dist/collection/components/bs-attachment-list/bs-attachment-list.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const SAMPLE_IMAGE = 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop';
+const meta = {
+    title: 'Genie AI Components/bs-attachment-list',
+    parameters: { docs: { description: { component: componentDescription('bs-attachment-list') } } },
+    argTypes: {
+        ariaLabel: { control: 'text', description: propDescription('bs-attachment-list', 'ariaLabel') },
+    },
+    args: {
+        ariaLabel: 'Attachments',
+    },
+};
+export default meta;
+export const OneAttachment = {
+    name: 'One attachment',
+    render: args => html `
+    <bs-attachment-list aria-label=${args.ariaLabel}>
+      <bs-attachment type="image" image-src=${SAMPLE_IMAGE}></bs-attachment>
+    </bs-attachment-list>
+  `,
+};
+export const ThreeAttachments = {
+    name: 'Three attachments',
+    render: args => html `
+    <bs-attachment-list aria-label=${args.ariaLabel}>
+      <bs-attachment type="image" image-src=${SAMPLE_IMAGE}></bs-attachment>
+      <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
+      <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
+    </bs-attachment-list>
+  `,
+};
+export const ManyAttachments = {
+    name: 'Many attachments (scrollable)',
+    render: args => html `
+    <div style="max-width: 400px; border: 1px dashed #c2c7d3;">
+      <bs-attachment-list aria-label=${args.ariaLabel}>
+        <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
+        <bs-attachment type="pdf" file-name="Dummy-pdf-in-here"></bs-attachment>
+        <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
+        <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
+        <bs-attachment type="document" file-name="Dummy-pdf-in-here"></bs-attachment>
+        <bs-attachment type="image" image-src=${SAMPLE_IMAGE}></bs-attachment>
+      </bs-attachment-list>
+    </div>
+  `,
+};

package/dist/collection/components/bs-badge/bs-badge.js

@@ -17,7 +17,7 @@ export class BsBadge {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (h("span", { key: '9cc06bddba11f57edf97209456e25141a3b80bea', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '7c0e4054e99a3dedc94f2a7250075fcb76c115b6' })));
+        return (h("span", { key: '33a4103fad2c535c1eeb787a4ba8e7633ef92082', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '68c95c6e9dd8a90fbec5853f7274f5ff2859faa3' })));
     }
     static get is() { return "bs-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button/bs-button.js

@@ -100,7 +100,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: 'eae5915f036d18b43b9b1ff94272fe27aa119d0e', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'ee58ccc6f8390663e67a7d7a03fe6113782805e7', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '526ec7b4fd274bbdb6dc1edb38c33917c26337ee', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3e0121dc4dc975b449b03e5ac5f55d1f6001e806', part: "label", class: "bs-button__label" }, h("slot", { key: '4ab00b8b91f0513af74faac4ae7b39f9a975dde5', onSlotchange: this.onLabelSlotchange })), h("span", { key: '3f64f1122c5ed1da1bb9cb869490395f1e11b3fb', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: 'ca79d7ed3cd80c6abc3f17c4f9d215ed69c13059', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: '8fe88c418417a4b2f8944c282aa97dbc98aaeb06', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '85b3a07595c93cbe3113204315669c3b087f216d', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '53740a910449f215229686fa9c506cce6d399b52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3a3b133d9386d0d2044d44cdf0b47bd3e100c6d2', part: "label", class: "bs-button__label" }, h("slot", { key: '9c7c0e468651c0d93aafa53afb3fcab60ab7f311', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'fa5b7afa82c697cfa7cf1a0f564e743832c9c039', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '20bf73485fbd7c30e524e380ec291ac3939c3ba1', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-button-skeleton/bs-button-skeleton.js

@@ -25,7 +25,7 @@ export class BsButtonSkeleton {
     /** Sizing scale, matching the `bs-button` size it stands in for. */
     size = 'md';
     render() {
-        return h("span", { key: '34febfe9aa1e20130b62b7884e766cd5285848d7', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
+        return h("span", { key: '3d08a657337abf1db82ab85d3ef6c6a15a23010a', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": "Loading" });
     }
     static get is() { return "bs-button-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-card/bs-card.js

@@ -23,7 +23,7 @@ export class BsCard {
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
     render() {
-        return (h("div", { key: '6c74e846c97f02a39ce1f2b215c87fbb9cd42055', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'ef89eb6ea19be13daf403b010a93e1f5a82691d4', part: "header", class: "bs-card__header" }, h("slot", { key: '4627d1f598def9298e0b7d251a523892bb0b97cf', name: "header" })), h("div", { key: 'a599746c11f92d2a535985abdcadbc9cc3036fdd', part: "body", class: "bs-card__body" }, h("slot", { key: 'f8d46c5f6aefeb870796c4efa37663e698fdd5c7' })), h("div", { key: '7f928a259fb159b6eb7d742cbfe6c1aacbef6e36', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'fddc69aedbc10f4397bb1db62265c657ec2642ab', name: "footer" }))));
+        return (h("div", { key: 'c8f95e45c3aa78315341d5ef5f7aa53b33f289cc', part: "container", class: `bs-card bs-card--${this.surface}` }, h("div", { key: 'b0787524f4b874e4e47459ef5325f2494ea8bf59', part: "header", class: "bs-card__header" }, h("slot", { key: '41ee7852c3ea215f9b6fbc72ccd13283b58afc50', name: "header" })), h("div", { key: 'e4537f5ec7e11af4518cfae464ee6f65120355cc', part: "body", class: "bs-card__body" }, h("slot", { key: 'b6ceecfa3ad173f43811ae7c24b70822879f89f4' })), h("div", { key: '31bc782bb46991e1db5718ff9690140965810572', part: "footer", class: "bs-card__footer" }, h("slot", { key: 'f2530ea24aab67ea5f3f575ef251419b5565b5bc', name: "footer" }))));
     }
     static get is() { return "bs-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.cmp.test.js

@@ -0,0 +1,73 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-chatbot-feedback', () => {
+    it('renders the default heading/subtitle and the editable form before submitting', async () => {
+        const { root } = await render(h("bs-chatbot-feedback", null));
+        expect(root.shadowRoot.querySelector('[part="heading"]')).toHaveTextContent('How was your experience with us?');
+        expect(root.shadowRoot.querySelector('[part="textarea"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="submit"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('[part="comment"]')).toBeNull();
+    });
+    it('disables the submit button until a star is clicked', async () => {
+        const { root } = await render(h("bs-chatbot-feedback", null));
+        expect(root.shadowRoot.querySelector('[part="submit"]')).toHaveAttribute('disabled');
+    });
+    it('emits bsRatingChange and updates aria-checked when a star is clicked', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-chatbot-feedback", null));
+        const spy = spyOnEvent('bsRatingChange');
+        const stars = root.shadowRoot.querySelectorAll('[part="star"]');
+        stars[2].click(); // 3rd star -> rating 3
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventDetail(3);
+        expect(stars[0]).toEqualAttribute('aria-checked', 'true');
+        expect(stars[2]).toEqualAttribute('aria-checked', 'true');
+        expect(stars[3]).toEqualAttribute('aria-checked', 'false');
+    });
+    it('enables the submit button once a star is selected, and emits bsSubmit with rating + comment', async () => {
+        const { root, spyOnEvent, waitForChanges } = await render(h("bs-chatbot-feedback", null));
+        const submitSpy = spyOnEvent('bsSubmit');
+        root.shadowRoot.querySelectorAll('[part="star"]')[3].click(); // rating 4
+        await waitForChanges();
+        const textarea = root.shadowRoot.querySelector('[part="textarea"]');
+        textarea.value = 'Great answer';
+        textarea.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await waitForChanges();
+        const submit = root.shadowRoot.querySelector('[part="submit"]');
+        expect(submit).not.toHaveAttribute('disabled');
+        submit.click();
+        expect(submitSpy).toHaveReceivedEventDetail({ rating: 4, comment: 'Great answer' });
+    });
+    it('switches to the rating-specific heading/subtitle and read-only comment after submitting', async () => {
+        const { root } = await render(h("bs-chatbot-feedback", { rating: 5, submitted: true, comment: "Loved it" }));
+        expect(root.shadowRoot.querySelector('[part="heading"]')).toHaveTextContent('Thanks for the great rating!');
+        expect(root.shadowRoot.querySelector('[part="textarea"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="submit"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('[part="comment"]')).toHaveTextContent('Loved it');
+    });
+    it('does not render the comment part when submitted with no comment', async () => {
+        const { root } = await render(h("bs-chatbot-feedback", { rating: 5, submitted: true }));
+        expect(root.shadowRoot.querySelector('[part="comment"]')).toBeNull();
+    });
+    it('disables stars and ignores clicks once submitted', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-feedback", { rating: 2, submitted: true }));
+        const spy = spyOnEvent('bsRatingChange');
+        const stars = root.shadowRoot.querySelectorAll('[part="star"]');
+        expect(stars[0]).toHaveAttribute('disabled');
+        stars[4].click();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it('renders "Start new chat" as outlined before submitting and primary after', async () => {
+        const { root: before } = await render(h("bs-chatbot-feedback", null));
+        expect(before.shadowRoot.querySelector('[part="new-chat"]').className).toContain('--outlined');
+        const { root: after } = await render(h("bs-chatbot-feedback", { rating: 5, submitted: true }));
+        expect(after.shadowRoot.querySelector('[part="new-chat"]').className).toContain('--primary');
+    });
+    it('emits bsNewChat and bsClose when their buttons are clicked', async () => {
+        const { root, spyOnEvent } = await render(h("bs-chatbot-feedback", null));
+        const newChatSpy = spyOnEvent('bsNewChat');
+        const closeSpy = spyOnEvent('bsClose');
+        root.shadowRoot.querySelector('[part="new-chat"]').click();
+        root.shadowRoot.querySelector('[part="close"]').click();
+        expect(newChatSpy).toHaveReceivedEventTimes(1);
+        expect(closeSpy).toHaveReceivedEventTimes(1);
+    });
+});

package/dist/collection/components/bs-chatbot-feedback/bs-chatbot-feedback.css

@@ -0,0 +1,253 @@
+:host {
+  display: block;
+  --bs-chatbot-feedback-bg: var(--bs-surface-raised);
+  --bs-chatbot-feedback-border: var(--bs-border-default);
+  --bs-chatbot-feedback-radius: var(--bs-border-radius-200);
+  --bs-chatbot-feedback-padding-x: var(--bs-spacing-250);
+  --bs-chatbot-feedback-padding-y: var(--bs-spacing-550);
+  --bs-chatbot-feedback-max-width: 762px;
+  --bs-chatbot-feedback-gap: var(--bs-spacing-300);
+  --bs-chatbot-feedback-top-gap: var(--bs-spacing-250);
+  --bs-chatbot-feedback-heading-color: var(--bs-text-default);
+  --bs-chatbot-feedback-subtitle-color: var(--bs-text-secondary);
+  --bs-chatbot-feedback-star-filled: var(--bs-color-primary-default);
+  --bs-chatbot-feedback-star-empty: var(--bs-border-neutral-container);
+  --bs-chatbot-feedback-comment-color: var(--bs-text-default);
+  --bs-chatbot-feedback-close-hover: var(--bs-surface-hover);
+  --bs-chatbot-feedback-primary-bg: var(--bs-button-primary-default);
+  --bs-chatbot-feedback-primary-bg-hover: var(--bs-button-primary-hover);
+  --bs-chatbot-feedback-primary-bg-disabled: var(--bs-button-primary-disabled);
+  --bs-chatbot-feedback-outlined-border: var(--bs-border-primary);
+  --bs-chatbot-feedback-outlined-hover: var(--bs-color-primary-container-hover);
+  --bs-chatbot-feedback-outlined-text: var(--bs-text-action);
+}
+
+.bs-chatbot-feedback {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-chatbot-feedback-gap);
+  max-width: var(--bs-chatbot-feedback-max-width);
+  padding: var(--bs-chatbot-feedback-padding-y) var(--bs-chatbot-feedback-padding-x);
+  background: var(--bs-chatbot-feedback-bg);
+  border: 1px solid var(--bs-chatbot-feedback-border);
+  border-radius: var(--bs-chatbot-feedback-radius);
+  font-family: inherit;
+}
+
+.bs-chatbot-feedback__close {
+  box-sizing: border-box;
+  position: absolute;
+  top: var(--bs-spacing-100);
+  right: var(--bs-spacing-100);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--bs-border-radius-100);
+  color: var(--bs-icon-default);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-chatbot-feedback__close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.bs-chatbot-feedback__close:hover {
+  background: var(--bs-chatbot-feedback-close-hover);
+}
+
+.bs-chatbot-feedback__top {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-chatbot-feedback-top-gap);
+  width: 100%;
+}
+
+.bs-chatbot-feedback__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-50);
+  width: 100%;
+  text-align: center;
+}
+
+.bs-chatbot-feedback__heading {
+  margin: 0;
+  color: var(--bs-chatbot-feedback-heading-color);
+  font-size: var(--bs-font-size-xl);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-line-height-heading-h5) * 1px);
+}
+
+.bs-chatbot-feedback__subtitle {
+  margin: 0;
+  color: var(--bs-chatbot-feedback-subtitle-color);
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-chatbot-feedback__stars {
+  display: flex;
+  gap: var(--bs-spacing-350);
+}
+
+.bs-chatbot-feedback__star {
+  box-sizing: border-box;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--bs-chatbot-feedback-star-empty);
+  cursor: pointer;
+}
+
+.bs-chatbot-feedback__star[aria-checked='true'] {
+  color: var(--bs-chatbot-feedback-star-filled);
+}
+
+.bs-chatbot-feedback__star:disabled {
+  cursor: default;
+}
+
+.bs-chatbot-feedback__star:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+  border-radius: var(--bs-border-radius-50);
+}
+
+.bs-chatbot-feedback__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-50);
+  width: 100%;
+}
+
+.bs-chatbot-feedback__label {
+  color: var(--bs-input-label);
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-chatbot-feedback__textarea {
+  box-sizing: border-box;
+  width: 100%;
+  /* Matches Figma's 103px Input Field height -- not tied to the spacing scale. */
+  min-height: 103px;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border: 1px solid var(--bs-input-border-default);
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-input-bg-default);
+  color: var(--bs-input-text);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  resize: vertical;
+}
+
+.bs-chatbot-feedback__textarea::placeholder {
+  color: var(--bs-input-placeholder);
+}
+
+.bs-chatbot-feedback__textarea:hover {
+  border-color: var(--bs-input-border-hover);
+}
+
+.bs-chatbot-feedback__textarea:focus-visible {
+  outline: none;
+  border-color: var(--bs-input-border-focus);
+}
+
+.bs-chatbot-feedback__comment {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 103px;
+  margin: 0;
+  padding: var(--bs-spacing-100) var(--bs-spacing-150);
+  border: 1px solid var(--bs-input-border-default);
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-input-bg-filled);
+  color: var(--bs-chatbot-feedback-comment-color);
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+  word-break: break-word;
+}
+
+.bs-chatbot-feedback__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-spacing-150);
+  width: 100%;
+}
+
+.bs-chatbot-feedback__submit,
+.bs-chatbot-feedback__new-chat {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-50);
+  width: 100%;
+  height: 44px;
+  padding: 0 var(--bs-spacing-250) 0 var(--bs-spacing-150);
+  border-radius: var(--bs-border-radius-100);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard);
+}
+
+.bs-chatbot-feedback__submit svg,
+.bs-chatbot-feedback__new-chat svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.bs-chatbot-feedback__submit,
+.bs-chatbot-feedback__new-chat--primary {
+  background: var(--bs-chatbot-feedback-primary-bg);
+  border: none;
+  color: var(--bs-text-on-action);
+}
+
+.bs-chatbot-feedback__submit:hover:not(:disabled),
+.bs-chatbot-feedback__new-chat--primary:hover {
+  background: var(--bs-chatbot-feedback-primary-bg-hover);
+}
+
+.bs-chatbot-feedback__submit:disabled {
+  background: var(--bs-chatbot-feedback-primary-bg-disabled);
+  color: var(--bs-text-on-disabled);
+  cursor: not-allowed;
+}
+
+.bs-chatbot-feedback__new-chat--outlined {
+  background: transparent;
+  border: 1px solid var(--bs-chatbot-feedback-outlined-border);
+  color: var(--bs-chatbot-feedback-outlined-text);
+}
+
+.bs-chatbot-feedback__new-chat--outlined:hover {
+  background: var(--bs-chatbot-feedback-outlined-hover);
+}
+
+.bs-chatbot-feedback__submit:focus-visible,
+.bs-chatbot-feedback__new-chat:focus-visible {
+  outline: 2px solid var(--bs-border-neutral-focus);
+  outline-offset: 2px;
+}