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

package/src/modules/tds/buttonIcon/buttonIcon.html

@@ -1,12 +0,0 @@
-<template>
-    <button
-        aria-label={ariaLabel}
-        aria-live={ariaLive}
-        aria-pressed={ariaPressed}
-        class={className}
-        data-icon-size={size}
-        disabled={disabled}
-    >
-        <slot></slot>
-    </button>
-</template>

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

@@ -1,38 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-button-icon',
-    parameters: {
-        modules: ['/modules/tds-button-icon.js', '/modules/tds-icon.js']
-    }
-};
-
-export const Base = () => html`
-    <tds-button-icon aria-label="edit">
-        <tds-icon symbol="edit"></tds-icon>
-    </tds-button-icon>
-`;
-
-export const Small = () => html`
-    <tds-button-icon size="small" aria-label="edit">
-        <tds-icon size="small" symbol="edit"></tds-icon>
-    </tds-button-icon>
-`;
-
-export const Large = () => html`
-    <tds-button-icon size="large" aria-label="edit">
-        <tds-icon size="large" symbol="edit"></tds-icon>
-    </tds-button-icon>
-`;
-
-export const Disabled = () => html`
-    <tds-button-icon aria-label="edit" disabled="true">
-        <tds-icon symbol="edit"></tds-icon>
-    </tds-button-icon>
-`;
-
-export const Bare = () => html`
-    <tds-button-icon aria-label="edit" variant="bare">
-        <tds-icon symbol="edit"></tds-icon>
-    </tds-button-icon>
-`;

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

@@ -1,6 +0,0 @@
-import { api } from 'lwc';
-import Button, { Variant } from 'tds/button';
-
-export default class extends Button {
-    @api variant: Variant = 'border-filled';
-}

package/src/modules/tds/buttonIconLink/buttonIconLink.css

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

package/src/modules/tds/buttonIconLink/buttonIconLink.html

@@ -1,14 +0,0 @@
-<template>
-    <a
-        aria-label={ariaLabel}
-        aria-live={ariaLive}
-        class={className}
-        data-icon-size={size}
-        disabled={disabled}
-        href={href}
-        rel={rel}
-        target={target}
-    >
-        <slot></slot>
-    </a>
-</template>

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

@@ -1,32 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-button-icon-link',
-    parameters: {
-        modules: ['/modules/tds-button-icon-link.js']
-    }
-};
-
-export const Base = () => html`
-    <tds-button-icon-link aria-label="help" href="#">
-        <tds-icon symbol="edit"></tds-icon>
-    </tds-button-icon-link>
-`;
-
-export const Small = () => html`
-    <tds-button-icon-link size="small" aria-label="edit" href="#">
-        <tds-icon size="small" symbol="edit"></tds-icon>
-    </tds-button-icon-link>
-`;
-
-export const Large = () => html`
-  <tds-button-icon size="large" aria-label="edit" href="#">
-    <tds-icon size="large" symbol="edit"></tds-icon>
-  </tds-button-icon-link>
-`;
-
-export const Bare = () => html`
-    <tds-button-icon-link aria-label="edit" href="#" variant="bare">
-        <tds-icon ssymbol="edit"></tds-icon>
-    </tds-button-icon-link>
-`;

package/src/modules/tds/buttonIconLink/buttonIconLink.ts

@@ -1,9 +0,0 @@
-import { api } from 'lwc';
-import Button, { Variant } from 'tds/button';
-
-export default class extends Button {
-    @api href: string | null = null;
-    @api rel: string | null = null;
-    @api target: '_self' | '_blank' | '_parent' | '_top' | null = null;
-    @api variant: Variant = 'border-filled';
-}

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

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

package/src/modules/tds/buttonLink/buttonLink.css

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

package/src/modules/tds/buttonLink/buttonLink.html

@@ -1,19 +0,0 @@
-<template>
-    <a
-        aria-label={ariaLabel}
-        aria-live={ariaLive}
-        class={className}
-        disabled={disabled}
-        href={href}
-        rel={rel}
-        target={target}
-    >
-        <tds-icon
-            if:true={hasSpinner}
-            symbol="spinner"
-            class="spinner"
-            size="small"
-        ></tds-icon>
-        <slot></slot>
-    </a>
-</template>

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

@@ -1,24 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-button-link',
-    parameters: {
-        modules: ['/modules/tds-button-link.js']
-    }
-};
-
-export const Base = () => html`
-    <tds-button-link href="/">Link</tds-button-link>
-`;
-
-export const Small = () => html`
-    <tds-button-link size="small" href="/">Link</tds-button-link>
-`;
-
-export const Large = () => html`
-    <tds-button-link size="large" href="/">Link</tds-button-link>
-`;
-
-export const Disabled = () => html`
-    <tds-button-link href="/" disabled>Link</tds-button-link>
-`;

