@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/heading/heading.ts

@@ -0,0 +1,36 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    // In the future, this could accept a value of "auto" which
+    // could traverse the DOM tree and figure out the appropriate level
+    @api level: '1' | '2' | '3' | '4' | '5' | '6' | null = null;
+
+    private get isHeading() {
+        // If "level" is null, we render a <slot> and with no heading
+        return this.level !== null;
+    }
+
+    private get isLevel1() {
+        return this.level === '1';
+    }
+
+    private get isLevel2() {
+        return this.level === '2';
+    }
+
+    private get isLevel3() {
+        return this.level === '3';
+    }
+
+    private get isLevel4() {
+        return this.level === '4';
+    }
+
+    private get isLevel5() {
+        return this.level === '5';
+    }
+
+    private get isLevel6() {
+        return this.level === '6';
+    }
+}

package/src/modules/tds/icon/icon.css

@@ -0,0 +1,28 @@
+@import 'tds/reset';
+
+svg {
+    display: block;
+    fill: currentColor;
+    height: var(--icon-size);
+    width: var(--icon-size);
+}
+
+.size--x-small {
+    --icon-size: var(--tds-spacing-3);
+}
+
+.size--small {
+    --icon-size: var(--tds-spacing-4);
+}
+
+.size--medium {
+    --icon-size: var(--tds-spacing-5);
+}
+
+.size--large {
+    --icon-size: var(--tds-spacing-6);
+}
+
+.size--xlarge {
+    --icon-size: var(--tds-spacing-10);
+}

package/src/modules/tds/icon/icon.html

