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

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

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

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

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

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

@@ -1,79 +0,0 @@
-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;}
-        const { symbolId } = this;
-        if (this.node && this.node.id === symbolId) {return;}
-        await this.fetchSprite(this.sprite);
-        const svg = this.template.querySelector('svg')!;
-        const node = document
-            .getElementById(symbolId)!
-            .cloneNode(true) as SVGSymbolElement;
-        while (svg.firstChild) {svg.removeChild(svg.firstChild);}
-        for (const 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);}
-        const 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) => {
-                const 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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