package/src/modules/tds/buttonLink/buttonLink.ts

@@ -1,8 +0,0 @@
-import { api } from 'lwc';
-import Button from 'tds/button';
-
-export default class extends Button {
-    @api href: string | null = null;
-    @api rel: string | null = null;
-    @api target: '_self' | '_blank' | '_parent' | '_top' | null = null;
-}

package/src/modules/tds/buttonStyles/buttonStyles.css

@@ -1,232 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    --dark-1: 5%;
-    --dark-2: 15%;
-    display: inline-flex;
-    color: var(--tds-color-meteorite);
-}
-
-.button {
-    align-items: center;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    border: 1px solid transparent;
-    background-color: transparent;
-    border-radius: var(--tds-spacing-1);
-    color: inherit;
-    cursor: pointer;
-    display: flex;
-    width: 100%;
-    justify-content: center;
-    font-weight: bold;
-    line-height: 1.25;
-    font-size: var(--tds-font-size-sm);
-    padding: calc(var(--tds-spacing-3) * 0.833333) var(--tds-spacing-4);
-    text-decoration: none;
-    user-select: none;
-    white-space: nowrap;
-}
-
-.button--variant {
-    background-color: hsl(
-        var(--color-bg-h),
-        var(--color-bg-s),
-        var(--color-bg-l)
-    );
-    border: 1px solid
-        hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
-    box-shadow: 0 1px 0
-        hsl(
-            var(--color-bg-h),
-            var(--color-bg-s),
-            calc(var(--color-bg-l) - var(--dark-2))
-        );
-    color: var(--color);
-}
-
-.button--variant:hover:not(.button--disabled),
-.button--variant:focus:not(.button--disabled),
-.button--variant:active:not(.button--disabled) {
-    color: var(--color);
-}
-
-.button--variant:hover:not(.button--disabled),
-.button--variant:focus:not(.button--disabled) {
-    background-color: hsl(
-        var(--color-bg-h),
-        var(--color-bg-s),
-        calc(var(--color-bg-l) - var(--dark-1))
-    );
-    border-color: hsl(
-        var(--color-bg-h),
-        var(--color-bg-s),
-        calc(var(--color-bg-l) - var(--dark-1))
-    );
-}
-
-.button--variant:active:not(.button--disabled) {
-    background-color: hsl(
-        var(--color-bg-h),
-        var(--color-bg-s),
-        calc(var(--color-bg-l) - var(--dark-2))
-    );
-    border-color: hsl(
-        var(--color-bg-h),
-        var(--color-bg-s),
-        calc(var(--color-bg-l) - var(--dark-2))
-    );
-    box-shadow: 0 1px 0
-            hsl(
-                var(--color-bg-h),
-                var(--color-bg-s),
-                calc(var(--color-bg-l) - var(--dark-2))
-            ),
-        0 0 4px hsl(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l));
-}
-
-.button--neutral {
-    color: var(--tds-color-brand);
-    background-color: var(--tds-color-white);
-    box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05),
-        0 2px 0 hsla(0, 0%, 0%, 0.05);
-}
-
-.button--neutral:hover:not(.button--disabled),
-.button--neutral:focus:not(.button--disabled) {
-    background-color: var(--tds-color-sand);
-}
-
-.button--neutral:active:not(.button--disabled) {
-    background-color: var(--tds-color-fog);
-    color: var(--tds-color-meteorite);
-}
-
-.button--bare:hover:not(.button--disabled),
-.button--bare:focus:not(.button--disabled) {
-    background-color: var(--tds-color-sand);
-    color: hsl(
-        var(--tds-color-meteorite-h),
-        var(--tds-color-meteorite-s),
-        calc(var(--tds-color-meteorite-l) - var(--dark-1))
-    );
-}
-
-.button--border-filled {
-    background-color: var(--tds-color-white);
-    border-color: var(--tds-color-fog);
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-}
-
-.button--border-filled:hover:not(.button--disabled),
-.button--border-filled:focus:not(.button--disabled) {
-    background-color: var(--tds-color-sand);
-    color: hsl(
-        var(--tds-color-meteorite-h),
-        var(--tds-color-meteorite-s),
-        calc(var(--tds-color-meteorite-l) - var(--dark-1))
-    );
-}
-
-.button--bare:active:not(.button--disabled),
-.button--border-filled:active:not(.button--disabled) {
-    background-color: var(--tds-color-fog);
-    color: hsl(
-        var(--tds-color-meteorite-h),
-        var(--tds-color-meteorite-s),
-        calc(var(--tds-color-meteorite-l) - var(--dark-1))
-    );
-}
-
-.button--brand {
-    --color: var(--tds-color-white);
-    --color-bg-h: var(--tds-color-brand-h);
-    --color-bg-s: var(--tds-color-brand-s);
-    --color-bg-l: var(--tds-color-brand-l);
-}
-
-.button--success {
-    --color: var(--tds-color-white);
-    --color-bg-h: var(--tds-color-success-h);
-    --color-bg-s: var(--tds-color-success-s);
-    --color-bg-l: var(--tds-color-success-l);
-}
-
-.button--destructive {
-    --color: var(--tds-color-white);
-    --color-bg-h: var(--tds-color-destructive-h);
-    --color-bg-s: var(--tds-color-destructive-s);
-    --color-bg-l: var(--tds-color-destructive-l);
-}
-
-.button--destructive-inverse {
-    color: var(--tds-color-destructive);
-    background-color: var(--tds-color-white);
-    border-color: transparent;
-    box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05),
-        0 2px 0 hsla(0, 0%, 0%, 0.05);
-}
-
-.button--destructive-inverse:hover:not(.button--disabled),
-.button--destructive-inverse:focus:not(.button--disabled) {
-    color: var(--tds-color-destructive);
-    background-color: var(--tds-color-sand);
-    border-color: transparent;
-}
-
-.button--destructive-inverse:active:not(.button--disabled) {
-    color: var(--tds-color-meteorite);
-    background-color: var(--tds-color-fog);
-    border-color: transparent;
-}
-
-.button--disabled {
-    background: var(--tds-color-fog);
-    border-color: var(--tds-color-fog);
-    box-shadow: 0 1px 0 var(--tds-color-fog);
-    color: var(--tds-color-granite);
-    cursor: not-allowed;
-    pointer-events: none;
-    outline: none;
-}
-
-.button--small {
-    font-size: var(--tds-font-size-sm);
-    padding: var(--tds-spacing-2) var(--tds-spacing-4);
-}
-
-.button--large {
-    font-size: var(--tds-font-size-md);
-    padding: var(--tds-spacing-3) var(--tds-spacing-5);
-}
-
-.button[data-icon-size] {
-    padding: 0;
-}
-
-.button[data-icon-size='small'] {
-    padding: calc(var(--tds-spacing-2) + 0.75px);
-}
-
-.button[data-icon-size='medium'] {
-    padding: calc(var(--tds-spacing-2) + 1px);
-}
-
-.button[data-icon-size='large'] {
-    padding: calc(var(--tds-spacing-2) + 2px);
-}
-
-.spinner {
-    margin-right: var(--tds-spacing-2);
-    margin-left: calc(var(--tds-spacing-1) * -1);
-    animation: rotation 2s infinite linear;
-}
-
-@keyframes rotation {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(359deg);
-    }
-}

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

