@pine-ds/core 1.2.0 → 1.3.0-dev.0

package/dist/collection/components/pds-accordion/pds-accordion.css

@@ -1,65 +0,0 @@
-:host {
-  display: block;
-}
-
-details {
-  --border-radius-default: var(--pine-border-radius-100);
-  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
-  --color-content-background-default: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-grey-300);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --color-text-active: var(--pine-color-charcoal-500);
-  --color-text-hover: var(--pine-color-charcoal-300);
-  --number-animation-transform-timing: 200ms;
-  --spacing-details-padding-inline: var(--pine-spacing-150);
-  --spacing-summary-padding-block: var(--pine-spacing-050);
-  --spacing-summary-padding-inline-start: var(--pine-spacing-100);
-  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
-  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
-  border-radius: var(--border-radius-default);
-  padding-inline: var(--spacing-details-padding-inline);
-}
-details pds-icon {
-  transform: scaleY(1);
-  transition: transform var(--number-animation-transform-timing);
-}
-
-/* stylelint-disable-next-line */
-details[open] {
-  background-color: var(--color-content-background);
-}
-details[open] summary {
-  color: var(--color-text-active);
-  font: var(--typography-default);
-}
-details[open] summary pds-icon {
-  transform: scaleY(-1);
-  transition: transform var(--number-animation-transform-timing);
-}
-
-summary {
-  border-radius: var(--border-radius-default);
-  color: var(--color-text-default);
-  font: var(--typography-default);
-  padding-block: var(--spacing-summary-padding-block);
-  padding-inline-end: var(--spacing-summary-padding-inline-end);
-  padding-inline-start: var(--spacing-summary-padding-inline-start);
-  /* stylelint-disable-next-line */
-  align-items: center;
-  display: flex;
-}
-summary::-webkit-details-marker {
-  display: none;
-}
-summary:hover {
-  background: var(--color-background-hover);
-  color: var(--color-text-hover);
-  cursor: pointer;
-}
-summary:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-summary pds-icon {
-  margin-inline-start: auto;
-}

package/dist/collection/components/pds-accordion/pds-accordion.js

@@ -1,94 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { downSmall } from "@pine-ds/icons/icons";
-/**
- * @slot (default) - Accordion body content.
- * @slot label - Accordion trigger button content.
- */
-export class PdsAccordion {
-    constructor() {
-        this.handleToggle = () => {
-            this.isOpen = this.detailsEl.open;
-        };
-        this.getOpenAttribute = () => {
-            if (this.isOpen !== false) {
-                return { open: true };
-            }
-            return '';
-        };
-        this.componentId = undefined;
-        this.isOpen = false;
-    }
-    handleOpenState(newValue) {
-        this.isOpen = newValue;
-    }
-    componentDidLoad() {
-        this.detailsEl.addEventListener('toggle', this.handleToggle);
-    }
-    render() {
-        return (h(Host, { key: '228d08704d0e735ed515308df91a7880c2c450ed', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '442e319353f611a5f3d3de767de8dc0f86d2540e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'c3b11619644caee3ba90854e608072436ae0ac34' }, h("slot", { key: 'fb9b2fa1c0e6a8ddce8e9575b31da5c248f075d5', name: "label" }, "Details"), h("pds-icon", { key: '3435405fa293d47aa240a6bfa947fe0707c1154a', icon: downSmall })), h("div", { key: 'a35cb679b545fbbd408a4217764b66eabd495c6e', class: "pds-accordion__body" }, h("slot", { key: 'fa6efbc3624c1c1152eabca17201c24801eef3ee' })))));
-    }
-    static get is() { return "pds-accordion"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-accordion.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-accordion.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "null"
-                        }],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "isOpen": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Can be used to manually set the open state of the accordion."
-                },
-                "attribute": "open",
-                "reflect": true,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "isOpen",
-                "methodName": "handleOpenState"
-            }];
-    }
-}
-//# sourceMappingURL=pds-accordion.js.map

