@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.3

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

@@ -0,0 +1,65 @@
+: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

@@ -0,0 +1,94 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,65 @@
+: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

@@ -0,0 +1,224 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,65 @@
+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'
+}