@salesforcedevs/arch-components 1.20.17-alpha1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+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>
+`;