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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-box.js","sourceRoot":"","sources":["../../../src/components/pds-box/pds-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-box',\n  styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n  /**\n   * Defines the vertical alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the box will be sized to fit its contents.\n   */\n  @Prop() auto?: boolean;\n\n  /**\n   *  Defines the background-color of the box.\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * If `true`, the box will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   *  Defines the border color of the box.\n   */\n  @Prop() borderColor?: string;\n\n  /**\n   * Defines how rounded the box corners are.\n   * @defaultValue none\n   */\n  @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n\n  /**\n   * Defines the orientation of the box items.\n   * @defaultValue row\n   */\n  @Prop() direction?: `row` | `column`;\n\n  /**\n   * Defines the display style of the box.\n   * @defaultValue flex\n  */\n  @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n  /**\n   * If `true`, sets the box `max-width` to `100%`.\n   */\n  @Prop() fit?: boolean;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() gap?: BoxTShirtSizeType;\n\n  /**\n   * Defines how a box will grow or shrink to fit the space available in its container.\n   * @defaultValue none\n   */\n  @Prop() flex?: `none` | `grow` | `shrink`;\n\n  /**\n   * Defines the horizontal alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * The minimum width of the row. Used in conjunction with alignment props\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n   */\n  @Prop() offset?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXs?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetSm?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetMd?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetLg?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXl?: BoxColumnType;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() padding?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box shadow.\n   * @defaultValue none\n  */\n  @Prop() shadow?: BoxTShirtSizeType;\n\n  /**\n   * Size of the column for all screen sizes that are not explicitly set.\n   */\n  @Prop() size?: BoxColumnType;\n\n  /**\n   * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXs?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeSm?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeMd?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeLg?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXl?: BoxColumnType;\n\n  render() {\n    const boxClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.auto ? 'pds-box--auto' : ''}\n    ${this.border ? 'pds-box--border' : ''}\n    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n    ${this.fit ? 'pds-box--fit' : ''}\n    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n    ${this.size == undefined &&\n      this.sizeSm == undefined &&\n      this.sizeMd == undefined &&\n      this.sizeLg == undefined &&\n      this.sizeXl == undefined ? 'pds-box' : ''}\n    `;\n\n    const boxInlineStyles = {\n      ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n      ...(this.borderColor && { '--color-border-box': this.borderColor }),\n      ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n      ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n    };\n\n    return (\n      <Host class={boxClasses} style={boxInlineStyles}>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,50 @@
+import { html } from 'lit-html';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-box'),
+  args: {
+    border: false,
+  },
+  component: 'pds-box',
+  title: 'components/Layout/Box',
+};
+
+const BaseTemplate = (args) => html`
+<pds-box
+	align-items="${args.alignItems}"
+  auto="${args.auto}"
+  background-color="${args.backgroundColor}"
+	border="${args.border}"
+  border-color="${args.borderColor}"
+	border-radius="${args.borderRadius}"
+  direction="${args.direction}"
+	display="${args.display}"
+  fit="${args.fit}"
+	justify-content="${args.justifyContent}"
+  min-height="${args.minHeight}"
+  min-width="${args.minWidth}"
+  offset="${args.offset}"
+  offset-xs="${args.offsetXs}"
+  offset-sm="${args.offsetSm}"
+  offset-md="${args.offsetMd}"
+  offset-lg="${args.offsetLg}"
+  offset-xl="${args.offsetXl}"
+  padding="${args.padding}"
+  shadow="${args.shadow}"
+  size="${args.size}"
+  size-xs="${args.sizeXs}"
+  size-sm="${args.sizeSm}"
+  size-md="${args.sizeMd}"
+  size-lg="${args.sizeLg}"
+  size-xl="${args.sizeXl}"
+>
+  Box content
+</pds-box>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'opt0',
+  border: true,
+  minHeight: '100px',
+};

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

@@ -0,0 +1,131 @@
+:host {
+  --border-width-default: var(--pine-border-width-thin);
+  --border-width-unstyled: var(--pine-border-radius-0);
+  --color-border-default: transparent;
+  --color-border-disabled: transparent;
+  --color-border-focus: transparent;
+  --color-border-hover: transparent;
+  --color-background-primary-default: var(--pine-color-charcoal-400);
+  --color-background-primary-disabled: var(--pine-color-grey-300);
+  --color-background-primary-hover: var(--pine-color-charcoal-500);
+  --color-text-primary-default: var(--pine-color-white);
+  --color-text-primary-disabled: var(--pine-color-charcoal-100);
+  --color-outline-primary: var(--pine-color-blue-200);
+  --color-border-secondary-default: var(--pine-color-grey-400);
+  --color-border-secondary-disabled: var(--pine-color-grey-300);
+  --color-border-secondary-focus: var(--pine-color-grey-300);
+  --color-border-secondary-hover: var(--pine-color-grey-500);
+  --color-text-secondary-default: var(--pine-color-charcoal-400);
+  --color-text-secondary-disabled: var(--pine-color-charcoal-100);
+  --color-outline-secondary: var(--pine-color-blue-200);
+  --color-background-accent-default: var(--pine-color-blue-300);
+  --color-background-accent-disabled: var(--pine-color-blue-100);
+  --color-background-accent-hover: var(--pine-color-blue-400);
+  --color-text-accent-default: var(--pine-color-white);
+  --color-text-accent-disabled: var(--pine-color-blue-200);
+  --color-outline-accent: var(--pine-color-blue-200);
+  --color-background-destructive-default: var(--pine-color-red-300);
+  --color-background-destructive-disabled: var(--pine-color-red-100);
+  --color-background-destructive-hover: var(--pine-color-red-400);
+  --color-text-destructive-default: var(--pine-color-white);
+  --color-text-destructive-disabled: var(--pine-color-red-200);
+  --color-outline-destructive: var(--pine-color-red-200);
+  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);
+  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);
+  --spacing-icon-margin-inline-end: var(--pine-spacing-100);
+  --spacing-padding-block: var(--pine-spacing-100);
+  --spacing-padding-inline: var(--pine-spacing-200);
+  --spacing-unstyled: var(--pine-spacing-0);
+  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.pds-button {
+  align-items: center;
+  background-color: var(--color-background-default);
+  border: var(--border-width-default) solid var(--color-border-default);
+  border-radius: var(--pine-border-radius-125);
+  color: var(--color-text-default);
+  display: flex;
+  font: var(--typography-default);
+  min-height: 40px;
+  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
+}
+.pds-button pds-icon {
+  fill: currentColor;
+  margin-inline-end: var(--spacing-icon-margin-inline-end);
+}
+.pds-button:hover {
+  background-color: var(--color-background-hover);
+  border-color: var(--color-border-hover);
+}
+.pds-button:focus-visible {
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  border-color: var(--color-border-focus);
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+.pds-button:disabled {
+  background-color: var(--color-background-disabled);
+  border-color: var(--color-border-disabled);
+  color: var(--color-text-disabled);
+}
+
+.pds-button--primary {
+  --color-background-default: var(--color-background-primary-default);
+  --color-background-hover: var(--color-background-primary-hover);
+  --color-background-disabled: var(--color-background-primary-disabled);
+  --color-text-default: var(--color-text-primary-default);
+  --color-text-disabled: var(--color-text-primary-disabled);
+  --color-outline: var(--color-outline-primary);
+}
+
+.pds-button--accent {
+  --color-background-default: var(--color-background-accent-default);
+  --color-background-hover: var(--color-background-accent-hover);
+  --color-background-disabled: var(--color-background-accent-disabled);
+  --color-text-default: var(--color-text-accent-default);
+  --color-text-disabled: var(--color-text-accent-disabled);
+  --color-outline: var(--color-outline-accent);
+}
+
+.pds-button--destructive {
+  --color-background-default: var(--color-background-destructive-default);
+  --color-background-hover: var(--color-background-destructive-hover);
+  --color-background-disabled: var(--color-background-destructive-disabled);
+  --color-text-default: var(--color-text-destructive-default);
+  --color-text-disabled: var(--color-text-destructive-disabled);
+  --color-outline: var(--color-outline-destructive);
+}
+
+.pds-button--secondary,
+.pds-button--disclosure {
+  --color-background-default: transparent;
+  --color-background-hover: transparent;
+  --color-background-disabled: transparent;
+  --color-border-disabled: var(--color-border-secondary-disabled);
+  --color-border-focus: var(--color-border-secondary-focus);
+  --color-border-hover: var(--color-border-secondary-hover);
+  --color-border-default: var(--color-border-secondary-default);
+  --color-text-default: var(--color-text-secondary-default);
+  --color-text-disabled: var(--color-text-secondary-disabled);
+  --color-outline: var(--color-outline-secondary);
+}
+
+.pds-button--disclosure pds-icon {
+  margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);
+  margin-inline-start: var(--spacing-disclosure-margin-inline-start);
+}
+
+.pds-button--unstyled {
+  --color-background-default: transparent;
+  --color-background-hover: transparent;
+  --color-background-disabled: transparent;
+  --color-text-default: inherit;
+  border: var(--border-width-unstyled);
+  margin: var(--spacing-unstyled);
+  min-height: auto;
+  padding: var(--spacing-unstyled);
+  width: inherit;
+}

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

@@ -0,0 +1,193 @@
+import { Host, h } from "@stencil/core";
+import { hasShadowDom } from "../../utils/utils";
+import { caretDown } from "@pine-ds/icons/icons";
+/**
+ * @part button - The main button element that represents the button component.
+ * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
+ * @part icon - The icon element that appears before the text in the button, if provided.
+*/
+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, { key: '453a94093ba7bb8aa0fdea470cd9008e96601dcf', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ec841dfb0b026d1c3376f686f6d9187cdecb1762', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '926395c361f5b94f9c4d12980c4a93a52bf79c41', name: this.icon, part: "icon" }), h("slot", { key: '4a74b8b6cd711fee67622c92b515cf329964da64' }), this.variant === 'disclosure' && h("pds-icon", { key: 'e2d356d80d03c3d8a8fc1259528e13a1c88e1307', icon: caretDown, part: "caret" }))));
+    }
+    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;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;EAIE;AAOF,MAAM,OAAO,SAAS;;QAwCZ,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC1B,kDAAkD;gBAClD,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;oBAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE,CAAC;wBACT,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;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;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,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,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,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY;gBACjG,8DAAQ;gBACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAY,CAC9E,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\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          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,66 @@
+import { html } from 'lit';
+
+import { customArgsWithIconControl } from '../../../stories/_helpers';
+
+export default {
+  argTypes: customArgsWithIconControl({ component: 'pds-button', property: 'icon' }),
+  component: 'pds-button',
+  title: 'components/Button'
+}
+
+const BaseTemplate = (args) => html`
+  <pds-button
+    component-id=${args.componentId}
+    disabled=${args.disabled}
+    icon=${args.icon}
+    name=${args.name}
+    type=${args.type}
+    value=${args.value}
+    variant=${args.variant}>
+      ${args.slot}
+    </pds-button> `;
+
+export const Accent = BaseTemplate.bind();
+Accent.args = {
+  disabled: false,
+  slot: 'Accent',
+  type: 'button',
+  variant: 'accent',
+};
+
+export const Destructive = BaseTemplate.bind({});
+Destructive.args = {
+  disabled: false,
+  slot: 'Destructive',
+  type: 'button',
+  variant: 'destructive',
+}
+
+export const Disclosure = BaseTemplate.bind({});
+Disclosure.args = {
+  disabled: false,
+  slot: 'Disclosure',
+  type: 'button',
+  variant: 'disclosure'
+}
+
+// We do not want to show Icon control, but icon is hard coded
+Disclosure.parameters = {
+  controls: { exclude: 'icon' }
+}
+
+export const Primary = BaseTemplate.bind({});
+Primary.args = {
+  disabled: false,
+  slot: 'Primary',
+  type: 'button',
+  variant: 'primary'
+}
+
+export const Secondary = BaseTemplate.bind({});
+Secondary.args = {
+  disabled: false,
+  slot: 'Secondary',
+  variant: 'secondary',
+  type: 'button',
+}

package/dist/collection/components/pds-checkbox/checkbox-interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=checkbox-interface.js.map

package/dist/collection/components/pds-checkbox/checkbox-interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-interface.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/checkbox-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface CheckboxChangeEventDetail<T = any> {\n  checked: boolean;\n  value: T;\n}\n"]}

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

@@ -0,0 +1,135 @@
+:host {
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
+  --border-color-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-500);
+  --border-radius: var(--pine-border-radius-050);
+  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
+  --box-shadow-focus-invalid: 0 0 0 2px var(--pine-color-red-200);
+  --color-background: var(--pine-color-white);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-background-hover: var(--pine-color-grey-100);
+  --color-border-disabled: var(--pine-color-charcoal-100);
+  --color-border-icon: var(--pine-color-white);
+  --color-checked: var(--pine-color-charcoal-500);
+  --color-disabled: var(--pine-color-grey-300);
+  --color-invalid: var(--pine-color-red-300);
+  --color-text-disabled: var(--pine-color-grey-500);
+  --color-text-message: var(--pine-color-charcoal-200);
+  --sizing-input: var(--pine-font-size-100);
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+:host(.is-invalid) input {
+  border-color: var(--color-invalid);
+}
+:host(.is-invalid) input:checked {
+  background: var(--color-invalid);
+}
+:host(.is-invalid) input:focus-visible {
+  box-shadow: var(--box-shadow-focus-invalid);
+  outline: none;
+}
+:host(.is-invalid) label,
+:host(.is-invalid) .pds-checkbox__message--error {
+  color: var(--color-invalid);
+}
+
+:host(.is-indeterminate) input {
+  background: var(--color-checked);
+  border-color: var(--color-checked);
+}
+:host(.is-indeterminate) input::after {
+  border: 1px solid var(--color-border-icon);
+  border-bottom: 0;
+  border-left: 0;
+  border-top: 0;
+  content: "";
+  display: block;
+  height: 7px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: rotate(87deg) translate3d(-114%, 25%, 0);
+  width: 4px;
+}
+
+input {
+  appearance: none;
+  background-color: var(--color-background);
+  border: var(--border-default);
+  border-radius: var(--border-radius);
+  height: var(--sizing-input);
+  margin: 0;
+  position: relative;
+  width: var(--sizing-input);
+}
+input:hover {
+  background: var(--color-background-hover);
+  border: var(--border-color-interactive-hover);
+}
+input:checked {
+  background: var(--color-checked);
+  border-color: var(--color-checked);
+}
+input:checked::after {
+  border: 1px solid var(--color-border-icon);
+  border-left: 0;
+  border-top: 0;
+  content: "";
+  display: block;
+  height: 7px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: rotate(43deg) translate3d(-110%, -30%, 0);
+  width: 4px;
+}
+input:disabled {
+  background: var(--color-background-disabled);
+  border-color: var(--color-disabled);
+  cursor: not-allowed;
+}
+input:disabled:checked {
+  background: var(--color-disabled);
+  border-color: var(--color-disabled);
+}
+input:disabled:checked::after {
+  border-color: var(--color-border-disabled);
+}
+input:disabled + label {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+input:disabled ~ .pds-checkbox__message {
+  color: var(--color-text-disabled);
+}
+input:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+label {
+  margin-inline-start: 10px;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pds-checkbox__message {
+  color: var(--color-text-message);
+  font-size: 14px;
+  margin-block-start: 6px;
+  margin-inline-start: 26px;
+  width: 100%;
+}