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

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

@@ -1,92 +0,0 @@
-:host {
-  --color-background-default: var(--pine-color-grey-400);
-  --spacing-offset-xxs: var(--pine-spacing-050);
-  --spacing-offset-xs: var(--pine-spacing-100);
-  --spacing-offset-sm: var(--pine-spacing-200);
-  --spacing-offset-md: var(--pine-spacing-300);
-  --spacing-offset-lg: var(--pine-spacing-450);
-  --spacing-offset-xxl: var(--pine-spacing-800);
-}
-
-.pds-divider {
-  background: var(--color-background-default);
-  border: 0;
-  display: flex;
-  height: 1px;
-  margin: 0;
-  width: 100%;
-}
-
-.pds-divider--vertical {
-  height: 100%;
-  width: 1px;
-}
-
-.pds-divider--offset-xxs {
-  margin: 0 calc(var(--spacing-offset-xxs) * -1);
-  padding: 0 var(--spacing-offset-xxs);
-}
-.pds-divider--offset-xxs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxs) * -1) 0;
-  padding: var(--spacing-offset-xxs) 0;
-}
-
-.pds-divider--offset-xs {
-  margin: 0 calc(var(--spacing-offset-xs) * -1);
-  padding: 0 var(--spacing-offset-xs);
-}
-.pds-divider--offset-xs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xs) * -1) 0;
-  padding: var(--spacing-offset-xs) 0;
-}
-
-.pds-divider--offset-sm {
-  margin: 0 calc(var(--spacing-offset-sm) * -1);
-  padding: 0 var(--spacing-offset-sm);
-}
-.pds-divider--offset-sm.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-sm) * -1) 0;
-  padding: var(--spacing-offset-sm) 0;
-}
-
-.pds-divider--offset-md {
-  margin: 0 calc(var(--spacing-offset-md) * -1);
-  padding: 0 var(--spacing-offset-md);
-}
-.pds-divider--offset-md.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-md) * -1) 0;
-  padding: var(--spacing-offset-md) 0;
-}
-
-.pds-divider--offset-lg {
-  margin: 0 calc(var(--spacing-offset-lg) * -1);
-  padding: 0 var(--spacing-offset-lg);
-}
-.pds-divider--offset-lg.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-lg) * -1) 0;
-  padding: var(--spacing-offset-lg) 0;
-}
-
-.pds-divider--offset-xl {
-  margin: 0 calc(var(--spacing-offset-xl) * -1);
-  padding: 0 var(--spacing-offset-xl);
-}
-.pds-divider--offset-xl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xl) * -1) 0;
-  padding: var(--spacing-offset-xl) 0;
-}
-
-.pds-divider--offset-xxl {
-  margin: 0 calc(var(--spacing-offset-xxl) * -1);
-  padding: 0 var(--spacing-offset-xxl);
-}
-.pds-divider--offset-xxl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxl) * -1) 0;
-  padding: var(--spacing-offset-xxl) 0;
-}
-
-@media (max-width: 767px) {
-  .pds-divider--vertical {
-    display: none;
-  }
-}

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

@@ -1,94 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsDivider {
-    constructor() {
-        this.componentId = undefined;
-        this.offset = undefined;
-        this.vertical = false;
-    }
-    classNames() {
-        const classNames = ['pds-divider'];
-        if (this.vertical) {
-            classNames.push('pds-divider--vertical');
-        }
-        if (this.offset) {
-            const offsetClassName = 'pds-divider--offset-' + this.offset;
-            classNames.push(offsetClassName);
-        }
-        return classNames.join(' ');
-    }
-    render() {
-        return (h(Host, { key: '3f2301abdcc69f48039e92ad5308ea7a27b3573f', id: this.componentId }, h("hr", { key: '763d4a15811b9298b77d0e6227e18dccdf61825e', class: this.classNames() })));
-    }
-    static get is() { return "pds-divider"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-divider.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-divider.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
-            },
-            "offset": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider."
-                },
-                "attribute": "offset",
-                "reflect": false
-            },
-            "vertical": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Sets divider to display vertically"
-                },
-                "attribute": "vertical",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-}
-//# sourceMappingURL=pds-divider.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,2DAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,25 +0,0 @@
-import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-divider'),
-  component: 'pds-divider',
-  title: 'components/Divider'
-}
-
-const BaseTemplate = (args) => html`
-  <pds-divider
-    component-id=${args.componentId}
-    offset=${args.offset}
-    vertical=${args.vertical}
-  />`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  vertical: false,
-}
-
-export const Vertical = BaseTemplate.bind();
-Vertical.args = {
-  vertical: true,
-}

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

@@ -1,16 +0,0 @@
-import { html } from 'lit';
-
-import { customArgsWithIconControl } from "../../../stories/_helpers";
-
-export default {
-  argTypes: customArgsWithIconControl({component: 'pds-icon', property: 'name'}),
-  component: 'pds-icon',
-  title: 'components/Icon'
-}
-
-const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size}></pds-icon>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  name: 'upload'
-};

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

