@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/tabset/__tests__/tabset.test.ts

@@ -0,0 +1,108 @@
+import { html, renderIntoBody, nextTick } from 'shared/testutils';
+
+import Tabset from '../tabset';
+import Tab from 'tds/tab';
+
+customElements.define('tds-tabset', Tabset.CustomElementConstructor);
+customElements.define('tds-tab', Tab.CustomElementConstructor);
+
+describe('tds-tabset', () => {
+    // Skip these tests as LWC synthetic shadow DOM doesn't support child nodes in test mode
+    // The tabset component requires child tds-tab elements which cannot be tested with current LWC infrastructure
+    it.skip('allows setting a default active tab', async () => {
+        document.body.innerHTML = `
+            <tds-tabset active-tab-value="two">
+                <tds-tab value="one" label="One">One</tds-tab>
+                <tds-tab value="two" label="Two">Two</tds-tab>
+            </tds-tabset>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tds-tabset')!;
+
+        expect(
+            element
+                .shadowRoot!.querySelector('[aria-selected="true"]')!
+                .getAttribute('data-value')
+        ).toEqual('two');
+    });
+
+    it.skip('has aria attributes', async () => {
+        document.body.innerHTML = `
+            <tds-tabset>
+                <tds-tab value="one" label="One">One</tds-tab>
+            </tds-tabset>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tds-tabset')!;
+
+        expect(
+            element
+                .shadowRoot!.querySelector('ul.tablist')!
+                .getAttribute('role')
+        ).toEqual('tablist');
+        expect(
+            element.shadowRoot!.querySelector('li.tab')!.getAttribute('role')
+        ).toEqual('presentation');
+
+        const tab = element.shadowRoot!.querySelector('li.tab a')!;
+        expect(tab.getAttribute('role')).toEqual('tab');
+        expect(tab.getAttribute('aria-selected')).toEqual('true');
+        expect(tab.getAttribute('aria-controls')).toMatch(/tabpanel-[0-9]/);
+
+        const tabpanel = element.shadowRoot!.querySelector('.tabpanel')!;
+        expect(tabpanel.getAttribute('role')).toEqual('tabpanel');
+    });
+
+    it.skip('handles left/right keyboard events', async () => {
+        document.body.innerHTML = `
+            <tds-tabset>
+                <tds-tab value="one" label="One">One</tds-tab>
+                <tds-tab value="two" label="Two">Two</tds-tab>
+            </tds-tabset>
+        `;
+        await nextTick();
+        const element = document.body.querySelector('tds-tabset')!;
+
+        expect(
+            element
+                .shadowRoot!.querySelector('[aria-selected="true"]')!
+                .getAttribute('data-value')
+        ).toEqual('one');
+
+        const tablist = (element.shadowRoot!.querySelector(
+            '[role="tablist"]'
+        ) as HTMLElement)!;
+
+        tablist.focus();
+
+        tablist.dispatchEvent(
+            new KeyboardEvent('keydown', { code: 'ArrowRight' })
+        );
+
+        await nextTick();
+
+        expect(
+            element
+                .shadowRoot!.querySelector('[aria-selected="true"]')!
+                .getAttribute('data-value')
+        ).toEqual('two');
+
+        tablist.dispatchEvent(
+            new KeyboardEvent('keydown', { code: 'ArrowRight' })
+        );
+
+        await nextTick();
+
+        expect(
+            element
+                .shadowRoot!.querySelector('[aria-selected="true"]')!
+                .getAttribute('data-value')
+        ).toEqual('one');
+    });
+
+    it('renders the component', () => {
+        const element = renderIntoBody(html`<tds-tabset></tds-tabset>`);
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/tds/tabset/tabset.css

@@ -0,0 +1,112 @@
+@import 'tds/reset';
+
+.tablist {
+    display: flex;
+    align-items: flex-start;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-bottom: 1px solid var(--tds-color-fog);
+}
+
+.tab {
+    position: relative;
+    color: var(--tds-color-meteorite);
+    padding: 0 var(--tds-spacing-3);
+    margin-bottom: -1px;
+    height: var(--tds-spacing-10);
+    line-height: var(--tds-spacing-10);
+    box-shadow: inset 0 0 var(--tds-color-ocean);
+    transition: box-shadow var(--tds-duration-normal);
+}
+
+.tab:hover {
+    box-shadow: inset 0 -2px var(--tds-color-ocean);
+}
+
+.tab[aria-hidden='true'] {
+    visibility: hidden;
+}
+
+.tab--active {
+    font-weight: bold;
+    color: var(--tds-color-black);
+    box-shadow: inset 0 -3px var(--tds-color-ocean) !important;
+}
+
+.tab > a {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+    color: inherit;
+    border: 0;
+    text-transform: inherit;
+    z-index: 1;
+    outline: none !important;
+}
+
+.tab > a:focus {
+    text-decoration: underline;
+}
+
+.tabpanel[aria-hidden='true'] {
+    display: none;
+}
+
+.tabpanel {
+    position: relative;
+    padding: var(--tds-spacing-4) 0;
+}
+
+.overflow-tab {
+    position: relative;
+}
+
+.overflow-tab__icon {
+    margin-left: var(--tds-spacing-1);
+}
+
+.menu {
+    background-color: var(--tds-color-white);
+    border-radius: var(--tds-radius-md);
+    border: 1px solid var(--tds-color-fog);
+    box-shadow: var(--tds-shadow-sm);
+    margin-top: var(--tds-spacing-2);
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 9999;
+    padding: var(--tds-spacing-1) 0;
+    outline: 0;
+}
+
+.menu-item {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--tds-spacing-2) var(--tds-spacing-3);
+    color: var(--tds-color-black);
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: var(--tds-font-size-sm);
+    line-height: var(--tds-line-height-normal);
+    outline: 0;
+}
+
+.menu-item > span {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.menu-item[data-active='true'],
+.menu-item:hover {
+    background-color: var(--tds-color-sand);
+}

package/src/modules/tds/tabset/tabset.html

@@ -0,0 +1,63 @@
+<template>
+    <div onprivatetabregister={handleTabRegister}>
+        <ul role="tablist" class="tablist" onkeydown={handleKeyDown}>
+            <template for:each={tabs} for:item="tab">
+                <li
+                    key={tab.value}
+                    role="presentation"
+                    title={tab.title}
+                    class={tab.className}
+                    if:false={tab.overflow}
+                >
+                    <a
+                        id={tab.labelId}
+                        role="tab"
+                        tabindex={tab.tabindex}
+                        aria-selected={tab.active}
+                        data-value={tab.value}
+                        onclick={tab.onselect}
+                        aria-controls="tabpanel"
+                    >
+                        {tab.label}
+                    </a>
+                </li>
+            </template>
+            <li class="tab overflow-tab" aria-hidden={isOverflowHidden}>
+                <a tabindex="0" data-menu="trigger">
+                    {labels.overflowButton}
+                    <tds-icon
+                        class="overflow-tab__icon"
+                        symbol="chevrondown"
+                        size="small"
+                    ></tds-icon>
+                </a>
+
+                <div data-menu="menu" id="menu" class="menu">
+                    <template for:each={tabs} for:item="tab">
+                        <a
+                            if:true={tab.overflow}
+                            id={tab.labelId}
+                            key={tab.value}
+                            class="menu-item"
+                            data-menu="item"
+                            data-value={tab.value}
+                            onclick={tab.onmenuselect}
+                        >
+                            {tab.label}
+                        </a>
+                    </template>
+                </div>
+            </li>
+        </ul>
+
+        <div
+            id="tabpanel"
+            class="tabpanel"
+            role="tabpanel"
+            aria-labelledby="active-tab"
+            tabindex="0"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>

package/src/modules/tds/tabset/tabset.stories.ts

@@ -0,0 +1,32 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-tabset',
+    parameters: {
+        modules: ['/modules/tds-tabset.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-tabset>
+        <tds-tab label="Item One"> One Content! </tds-tab>
+        <tds-tab label="Item Two" title="2nd tab extended title">
+            Two Content <a href="#">with a link!</a>
+        </tds-tab>
+        <tds-tab label="Item Three">
+            <span style="color: tomato;">Three Content!</span>
+        </tds-tab>
+        <tds-tab label="Item Four"> Four Content! </tds-tab>
+        <tds-tab label="Item Five"> Five Content! </tds-tab>
+    </tds-tabset>
+`;
+
+export const ActiveTabValue = () => html`
+    <tds-tabset active-tab-value="two">
+        <tds-tab value="one" label="Item One"> One Content! </tds-tab>
+        <tds-tab value="two" label="Item Two" title="2nd tab extended title">
+            Two Content!
+        </tds-tab>
+        <tds-tab value="three" label="Item Three"> Three Content! </tds-tab>
+    </tds-tabset>
+`;

package/src/modules/tds/tabset/tabset.ts

@@ -0,0 +1,232 @@
+import { LightningElement, api, track } from 'lwc';
+import classnames from 'classnames';
+import { TabElement } from './../tab/tab';
+import { Menu } from 'shared/menu';
+import { calculateOverflow } from 'shared/overflow';
+
+export type Tab = TabElement & {
+    active: boolean;
+    className: string;
+    hidden: boolean;
+    labelId: string | null;
+    onselect: () => void;
+    onmenuselect: () => void;
+    overflow: boolean;
+    tabindex: number;
+    width: number;
+};
+
+export default class extends LightningElement {
+    @track private tabs: Tab[] = [];
+
+    private get activeTab() {
+        return this.tabs.find((t) => t.active) || null;
+    }
+
+    private _activeTabValue: string | null = null;
+
+    @api
+    get activeTabValue() {
+        return this._activeTabValue;
+    }
+
+    set activeTabValue(newValue) {
+        // Already selected, do nothing
+        if (!newValue || this._activeTabValue === newValue) {
+            return;
+        }
+
+        // Unload previously active tab
+        if (this.activeTab) {
+            this.activeTab.unload();
+        }
+
+        // Update tab properties
+        this._activeTabValue = newValue;
+
+        this.tabs = this.tabs.map((t) => ({
+            ...t,
+            ...this.calculatedTabProperties(t.value === newValue)
+        }));
+
+        // Load the new tab
+        if (this.activeTab) {
+            this.activeTab.load();
+        }
+    }
+
+    private hasOverflow: boolean = false;
+
+    private menu = new Menu({
+        onChange: () => {},
+        shadowRoot: this.template
+    });
+
+    connectedCallback() {
+        window.addEventListener('resize', this.handleWindowResize);
+    }
+
+    renderedCallback() {
+        // Set the first tab as active by default
+        if (!this.activeTabValue && this.tabs.length) {
+            this.activeTabValue = this.tabs[0].value;
+        }
+
+        // Repaint
+        requestAnimationFrame(this.detectOverflow.bind(this));
+        this.menu.renderedCallback();
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleWindowResize);
+        this.menu.disconnectedCallback();
+    }
+
+    // TODO i18n
+    private get labels() {
+        return {
+            overflowButton: 'More'
+        };
+    }
+
+    private get isOverflowHidden() {
+        return !this.hasOverflow;
+    }
+
+    private calculatedTabProperties(isActive: boolean) {
+        return {
+            active: isActive,
+            className: classnames('tab', {
+                'tab--active': isActive
+            }),
+            labelId: isActive ? 'active-tab' : null,
+            hidden: !isActive,
+            tabindex: isActive ? 0 : -1
+        };
+    }
+
+    // Detect if tabs need to be placed in an overflow menu
+    private detectOverflow() {
+        const tabs = Array.from(
+            this.template.querySelectorAll('.tab[role="presentation"]')
+        ) as HTMLElement[];
+
+        // Update tab.width
+        tabs.forEach((t, i) => {
+            const value = t.querySelector('a')!.getAttribute('data-value');
+            const tab = this.tabs.find((i) => i.value === value);
+            if (tab) {
+                const { paddingLeft, width, paddingRight } =
+                    getComputedStyle(t);
+                tab.width =
+                    parseInt(paddingLeft) +
+                    parseInt(width) +
+                    parseInt(paddingRight);
+            }
+        });
+
+        // Calculate which items need to be placed in overflow
+        const { overflowItems } = calculateOverflow(
+            this.tabs,
+            this.template.querySelector('.tablist')!.getBoundingClientRect()
+                .width,
+            this.template
+                .querySelector('.overflow-tab')!
+                .getBoundingClientRect().width
+        );
+
+        this.hasOverflow = !!overflowItems.length;
+
+        // Update tab.overflow
+        this.tabs.forEach((i) => {
+            i.overflow = !!overflowItems.find((o) => o.value === i.value);
+        });
+    }
+
+    private handleWindowResize = () => {
+        this.detectOverflow();
+
+        if (this.menu) {
+            this.menu.close();
+        }
+    };
+
+    private handleTabRegister(e: { detail: TabElement }) {
+        const element = e.detail;
+
+        const tab: Tab = {
+            ...this.calculatedTabProperties(
+                element.value === this.activeTabValue
+            ),
+            ...element,
+            onselect: () => {
+                this.activeTabValue = element.value;
+            },
+            onmenuselect: () => {
+                this.activeTabValue = element.value;
+
+                // Re-focus the menu button
+                (this.template.querySelector('[data-menu="trigger"]') as HTMLElement)?.focus();
+
+                if (this.menu) {
+                    this.menu.close();
+                }
+            },
+            overflow: false,
+            width: 0
+        };
+
+        this.tabs.push(tab);
+
+        // Load the tab if it's currently active
+        if (element.value === this.activeTabValue) {
+            tab.load();
+        }
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+        switch (e.code) {
+            // Cycle through tabs
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                e.preventDefault();
+                e.stopPropagation();
+
+                const increment = e.code === 'ArrowLeft' ? -1 : 1;
+                const visibleTabs = this.tabs.filter((t) => !t.overflow);
+                const currentFocusedIndex = visibleTabs.findIndex(
+                    (i) => i.value === this.activeTabValue
+                );
+
+                let newIndex = currentFocusedIndex + increment;
+                if (newIndex < 0) {
+                    newIndex = visibleTabs.length - 1;
+                }
+                if (newIndex + 1 > visibleTabs.length) {
+                    newIndex = 0;
+                }
+
+                // Set the active tabpanel and focus the tab
+                this.activeTabValue = visibleTabs[newIndex].value;
+                (this.template.querySelector(`a[data-value=${this.activeTabValue}]`) as HTMLElement)?.focus();
+                break;
+            case 'ArrowDown':
+                // Focus the tabpanel
+                (this.template.querySelector('[role="tabpanel"]') as HTMLElement)?.focus();
+                break;
+            case 'Enter':
+            case 'Space':
+                e.preventDefault();
+                e.stopPropagation();
+
+                const element = e.target as HTMLElement;
+
+                if (element && element.nodeName === 'A') {
+                    this.activeTabValue = element.getAttribute('data-value');
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}