@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/appLauncher/appLauncher.html

@@ -0,0 +1,38 @@
+<template>
+    <ui-focus-visible>
+        <div class="root">
+            <tds-button-icon
+                aria-label={label}
+                class="trigger"
+                data-menu="trigger"
+                variant="bare"
+            >
+                <tds-icon size="large" symbol="apps"></tds-icon>
+            </tds-button-icon>
+            <div aria-hidden="true" class="menu" data-menu="menu" id="menu">
+                <div class="menu__items">
+                    <template for:each={menuOptions} for:item="option">
+                        <a
+                            class="menu__item"
+                            data-menu="item"
+                            data-key={option.key}
+                            href={option.link.href}
+                            id={option.key}
+                            key={option.key}
+                            onclick={onOptionClick}
+                            target={option.link.target}
+                        >
+                            <img
+                                alt=""
+                                src={option.imageUrl}
+                                loading="lazy"
+                                decoding="async"
+                            />
+                            <span>{option.label}</span>
+                        </a>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </ui-focus-visible>
+</template>

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

@@ -0,0 +1,39 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map';
+import { apps } from './__fixtures__/index';
+
+export default {
+    title: 'tds/tds-app-launcher',
+    parameters: {
+        modules: ['/modules/tds-app-launcher.js']
+    }
+};
+
+const style = {
+    alignItems: 'flex-end',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '500px',
+    width: '400px'
+};
+
+export const Base = () =>
+    html`
+        <div style=${styleMap(style)}>
+            <tds-app-launcher
+                open
+                label="App Launcher"
+                .apps=${apps}
+            ></tds-app-launcher>
+        </div>
+    `;
+
+export const Closed = () =>
+    html`
+        <div style=${styleMap(style)}>
+            <tds-app-launcher
+                label="App Launcher"
+                .apps=${apps}
+            ></tds-app-launcher>
+        </div>
+    `;

package/src/modules/tds/appLauncher/appLauncher.ts

@@ -0,0 +1,79 @@
+import { api, LightningElement } from 'lwc';
+
+import { attrToBool, hash } from 'shared/helpers';
+import { Menu, MenuState } from 'shared/menu';
+import { track } from 'shared/track';
+
+import { App } from './types';
+
+type MenuOption = App & {
+    key: string;
+};
+
+export default class extends LightningElement {
+    private menuState: MenuState = undefined!;
+    private menu = new Menu({
+        onChange: (state) => {
+            this.menuState = state;
+            this.resizeMenu();
+            if (state.open) {
+                track(this.template.host, 'app_launcher_clicked', {});
+            }
+        },
+        shadowRoot: this.template
+    });
+
+    @api
+    get open() {
+        return this.menuState.open;
+    }
+    set open(value: string | boolean) {
+        attrToBool(value) ? this.menu.open() : this.menu.close();
+    }
+
+    @api apps: App[] = [];
+    @api label: string = '';
+
+    private get menuOptions(): MenuOption[] {
+        return this.apps.map((app) =>
+            // HACK: For some reason, using the spread operator causes Chromatic break
+            Object.assign({}, app, {
+                key: `app_${hash(app.label)}`
+            })
+        );
+    }
+
+    renderedCallback() {
+        this.menu.renderedCallback();
+    }
+
+    disconnectedCallback() {
+        this.menu.disconnectedCallback();
+    }
+
+    private onOptionClick(e: MouseEvent) {
+        let target = e.currentTarget as HTMLElement;
+        track(this.template.host, 'app_launcher_link_clicked', {
+            label: this.menuOptions.find((o) => o.key === target.dataset.key)!
+                .label
+        });
+    }
+
+    private resizeMenu() {
+        let $menu = this.template.querySelector('.menu') as HTMLElement;
+        if (!$menu) return;
+        $menu.style.transform = '';
+        $menu.style.width = '';
+        let rect = $menu.getBoundingClientRect();
+        let shouldResize = this.menuState.open && rect.x < 0;
+        $menu.style.width = shouldResize
+            ? 'calc(100vw - var(--tds-spacing-2) * 2)'
+            : '';
+        let rectResized = $menu.getBoundingClientRect();
+        $menu.style.transform = shouldResize
+            ? `translate(calc(${Math.abs(
+                  rectResized.x
+              )}px + var(--tds-spacing-2)),0)`
+            : '';
+    }
+}

package/src/modules/tds/appLauncher/types.ts

@@ -0,0 +1,8 @@
+export type App = {
+    label: string;
+    link: {
+        href: string;
+        target?: string;
+    };
+    imageUrl: string;
+};

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

