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

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

@@ -1,29 +0,0 @@
-:host {
-  /**
-   * @prop --spacing-panel-margin-top: Optional margin-top for panels
-   */
-  --spacing-panel-margin-top: 0;
-  /**
-   * @prop --spacing-panel-padding: Optional padding for panels
-   */
-  --spacing-panel-padding: 0;
-  --outline: 2px solid var(--pine-color-blue-200);
-  --spacing-gap-availability: var(--pine-spacing-100);
-  --spacing-gap-default: var(--pine-spacing-300);
-  --spacing-gap-filter: var(--pine-spacing-200);
-  display: block;
-}
-
-.pds-tabs__tablist {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-gap-default);
-}
-
-:host(.pds-tabs--availability) .pds-tabs__tablist {
-  gap: var(--spacing-gap-availability);
-}
-
-:host(.pds-tabs--filter) .pds-tabs__tablist {
-  gap: var(--spacing-gap-filter);
-}

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

@@ -1,209 +0,0 @@
-import { Host, h } from "@stencil/core";
-/**
-* @slot tabs - Content is placed within the `div[role="tablist"]` element as children
-* @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
-*/
-export class PdsTabs {
-    constructor() {
-        this.tablistLabel = undefined;
-        this.componentId = undefined;
-        this.variant = undefined;
-        this.activeTabName = undefined;
-        this.activeTabIndex = undefined;
-    }
-    tabClickHandler(event) {
-        if (this.componentId === event.detail[1]) {
-            this.activeTabIndex = event.detail[0];
-            this.activeTabName = this.tabs[this.activeTabIndex].name;
-        }
-    }
-    handleKeyDown(ev) {
-        const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
-            ev.preventDefault();
-            this.moveActiveTab(ev.key);
-        }
-    }
-    moveActiveTab(key) {
-        const firstTabNumber = 0;
-        const lastTabNumber = this.tabs.length - 1;
-        let moveFocusTo = null;
-        switch (key) {
-            case 'ArrowLeft':
-                moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));
-                break;
-            case 'ArrowRight':
-                moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);
-                break;
-            case 'Home':
-                moveFocusTo = firstTabNumber;
-                break;
-            case 'End':
-                moveFocusTo = lastTabNumber;
-                break;
-        }
-        // Move focus to the button element within `pds-tab`
-        this.tabs[moveFocusTo].children[0].focus();
-        this.activeTabName = this.tabs[moveFocusTo].name;
-        this.activeTabIndex = moveFocusTo;
-    }
-    findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
-    }
-    propGeneration(child, index = 0) {
-        child.parentComponentId = this.componentId.toString();
-        child.variant = this.variant.toString();
-        child.selected = (this.activeTabName === child.name) ? true : false;
-        child['index'] = index;
-    }
-    passPropsToChildren() {
-        this.tabs.forEach((child, index) => {
-            if (this.activeTabName === child.name)
-                this.activeTabIndex = index;
-            this.propGeneration(child, index);
-        });
-        this.tabPanels.forEach((child) => {
-            this.propGeneration(child);
-        });
-    }
-    classNames() {
-        let className = `pds-tabs`;
-        if (this.variant && this.variant != 'primary') {
-            const variantClassName = `pds-tabs--${this.variant}`;
-            className += ' ' + variantClassName;
-        }
-        return className;
-    }
-    ;
-    componentWillLoad() {
-        this.findAllChildren();
-    }
-    componentWillRender() {
-        this.passPropsToChildren();
-    }
-    render() {
-        return (h(Host, { key: '92748fc6123067ba04f9cc81ea949366fb1c2a8f', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '809cbe1ed4e973db39ea69be9e30ac54881564af', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'b23af8a48dee0528cc9f7d2b84a42411e2b14e6d', name: "tabs" })), h("slot", { key: 'fdb46b7125f735531b13c1ac82a08f27998e7511', name: "tabpanels" })));
-    }
-    static get is() { return "pds-tabs"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-tabs.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-tabs.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tablistLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the aria-label attached to the tablist element"
-                },
-                "attribute": "tablist-label",
-                "reflect": false
-            },
-            "componentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'availability' | 'filter'",
-                    "resolved": "\"availability\" | \"filter\" | \"primary\"",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets tabs variant styles as outlined in Figma documentation"
-                },
-                "attribute": "variant",
-                "reflect": false
-            },
-            "activeTabName": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the starting active tab name and maintains the name as the component re-renders"
-                },
-                "attribute": "active-tab-name",
-                "reflect": false
-            },
-            "activeTabIndex": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "active-tab-index",
-                "reflect": false
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "pdsTabClick",
-                "method": "tabClickHandler",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=pds-tabs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pds-tabs.js","sourceRoot":"","sources":["../../../src/components/pds-tabs/pds-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrl: 'pds-tabs.scss',\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,63 +0,0 @@
-import { html, render } from 'lit';
-import { withActions } from '@storybook/addon-actions/decorator';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-tabs'),
-  component: 'pds-tabs',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['pdsTabClick', 'keydown']
-    },
-  },
-  title: 'components/Tabs',
-}
-
-const BaseTemplate = (args) => html`
-<pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
-  <pds-tab name="Sturdy">Sturdy</pds-tab>
-  <pds-tab name="Dollop">Dollop</pds-tab>
-  <pds-tab name="Waffle">Waffle</pds-tab>
-  <pds-tabpanel name="Sturdy">Content Sturdy</pds-tabpanel>
-  <pds-tabpanel name="Dollop">Content Dollop</pds-tabpanel>
-  <pds-tabpanel name="Waffle">Content Waffle</pds-tabpanel>
-</pds-tabs>
-`;
-
-const AvailabilityTemplate = (args) => html`
-<div style="background-color: #ddd; padding: 20px;">
-  <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
-    <pds-tab name="monday">Monday</pds-tab>
-    <pds-tab name="tuesday">Tuesday</pds-tab>
-    <pds-tab name="wednesday">Wednesday</pds-tab>
-    <pds-tabpanel name="tuesday">Content Tuesday</pds-tabpanel>
-    <pds-tabpanel name="wednesday">Content Wednesday</pds-tabpanel>
-    <pds-tabpanel name="monday">Content Monday</pds-tabpanel>
-  </pds-tabs>
-</div>
-`;
-
-export const Primary = BaseTemplate.bind({});
-Primary.args = {
-  activeTabName: "Dollop",
-  componentId: "primary",
-  variant: "primary",
-  tablistLabel: "Foo",
-}
-
-export const Availability = AvailabilityTemplate.bind({});
-Availability.args = {
-  activeTabName: "tuesday",
-  componentId: "availability",
-  variant: 'availability',
-  tablistLabel: "Foo",
-}
-
-export const Filter = BaseTemplate.bind({});
-Filter.args = {
-  activeTabName: "Sturdy",
-  componentId: "filter",
-  variant: 'filter',
-  tablistLabel: "Foo",
-}

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

