@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,154 @@
+import { Host, h } from "@stencil/core";
+export class PdsTab {
+    constructor() {
+        this.name = undefined;
+        this.parentComponentId = undefined;
+        this.variant = undefined;
+        this.index = undefined;
+        this.selected = false;
+    }
+    onTabClick(index, parentComponentId) {
+        this.pdsTabClick.emit([index, parentComponentId]);
+    }
+    render() {
+        const availabilityTabEdgeInlineStart = (h("span", { class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { variant: this.variant, slot: "tabs", index: this.index }, h("button", { role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { class: "pds-tab__content" }, h("slot", null)))));
+    }
+    static get is() { return "pds-tab"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "parentComponentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "parent-component-id",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "index",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsTabClick",
+                "name": "pdsTabClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "object",
+                    "resolved": "object",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-tab.js","sourceRoot":"","sources":["../../../../../src/components/pds-tabs/pds-tab/pds-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,MAAM;;;;;;wBA8BE,KAAK;;IAOhB,UAAU,CAAC,KAAK,EAAE,iBAAiB;QACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,8BAA8B,GAAG,CACrC,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,CACvD,CAAA;QAED,MAAM,4BAA4B,GAAG,CACnC,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,GAAQ,CACzE,CAAA;QAED,OAAO,CACL,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;YACxD,cACE,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,mBAC9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,mBACrB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B;gBACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B;gBAChE,WAAK,KAAK,EAAC,kBAAkB;oBAAC,eAAO,CAAM,CACpC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.selected ? \"0\" : \"-1\"}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+
+.pds-tabpanel {
+  display: none;
+  margin-top: var(--panel-margin-top);
+  padding: var(--panel-padding);
+}
+.pds-tabpanel.is-active {
+  display: block;
+}

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

@@ -0,0 +1,107 @@
+import { Host, h } from "@stencil/core";
+export class PdsTabpanel {
+    constructor() {
+        this.name = undefined;
+        this.parentComponentId = undefined;
+        this.variant = undefined;
+        this.selected = false;
+    }
+    render() {
+        return (h(Host, { slot: "tabpanels" }, h("div", { role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", null))));
+    }
+    static get is() { return "pds-tabpanel"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-tabpanel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-tabpanel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the related tab name, this name must match a `pds-tab`'s tab name property"
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "parentComponentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "parent-component-id",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-tabpanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-tabpanel.js","sourceRoot":"","sources":["../../../../../src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;;;;;wBAwBY,KAAK;;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,WAAW;YACpB,WACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACxD,QAAQ,EAAC,GAAG,qBACK,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC1D,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc;gBAEhE,eAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tabpanel',\n  styleUrl: 'pds-tabpanel.scss',\n  shadow: false,\n})\nexport class PdsTabpanel {\n  @Element() el: HTMLPdsTabpanelElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tab`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop({mutable: true}) selected = false;          // eslint-disable-line @stencil-community/strict-mutable\n\n  render() {\n    return (\n      <Host slot=\"tabpanels\">\n        <div\n          role=\"tabpanel\"\n          id={this.parentComponentId + \"__\" + this.name + '-panel'}\n          tabindex=\"0\"\n          aria-labelledby={this.parentComponentId + \"__\" + this.name}\n          class={this.selected ? \"pds-tabpanel is-active\" : \"pds-tabpanel\"}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+:host {
+  /**
+   * @prop --panel-margin-top: Optional margin-top for panels
+   */
+  --panel-margin-top: 0;
+  /**
+   * @prop --panel-padding: Optional padding for panels
+   */
+  --panel-padding: 0;
+  --gap-md: var(--pine-spacing-md);
+  --gap-xs: var(--pine-spacing-xs);
+  --gap-sm: 16px var(--pine-spacing-sm);
+  --outline: 2px solid var(--pine-color-primary-200);
+  display: block;
+}
+
+*:focus {
+  outline: var(--outline);
+}
+
+.pds-tabs__tablist {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap-md);
+}
+
+:host(.pds-tabs--availability) .pds-tabs__tablist {
+  gap: var(--gap-xs);
+}
+
+:host(.pds-tabs--filter) .pds-tabs__tablist {
+  gap: var(--gap-sm);
+}

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

@@ -0,0 +1,209 @@
+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, { "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { name: "tabs" })), h("slot", { 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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-tabs.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAExE;;;EAGC;AAMH,MAAM,OAAO,OAAO;;;;;;;;IAmClB,eAAe,CAAC,KAAuB;QACrC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC;SAC1D;IACH,CAAC;IAGD,aAAa,CAAC,EAAiB;QAC7B,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAE1D,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;SAC5B;IACH,CAAC;IAEO,aAAa,CAAC,GAAW;QAC/B,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3C,IAAI,WAAW,GAAG,IAAI,CAAC;QAEvB,QAAQ,GAAG,EAAE;YACX,KAAK,WAAW;gBACd,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtG,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,aAAa,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;gBACnG,MAAM;YACR,KAAK,MAAM;gBACT,WAAW,GAAG,cAAc,CAAC;gBAC7B,MAAM;YACR,KAAK,KAAK;gBACR,WAAW,GAAG,aAAa,CAAC;gBAC5B,MAAM;SACT;QAED,oDAAoD;QACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC;QACjD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;IACpC,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC5D,CAAC;IAEO,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC;QACrC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;QACtD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxC,KAAK,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACpE,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;IACzB,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACjC,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI;gBAAE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,UAAU;QAChB,IAAI,SAAS,GAAG,UAAU,CAAC;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;YAC7C,MAAM,gBAAgB,GAAG,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC;YACrD,SAAS,IAAI,GAAG,GAAG,gBAAgB,CAAC;SACrC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;IAAA,CAAC;IAEF,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uBAAkB,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YACvF,WAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,YAAY;gBACzE,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB;YACN,YAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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

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