@@ -1,13 +0,0 @@
-:host {
-  /**
-   * @prop --image-aspect-ratio: The image's aspect ratio.
-  */
-  --dimension-aspect-ratio: auto;
-  display: inline-block;
-}
-
-img {
-  aspect-ratio: var(--dimension-aspect-ratio);
-  height: auto;
-  width: 100%;
-}

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

@@ -1,173 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsImage {
-    constructor() {
-        this.alt = '';
-        this.componentId = undefined;
-        this.height = undefined;
-        this.loading = 'eager';
-        this.sizes = undefined;
-        this.src = undefined;
-        this.srcset = undefined;
-        this.width = undefined;
-    }
-    render() {
-        return (h(Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
-                'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
-    }
-    static get is() { return "pds-image"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-image.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-image.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "alt": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The image's alt tag. If none is provided,\nit will default to an empty string."
-                },
-                "attribute": "alt",
-                "reflect": false,
-                "defaultValue": "''"
-            },
-            "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
-            },
-            "height": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The height of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
-                },
-                "attribute": "height",
-                "reflect": false
-            },
-            "loading": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'eager' | 'lazy'",
-                    "resolved": "\"eager\" | \"lazy\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Indicates how the browser should load the image."
-                },
-                "attribute": "loading",
-                "reflect": false,
-                "defaultValue": "'eager'"
-            },
-            "sizes": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines the intended display size of an image\nwithin certian breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
-                },
-                "attribute": "sizes",
-                "reflect": false
-            },
-            "src": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The image's source."
-                },
-                "attribute": "src",
-                "reflect": false
-            },
-            "srcset": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "A set of image sources for the browser to use."
-                },
-                "attribute": "srcset",
-                "reflect": false
-            },
-            "width": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The width of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
-                },
-                "attribute": "width",
-                "reflect": false
-            }
-        };
-    }
-}
-//# sourceMappingURL=pds-image.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pds-image.js","sourceRoot":"","sources":["../../../src/components/pds-image/pds-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;;mBAKJ,EAAE;;;uBAiBoB,OAAO;;;;;;IA0B5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW;YAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrl: 'pds-image.scss',\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string.\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certian breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,35 +0,0 @@
-import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-image'),
-  component: 'pds-image',
-  title: 'components/Image'
-}
-
-const BaseTemplate = (args) => html` <pds-image
-  alt="${args.alt}"
-  height="${args.height}"
-  component-id="${args.componentId}"
-  loading="${args.loading}"
-  sizes="${args.sizes}"
-  src="${args.src}"
-  srcset="${args.srcset}"
-  width="${args.width}"
-/>`;
-
-const SizesAndSrcsetTemplate = (args) => html`<pds-image alt="${args.alt}" sizes="${args.sizes}" src="${args.src}" srcset="${args.srcset}" />`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  alt: 'Random Unsplash',
-  src: '//source.unsplash.com/320x180',
-}
-
-export const SizesAndSrcset = SizesAndSrcsetTemplate.bind();
-SizesAndSrcset.args = {
-  alt: 'Random Unsplash',
-  sizes: '(max-width: 450px) 150px, 600px',
-  src: '//source.unsplash.com/600x200',
-  srcset: '//source.unsplash.com/150x150 400w, //source.unsplash.com/600x200',
-}

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

@@ -1,92 +0,0 @@
-:host {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --box-shadow-focus-error: 0 0 0 2px var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-500);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-text: var(--pine-color-grey-500);
-  --color-placeholder-text: var(--pine-color-charcoal-200);
-  --font-size-helper-message: var(--pine-font-size-100);
-  --font-size-input-field: var(--pine-font-size-100);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-input-field: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-label: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-input-field: var(--pine-line-height-150);
-  --spacing-field-padding-block: var(--pine-spacing-100);
-  --spacing-input-field-padding-inline: var(--pine-spacing-200);
-  --spacing-label-margin-block-end: var(--pine-spacing-100);
-  --spacing-margin-top-helper-message: var(--pine-spacing-100);
-  display: inline;
-}
-
-.pds-input {
-  display: flex;
-  flex-direction: column;
-}
-
-label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-label-margin-block-end);
-}
-
-input {
-  border: 1px solid var(--color-border-default);
-  border-radius: 10px;
-  font-size: var(--font-size-input-field);
-  font-weight: var(--font-weight-input-field);
-  line-height: var(--line-height-input-field);
-  padding: var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-input:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-text);
-  cursor: not-allowed;
-}
-input:hover {
-  border-color: var(--color-border-hover);
-}
-input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-input::-webkit-input-placeholder {
-  color: var(--color-placeholder-text);
-}
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
-}
-input::-moz-placeholder {
-  color: var(--color-placeholder-text);
-}
-input:-ms-input-placeholder {
-  color: var(--color-placeholder-text);
-}
-input:has(~ .pds-input__error-message) {
-  border-color: var(--color-border-error);
-}
-input:has(~ .pds-input__error-message):focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
-}
-
-.pds-input__error-message,
-.pds-input__helper-message {
-  font-size: var(--font-size-helper-message);
-  font-weight: var(--font-weight-helper-message);
-  line-height: var(--line-height-helper-message);
-  margin-block-end: 0;
-  margin-block-start: var(--spacing-margin-top-helper-message);
-}
-
-.pds-input__error-message {
-  color: var(--color-error);
-}