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

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" }, 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: '91f5ca20bb459d850bf58586c525a551821f17c7', 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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAErE;;EAEE;AAMF,MAAM,OAAO,SAAS;;QAiEZ,uBAAkB,GAAG,GAAG,EAAE;YAChC,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YAEF,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,eAAe;gBACpC,IAAI,CAAC,iBAAiB,EAAE;gBACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACP,CAAA;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,GAAG,EAAE;YAC1B,OAAO,CACL,IAAI,CAAC,QAAQ;gBACX,CAAC;oBACD,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC7C,IAAI,CAAC,kBAAkB,EAAE,CACnB;gBACT,CAAC;oBACD,IAAI,CAAC,kBAAkB,EAAE,CAC5B,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,EAAE,iBAAiB,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC5F,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,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,GAAY,CAC7F,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,EAAE,wCAAwC;YAC7G,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBA5G4B,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,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAA;QAClB,CAAC;IACH,CAAC;IAqDD,MAAM;QAEJ,OAAO,CACL,EAAC,IAAI,qDACH,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';\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\">\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'
-}