@@ -1,99 +0,0 @@
-import { html, renderIntoBody } from '../../../shared/testutils';
-
-import ChildSummary from '../childSummary';
-
-customElements.define(
-    'tds-child-summary',
-    ChildSummary.CustomElementConstructor
-);
-
-let location = {
-    href: '/'
-};
-
-Object.defineProperty(window, 'location', {
-    get: () => location
-});
-
-describe('tds-child-summary', () => {
-    describe('titleMode', () => {
-        describe('anchor', () => {
-            it('renders the correct element', () => {
-                let element = renderIntoBody(html`
-                    <tds-child-summary
-                        path="/"
-                        title="Hello"
-                        title-mode="anchor"
-                    ></tds-child-summary>
-                `);
-                expect(element.shadowRoot.querySelector('.title').tagName).toBe(
-                    'A'
-                );
-            });
-            it('renders a button if no path is specified', () => {
-                let element = renderIntoBody(
-                    html`
-                        <tds-child-summary title="Hello"></tds-child-summary>
-                    `
-                );
-                expect(element.shadowRoot.querySelector('.title').tagName).toBe(
-                    'BUTTON'
-                );
-            });
-            it('sets the window location when the item is clicked', () => {
-                let element = renderIntoBody(
-                    html` <tds-child-summary path="/test"></tds-child-summary> `
-                );
-                element.shadowRoot
-                    .querySelector('a')
-                    .dispatchEvent(new MouseEvent('click'));
-                expect(window.location.href).toEqual('/');
-                element.shadowRoot
-                    .querySelector('.item')
-                    .dispatchEvent(new MouseEvent('click'));
-                expect(window.location.href).toEqual('/test');
-            });
-        });
-        describe('button', () => {
-            it('renders the correct element', () => {
-                let element = renderIntoBody(
-                    html`
-                        <tds-child-summary
-                            title="Hello"
-                            title-mode="button"
-                        ></tds-child-summary>
-                    `
-                );
-                expect(element.shadowRoot.querySelector('.title').tagName).toBe(
-                    'BUTTON'
-                );
-            });
-            it('dispatches a navigate event', () => {
-                let handler = jest.fn();
-                let element = renderIntoBody(
-                    html`
-                        <tds-child-summary
-                            title-mode="button"
-                        ></tds-child-summary>
-                    `
-                );
-                element.addEventListener('navigate', handler);
-                element.shadowRoot
-                    .querySelector('button')
-                    .dispatchEvent(new MouseEvent('click'));
-                expect(handler).toHaveBeenCalled();
-            });
-        });
-        it('text', () => {
-            let element = renderIntoBody(html`
-                <tds-child-summary
-                    title="Hello"
-                    title-mode="text"
-                ></tds-child-summary>
-            `);
-            expect(element.shadowRoot.querySelector('.title').tagName).toBe(
-                'SPAN'
-            );
-        });
-    });
-});

