@xplortech/apollo-core 2.5.0 → 2.6.0

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

@@ -1,9 +1,15 @@
 import { Host, h } from "@stencil/core";
-export class XplButton {
+export class Button {
     constructor() {
+        this.disabled = false;
+        this.fullWidth = false;
+        this.icon = '';
+        this.iconOnly = false;
+        this.iconPosition = 'start';
+        this.isLoading = false;
+        this.sentiment = 'neutral';
         this.size = 'default';
         this.variant = 'primary';
-        this.state = 'neutral';
     }
     componentDidRender() {
         const attrs = this.el.attributes;
@@ -16,24 +22,44 @@ export class XplButton {
             return false;
         })
             .reduce((acc, k) => (Object.assign(Object.assign({}, acc), { [attrs[k].name]: attrs[k].value })), {});
-        const child = this.el.querySelector('button');
-        Object.keys(dataAttrs).forEach((k) => {
-            child.setAttribute(k, dataAttrs[k]);
-            this.el.removeAttribute(k);
-        });
+        const button = this.el.querySelector('button');
+        if (button) {
+            Object.keys(dataAttrs).forEach((k) => {
+                button.setAttribute(k, dataAttrs[k]);
+                this.el.removeAttribute(k);
+            });
+        }
+    }
+    renderIcon() {
+        if (this.icon) {
+            return h("xpl-icon", { icon: this.icon });
+        }
+        return null;
+    }
+    handleLoadingState(e) {
+        if (this.isLoading) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        }
     }
     render() {
-        let className = `xpl-button
-                    xpl-button--${this.size}
-                    xpl-button--${this.state}
-                    xpl-button--${this.variant}`;
-        if (this.iconOnly)
-            className += ' xpl-button--icon-only';
-        if (this.fullWidth)
-            className += ' xpl-button--full-width';
-        if (this.link && this.disabled)
-            className += ' xpl-button--link-disabled';
-        return (h(Host, { key: '6def1e58f1fc0f0b1cee740c09278ab19ef77be5', class: className }, this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value, form: this.form }, h("slot", null)))));
+        return (h(Host, { key: 'b4658d7608d4ec84a4bbb36e8989bf66cd0358a2', class: {
+                'xpl-button': true,
+                [`xpl-button--${this.size}`]: true,
+                [`xpl-button--${this.variant}`]: true,
+                [`xpl-button--${this.state ? this.state : this.sentiment}`]: true,
+                [this.icon ? `xpl-button__icon-position--${this.iconPosition}` : '']: !!this.icon,
+                'xpl-button--full-width': this.fullWidth,
+                'xpl-button--icon-only': this.iconOnly,
+                'xpl-button--disabled': this.disabled,
+                'xpl-button--loading': this.isLoading && !this.link,
+            } }, this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, onClick: (e) => this.handleLoadingState(e), type: this.isLoading &&
+                (this.type === 'submit' ||
+                    this.type === 'reset' ||
+                    this.type === undefined)
+                ? 'button'
+                : this.type, name: this.name, value: this.value, form: this.form, "aria-busy": this.isLoading ? 'true' : undefined }, this.icon && h("span", { class: "xpl-button__icon" }, this.renderIcon()), h("slot", null), this.isLoading && (h("span", { class: "xpl-button__loading-overlay", "aria-hidden": "true" }, h("span", { class: "xpl-button__loading-spinner" }, h("xpl-icon", { icon: "loader-4" }))))))));
     }
     static get is() { return "xpl-button"; }
     static get properties() {
@@ -47,17 +73,37 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether button should be disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should be disabled"
+                    "text": "An optional form attribute for the button if type is submit"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled"
+                "attribute": "form"
             },
-            "link": {
+            "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -66,15 +112,36 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should yield a slot for a link tag"
+                    "text": "Whether the button should be of full width as per parent container."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "link"
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to render - icon name as string (from xpl-icon library)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
             },
             "iconOnly": {
                 "type": "boolean",
@@ -85,17 +152,58 @@ export class XplButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should render icon only"
+                    "text": "When true, the button renders in icon-only circular style. Use for icon-only buttons."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-only"
+                "attribute": "icon-only",
+                "defaultValue": "false"
             },