@@ -0,0 +1,11 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import Avatar from '../avatar';
+
+customElements.define('tds-avatar', Avatar.CustomElementConstructor);
+
+describe('tds-avatar', () => {
+    it('works', () => {
+        let element = renderIntoBody(html` <tds-avatar></tds-avatar> `);
+    });
+});

package/src/modules/tds/avatar/avatar.css

@@ -0,0 +1,77 @@
+@import 'tds/reset';
+
+.avatar--small {
+    --size: var(--tds-spacing-6);
+}
+
+.avatar--medium {
+    --size: var(--tds-spacing-10);
+}
+
+.avatar--large {
+    --size: var(--tds-spacing-12);
+}
+
+.avatar {
+    width: var(--size);
+    height: var(--size);
+    background-color: var(--tds-color-fog);
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.avatar__image {
+    width: var(--size);
+    height: var(--size);
+    object-fit: cover;
+}
+
+.avatar--org {
+    color: var(--tds-color-white);
+}
+
+.flex {
+    display: flex;
+}
+.align-items-center {
+    align-items: center;
+}
+
+.body {
+    margin-left: var(--tds-spacing-3);
+}
+
+.title {
+    display: block;
+    font-size: var(--tds-font-size-sm);
+    font-weight: bold;
+
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a.title {
+    color: var(--tds-color-brand);
+    text-decoration: none;
+}
+
+a.title:hover {
+    text-decoration: underline;
+}
+
+.subtitle {
+    color: var(--tds-color-meteorite);
+    font-size: var(--tds-font-size-sm);
+}
+
+.truncate {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/modules/tds/avatar/avatar.html

@@ -0,0 +1,36 @@
+<template>
+    <div class={containerClassName}>
+        <div class={className} style={style}>
+            <tds-spinner
+                if:true={isLoading}
+                size="x-small"
+                variant="inverse"
+            ></tds-spinner>
+
+            <template if:false={isLoading}>
+                <tds-icon if:true={isOrg} symbol="salesforce1"></tds-icon>
+
+                <img
+                    if:true={isUser}
+                    class="avatar__image"
+                    src={imgSrc}
+                    alt={assistiveText}
+                    loading="lazy"
+                    decoding="async"
+                />
+            </template>
+        </div>
+
+        <div class="body" if:true={title}>
+            <a
+                class="title truncate"
+                if:true={titleIsLink}
+                href={titlePath}
+                target={titleTarget}
+                >{title}</a
+            >
+            <div class="title truncate" if:false={titleIsLink}>{title}</div>
+            <div class="subtitle truncate">{subtitle}</div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,64 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-avatar',
+    parameters: {
+        modules: ['/modules/tds-avatar.js']
+    }
+};
+
+export const Base = () => html` <tds-avatar></tds-avatar> `;
+
+export const Sizes = () => html`
+    <tds-avatar size="small"></tds-avatar>
+    <tds-avatar size="medium"></tds-avatar>
+    <tds-avatar size="large"></tds-avatar>
+`;
+
+export const User = () => html`
+    <tds-avatar img-src="images/trailblazer-1.png"></tds-avatar>
+`;
+
+export const Org = () => html`
+    <tds-avatar variant="org" color="red"></tds-avatar>
+`;
+
+export const Loading = () => html`
+    <tds-avatar variant="org" loading></tds-avatar>
+`;
+
+export const UserInfo = () => html`
+    <tds-avatar
+        img-src="images/trailblazer-1.png"
+        title="Astro Nomical"
+        subtitle="Lifetime Learner"
+        size="small"
+    ></tds-avatar>
+    <br />
+
+    <tds-avatar
+        img-src="images/trailblazer-1.png"
+        title="Astro Nomical"
+        subtitle="Lifetime Learner"
+        size="medium"
+    ></tds-avatar>
+    <br />
+
+    <tds-avatar
+        img-src="images/trailblazer-1.png"
+        title="Astro Nomical"
+        subtitle="Lifetime Learner"
+        size="large"
+    ></tds-avatar>
+`;
+
+export const UserInfoWithLink = () => html`
+    <tds-avatar
+        img-src="images/trailblazer-1.png"
+        title="Astro Nomical"
+        title-href="/path/to/astro-nomical"
+        title-target="_blank"
+        subtitle="Lifetime Learner"
+        size="medium"
+    ></tds-avatar>
+`;

package/src/modules/tds/avatar/avatar.ts

@@ -0,0 +1,50 @@
+import { LightningElement, api } from 'lwc';
+
+const DEFAULT_COLOR = '#0070d2';
+const DEFAULT_AVATAR =
+    'https://lightningdesignsystem.com/assets/images/profile_avatar_200.png';
+
+export default class extends LightningElement {
+    @api assistiveText: string = '';
+    @api variant: 'user' | 'org' = 'user';
+    @api size: 'small' | 'medium' | 'large' = 'medium';
+    @api imgSrc: string = DEFAULT_AVATAR;
+    @api color: string = DEFAULT_COLOR;
+    @api loading: boolean | string | null = null;
+    @api title: string = '';
+    @api subtitle: string | null = null;
+    @api titleHref: string | null = null;
+    @api titleTarget: string | null = null;
+
+    private get titleIsLink() {
+        return !!this.titleHref;
+    }
+
+    private get isUser() {
+        return this.variant === 'user';
+    }
+
+    private get isOrg() {
+        return this.variant === 'org';
+    }
+
+    private get style() {
+        return this.isOrg
+            ? `background-color: ${this.color || DEFAULT_COLOR}`
+            : '';
+    }
+
+    private get className() {
+        return `avatar avatar--${this.size} avatar--${this.variant}`;
+    }
+
+    private get isLoading() {
+        return typeof this.loading === 'boolean'
+            ? this.loading
+            : this.loading !== null;
+    }
+
+    private get containerClassName() {
+        return this.title ? `flex align-items-center` : ``;
+    }
+}

package/src/modules/tds/badge/__tests__/badge.test.js

@@ -0,0 +1,11 @@
+import { html, renderIntoBody } from '../../../shared/testutils';
+
+import Badge from '../badge';
+
+customElements.define('tds-badge', Badge.CustomElementConstructor);
+
+describe('tds-badge', () => {
+    it('works', () => {
+        renderIntoBody(html` <tds-badge></tds-badge> `);
+    });
+});

package/src/modules/tds/badge/badge.css

@@ -0,0 +1,22 @@
+@import 'tds/reset';
+
+:host {
+    display: inline-flex;
+}
+
+.badge {
+    border-radius: var(--tds-radius-xl);
+    font-size: var(--tds-font-size-xs);
+    font-weight: bold;
+    padding: var(--tds-spacing-1) var(--tds-spacing-2);
+}
+
+.fog {
+    background-color: var(--tds-color-fog);
+    color: var(--tds-color-meteorite);
+}
+
+.blue {
+    background: var(--dx-g-cloud-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}

package/src/modules/tds/badge/badge.html

@@ -0,0 +1,5 @@
+<template>
+    <span class={className}>
+        <slot></slot>
+    </span>
+</template>

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

@@ -0,0 +1,10 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-badge',
+    parameters: {
+        modules: ['/modules/tds-badge.js']
+    }
+};
+
+export const Base = () => html` <tds-badge>+300 Points</tds-badge> `;

package/src/modules/tds/badge/badge.ts

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api color: string = 'fog';
+
+    get className() {
+        return `badge ${this.color}`;
+    }
+}

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

@@ -0,0 +1,52 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import Button from '../button';
+
+customElements.define('tds-button', Button.CustomElementConstructor);
+
+describe('tds-button', () => {
+    it('reflects attributes', async () => {
+        let element = renderIntoBody(
+            html` <tds-button aria-label="Hello"></tds-button> `
+        );
+        expect(element.shadowRoot!.querySelector('button')).toHaveAttribute(
+            'aria-label',
+            'Hello'
+        );
+    });
+
+    it('can show a spinner', () => {
+        let element = renderIntoBody(
+            html` <tds-button spinner>Creating...</tds-button> `
+        );
+
+        expect(element.shadowRoot!.querySelector('.spinner')).not.toBeNull();
+    });
+
+    it('applies size small class', async () => {
+        let element = renderIntoBody(
+            html` <tds-button size="small"></tds-button> `
+        );
+        expect(
+            element.shadowRoot!.querySelector('button')!.className
+        ).toContain('button--small');
+    });
+
+    it('applies size large class', async () => {
+        let element = renderIntoBody(
+            html` <tds-button size="large"></tds-button> `
+        );
+        expect(
+            element.shadowRoot!.querySelector('button')!.className
+        ).toContain('button--large');
+    });
+
+    it('does not apply invalid size class', async () => {
+        let element = renderIntoBody(
+            html` <tds-button size="floogle"></tds-button> `
+        );
+        expect(
+            element.shadowRoot!.querySelector('button')!.className
+        ).not.toContain('button--floogle');
+    });
+});

package/src/modules/tds/button/button.css

@@ -0,0 +1 @@
+@import 'tds/buttonStyles';

package/src/modules/tds/button/button.html

@@ -0,0 +1,20 @@
+<template>
+    <button
+        name="tds-button"
+        onclick={handleInteraction}
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        aria-pressed={ariaPressed}
+        class={className}
+        disabled={disabled}
+        type={type}
+    >
+        <tds-icon
+            if:true={hasSpinner}
+            symbol="spinner"
+            class="spinner"
+            size="small"
+        ></tds-icon>
+        <slot></slot>
+    </button>
+</template>

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

@@ -0,0 +1,54 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-button',
+    parameters: {
+        modules: ['/modules/tds-button.js']
+    }
+};
+
+export const Neutral = () => html` <tds-button>Hello</tds-button> `;
+
+export const Small = () => html` <tds-button size="small">Hello</tds-button> `;
+
+export const Large = () => html` <tds-button size="large">Hello</tds-button> `;
+
+export const Brand = () => html`
+    <tds-button variant="brand">Hello</tds-button>
+`;
+
+export const Success = () => html`
+    <tds-button variant="success">Hello</tds-button>
+`;
+
+export const Destructive = () => html`
+    <tds-button variant="destructive">Hello</tds-button>
+`;
+
+export const DestructiveInverse = () => html`
+    <tds-button variant="destructive-inverse">Hello</tds-button>
+`;
+
+export const Bare = () => html` <tds-button variant="bare">Hello</tds-button> `;
+
+export const Disabled = () => html` <tds-button disabled>Hello</tds-button> `;
+
+export const FullWidth = () => html`
+    <style>
+        .full {
+            display: block;
+        }
+
+        @media screen and (max-width: 30rem) {
+            .full-mobile {
+                display: block;
+            }
+        }
+    </style>
+    <tds-button class="full">Full</tds-button>
+    <tds-button class="full-mobile">Full (mobile only)</tds-button>
+`;
+
+export const Spinner = () => html`
+    <tds-button spinner data-chromatic="ignore">Hello</tds-button>
+`;