package/dist/collection/components/pds-accordion/pds-accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;GAGG;AAMH,MAAM,OAAO,YAAY;;QAwBf,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;;sBAhBmB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC;gBAC5F;oBACE,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAE,SAAS,GAAI,CACrB;gBACV,4DAAK,KAAK,EAAC,qBAAqB;oBAC9B,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-accordion/stories/pds-accordion.stories.js

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  args: {
-    componentId: '',
-    isOpen: false,
-  },
-  argTypes: extractArgTypes('pds-accordion'),
-  component: 'pds-accordion',
-  title: 'components/Accordion',
-}
-
-const BaseTemplate = (args) => html`
-	<pds-accordion component-id="${args.componentId}" open="${args.isOpen}">
-    <pds-row align-items="center" slot="label">
-      <pds-box align-items="center">
-        <pds-icon name="product"></pds-icon>
-        <span style="display: inline-block; margin-left: 8px;">Products</span>
-      </pds-box>
-    </pds-row>
-    <pds-row>
-      <pds-box direction="column" gap="xs" padding="xs">
-        <pds-link variant="plain" href="#">All products</pds-link>
-        <pds-link variant="plain" href="#">Courses</pds-link>
-        <pds-link variant="plain" href="#">Coaching</pds-link>
-        <pds-link variant="plain" href="#">Community</pds-link>
-        <pds-link variant="plain" href="#">Podcasts</pds-link>
-      </pds-box>
-    </pds-row>
-  </pds-accordion>
-`;
-
-export const Default = BaseTemplate.bind({});

package/dist/collection/components/pds-avatar/pds-avatar.css

@@ -1,65 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-div {
-  --color-background-container: var(--pine-color-blue-100);
-  --color-background-badge: var(--pine-color-white);
-  --color-border-badge: var(--pine-color-white);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --border-radius-round: var(--pine-border-radius-round);
-  --border-radius-none: var(--pine-border-radius-0);
-  --spacing-none: var(--pine-spacing-0);
-  align-items: center;
-  background-color: var(--color-background-container);
-  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
-  display: inline-flex;
-  justify-content: center;
-  position: relative;
-}
-:host(.pds-avatar--admin) div {
-  --border-radius-admin-round: var(--pine-spacing-150);
-  border-radius: var(--border-radius-admin-round);
-}
-:host(.pds-avatar--has-image) div {
-  background: transparent;
-}
-@supports selector(:has) {
-  div:has(img) {
-    background-color: transparent;
-  }
-}
-
-.pds-avatar__button {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --border-radius-round: var(--pine-border-radius-round);
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: var(--border-radius-none);
-  border-radius: var(--border-radius-round);
-  cursor: pointer;
-  display: flex;
-  padding: var(--spacing-none);
-}
-.pds-avatar__button:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-
-.pds-avatar__badge {
-  background-color: var(--color-background-badge);
-  border: var(--border-default);
-  border-color: var(--color-border-badge);
-  border-radius: var(--border-radius-round);
-  bottom: var(--spacing-none);
-  position: absolute;
-  right: var(--spacing-none);
-}
-
-img {
-  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
-  height: 100%;
-  object-fit: cover;
-  width: 100%;
-}

package/dist/collection/components/pds-avatar/pds-avatar.js

