@salesforcedevs/arch-components 1.20.17-alpha4 → 1.20.17-alpha6

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

@@ -1,135 +0,0 @@
-import { html, render, renderIntoBody, nextTick } from 'shared/testutils';
-
-import Summary from '../summary';
-
-customElements.define('tds-summary', Summary.CustomElementConstructor);
-
-describe('tds-content-brick', () => {
-    describe('compact (string)', () => {
-        it('shows the description ', () => {
-            const element = renderIntoBody(html`
-                <tds-summary description="Hello"></tds-summary>
-            `);
-            expect(element.shadowRoot!.innerHTML).toContain('Hello');
-        });
-        it('hides the description (string)', () => {
-            const element = renderIntoBody(html`
-                <tds-summary compact description="Hello"></tds-summary>
-            `);
-            expect(element.shadowRoot!.innerHTML).not.toContain('Hello');
-        });
-    });
-    describe('compact (bool)', () => {
-        it('shows the description (string)', () => {
-            const element = renderIntoBody(html`
-                <tds-summary
-                    .compact=${false}
-                    description="Hello"
-                ></tds-summary>
-            `);
-            expect(element.shadowRoot!.innerHTML).toContain('Hello');
-        });
-        it('hides the description (bool)', () => {
-            const element = renderIntoBody(html`
-                <tds-summary .compact=${true} description="Hello"></tds-summary>
-            `);
-            expect(element.shadowRoot!.innerHTML).not.toContain('Hello');
-        });
-    });
-    // Skip this test as LWC in test mode doesn't support dynamic slot content with conditional rendering
-    it.skip('hides the header if no slots are filled', async () => {
-        const template = ({ showImage, showAction }: any = {}) => html`
-            <tds-summary>
-                ${showImage ? html` <img slot="image" /> ` : null}
-                ${showAction ? html` <button slot="action" /> ` : null}
-            </tds-summary>
-        `;
-        const element = renderIntoBody(template());
-        const header = element.shadowRoot!.querySelector('.header');
-        const isHidden = () =>
-            header!.matches(
-                '.summary:not([data-slots*="image"]):not([data-slots*="action"]) .header'
-            );
-        expect(isHidden()).toBe(true);
-        render(template({ showImage: true }), element.parentElement!);
-        await nextTick();
-        expect(isHidden()).toBe(false);
-        render(template({ showAction: true }), element.parentElement!);
-        await nextTick();
-        expect(isHidden()).toBe(false);
-    });
-    it.skip('hides the footer if no slots are filled', async () => {
-        const template = ({ showMetaLeft, showMetaRight }: any = {}) => html`
-            <tds-summary>
-                ${showMetaLeft ? html` <span slot="meta-left" /> ` : null}
-                ${showMetaRight ? html` <span slot="meta-right" /> ` : null}
-            </tds-summary>
-        `;
-        const element = renderIntoBody(template());
-        const footer = element.shadowRoot!.querySelector('.footer');
-        const isHidden = () =>
-            footer!.matches('.summary:not([data-slots*="meta"]) .footer');
-        expect(isHidden()).toBe(true);
-        render(template({ showMetaLeft: true }), element.parentElement!);
-        await nextTick();
-        expect(isHidden()).toBe(false);
-        render(template({ showMetaRight: true }), element.parentElement!);
-        await nextTick();
-        expect(isHidden()).toBe(false);
-    });
-    describe('titleMode', () => {
-        describe('anchor', () => {
-            it('renders the correct element', () => {
-                const element = renderIntoBody(html`
-                    <tds-summary
-                        description="Hello"
-                        path="/"
-                        title-mode="anchor"
-                    ></tds-summary>
-                `);
-                expect(
-                    element.shadowRoot!.querySelector('.title')!.tagName
-                ).toBe('A');
-            });
-            it('renders a button if no path is specified', () => {
-                const element = renderIntoBody(
-                    html`
-                        <tds-summary
-                            title="Hello"
-                            title-mode="anchor"
-                        ></tds-summary>
-                    `
-                );
-                expect(
-                    element.shadowRoot!.querySelector('.title')!.tagName
-                ).toBe('BUTTON');
-            });
-        });
-        describe('button', () => {
-            it('renders the correct element', () => {
-                const element = renderIntoBody(html`
-                    <tds-summary
-                        description="Hello"
-                        title-mode="button"
-                    ></tds-summary>
-                `);
-                expect(
-                    element.shadowRoot!.querySelector('.title')!.tagName
-                ).toBe('BUTTON');
-            });
-        });
-        describe('text', () => {
-            it('renders the correct element', () => {
-                const element = renderIntoBody(html`
-                    <tds-summary
-                        description="Hello"
-                        title-mode="text"
-                    ></tds-summary>
-                `);
-                expect(
-                    element.shadowRoot!.querySelector('.title')!.tagName
-                ).toBe('SPAN');
-            });
-        });
-    });
-});

