@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,59 @@
+:host {
+  display: inline-block;
+}
+
+div {
+  --background-color: var(--pine-color-primary-100);
+  --badge-background-color: var(--pine-color-base-white);
+  --border: var(--pine-border-default);
+  --radius-round: 50%;
+  align-items: center;
+  background-color: var(--background-color);
+  border-radius: var(--radius-round);
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+:host(.pds-avatar--admin) div {
+  border-radius: 12px;
+}
+:host(.pds-avatar--has-image) div {
+  background: transparent;
+}
+@supports selector(:has) {
+  div:has(img) {
+    background-color: transparent;
+  }
+}
+
+.pds-avatar__button {
+  --radius-round: 50%;
+  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-round);
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+}
+.pds-avatar__button:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+.pds-avatar__badge {
+  background-color: var(--badge-background-color);
+  border: var(--border);
+  border-color: var(--badge-background-color);
+  border-radius: var(--radius-round);
+  bottom: 0;
+  position: absolute;
+  right: 0;
+}
+
+img {
+  border-radius: var(--radius-round);
+  width: 100%;
+}

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

@@ -0,0 +1,217 @@
+import { Host, h } from "@stencil/core";
+export class PdsAvatar {
+    constructor() {
+        this.renderAvatar = () => {
+            const style = {
+                height: this.avatarSize(),
+                width: this.avatarSize(),
+            };
+            return (this.dropdown
+                ?
+                    h("button", { class: "pds-avatar__button", type: "button" }, h("div", { style: style }, this.renderIconOrImage(), this.renderBadge()))
+                :
+                    h("div", { style: style }, this.renderIconOrImage(), this.renderBadge()));
+        };
+        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", name: "check-circle-filled", 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", { name: "user-filled", size: "33.53%" }));
+        this.classNames = () => ({
+            'pds-avatar': true,
+            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null,
+            [`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, { 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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;QAiEZ,iBAAY,GAAG,GAAG,EAAE;YAC1B,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YACF,OAAO,CACL,IAAI,CAAC,QAAQ;gBACX,CAAC;oBACD,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ;wBAC9C,WAAK,KAAK,EAAE,KAAK;4BACd,IAAI,CAAC,iBAAiB,EAAE;4BACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACC;gBACT,CAAC;oBACD,WAAK,KAAK,EAAE,KAAK;wBACd,IAAI,CAAC,iBAAiB,EAAE;wBACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACT,CAAA;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE,CAAC,CAC1B,IAAI,CAAC,KAAK;YACV,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;eAC5C,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC9F,CAAC;QAEM,sBAAiB,GAAG,GAAG,EAAE,CAAC,CAChC,IAAI,CAAC,KAAK;YACR,CAAC,CAAC,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzC,sEAAsE;YACtE,sCAAsC;YACtC,iDAAiD;YACjD,CAAC,CAAC,gBAAU,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC3D,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE,CAAC,CACzB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnE,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBAxG4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;IACH,CAAC;IAiDD,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\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 renderAvatar = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize(),\n    };\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          <div style={style}>\n            {this.renderIconOrImage()}\n            {this.renderBadge()}\n          </div>\n        </button>\n        :\n        <div style={style}>\n          {this.renderIconOrImage()}\n          {this.renderBadge()}\n        </div>\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\" name=\"check-circle-filled\" 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 name=\"user-filled\" 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'
+}

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

@@ -0,0 +1,122 @@
+:host {
+  --border-color: transparent;
+  --border-color-hover: transparent;
+  --border-color-focus: transparent;
+  --border-color-disabled: transparent;
+  --background-color-primary: var(--pine-color-neutral-charcoal-400);
+  --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);
+  --background-color-disabled-primary: var(--pine-color-neutral-grey-300);
+  --color-primary: var(--pine-color-base-white);
+  --color-disabled-primary: var(--pine-color-neutral-charcoal-100);
+  --outline-color-primary: var(--pine-color-primary-200);
+  --border-color-secondary: var(--pine-color-neutral-grey-400);
+  --border-color-hover-secondary: var(--pine-color-neutral-grey-500);
+  --border-color-focus-secondary: var(--pine-color-neutral-grey-300);
+  --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);
+  --color-secondary: var(--pine-color-neutral-charcoal-400);
+  --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);
+  --outline-color-secondary: var(--pine-color-primary-200);
+  --background-color-accent: var(--pine-color-primary-300);
+  --background-color-hover-accent: var(--pine-color-primary-400);
+  --background-color-disabled-accent: var(--pine-color-primary-100);
+  --color-accent: var(--pine-color-base-white);
+  --color-disabled-accent: var(--pine-color-primary-200);
+  --outline-color-accent: var(--pine-color-primary-200);
+  --background-color-destructive: var(--pine-color-red-300);
+  --background-color-hover-destructive: var(--pine-color-red-400);
+  --background-color-disabled-destructive: var(--pine-color-red-100);
+  --color-destructive: var(--pine-color-base-white);
+  --color-disabled-destructive: var(--pine-color-red-200);
+  --outline-color-destructive: var(--pine-color-red-200);
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.pds-button {
+  align-items: center;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  color: var(--color);
+  display: flex;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  min-height: 40px;
+  padding: 0.5rem 1rem;
+}
+.pds-button pds-icon {
+  fill: currentColor;
+  margin-inline-end: 0.5rem;
+}
+.pds-button:hover {
+  background-color: var(--background-color-hover);
+  border-color: var(--border-color-hover);
+}
+.pds-button:focus {
+  border-color: var(--border-color-focus);
+  outline: 4px solid var(--outline-color);
+}
+.pds-button:disabled {
+  background-color: var(--background-color-disabled);
+  border-color: var(--border-color-disabled);
+  color: var(--color-disabled);
+}
+
+.pds-button--primary {
+  --background-color: var(--background-color-primary);
+  --background-color-hover: var(--background-color-hover-primary);
+  --background-color-disabled: var(--background-color-disabled-primary);
+  --color: var(--color-primary);
+  --color-disabled: var(--color-disabled-primary);
+  --outline-color: var(--outline-color-primary);
+}
+
+.pds-button--accent {
+  --background-color: var(--background-color-accent);
+  --background-color-hover: var(--background-color-hover-accent);
+  --background-color-disabled: var(--background-color-disabled-accent);
+  --color: var(--color-accent);
+  --color-disabled: var(--color-disabled-accent);
+  --outline-color: var(--outline-color-accent);
+}
+
+.pds-button--destructive {
+  --background-color: var(--background-color-destructive);
+  --background-color-hover: var(--background-color-hover-destructive);
+  --background-color-disabled: var(--background-color-disabled-destructive);
+  --color: var(--color-destructive);
+  --color-disabled: var(--color-disabled-destructive);
+  --outline-color: var(--outline-color-destructive);
+}
+
+.pds-button--secondary,
+.pds-button--disclosure {
+  --background-color: transparent;
+  --background-color-hover: transparent;
+  --background-color-disabled: transparent;
+  --border-color-disabled: var(--border-color-disabled-secondary);
+  --border-color-focus: var(--border-color-focus-secondary);
+  --border-color-hover: var(--border-color-hover-secondary);
+  --border-color: var(--border-color-secondary);
+  --color: var(--color-secondary);
+  --color-disabled: var(--color-disabled-secondary);
+  --outline-color: var(--outline-color-secondary);
+}
+
+.pds-button--disclosure pds-icon {
+  margin-inline-end: 0;
+  margin-inline-start: 0.5rem;
+}
+
+.pds-button--unstyled {
+  --background-color: transparent;
+  --background-color-hover: transparent;
+  --background-color-disabled: transparent;
+  --color: inherit;
+  border: 0;
+  margin: 0;
+  min-height: auto;
+  padding: 0;
+  width: inherit;
+}

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

@@ -0,0 +1,187 @@
+import { Host, h } from "@stencil/core";
+import { hasShadowDom } from "../../utils/utils";
+export class PdsButton {
+    constructor() {
+        this.handleClick = (ev) => {
+            if (this.type != 'button') {
+                // If button clicked IS NOT associated with a form
+                if (hasShadowDom(this.el)) {
+                    const form = this.el.closest('form');
+                    if (form) {
+                        ev.preventDefault();
+                        const fakeButton = document.createElement('button');
+                        fakeButton.type = this.type;
+                        fakeButton.style.display = 'none';
+                        form.appendChild(fakeButton);
+                        fakeButton.click();
+                        fakeButton.remove();
+                    }
+                }
+            }
+        };
+        this.componentId = undefined;
+        this.disabled = false;
+        this.icon = null;
+        this.name = undefined;
+        this.value = undefined;
+        this.type = 'button';
+        this.variant = 'primary';
+    }
+    classNames() {
+        const classNames = ['pds-button'];
+        if (this.variant) {
+            classNames.push('pds-button--' + this.variant);
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { class: this.classNames(), disabled: this.disabled, name: this.name, type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon }), h("slot", null), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down" }))));
+    }
+    static get is() { return "pds-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Toggles disabled state of button"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays icon before text when icon string matches an icon name"
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides button with a submittable name"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides button with a submittable value"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'reset' | 'submit'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "button"
+                        }],
+                    "text": "Provides button with a type"
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled'",
+                    "resolved": "\"accent\" | \"destructive\" | \"disclosure\" | \"primary\" | \"secondary\" | \"unstyled\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets button variant styles as outlined in Figma documentation"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,SAAS;;QAwCZ,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;gBACzB,kDAAkD;gBAClD,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;qBACpB;iBACF;aACF;QACH,CAAC,CAAA;;wBA7CmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAqBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qBACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,cACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa;gBACrF,eAAQ;gBACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAC,YAAY,GAAY,CAClE,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon}></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon name=\"caret-down\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}