@salesforcedevs/arch-components 1.20.17-alpha1

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

@@ -0,0 +1,135 @@
+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 ', () => {
+            let element = renderIntoBody(html`
+                <tds-summary description="Hello"></tds-summary>
+            `);
+            expect(element.shadowRoot!.innerHTML).toContain('Hello');
+        });
+        it('hides the description (string)', () => {
+            let 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)', () => {
+            let element = renderIntoBody(html`
+                <tds-summary
+                    .compact=${false}
+                    description="Hello"
+                ></tds-summary>
+            `);
+            expect(element.shadowRoot!.innerHTML).toContain('Hello');
+        });
+        it('hides the description (bool)', () => {
+            let 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 () => {
+        let template = ({ showImage, showAction }: any = {}) => html`
+            <tds-summary>
+                ${showImage ? html` <img slot="image" /> ` : null}
+                ${showAction ? html` <button slot="action" /> ` : null}
+            </tds-summary>
+        `;
+        let element = renderIntoBody(template());
+        let header = element.shadowRoot!.querySelector('.header');
+        let 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 () => {
+        let template = ({ showMetaLeft, showMetaRight }: any = {}) => html`
+            <tds-summary>
+                ${showMetaLeft ? html` <span slot="meta-left" /> ` : null}
+                ${showMetaRight ? html` <span slot="meta-right" /> ` : null}
+            </tds-summary>
+        `;
+        let element = renderIntoBody(template());
+        let footer = element.shadowRoot!.querySelector('.footer');
+        let 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', () => {
+                let 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', () => {
+                let 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', () => {
+                let 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', () => {
+                let 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

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

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

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

@@ -0,0 +1,95 @@
+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() {
+        let slots = Array.from(
+            this.template.querySelectorAll('slot')
+        ) as HTMLSlotElement[];
+        let 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

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

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

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

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

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

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