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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+: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);
+}