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

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

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

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

@@ -1,79 +0,0 @@
-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) {
-        const 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() {
-        const $menu = this.template.querySelector('.menu') as HTMLElement;
-        if (!$menu) {return;}
-        $menu.style.transform = '';
-        $menu.style.width = '';
-        const rect = $menu.getBoundingClientRect();
-        const shouldResize = this.menuState.open && rect.x < 0;
-        $menu.style.width = shouldResize
-            ? 'calc(100vw - var(--tds-spacing-2) * 2)'
-            : '';
-        const 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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 () => {
-        const 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

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