@salesforcedevs/dx-components 0.10.0 → 0.10.1-alpha.100

package/src/modules/dx/tabPanel/tabPanel.ts

@@ -1,27 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-export default class TabPanel extends LightningElement {
-    @api index!: number;
-    @api groupId!: string;
-    @api active: boolean = false;
-
-    private get tabId() {
-        return `tabs--${this.groupId}--tab--${this.index}`;
-    }
-
-    private get panelId() {
-        return `tabs--${this.groupId}--panel--${this.index}`;
-    }
-
-    private get activeTabIndex() {
-        return this.active ? 0 : -1;
-    }
-
-    private get className() {
-        return cx("tabpanel", this.active && "tabpanel-active");
-    }
-
-    private get panelHidden() {
-        return !this.active;
-    }
-}

package/src/modules/dx/tabs/__tests__/mockProps.ts

@@ -1,3 +0,0 @@
-export default {
-    tabs: [{ label: "Tab 1" }, { label: "Tab 2" }]
-};

package/src/modules/dx/tabs/__tests__/tabs.test.ts

@@ -1,47 +0,0 @@
-import Tabs from "dx/tabs";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-tabs";
-const render = createRenderComponent(TAG, Tabs);
-
-describe(TAG, () => {
-    it("renders the container div", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelector("div");
-        expect(tabs).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders all tabs with correct active property", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(true);
-        expect(tabs[1].active).toEqual(false);
-        expect(tabs.length).toEqual(mockProps.tabs.length);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders with the initial index visible", () => {
-        const component = render({ ...mockProps, initialIndex: 1 });
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(false);
-        expect(tabs[1].active).toEqual(true);
-        expect(tabs.length).toEqual(mockProps.tabs.length);
-        return expect(component).toBeAccessible();
-    });
-
-    it("changes active property on click", () => {
-        const component = render(mockProps);
-        const tabs = component.shadowRoot.querySelectorAll("dx-tab");
-        expect(tabs[0].active).toEqual(true);
-        expect(tabs[1].active).toEqual(false);
-        const mockChange = jest.fn();
-        component.addEventListener("change", mockChange);
-        tabs[1].dispatchEvent(new CustomEvent("select", { detail: 1 }));
-
-        expect(mockChange).toHaveBeenCalledTimes(1);
-        expect(mockChange.mock.calls[0][0].detail).toEqual(1);
-        return expect(component).toBeAccessible();
-    });
-});

package/src/modules/dx/tabs/tabs.css

@@ -1,7 +0,0 @@
-dx-tab {
-    margin-right: var(--dx-g-spacing-md);
-}
-
-dx-tab:last-of-type {
-    margin-right: 0;
-}

package/src/modules/dx/tabs/tabs.html

@@ -1,21 +0,0 @@
-<template>
-    <div>
-        <div role="tablist" part="tablist">
-            <template for:each={tabs} for:item="tab">
-                <dx-tab
-                    key={tab.index}
-                    onselect={onTabClick}
-                    group-id={groupId}
-                    index={tab.index}
-                    active={tab.active}
-                    small={tab.small}
-                >
-                    {tab.label}
-                </dx-tab>
-            </template>
-        </div>
-        <div part="tabpanels">
-            <slot onslotchange={onSlotChange}></slot>
-        </div>
-    </div>
-</template>

package/src/modules/dx/tabs/tabs.stories.ts

@@ -1,74 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-tabs",
-    component: "dx-tabs"
-};
-
-const tabsGen = (options = {}) => [
-    { label: "Label 1", ...options },
-    { label: "Label 2", ...options },
-    { label: "Label 3", ...options }
-];
-const tabs = JSON.stringify(tabsGen());
-const smallTabs = JSON.stringify(tabsGen({ small: true }));
-
-// prettier-ignore
-export const Base = () => html `
-    <dx-tabs tabs='${tabs}'>
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>
-
-    <br/>
-
-    <dx-tabs
-        tabs='${tabs}'
-        initial-index=2
-    >
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>
-
-    <br/>
-
-    <dx-tabs tabs='${smallTabs}'>
-        <dx-tab-panel>
-            <h3>Title 1</h3>
-            <p>Content 1</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 2</h3>
-            <p>Content 2</p>
-        </dx-tab-panel>
-
-        <dx-tab-panel>
-            <h3>Title 3</h3>
-            <p>Content 3</p>
-        </dx-tab-panel>
-    </dx-tabs>`;