@@ -1,224 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
-/**
- * @part image - The main image element that represents the avatar component.
-*/
-export class PdsAvatar {
-    constructor() {
-        this.renderAssetWrapper = () => {
-            const style = {
-                height: this.avatarSize(),
-                width: this.avatarSize()
-            };
-            return (h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
-        };
-        this.renderAvatar = () => {
-            return (this.dropdown
-                ?
-                    h("button", { class: "pds-avatar__button", type: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
-                :
-                    this.renderAssetWrapper());
-        };
-        this.renderBadge = () => (this.badge
-            // Percentage is average size of icon in relation to total avatar size
-            // of all preset sizes found in Figma.
-            // Used to allow icons to scale to container size
-            && h("pds-icon", { class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
-        this.renderIconOrImage = () => (this.image
-            ? h("img", { alt: this.alt, src: this.image })
-            // Percentage is average size of icon in relation to total avatar size
-            // of all preset sizes found in Figma.
-            // Used to allow icons to scale to container size
-            : h("pds-icon", { color: "var(--pine-color-blue-400)", icon: userFilled, size: "33.53%" }));
-        this.classNames = () => ({
-            'pds-avatar': true,
-            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
-            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
-        });
-        this.alt = null;
-        this.badge = false;
-        this.componentId = undefined;
-        this.dropdown = false;
-        this.image = null;
-        this.size = 'lg';
-        this.variant = 'customer';
-    }
-    avatarSize() {
-        const sizes = {
-            xs: '24px',
-            sm: '32px',
-            md: '40px',
-            lg: '56px',
-            xl: '64px',
-        };
-        if (sizes[this.size]) {
-            return sizes[this.size];
-        }
-        else {
-            return this.size;
-        }
-    }
-    render() {
-        return (h(Host, { key: '8c43a9de8b7799b5aafff0c12c2e95e53bed2041', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
-    }
-    static get is() { return "pds-avatar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-avatar.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-avatar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "alt": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "null"
-                        }],
-                    "text": "The alt for a custom user image."
-                },
-                "attribute": "alt",
-                "reflect": false,
-                "defaultValue": "null"
-            },
-            "badge": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether the badge is visible or not."
-                },
-                "attribute": "badge",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "dropdown": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether the avatar functions as a dropdown trigger."
-                },
-                "attribute": "dropdown",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "image": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "null"
-                        }],
-                    "text": "The src for a custom user image."
-                },
-                "attribute": "image",
-                "reflect": false,
-                "defaultValue": "null"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "| 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "lg"
-                        }],
-                    "text": "Size of the avatar. Value can be preset or custom."
-                },
-                "attribute": "size",
-                "reflect": true,
-                "defaultValue": "'lg'"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'customer' | 'admin'",
-                    "resolved": "\"admin\" | \"customer\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "customer"
-                        }],
-                    "text": "Determines the variant of avatar. Changes appearance accordingly."
-                },
-                "attribute": "variant",
-                "reflect": true,
-                "defaultValue": "'customer'"
-            }
-        };
-    }
-}
-//# sourceMappingURL=pds-avatar.js.map

package/dist/collection/components/pds-avatar/pds-avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-blue-400)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js

@@ -1,65 +0,0 @@
-import { html } from 'lit';
-import imgFile from '../assets/demi_wilkinson.jpg';
-
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  args: {
-    alt: null,
-    badge: false,
-		componentId: null,
-    dropdown: false,
-    image: null,
-    size: null,
-    variant: 'customer',
-  },
-  argTypes: extractArgTypes('pds-avatar'),
-  component: 'pds-avatar',
-  title: 'components/Avatar',
-}
-
-const BaseTemplate = (args) => html`<pds-avatar
-	alt="${args.alt}"
-	badge="${args.badge}"
-	dropdown="${args.dropdown}"
-	component-id="${args.componentId}"
-	image="${args.image}"
-	size="${args.size}"
-	variant="${args.variant}"
->
-</pds-avatar>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-	size: 'sm'
-}
-
-export const Admin = BaseTemplate.bind();
-Admin.args = {
-	size: 'lg',
-	variant: 'admin',
-}
-
-export const Badge = BaseTemplate.bind();
-Badge.args = {
-	badge: true,
-	size: 'md'
-}
-
-export const CustomSize = BaseTemplate.bind();
-CustomSize.args = {
-	size: '128px'
-}
-
-export const DropdownTrigger = BaseTemplate.bind();
-DropdownTrigger.args = {
-	dropdown: true,
-	size: 'lg'
-}
-
-export const Image = BaseTemplate.bind();
-Image.args = {
-	alt: 'Customer Profile',
-	image: imgFile,
-	size: 'xl'
-}