@salesforcedevs/arch-components 1.20.17-alpha3 → 1.20.17-alpha5

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

@@ -1,108 +0,0 @@
-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

@@ -1,112 +0,0 @@
-@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

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

@@ -1,32 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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;
-        }
-    }
-}