package/src/modules/dx/tabs/tabs.ts

@@ -1,112 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { LightningSlotElement, Tab } from "typings/custom";
-import { toJson } from "utils/normalizers";
-import { uniqueId } from "./uniqueId";
-export default class Tabs extends LightningElement {
-    @api
-    get initialIndex() {
-        return +this._initialIndex;
-    }
-    set initialIndex(value) {
-        this._initialIndex = +value;
-    }
-
-    @api
-    get tabs() {
-        return this._tabs.map((tab: Tab, index) => ({
-            ...tab,
-            index,
-            groupId: this.groupId,
-            active: this.activeIndex === index
-        }));
-    }
-    set tabs(value: Tab[]) {
-        this._tabs = toJson(value);
-    }
-
-    private _initialIndex: number = 0;
-    private _tabs: Tab[] = [];
-    private _activeIndex?: number;
-    private groupId: string = uniqueId();
-    private tabSlotPanels?: LightningSlotElement;
-
-    private get tabElements() {
-        return this.template.querySelectorAll("dx-tab");
-    }
-
-    private get activeIndex() {
-        return this._activeIndex == null
-            ? this.initialIndex
-            : this._activeIndex;
-    }
-
-    private set activeIndex(value: number) {
-        this._activeIndex = value;
-        this.updateTabs();
-    }
-
-    connectedCallback() {
-        this.addListeners();
-    }
-
-    disconnectedCallback() {
-        this.removeListeners();
-    }
-
-    private onTabClick(e: CustomEvent) {
-        if (e.detail !== this.activeIndex) {
-            this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
-        }
-        this.activeIndex = e.detail;
-    }
-
-    private onSlotChange(e: Event) {
-        this.tabSlotPanels = <LightningSlotElement>e.target;
-        this.updateTabs();
-    }
-
-    private updateTabs() {
-        if (this.tabSlotPanels) {
-            this.tabSlotPanels.assignedElements().forEach((tabPanel, index) => {
-                tabPanel.index = index;
-                tabPanel.groupId = this.groupId;
-                tabPanel.active = this.activeIndex === index;
-            });
-        }
-        this.tabElements.forEach((tab, index) => {
-            tab.active = this.activeIndex === index;
-        });
-    }
-
-    private focusActiveTab() {
-        this.tabElements[this.activeIndex].focus();
-    }
-
-    private onKeydown = (e: KeyboardEvent) => {
-        switch (e.key) {
-            case "ArrowLeft": {
-                e.preventDefault();
-                const prev = this.activeIndex - 1;
-                this.activeIndex = prev < 0 ? this.tabs.length - 1 : prev;
-                this.focusActiveTab();
-                break;
-            }
-            case "ArrowRight": {
-                e.preventDefault();
-                const next = this.activeIndex + 1;
-                this.activeIndex = next === this.tabs.length ? 0 : next;
-                this.focusActiveTab();
-                break;
-            }
-            default:
-        }
-    };
-
-    private addListeners() {
-        this.template.addEventListener("keydown", this.onKeydown);
-    }
-
-    private removeListeners() {
-        this.template.removeEventListener("keydown", this.onKeydown);
-    }
-}

package/src/modules/dx/tabs/uniqueId.ts

@@ -1,6 +0,0 @@
-let idCounter = 0;
-
-export const uniqueId = (prefix: string = "") => {
-    const id = ++idCounter;
-    return prefix + id;
-};