package/src/modules/tds/summary/summary.css

@@ -1,135 +0,0 @@
-@import 'tds/reset';
-
-.summary {
-    display: flex;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-}
-
-[data-display='brick'] {
-    flex-direction: row;
-}
-
-[data-display*='tile'] {
-    flex-direction: column;
-}
-
-.body,
-.footer {
-    flex-wrap: wrap;
-    margin-top: var(--tds-spacing-3);
-}
-
-.header {
-    align-items: flex-start;
-    display: flex;
-    justify-content: space-between;
-}
-
-.header__actions {
-    margin-bottom: -1.5rem;
-}
-
-.header__actions[data-alignment='start'] {
-    align-self: flex-start;
-}
-
-.header__actions[data-alignment='center'] {
-    align-self: flex-center;
-}
-
-.header__actions[data-alignment='end'] {
-    align-self: flex-end;
-}
-
-.summary:not([data-slots*='image']):not([data-slots*='action']) .header {
-    display: none;
-}
-
-.content {
-    display: flex;
-    flex: 1;
-}
-
-.content-start {
-    flex: 1;
-}
-
-.pretitle,
-.title,
-.description {
-    margin-top: var(--tds-spacing-1);
-}
-
-.pretitle {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-sm);
-}
-
-.pretitle a {
-    color: var(--tds-color-brand);
-    text-decoration: none;
-}
-
-.pretitle a:hover {
-    text-decoration: underline;
-}
-
-.title {
-    display: inline-block;
-    font-size: var(--title-font-size, var(--tds-font-size-lg));
-    font-weight: 600;
-    text-align: left;
-}
-
-.title--link {
-    appearance: none;
-    -webkit-appearance: none;
-    background: none;
-    border: none;
-    color: var(--tds-color-brand);
-    cursor: pointer;
-    text-decoration: none;
-}
-
-.title--link:hover {
-    text-decoration: underline;
-}
-
-.description {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-sm);
-}
-
-.footer {
-    display: flex;
-    font-size: var(--tds-font-size-sm);
-    justify-content: space-between;
-    align-items: center;
-}
-
-.summary:not([data-slots*='meta']) .footer {
-    display: none;
-}
-
-[data-display='brick'] .body {
-    flex: 1;
-    margin-top: 0;
-    margin-left: var(--tds-spacing-4);
-}
-
-[data-display='brick'] .body .content {
-    margin-top: 0;
-}
-
-@media screen and (min-width: 640px) {
-    [data-display^='brick-tile'] {
-        flex-direction: row;
-    }
-
-    [data-display^='brick-tile'] .body {
-        margin-left: var(--tds-spacing-4);
-        margin-top: 0;
-        flex: 1;
-    }
-}

package/src/modules/tds/summary/summary.html

@@ -1,69 +0,0 @@
-<template>
-    <div class="summary" data-display={displayMode}>
-        <div class="header">
-            <div class="image">
-                <slot name="image" onslotchange={onSlotChange}></slot>
-            </div>
-            <template if:true={isTile}>
-                <div data-alignment={actionsAlignment} class="header__actions">
-                    <slot name="action" onslotchange={onSlotChange}></slot>
-                </div>
-            </template>
-        </div>
-        <div class="body">
-            <div class="content">
-                <div class="content-start">
-                    <div class="pretitle">
-                        <slot name="pretitle" onslotchange={onSlotChange}>
-                            {pretitle}
-                            <a
-                                if:true={pretitleLinkHref}
-                                href={pretitleLinkHref}
-                                target={pretitleLinkTarget}
-                                >{pretitleLinkTitle}</a
-                            >
-                        </slot>
-                    </div>
-                    <tds-heading level={titleHeadingLevel}>
-                        <template if:true={titleIsAnchor}>
-                            <a
-                                class="title title--link"
-                                href={path}
-                                onclick={onTitleClick}
-                                target={pathTarget}
-                                >{title}</a
-                            >
-                        </template>
-                        <template if:true={titleIsButton}>
-                            <button
-                                class="title title--link"
-                                onclick={onTitleButtonClick}
-                            >
-                                {title}
-                            </button>
-                        </template>
-                        <template if:true={titleIsText}>
-                            <span class="title">{title}</span>
-                        </template>
-                    </tds-heading>
-                    <template if:true={showDescription}>
-                        <div class="description">{description}</div>
-                    </template>
-                </div>
-                <template if:false={isTile}>
-                    <div class="content-end">
-                        <slot name="action" onslotchange={onSlotChange}></slot>
-                    </div>
-                </template>
-            </div>
-            <div class="footer">
-                <div>
-                    <slot name="meta-left" onslotchange={onSlotChange}></slot>
-                </div>
-                <div>
-                    <slot name="meta-right" onslotchange={onSlotChange}></slot>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