package/src/modules/tds/button/button.ts

@@ -0,0 +1,59 @@
+import { api, LightningElement } from 'lwc';
+import { attrToBool, sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
+
+export type Size = 'small' | 'medium' | 'large';
+export type Variant =
+    | 'neutral'
+    | 'brand'
+    | 'success'
+    | 'destructive'
+    | 'destructive-inverse'
+    | 'bare'
+    | 'border-filled';
+
+export default class extends LightningElement {
+    @api ariaLabel: string | null = null;
+    @api ariaLive: string | null = null;
+    @api ariaPressed: string | null = null;
+    @api disabled: boolean | null = null;
+    @api type: 'submit' | null = null;
+    @api variant: Variant = 'neutral';
+    @api size: Size = 'medium';
+    @api spinner: boolean = false;
+
+    private get hasSpinner() {
+        return attrToBool(this.spinner);
+    }
+
+    get sizeClassName() {
+        return (['small', 'large'] as Size[]).includes(this.size)
+            ? `button--${this.size}`
+            : '';
+    }
+
+    private get className() {
+        return [
+            'button',
+            createVariantClassName(this.variant),
+            this.sizeClassName,
+            attrToBool(this.disabled) ? 'button--disabled' : false
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    handleInteraction(event: any){
+        sendInteractionEvent('Button Click',InteractionEventTypes.CLICK, event);
+    }
+}
+
+export function createVariantClassName(variant: Variant) {
+    const DENY_LIST = [
+        'neutral',
+        'destructive-inverse',
+        'bare',
+        'border-filled'
+    ];
+    return `button--${variant} ${
+        !DENY_LIST.includes(variant) ? 'button--variant' : ''
+    }`;
+}

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

@@ -0,0 +1,17 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import ButtonIcon from '../buttonIcon';
+
+customElements.define('tds-button-icon', ButtonIcon.CustomElementConstructor);
+
+describe('tds-button-icon', () => {
+    it('reflects attributes', async () => {
+        let element = renderIntoBody(
+            html` <tds-button-icon aria-label="Hello"></tds-button-icon> `
+        );
+        expect(element.shadowRoot!.querySelector('button')).toHaveAttribute(
+            'aria-label',
+            'Hello'
+        );
+    });
+});

package/src/modules/tds/buttonIcon/buttonIcon.css

@@ -0,0 +1 @@
+@import 'tds/buttonStyles';