package/src/modules/tds/childSummary/childSummary.css

@@ -1,74 +0,0 @@
-@import 'tds/reset';
-
-a,
-a:hover,
-a:focus,
-a:active {
-    text-decoration: none;
-}
-
-.item {
-    align-items: center;
-    background-color: var(--tds-color-white);
-    display: flex;
-    padding: var(--tds-spacing-6);
-}
-
-.body {
-    flex: 1;
-}
-
-.title {
-    appearance: none;
-    -webkit-appearance: none;
-    background: none;
-    border: none;
-    color: var(--tds-color-brand);
-    cursor: pointer;
-    font-size: var(--tds-font-size-md);
-    text-align: left;
-}
-
-.subtitle {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-xs);
-    margin-top: var(--tds-spacing-1);
-}
-
-.action {
-    margin-left: var(--tds-spacing-4);
-}
-
-.icon {
-    background-color: var(--tds-color-fog);
-    border-radius: var(--tds-radius-full);
-    color: var(--tds-color-meteorite);
-    transition: transform 0.15s ease-in-out;
-    padding: var(--tds-spacing-2);
-}
-
-.icon--complete {
-    background-color: var(--tds-color-evergreen);
-    color: var(--tds-color-white);
-}
-
-.item:hover {
-    cursor: pointer;
-}
-
-.item:hover .title,
-.item:focus .title,
-.item:active .title {
-    text-decoration: underline;
-}
-
-.item:hover .subtitle,
-.item:focus .subtitle,
-.item:active .subtitle {
-    text-decoration: none;
-}
-
-.item:hover .icon,
-.item:focus .icon {
-    transform: translateX(10px);
-}

package/src/modules/tds/childSummary/childSummary.html

@@ -1,38 +0,0 @@
-<template>
-    <div class="item" onclick={onItemClick}>
-        <div class="body">
-            <!-- TITLE-->
-            <a class="title" if:true={titleIsAnchor} href={path}>{title}</a>
-            <button
-                class="title"
-                if:true={titleIsButton}
-                onclick={onButtonClick}
-            >
-                {title}
-            </button>
-            <span class="title" if:true={titleIsText}>{title}</span>
-            <!-- END TITLE-->
-            <div class="subtitle">{subtitle}</div>
-        </div>
-        <div class="action">
-            <template if:true={complete}>
-                <div class="icon icon--complete">
-                    <tds-icon
-                        size="small"
-                        sprite="action"
-                        symbol="check"
-                    ></tds-icon>
-                </div>
-            </template>
-            <template if:false={complete}>
-                <div class="icon">
-                    <tds-icon
-                        size="small"
-                        sprite="utility"
-                        symbol="chevronright"
-                    ></tds-icon>
-                </div>
-            </template>
-        </div>
-    </div>
-</template>

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

@@ -1,40 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-child-summary',
-    parameters: {
-        modules: ['/modules/tds-child-summary.js']
-    }
-};
-
-export const Base = () => html`
-    <div style="padding: 20px; background-color: #f0f0f0;">
-        <tds-child-summary
-            title="Send Email Through Salesforce"
-            subtitle="+100 Points"
-            path="/"
-        ></tds-child-summary>
-    </div>
-`;
-
-export const Complete = () => html`
-    <div style="padding: 20px; background-color: #f0f0f0;">
-        <tds-child-summary
-            title="Help Your Reps Use Activities"
-            subtitle="+100 Points"
-            complete="true"
-            path="/"
-        >
-        </tds-child-summary>
-    </div>
-`;
-
-export const TitleButton = () => html`
-    <div style="padding: 20px; background-color: #f0f0f0;">
-        <tds-child-summary
-            subtitle="+100 Points"
-            title="Send Email Through Salesforce"
-            title-mode="button"
-        ></tds-child-summary>
-    </div>
-`;