@@ -0,0 +1,17 @@
+<template>
+    <svg
+        aria-hidden="true"
+        class={className}
+        if:false={context.crossOriginAssets}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <use xlink:href={href}></use>
+    </svg>
+    <svg
+        aria-hidden="true"
+        class={className}
+        if:true={context.crossOriginAssets}
+        lwc:dom="manual"
+        xmlns="http://www.w3.org/2000/svg"
+    ></svg>
+</template>

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

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-icon',
+    parameters: {
+        modules: ['/modules/tds-icon.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-icon size="large" symbol="edit"></tds-icon>
+`;
+
+export const Action = () => html`
+    <div style="color: red">
+        <tds-icon size="large" sprite="action" symbol="check"></tds-icon>
+    </div>
+`;

package/src/modules/tds/icon/icon.ts

@@ -0,0 +1,79 @@
+import { api, LightningElement, wire } from 'lwc';
+import { ContextAdapter, ContextAdapterValue } from 'tds/contextAdapter';
+
+/* ROLLUP_PLATFORM
+import * as iconUtils from 'lightning/iconUtils';
+*/
+
+type Size = 'x-small' | 'small' | 'medium' | 'large' | 'xlarge' | 'override';
+
+type Sprite =
+    | 'action'
+    | 'custom'
+    | 'doctype'
+    | 'social'
+    | 'social-round'
+    | 'utility';
+
+const fetches = new Map<string, Promise<any>>();
+
+export default class extends LightningElement {
+    @api sprite: Sprite = 'utility';
+    @api size: Size = 'medium';
+    @api symbol: string = '';
+
+    private node: SVGSymbolElement | undefined;
+
+    @wire(ContextAdapter)
+    private context: ContextAdapterValue = null!;
+
+    private get className() {
+        return `size--${this.size}`;
+    }
+
+    private get href() {
+        /* ROLLUP_PLATFORM
+    return iconUtils.getIconPath(`${this.sprite}:${this.symbol}`);
+    */
+        return `${this.context.assetsUrl}/icons/${this.sprite}-sprite/svg/symbols.svg#${this.symbol}`;
+    }
+
+    private get symbolId() {
+        return `tds__${this.sprite}__${this.symbol}`;
+    }
+
+    renderedCallback() {
+        if (this.context.crossOriginAssets) this.appendNodes();
+    }
+
+    private async appendNodes() {
+        if (process.env.NODE_ENV === 'test') return;
+        let { symbolId } = this;
+        if (this.node && this.node.id === symbolId) return;
+        await this.fetchSprite(this.sprite);
+        let svg = this.template.querySelector('svg')!;
+        let node = document
+            .getElementById(symbolId)!
+            .cloneNode(true) as SVGSymbolElement;
+        while (svg.firstChild) svg.removeChild(svg.firstChild);
+        for (let n of Array.from(node.childNodes)) svg.appendChild(n);
+        svg.setAttribute('viewBox', node.getAttribute('viewBox')!);
+    }
+
+    private async fetchSprite(sprite: Sprite) {
+        if (fetches.has(sprite)) return fetches.get(sprite);
+        let promise = fetch(
+            `${this.context.assetsUrl}/icons/${this.sprite}-sprite/svg/symbols.svg`
+        )
+            .then((res) => res.text())
+            .then((svg) => svg.replace(/id=\"/g, `id="tds__${sprite}__`))
+            .then((svg) => {
+                let node = document.createElement('div');
+                node.innerHTML = svg;
+                node.style.display = 'none';
+                document.body.appendChild(node);
+            });
+        fetches.set(sprite, promise);
+        return promise;
+    }
+}

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

@@ -0,0 +1,41 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import Input from '../input';
+
+customElements.define('tds-input', Input.CustomElementConstructor);
+
+describe('tds-input', () => {
+    it('renders a text input by default', () => {
+        const element = renderIntoBody(html` <tds-input></tds-input> `);
+
+        const input = element.shadowRoot!.querySelector('input');
+
+        expect(input).toHaveAttribute('type', 'text');
+    });
+
+    it('accepts attributes', () => {
+        const element = renderIntoBody(
+            html`
+                <tds-input
+                    value="value"
+                    placeholder="placeholder"
+                    disabled
+                ></tds-input>
+            `
+        );
+        const input = element.shadowRoot!.querySelector('input');
+
+        expect(input!.value).toBe('value');
+        expect(input!.placeholder).toBe('placeholder');
+        expect(input!.disabled).toBe(true);
+    });
+
+    it('ignores undefined attributes', () => {
+        const element = renderIntoBody(html` <tds-input></tds-input> `);
+        const input = element.shadowRoot!.querySelector('input');
+
+        expect(input!.value).toBe('');
+        expect(input!.placeholder).toBe('');
+        expect(input!.disabled).toBe(false);
+    });
+});

package/src/modules/tds/input/input.css

@@ -0,0 +1,34 @@
+@import 'tds/reset';
+
+label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: block;
+    padding-right: var(--tds-spacing-2);
+    padding-top: var(--tds-spacing-2);
+    color: var(--tds-color-meteorite);
+    font-size: var(--tds-font-size-xs);
+    margin-bottom: var(--tds-spacing-2);
+}
+
+.text-input {
+    font-size: var(--tds-font-size-sm);
+    background-color: var(--tds-color-white);
+    border: 1px solid var(--tds-color-fog);
+    border-radius: var(--tds-radius-md);
+    transition: border 0.1s linear, background-color 0.1s linear;
+    display: block;
+    width: 100%;
+    padding: var(--tds-spacing-1) var(--tds-spacing-4) var(--tds-spacing-1)
+        var(--tds-spacing-3);
+    line-height: 1.875rem;
+    min-height: calc(1.875rem + (1px * 2));
+}
+
+.text-input[disabled] {
+    background-color: var(--tds-color-fog);
+    border-color: var(--tds-color-granite);
+    cursor: not-allowed;
+    user-select: none;
+}

package/src/modules/tds/input/input.html

@@ -0,0 +1,12 @@
+<template>
+    <label if:true={label} for="field">{label}</label>
+
+    <input
+        type={type}
+        value={_value}
+        disabled={isDisabled}
+        class="text-input"
+        oninput={handleChange}
+        placeholder={placeholder}
+    />
+</template>

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

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-input',
+    parameters: {
+        modules: ['/modules/tds-input.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-input
+        type="text"
+        label="Input Label"
+        value="Hello, World!"
+    ></tds-input>
+`;
+
+export const Disabled = () => html`
+    <tds-input
+        type="text"
+        label="Input Label"
+        value="Hello, World!"
+        disabled
+    ></tds-input>
+`;

package/src/modules/tds/input/input.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from 'lwc';
+import { BooleanAttr } from 'shared/types.d';
+import { attrToBool } from 'shared/helpers';
+// @ts-ignore - LWC HTML template
+import input from './input.html';
+
+// TODO add other options in the future (date, color, password, etc)
+export type InputType = 'text';
+
+export default class extends LightningElement {
+    @api type: InputType = 'text';
+    @api value: string | null = null;
+    @api label: string | null = null;
+    @api placeholder: string | null = null;
+    @api disabled: BooleanAttr = false;
+
+    render() {
+        switch (this.type) {
+            default:
+                return input;
+        }
+    }
+
+    private get _value() {
+        return typeof this.value === 'string' ? this.value : null;
+    }
+
+    private get isDisabled() {
+        return attrToBool(this.disabled);
+    }
+
+    private get isTypeText(): boolean {
+        return this.type === 'text';
+    }
+
+    private handleChange(e: { target: HTMLInputElement }) {
+        this.dispatchEvent(
+            new CustomEvent('change', { detail: e.target.value })
+        );
+    }
+}

package/src/modules/tds/instrumentation/instrumentation.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/tds/instrumentation/instrumentation.ts

@@ -0,0 +1,113 @@
+import { LightningElement, api } from 'lwc';
+
+const TRACKING_EVENT_NAME = 'architectssite_track';
+const LISTENER_QUEUE = '__TDS_INSTRUMENTATION_QUEUE__';
+const LISTENER_INDICATOR = '__TDS_INSTRUMENTATION_IS_INITIALIZED__';
+
+export function track(
+    element: EventTarget,
+    event: string,
+    payload: Record<string, unknown>
+): void {
+    const detail = { event, payload };
+    // if window.LISTENER_INDICATOR is undefined, `tds-instrumentation` has not
+    // been mounted, and the listener hasn't been attached.
+    if ((window as any)[LISTENER_INDICATOR] === undefined) {
+        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
+        (window as any)[LISTENER_QUEUE].push(detail);
+    } else {
+        const e = new CustomEvent(TRACKING_EVENT_NAME, {
+            bubbles: true,
+            composed: true,
+            detail
+        });
+        element.dispatchEvent(e);
+    }
+}
+
+const googleTagManager = {
+    track: function (e: Event) {
+        if ((window as any).dataLayer === undefined) {
+            (window as any).dataLayer = [];
+        }
+        const { event, payload } = (e as CustomEvent).detail;
+        (window as any).dataLayer.push({ ...payload, event });
+    }
+};
+
+interface TrackEventListener {
+    add: () => void;
+    remove: () => void;
+}
+
+export function trackEventListener(
+    trackerFns: { track: (e: Event) => void }[] = []
+): TrackEventListener {
+    if (trackerFns.length === 0) {
+        throw new Error('No tracker functions passed');
+    }
+
+    const trackWebEvent = (e: Event) => {
+        trackerFns.forEach((tracker) => {
+            tracker.track(e);
+        });
+    };
+
+    const attachEventListener = () => {
+        document.addEventListener(TRACKING_EVENT_NAME, trackWebEvent);
+    };
+
+    const removeEventListener = () => {
+        document.removeEventListener(TRACKING_EVENT_NAME, trackWebEvent);
+    };
+
+    return {
+        add: attachEventListener,
+        remove: removeEventListener
+    };
+}
+
+export default class Instrumentation extends LightningElement {
+    @api useGoogleTagManager = false;
+
+    private tracker: TrackEventListener | null = null;
+
+    private setupTracker() {
+        const trackerFunctions = this.useGoogleTagManager
+            ? [googleTagManager]
+            : [];
+        this.tracker = trackEventListener(trackerFunctions);
+        this.tracker.add();
+        (window as any)[LISTENER_INDICATOR] = true;
+    }
+
+    private dispatchQueuedEvents() {
+        while ((window as any)[LISTENER_QUEUE].length > 0) {
+            const event = (window as any)[LISTENER_QUEUE].pop() as {
+                event: string;
+                payload: Record<string, unknown>;
+            };
+            track(this, event.event, event.payload);
+        }
+    }
+
+    renderedCallback() {
+        if (this.tracker === null) {
+            this.setupTracker();
+
+            if (
+                (window as any)[LISTENER_QUEUE] !== undefined &&
+                (window as any)[LISTENER_QUEUE].length > 0
+            ) {
+                this.dispatchQueuedEvents();
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.tracker !== null) {
+            this.tracker.remove();
+            this.tracker = null;
+        }
+    }
+}

package/src/modules/tds/pbCard/pbCard.css

@@ -0,0 +1,28 @@
+.body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 185px;
+}
+
+.text > div {
+    margin-bottom: var(--tds-spacing-3);
+}
+
+.title {
+    font-size: var(--tds-font-size-xl);
+    font-weight: 700;
+    line-height: var(--tds-line-height-relaxed);
+}
+
+.subtitle {
+    font-size: var(--tds-font-size-sm);
+    font-weight: 400;
+    line-height: var(--tds-line-height-snug);
+}
+
+.cta {
+    text-decoration: underline;
+    color: var(--dx-g-blue-vibrant-20);
+    font-weight: 600;
+}

package/src/modules/tds/pbCard/pbCard.html

@@ -0,0 +1,21 @@
+<template>
+    <dx-card-content borderless="false" fix-orientation="true" href={href}>
+        <div slot="body" class="body">
+            <div class="text">
+                <div lwc:if={showBadge}>
+                    <tds-badge color="blue">{badgeText}</tds-badge>
+                </div>
+                <div>
+                    <span class="subtitle">{subtitle}</span>
+                    <div class="title">{title}</div>
+                </div>
+                <div>
+                    <span>{body}</span>
+                </div>
+            </div>
+            <div>
+                <a href={href} class="cta">{ctaText}</a>
+            </div>
+        </div>
+    </dx-card-content>
+</template>

package/src/modules/tds/pbCard/pbCard.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api href: string = '#';
+    @api includeBadge: boolean | string = false;
+    @api badgeText: string = '';
+    @api subtitle: string = '';
+    @api title: string = '';
+    @api body: string = '';
+    @api ctaText: string = '';
+
+    get showBadge() {
+        return (
+            (this.includeBadge === true || this.includeBadge === 'true') &&
+            this.badgeText
+        );
+    }
+}

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

@@ -0,0 +1,56 @@
+import { html, renderIntoBody, nextTick } from 'shared/testutils';
+
+import Pill from '../pill';
+
+customElements.define('tds-pill', Pill.CustomElementConstructor);
+
+const TITLE = 'Title';
+const LABEL = 'Label';
+
+describe('tds-pill', () => {
+    // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
+    // The pill component uses slots for label text, which isn't compatible with lit-html rendering in tests
+    it.skip('forwards the title attribute to the label', async () => {
+        const element = renderIntoBody(
+            html` <tds-pill title=${TITLE}>${LABEL}</tds-pill> `
+        );
+
+        await nextTick();
+
+        expect(
+            element
+                .shadowRoot!.querySelector('.pill__label')!
+                .getAttribute('title')
+        ).toEqual(TITLE);
+    });
+
+    it.skip('uses slot text as a title fallback', async () => {
+        const element = renderIntoBody(html` <tds-pill>${LABEL}</tds-pill> `);
+
+        await nextTick();
+
+        expect(
+            element
+                .shadowRoot!.querySelector('.pill__label')!
+                .getAttribute('title')
+        ).toEqual(LABEL);
+    });
+
+    it.skip('accepts a title for the remove button', async () => {
+        const element = renderIntoBody(
+            html` <tds-pill remove-button-title="Clear">${LABEL}</tds-pill> `
+        );
+
+        expect(
+            element
+                .shadowRoot!.querySelector('.pill__remove')!
+                .getAttribute('title')
+        ).toEqual('Clear');
+    });
+
+    it('renders the component', () => {
+        const element = renderIntoBody(html`<tds-pill></tds-pill>`);
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/tds/pill/pill.css

@@ -0,0 +1,70 @@
+@import 'tds/reset';
+
+:host {
+    display: inline-flex;
+    max-width: 100%;
+}
+
+.pill {
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--tds-color-meteorite);
+    border: 1px solid var(--tds-color-granite);
+    border-radius: var(--tds-radius-md);
+    padding-left: var(--tds-spacing-3);
+    padding-right: var(--tds-spacing-8);
+    height: var(--tds-spacing-10);
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.pill:not(.pill--bare):hover {
+    background-color: var(--tds-color-sand);
+}
+
+.pill--link {
+    cursor: pointer;
+    color: var(--tds-color-brand);
+}
+
+.pill--bare {
+    border-color: transparent;
+}
+
+.pill__label {
+    font-size: var(--tds-font-size-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pill__remove {
+    color: var(--tds-color-meteorite);
+    border: none;
+    background-color: transparent;
+    padding: 2px;
+    cursor: pointer;
+    position: absolute;
+    right: var(--tds-spacing-2);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.pill__remove:hover,
+.pill__remove:focus {
+    color: var(--tds-color-black);
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}

package/src/modules/tds/pill/pill.html

@@ -0,0 +1,17 @@
+<template>
+    <div class={className} role="option" aria-selected="true">
+        <div class="pill__label" title={titleWithFallback}>
+            <slot onslotchange={setTitle}></slot>
+        </div>
+
+        <button
+            class="pill__remove"
+            title={removeButtonTitle}
+            onclick={handleRemove}
+        >
+            <tds-icon symbol="close" size="x-small"></tds-icon>
+
+            <div class="assistive-text">{removeButtonTitle}</div>
+        </button>
+    </div>
+</template>