@@ -1,88 +0,0 @@
-:host {
-  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --box-shadow-focus: 0 0 0 2px var(--color-focus-visible-outline);
-  --box-shadow-focus-error: 0 0 0 2px var(--color-focus-visible-outline-error);
-  --color: var(--pine-color-charcoal-400);
-  --color-background: var(--pine-color-white);
-  --color-background-disabled: var(--pine-color-grey-200);
-  --color-border-default: var(--pine-color-grey-400);
-  --color-border-error: var(--pine-color-red-300);
-  --color-border-focus-visible: var(--pine-color-grey-300);
-  --color-border-hover: var(--pine-color-grey-500);
-  --color-disabled-default: var(--pine-color-charcoal-200);
-  --color-error-default: var(--pine-color-red-300);
-  --color-focus-visible-outline: var(--pine-color-blue-200);
-  --color-focus-visible-outline-error: var(--pine-color-red-200);
-  --color-placeholder-default: var(--pine-color-charcoal-200);
-  --font-size-field: var(--pine-font-size-100);
-  --font-size-helper-message: var(--pine-font-size-075);
-  --font-size-label: var(--pine-font-size-100);
-  --font-weight-field: var(--pine-font-weight-normal);
-  --font-weight-helper-message: var(--pine-font-weight-normal);
-  --font-weight-label: var(--pine-font-weight-medium);
-  --line-height-field: var(--pine-line-height-150);
-  --line-height-helper-message: var(--pine-line-height-125);
-  --line-height-label: var(--pine-line-height-150);
-  --spacing-margin-block-end-label: var(--pine-spacing-100);
-  --spacing-margin-block-start-helper-message: var(--pine-spacing-100);
-  --spacing-padding-block-field: var(--pine-spacing-100);
-  --spacing-padding-inline-field: var(--pine-spacing-200);
-  display: inline;
-}
-
-.pds-textarea {
-  display: flex;
-  flex-direction: column;
-}
-
-label {
-  display: block;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-label);
-  line-height: var(--line-height-label);
-  margin-block-end: var(--spacing-margin-block-end-label);
-}
-
-.pds-textarea__field {
-  background-color: var(--color-background);
-  border: var(--pine-border-interactive-default);
-  border-radius: var(--pine-border-radius-md);
-  font-family: inherit;
-  font-size: var(--font-size-field);
-  font-weight: var(--font-weight-field);
-  line-height: var(--line-height-field);
-  padding: var(--spacing-padding-block-field) var(--spacing-padding-inline-field);
-}
-.pds-textarea__field:hover:not(:disabled, .is-invalid) {
-  border-color: var(--color-border-hover);
-}
-.pds-textarea__field:disabled {
-  background-color: var(--color-background-disabled);
-  color: var(--color-disabled-default);
-  cursor: not-allowed;
-}
-.pds-textarea__field:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-.pds-textarea__field::placeholder {
-  color: var(--color-placeholder-default);
-}
-.pds-textarea__field.is-invalid {
-  border-color: var(--color-border-error);
-}
-.pds-textarea__field.is-invalid:focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-}
-
-.pds-textarea__error-message,
-.pds-textarea__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-start: var(--spacing-margin-block-start-helper-message);
-}
-
-.pds-textarea__error-message {
-  color: var(--color-error-default);
-}