-            "fullWidth": {
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position relative to slot content. Ignored if no icon is provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, shows a loading overlay with spinner over the button. Button is non-interactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
+            "link": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -107,12 +215,12 @@ export class XplButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "whether button should render with full width"
+                    "text": "whether button should yield a slot for a link tag"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "full-width"
+                "attribute": "link"
             },
             "name": {
                 "type": "string",
@@ -125,151 +233,133 @@ export class XplButton {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - button name attribute"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Name of the button, submitted with form data. Passed through to the native button element."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "name"
             },
-            "size": {
+            "sentiment": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'sm' | 'xs'",
-                    "resolved": "\"default\" | \"sm\" | \"xs\"",
+                    "original": "'neutral' | 'negative' | 'positive'",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"default\" | \"sm\" | \"xs\"} - button size"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Sentiment of the button, which applies different color schemes to indicate purpose/intent."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'default'"
+                "attribute": "sentiment",
+                "defaultValue": "'neutral'"
             },
-            "type": {
+            "size": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'submit' | 'reset' | 'button'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "original": "'default' | 'xs' | 'sm'",
+                    "resolved": "\"default\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Button size. Use 'default', 'xs' (extra small), or 'sm' (small)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "size",
+                "defaultValue": "'default'"
             },
-            "value": {
+            "state": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'neutral' | 'warning' | 'success'",
+                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [{
-                            "name": "property",
-                            "text": "{string} - button value attribute"
+                            "name": "deprecated",
+                            "text": ": Use `sentiment` with values \"neutral\", \"negative\", \"positive\" instead of `state` ."
                         }],
                     "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "state"
             },
-            "variant": {
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'subtle'",
-                    "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
+                    "original": "'submit' | 'reset' | 'button'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "HTML button type attribute."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'primary'"
+                "attribute": "type"
             },
-            "state": {
+            "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'neutral' | 'warning' | 'success'",
-                    "resolved": "\"neutral\" | \"success\" | \"warning\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Value of the button, submitted with form data. Passed through to the native button element."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "state",
-                "defaultValue": "'neutral'"
+                "attribute": "value"
             },
-            "form": {
+            "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'subtle'",
+                    "resolved": "\"primary\" | \"secondary\" | \"subtle\" | \"tertiary\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "property",
-                            "text": "{string} - An optional form attribute for the button if type is submit"
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Button variant/style. Use \"primary\", \"secondary\", \"tertiary\" for new usage. \"subtle\" is deprecated but still supported for backward compatibility."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "form"
+                "attribute": "variant",
+                "defaultValue": "'primary'"
             }
         };
     }

package/dist/collection/components/xpl-button-row/xpl-button-row.js

@@ -1,12 +1,12 @@
 import { Host, h } from "@stencil/core";