package/src/modules/tds/summary/summary.stories.js

@@ -1,148 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-summary',
-    parameters: {
-        modules: ['/modules/tds-summary.js'],
-        chromatic: {
-            viewports: [400, 800, 1199]
-        }
-    }
-};
-
-export const Base = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        path="/"
-        pretitle="Pretitle by "
-        pretitle-link-href="/"
-        pretitle-link-title="Link"
-        title="Title"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-        ></tds-content-icon>
-        <button slot="action">Action</button>
-        <span slot="meta-left">Meta left</span>
-        <span slot="meta-right">Meta right</span>
-    </tds-summary>
-`;
-
-export const CustomPretitle = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        path="/"
-        title="Title"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-        ></tds-content-icon>
-        <div slot="pretitle">
-            Pretitle by <a href="#">Link</a> (custom content)
-        </div>
-        <button slot="action">Action</button>
-        <span slot="meta-left">Meta left</span>
-        <span slot="meta-right">Meta right</span>
-    </tds-summary>
-`;
-
-export const Brick = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        display-mode="brick"
-        path="/"
-        title="Title"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-            size="small"
-        ></tds-content-icon>
-
-        <div slot="pretitle">
-            Pretitle by <a href="#">Link</a> (custom content)
-        </div>
-        <button slot="action">Action</button>
-        <span slot="meta-left">Meta left</span>
-        <span slot="meta-right">Meta right</span>
-    </tds-summary>
-`;
-
-export const BrickTile = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        display-mode="brick-tile"
-        path="/"
-        title="Title"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-            size="small"
-        ></tds-content-icon>
-
-        <div slot="pretitle">
-            Pretitle by <a href="#">Link</a> (custom content)
-        </div>
-        <button slot="action">Action</button>
-        <span slot="meta-left">Meta left</span>
-        <span slot="meta-right">Meta right</span>
-    </tds-summary>
-`;
-
-export const BrickCompact = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        compact
-        display-mode="brick-tile"
-        path="/"
-        title="Title"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-            size="small"
-        ></tds-content-icon>
-
-        <div slot="pretitle">
-            Pretitle by <a href="#">Link</a> (custom content)
-        </div>
-        <button slot="action">Action</button>
-        <span slot="meta-left">Meta left</span>
-        <span slot="meta-right">Meta right</span>
-    </tds-summary>
-`;
-
-export const TitleButton = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        pretitle="Pretitle by "
-        pretitle-link-href="/"
-        pretitle-link-title="Link"
-        title="Title"
-        title-mode="button"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-        ></tds-content-icon>
-    </tds-summary>
-`;
-
-export const TitleText = () => html`
-    <tds-summary
-        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        pretitle="Pretitle by "
-        pretitle-link-href="/"
-        pretitle-link-title="Link"
-        title="Title"
-        title-mode="text"
-    >
-        <tds-content-icon
-            slot="image"
-            src="/images/badge-1.png"
-        ></tds-content-icon>
-    </tds-summary>
-`;

package/src/modules/tds/summary/summary.ts

@@ -1,95 +0,0 @@
-import { api, LightningElement } from 'lwc';
-
-type TitleMode = 'anchor' | 'button' | 'text';
-export default class extends LightningElement {
-    @api actionsAlignment: 'start' | 'center' | 'end' = 'start';
-    @api compact: boolean | string | null = null;
-    @api description: string | null = null;
-    @api displayMode: 'brick' | 'brick-tile' | 'tile' = 'tile';
-    @api path: string | null = null;
-    @api pathTarget: string | null = null;
-    @api pretitle: string | null = null;
-    @api pretitleLinkHref: string | null = null;
-    @api pretitleLinkTarget: string | null = null;
-    @api pretitleLinkTitle: string | null = null;
-    @api title: string = '';
-    @api titleHeadingLevel: '1' | '2' | '3' | '4' | null = null;
-
-    private _titleMode: TitleMode = 'anchor';
-
-    @api
-    get titleMode(): TitleMode {
-        // Backwards compatability
-        if (this._titleMode === 'anchor' && !this.path) {
-            if (process.env.NODE_ENV === 'development') {
-                console.warn(
-                    `title-mode was set to "anchor" but is missing "path" attribute, falling back to "button"`
-                );
-            }
-            return 'button';
-        }
-        return this._titleMode;
-    }
-
-    set titleMode(value) {
-        this._titleMode = value;
-    }
-
-    private isTile = true;
-
-    connectedCallback() {
-        this.onMediaQueryTile(mediaQueryTile);
-        mediaQueryTile.addListener(this.onMediaQueryTile);
-    }
-
-    disconnectedCallback() {
-        mediaQueryTile.removeListener(this.onMediaQueryTile);
-    }
-
-    private get isCompact() {
-        return typeof this.compact === 'boolean'
-            ? this.compact
-            : this.compact !== null;
-    }
-
-    private onMediaQueryTile = (e: { matches: boolean }) => {
-        this.isTile =
-            this.displayMode === 'tile' ||
-            (this.displayMode === 'brick-tile' && mediaQueryTile.matches);
-    };
-
-    private onSlotChange() {
-        const slots = Array.from(
-            this.template.querySelectorAll('slot')
-        ) as HTMLSlotElement[];
-        const slotNames = slots
-            .filter((slot) => slot.assignedNodes()[0])
-            .map((slot) => slot.getAttribute('name'))
-            .join(' ');
-        this.template
-            .querySelector('.summary')!
-            .setAttribute('data-slots', slotNames);
-    }
-
-    private onTitleButtonClick(e: MouseEvent) {
-        this.dispatchEvent(new CustomEvent('navigate'));
-    }
-
-    private get showDescription() {
-        return !this.isCompact;
-    }
-
-    private get titleIsAnchor() {
-        return this.titleMode === 'anchor';
-    }
-
-    private get titleIsButton() {
-        return this.titleMode === 'button';
-    }
-
-    private get titleIsText() {
-        return this.titleMode === 'text';
-    }
-}
-
-export const mediaQueryTile = window.matchMedia(`(max-width: 640px)`);

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

@@ -1,25 +0,0 @@
-import { html, renderIntoBody, nextTick } from 'shared/testutils';
-
-import Tab from '../tab';
-
-customElements.define('tds-tab', Tab.CustomElementConstructor);
-
-describe('tds-tab', () => {
-    it('can be loaded and unloaded', async () => {
-        const element = renderIntoBody(html` <tds-tab>Hello</tds-tab> `);
-
-        expect(element.shadowRoot!.innerHTML).toEqual('');
-
-        // @ts-ignore
-        element.load();
-        await nextTick();
-
-        expect(element.shadowRoot!.innerHTML).toEqual('<slot></slot>');
-
-        // @ts-ignore
-        element.unload();
-        await nextTick();
-
-        expect(element.shadowRoot!.innerHTML).toEqual('');
-    });
-});

package/src/modules/tds/tab/tab.css

@@ -1,3 +0,0 @@
-:host {
-    display: block;
-}

package/src/modules/tds/tab/tab.html

@@ -1,5 +0,0 @@
-<template>
-    <template if:true={loaded}>
-        <slot></slot>
-    </template>
-</template>

package/src/modules/tds/tab/tab.ts

@@ -1,46 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-let uid = 0;
-
-export type TabElement = {
-    label: string;
-    load: () => void;
-    title: string;
-    unload: () => void;
-    value: string;
-};
-
-export default class extends LightningElement {
-    @api label: string | null = null;
-    @api value: string | null = null;
-
-    private loaded: boolean = false;
-
-    @api load() {
-        this.loaded = true;
-    }
-
-    @api unload() {
-        this.loaded = false;
-    }
-
-    connectedCallback() {
-        setTimeout(()=> {
-            this.dispatchEvent(
-                new CustomEvent('privatetabregister', {
-                    cancelable: true,
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        label: this.label,
-                        title: this.title || this.label,
-                        value: this.value || `tab-${uid++}`,
-                        load: () => this.load(),
-                        unload: () => this.unload()
-                    }
-                })
-            );
-
-        }, 0);        
-    }
-}