-export class XplButtonRow {
+export class ButtonRow {
     constructor() {
         this.onPrimary = () => this.clickPrimary.emit();
         this.onSecondary = () => this.clickSecondary.emit();
         this.onTertiary = () => this.clickTertiary.emit();
     }
     render() {
-        return (h(Host, { key: 'c1d468abe10991fb2de71dd01daba53b00ad088d', class: "xpl-button-row" }, h("div", { key: '102e327fea3824fffb0f04bd7d91e5615aca86e3', class: "xpl-button-row-inner" }, h("div", { key: '745044b4b26b0a368ca5aec8b440ebdaa9677e2b', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'e895967af49c96eb3a3e98b24c0d10b30951bb7b', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'd35ad947185a638f2f03530ae50a349cebbe5855', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: 'f25895afa16581325345f619085adee0cf092ee5', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '8f606ced48a532bb1abaf20a7bc9dc570feb7d21', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'b6837c20a4adc3af10d4fd6724e226efd1d307ff', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
+        return (h(Host, { key: '0f5bf4d086cbafb8b03f854ea11b495ee5009cdf', class: "xpl-button-row" }, h("div", { key: '64ab05ca8cba9cf4c2a8feca5a6233a6a4b6a7e4', class: "xpl-button-row-inner" }, h("div", { key: '2e8d97b9fb7f7a31e0014b255342c0f2fb3ce7ac', class: "xpl-button-row__left" }, this.secondary && (h("xpl-button", { key: 'd368c7228a9f12143cff4978ced0a5eac35ff8a3', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary))), h("div", { key: 'a2a1860115ab9ac09d6ddd01ffd1e6e49d1ac874', class: "xpl-button-row__right" }, this.tertiary && (h("xpl-button", { key: '98f77b4745b72e8321e37d307c0a298f1e52045f', variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary)), this.secondary && (h("xpl-button", { key: '7f605c1221e856825e044dc908834f52c9e0374a', variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), this.primary && (h("xpl-button", { key: 'f83653973db8aec83cc3ec0da3cdf25431c18304', class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary))))));
     }
     static get is() { return "xpl-button-row"; }
     static get properties() {

package/dist/collection/components/xpl-calendar/calendar.stories.js

@@ -56,4 +56,8 @@ Calendar.parameters = {
             </div>
         `)(),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=21578-117377&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

package/dist/collection/components/xpl-calendar/xpl-calendar.js

@@ -4,7 +4,7 @@ import flatpickr from "flatpickr";
 const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate
     ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z'
     : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
-export class XplCalendar {
+export class Calendar {
     constructor() {
         this.inputId = uuid();
         this.dateFormat = 'Y-m-d';
@@ -52,7 +52,7 @@ export class XplCalendar {
         }
     }
     render() {
-        return (h(Host, { key: 'fb4c58e9ddbf919c96d99b2f9433f1e9ffb9f4df', class: "xpl-calendar" }, h("input", { key: '764bc9e43533f1bf921e586ff05a11d102b9015a', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
+        return (h(Host, { key: '5a9d327e7f4d7861d337123299829b833b2cce84', class: "xpl-calendar" }, h("input", { key: 'f592794da7e97bca218ea47ab5d64a13182d71d0', class: "xpl-calendar-input", type: "text", id: this.calendarInputId, ref: (el) => {
                 this.inputElement = el;
             } })));
     }

package/dist/collection/components/xpl-checkbox/checkbox.stories.js

@@ -76,4 +76,8 @@ Checkbox.parameters = {
             `;
         })(Checkbox.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=3915-91031&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

package/dist/collection/components/xpl-checkbox/xpl-checkbox.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplCheckbox {
+export class Checkbox {
     constructor() {
         this.id = uuid();
         this.onChange = (event) => {
@@ -14,14 +14,14 @@ export class XplCheckbox {
         };
     }
     render() {
-        return (h(Host, { key: '00250685fca2e8158973a57947ec1ae390b556c4', class: {
+        return (h(Host, { key: '8d2ec8544cf2baad3e82b489c678fda63e22da06', class: {
                 'xpl-checkbox-radio-container': true,
                 styled: this.styled,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ead56008991620c8e6c612ee1e6d299a3a88c6d2', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: 'd336163f57e12ac87b1f29da074c66ef1e600a95', class: {
+            } }, h("input", { key: '632db707a6611ef8f89edaa36af95746a9e5d8fd', class: "xpl-checkbox", type: "checkbox", checked: this.checked, "data-id": this.dataId, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: this.onChange, name: this.name, required: this.required, value: this.value }), h("label", { key: '80949092498866a3eba442760c28ba57540f69ba', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, h("slot", { key: 'c317e0a1f2e2ac2e63f95d268443d5ff0c53eb5e' }), this.description && (h("small", { key: 'f6031a5c9db67dbe8bb94f396da56fb7dd28fea4', class: {
+            }, htmlFor: this.id }, h("slot", { key: '343779750455548397d8c887101ac8cf8eb25fcc' }), this.description && (h("small", { key: '12d5e2d154f1a99d7afe5a9bafdf5ebdcb40f1dd', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
             } }, this.description)))));

package/dist/collection/components/xpl-choicelist/choicelist.stories.js

@@ -131,4 +131,8 @@ choicelist markup and interactivity.`);
             return output;
         })(Choicelist.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=15501-10918&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };

package/dist/collection/components/xpl-choicelist/xpl-choicelist.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { v4 as uuid } from "uuid";
-export class XplChoicelist {
+export class Choicelist {
     constructor() {
         this.name = uuid();
         this.onChoiceChange = (value, choiceIndex) => {
@@ -35,7 +35,7 @@ export class XplChoicelist {
         this.onChoicesPropChange(this.choices);
     }
     render() {
-        return (h(Host, { key: '385f51ecb532a4f496e6ab8a74ec8731bdcc321f', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: '1c3d9eff6699a56b0cc955a5f2e9905480d8363b', class: {
+        return (h(Host, { key: 'c6a7762863d6d19c1a9d72cfcc14e1d6e0f02850', class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? (h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description))) : null, this.choices && (h("ul", { key: 'a7f81d04dea87b90b86548e9eceeb802e0f4f57f', class: {
                 'xpl-choicelist': true,
                 'xpl-choicelist--styled': this.styled,
             } }, this.choices.map((choice, i) => {

package/dist/collection/components/xpl-content-area/xpl-content-area.js

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
-export class XplContentArea {
+export class ContentArea {
     constructor() {
         this.size = 'wide';
     }
     render() {
-        return (h(Host, { key: '20346d8b9d44a2cc90e2bade2beedc3786276c12' }, h("main", { key: '9af1a83077ac5ae29038d998feaceb450be3f744', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '776a4b59943b1bbbcb81b9d35cee43618e81f338', class: "xpl-content-area" }, h("slot", { key: 'a4a023c5ca16110c9f9ccf1f10386e28a8b4c81e' })))));
+        return (h(Host, { key: '5ce34f544fa975f9cbd46defced08033bb1eef9b' }, h("main", { key: '3e4b262bc54788d50b6b329936f7aee1c1f6be69', class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { key: '5e4f9fa89830360f151c89ebb787d525c3c0940e', class: "xpl-content-area" }, h("slot", { key: 'e22c2759aa45d4a99c92541073abf011d34474f9' })))));
     }
     static get is() { return "xpl-content-area"; }
     static get properties() {

package/dist/collection/components/xpl-dashboard/xpl-dashboard.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
-export class XplDashboard {
+export class Dashboard {
     render() {
-        return (h(Host, { key: 'f072c5fdcc919dc5796dc23cdca36e9431a17814' }, h("dl", { key: '899d09bec63eef669028c3e4d7193f2ab690f781', class: "xpl-dashboard" }, h("slot", { key: 'a36c42cb173e82d17c5d4b567a5a182152204813' }))));
+        return (h(Host, { key: 'aa4f209d95236a7e2c3e6f6915c989a110202c80' }, h("dl", { key: '890e6fb69af3154ee47c1b40498ed37c5d8a6a1a', class: "xpl-dashboard" }, h("slot", { key: 'e4a47f80f873cf53844283e47c59f174fc79fda0' }))));
     }
     static get is() { return "xpl-dashboard"; }
 }

package/dist/collection/components/xpl-data-card/data-card.stories.js

@@ -108,4 +108,8 @@ DataCard.parameters = {
     'web-component': {
         render: DataCard(DataCard.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=8793-114043&p=f&t=01tbTrRZyfvVafsA-11',
+    },
 };

package/dist/collection/components/xpl-data-card/xpl-data-card.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class XplDataCard {
+export class DataCard {
     constructor() {
         this.leadingIcon = true;
         this.tooltipTextSmallStat = '';
@@ -31,8 +31,8 @@ export class XplDataCard {
             : this.smallStatVariant === 'negative'
                 ? 'arrow-down-right'
                 : 'dash';
-        return (h(Host, { key: 'd8e5d213c87a8d5270f34d6bd60a698e04dd852f', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '3cd7a7ef77c90e6caefdfa0a7eccc132c07871a2', class: headerClasses }, h("header", { key: '7f85f31d60d7022ec75c3d3b164391e11059662b' }, !!this.leadingIcon && this.icon && (h("span", { key: '192e6c0dc871185a7f2845a14c38b1dc6ad04702', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '9d289a6db0fed0787a2c5cd5de6c57e92203a3fd', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'f1b56a29e648ba29e7f4b0c0493c8e27d410d843', name: "title" }, this.name)), this.link && (h("span", { key: '92b7cab6af5ca4f0664902ea359b3dfb7568e5b6', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '1326fdb0659191f1c2ff7fbb137eed5c4d5c4155', icon: "chevron-right", size: 16 })))), h("dd", { key: 'fce45e8e2d908a7d23e95a76cc0bc2334cd729b1', class: "xpl-data-card__body" }, h("div", { key: '1341065e9f0cbd91b82d239a87aa9818f237334b', class: "xpl-data-card__left" }, h("span", { key: '0dff4e467f439d991f3da594507e0e4310bdecee', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
-            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'cb5fd1c7897ac6bce5de93082f1ca333e826d53d', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '83f568edc52ec6a2e0a5b63544e2849dde91318e', class: "xpl-data-card__right" }, h("slot", { key: 'a27fd65217f4817051ba955890582bafb6050f97', name: contentSlot }))))));
+        return (h(Host, { key: 'c9a108ce28ed8904ef2f39f8d28e3becdd3da427', role: "group", class: `xpl-data-card ${this.link ? 'xpl-data-card__link' : ''}`, tabindex: "0" }, h("dt", { key: '376323f4f00a84b903b31d3b72b21d83f86cb8d7', class: headerClasses }, h("header", { key: '7385e8fac7f9eb6f8f9c9235f7de8395de376510' }, !!this.leadingIcon && this.icon && (h("span", { key: 'bd43a5ad7f0d4c3afacd83b0d77b00fbfbbc9bfe', class: `xpl-data-card__icon--${this.variant}` }, h("xpl-icon", { key: '914e9897881a07fd0a76eaa24f7b862e0d2237d8', icon: this.icon, "background-color": bgColorHue, size: 20 }))), h("slot", { key: 'dc317fbb7055845149737d3699d39759b42be5a4', name: "title" }, this.name)), this.link && (h("span", { key: 'ea569e40ee3e746073c1dee3e1be98af63cda682', class: "xpl-data-card__header-arrow" }, h("xpl-icon", { key: '4da084735e560701a8407ec044b9e6d8ea9d5a1f', icon: "chevron-right", size: 16 })))), h("dd", { key: '218fd7271e49509d9b29484ba7becb3237fae283', class: "xpl-data-card__body" }, h("div", { key: 'e8a723a5d2742c42b681cbde6ca880a9833301ba', class: "xpl-data-card__left" }, h("span", { key: '9b9cfbc7ff6d1cb81d867e044766559e07f0bee9', class: "xpl-data-card-stat xpl-data-card-stat--long" }, this.stat), this.tooltipTextStat ? (h("xpl-tooltip", { text: this.tooltipTextStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, this.shortStat ? this.shortStat : this.stat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--short" }, h("abbr", { title: this.stat }, this.shortStat ? this.shortStat : this.stat))), this.smallStatVariant ? (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: `xpl-data-card-stat xpl-data-card-stat--small ${this.smallStatVariant}` }, h("xpl-icon", { icon: smallStatIcon, size: 16 }), this.smallStat))) : (this.smallStatIcon &&
+            (this.tooltipTextSmallStat ? (h("xpl-tooltip", { text: this.tooltipTextSmallStat }, h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat))) : (h("div", { class: "xpl-data-card-stat xpl-data-card-stat--small" }, h("xpl-icon", { icon: this.smallStatIcon, size: 16 }), this.smallStat)))), !!this.detail && h("span", { key: 'f6236b30f5fababdb27dfb0767b0b9f230019e87', class: "xpl-data-card__detail" }, this.detail)), hasContentSlot && (h("div", { key: '614af9eb3f33fde8d489fe547a2f0e833f6e9655', class: "xpl-data-card__right" }, h("slot", { key: 'd71b6775e27537744ca4bee20c530b5aa1e6e830', name: contentSlot }))))));
     }
     static get is() { return "xpl-data-card"; }
     static get properties() {

package/dist/collection/components/xpl-divider/divider.stories.js

@@ -29,4 +29,8 @@ Divider.parameters = {
     html: {
         render: (({ tier, text }) => `<div class="xpl-divider xpl-divider--${tier.toString()}">${text}</div>`)(Divider.args),
     },
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16545-7981&p=f&t=aZipOZlFAFwtMW1r-11',
+    },
 };