@salesforcedevs/arch-components 1.20.17-alpha1

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

@@ -0,0 +1,41 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-pill',
+    parameters: {
+        modules: ['/modules/tds-pill.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-pill
+        id="123"
+        title="Full pill label verbiage mirrored here"
+        @click=${(e: MouseEvent) => {
+            // @ts-ignore
+            console.log('click', e.target.id);
+        }}
+        @remove=${(e: MouseEvent) => {
+            // @ts-ignore
+            console.log('remove', e.target.id);
+        }}
+        >Pill label</tds-pill
+    >
+`;
+
+export const Variants = () => html`
+    <div><tds-pill id="123" variant="link">Link pill</tds-pill></div>
+    <div><tds-pill id="123" variant="bare">Bare pill</tds-pill></div>
+`;
+
+export const RichLabel = () => html`
+    <tds-pill id="123">Role: <strong>Developer</strong></tds-pill>
+`;
+
+export const Truncated = () => html`
+    <div style="max-width: 200px">
+        <tds-pill id="123"
+            >Pill label that is longer than the area that contains it</tds-pill
+        >
+    </div>
+`;

package/src/modules/tds/pill/pill.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api label: string = '';
+    @api removeButtonTitle: string = 'Remove';
+    @api variant: 'link' | 'bare' | null = null;
+
+    private titleWithFallback: string | null = null;
+
+    private get className() {
+        return ['pill', this.variant ? `pill--${this.variant}` : false]
+            .filter(Boolean)
+            .join(' ');
+    }
+
+    // Use slot node text as a title if the title attribute isn't provided
+    private setTitle() {
+        const slot = this.template.querySelector('slot') as HTMLSlotElement;
+
+        this.titleWithFallback =
+            this.title ||
+            (slot
+                ? slot
+                      .assignedNodes()
+                      .map((n) => n.textContent)
+                      .join('')
+                : '');
+    }
+
+    private handleRemove(e: MouseEvent) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('remove'));
+    }
+}

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

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

package/src/modules/tds/progressBar/progressBar.css

@@ -0,0 +1,42 @@
+@import 'tds/reset';
+
+.progress-bar {
+    background-color: var(--tds-color-fog);
+    border-radius: var(--tds-radius-xl);
+}
+
+.progress-bar--x-small {
+    height: var(--tds-spacing-2);
+}
+
+.progress-bar--small {
+    height: var(--tds-font-size-xs);
+}
+
+.progress-bar--medium {
+    height: var(--tds-font-size-sm);
+}
+
+.progress-bar--large {
+    height: var(--tds-font-size-lg);
+}
+
+.progress-bar__value {
+    background-color: var(--progress-color, var(--tds-color-ocean));
+    border-radius: var(--tds-radius-xl);
+    height: 100%;
+    transition: width 250ms ease;
+}
+
+.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/progressBar/progressBar.html

@@ -0,0 +1,14 @@
+<template>
+    <div
+        class={className}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-valuenow={progress}
+        role="progressbar"
+        style="min-width: 6rem"
+    >
+        <div class="progress-bar__value" style={valueStyle}>
+            <span class="assistive-text">Progress: {progress}%</span>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,24 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-progress-bar',
+    parameters: {
+        modules: ['/modules/tds-progress-bar.js']
+    }
+};
+
+const SIZE_OPTIONS = ['x-small', 'small', 'medium', 'large'];
+
+export const Base = () => html`
+    <tds-progress-bar progress="30"></tds-progress-bar>
+`;
+
+export const Sizes = () => html`
+    ${SIZE_OPTIONS.map(
+        (o) => html`
+            <div style="margin-bottom: 1rem;">
+                <tds-progress-bar size=${o} progress="30"></tds-progress-bar>
+            </div>
+        `
+    )}
+`;

package/src/modules/tds/progressBar/progressBar.ts

@@ -0,0 +1,14 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api progress: number | null = null;
+    @api size: 'small' | 'medium' | 'large' = 'medium';
+
+    private get className() {
+        return `progress-bar progress-bar--${this.size}`;
+    }
+
+    private get valueStyle() {
+        return `width: ${this.progress}%`;
+    }
+}

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

@@ -0,0 +1,29 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import Radio from '../radio';
+
+customElements.define('tds-radio', Radio.CustomElementConstructor);
+
+describe('tds-radio', () => {
+    it('works', () => {
+        let element = renderIntoBody(
+            html` <tds-radio label="Hello"></tds-radio> `
+        );
+    });
+
+    it('adds ARIA attributes', () => {
+        const element = renderIntoBody(
+            html` <tds-radio assistive-text="Hello"></tds-radio> `
+        );
+
+        const $label = element.shadowRoot!.querySelector(
+            'label'
+        ) as HTMLElement;
+        const $labelText = element.shadowRoot!.querySelector(
+            'radio__label-text'
+        ) as HTMLElement;
+
+        expect($label.getAttribute('aria-label')).toEqual('Hello');
+        expect($labelText).toBeNull();
+    });
+});

package/src/modules/tds/radio/radio.css

@@ -0,0 +1,89 @@
+@import 'tds/reset';
+
+:host {
+    --size: var(--tds-spacing-6);
+}
+
+.radio {
+    display: inline-block;
+}
+
+.radio__input {
+    width: 1px;
+    height: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+}
+
+.radio__label {
+    position: relative;
+    display: inline-block;
+    padding-bottom: calc(var(--tds-spacing-1) / 2);
+}
+
+.radio__faux {
+    position: relative;
+    display: inline-block;
+    width: var(--size);
+    height: var(--size);
+    position: relative;
+    vertical-align: middle;
+    border: 1px solid var(--tds-color-fog);
+    border-radius: 50%;
+    background: var(--tds-color-white);
+    transition: border 0.1s linear, background-color 0.1s linear;
+    cursor: pointer;
+}
+
+.radio__input:focus + .radio__label .radio__faux {
+    box-shadow: 0 0 0 2px var(--tds-color-white),
+        0 0 0 4px var(--tds-color-brand);
+}
+
+.radio__input:disabled + .radio__label .radio__faux {
+    border-color: var(--tds-color-fog);
+    background-color: var(--tds-color-sand);
+}
+
+.radio__input:checked + .radio__label .radio__faux::after {
+    content: '';
+    width: var(--tds-spacing-3);
+    height: var(--tds-spacing-3);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    border-radius: 50%;
+    background: var(--tds-color-brand);
+}
+.radio--checkmark .radio__input:checked + .radio__label .radio__faux {
+    background: var(--tds-color-brand);
+    border-color: var(--tds-color-brand);
+}
+
+.radio--checkmark .radio__input:checked + .radio__label .radio__faux::after {
+    border-radius: 0;
+    background: var(--tds-color-brand);
+    transform: rotate(45deg) translate3d(-50%, -50%, 0);
+    transform-origin: 2px top;
+    width: calc(var(--size) / 6);
+    height: calc(var(--size) / 3);
+    border-bottom: 2px solid var(--tds-color-white);
+    border-right: 2px solid var(--tds-color-white);
+}
+
+.radio__label-text {
+    word-wrap: break-word;
+    hyphens: auto;
+    font-size: var(--tds-font-size-sm);
+    display: inline;
+    vertical-align: middle;
+    color: var(--tds-color-meteorite);
+    padding-right: var(--tds-spacing-2);
+    padding-top: var(--tds-spacing-1);
+    margin-left: var(--tds-spacing-2);
+}

package/src/modules/tds/radio/radio.html

@@ -0,0 +1,17 @@
+<template>
+    <div class={className}>
+        <input
+            type="radio"
+            class="radio__input"
+            id="radio"
+            value={value}
+            checked={isChecked}
+            onchange={handleChange}
+            disabled={isDisabled}
+        />
+        <label for="radio" class="radio__label" aria-label={assistiveText}>
+            <div class="radio__faux" aria-hidden="true"></div>
+            <div if:true={label} class="radio__label-text">{label}</div>
+        </label>
+    </div>
+</template>

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

@@ -0,0 +1,31 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-radio',
+    parameters: {
+        modules: ['/modules/tds-radio.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-radio label="Radio Label" value="option-a"></tds-radio>
+`;
+
+export const Checked = () => html`
+    <tds-radio label="Radio Label" checked></tds-radio>
+`;
+
+export const Disabled = () => html`
+    <tds-radio label="Radio Label" disabled></tds-radio>
+`;
+
+export const OutsideLabel = () => html`
+    <div style="display: flex; justify-content: space-between; width: 100%;">
+        <div>Some other label element</div>
+        <tds-radio assistive-text="Radio Label"></tds-radio>
+    </div>
+`;
+
+export const Checkmark = () => html`
+    <tds-radio label="Radio Label" variant="checkmark"></tds-radio>
+`;

package/src/modules/tds/radio/radio.ts

@@ -0,0 +1,32 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api label: string | null = null;
+    @api assistiveText: string | null = null;
+    @api value: string | null = null;
+    @api checked: boolean = false;
+    @api disabled: boolean = false;
+    @api variant: 'base' | 'check' = 'base';
+
+    private get className() {
+        return ['radio', this.variant ? `radio--${this.variant}` : false]
+            .filter(Boolean)
+            .join(' ');
+    }
+
+    private get isChecked() {
+        return typeof this.checked === 'boolean'
+            ? this.checked
+            : this.checked !== null;
+    }
+
+    private get isDisabled() {
+        return typeof this.disabled === 'boolean'
+            ? this.disabled
+            : this.disabled !== null;
+    }
+
+    handleChange(e: Event) {
+        this.dispatchEvent(new CustomEvent('change', { detail: e }));
+    }
+}

package/src/modules/tds/reset/reset.css

@@ -0,0 +1,39 @@
+:host {
+    display: block;
+    line-height: normal;
+}
+
+* {
+    box-sizing: border-box;
+    font-family: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+ul {
+    list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-size: inherit;
+}
+
+[tabindex]:not([tabindex='-1']),
+a,
+button,
+input,
+select,
+textarea {
+    outline: 2px solid transparent;
+    outline-offset: 5px;
+    transition: outline-offset var(--tds-duration-short) linear;
+}
+
+*:not(:disabled):focus {
+    outline-color: var(--tds-color-brand);
+    outline-offset: 2px;
+}

package/src/modules/tds/search/__fixtures__/index.ts

@@ -0,0 +1,32 @@
+import { Completion, RecentSection } from '../types';
+
+export const completions: Completion[] = [
+    { value: 'Apple' },
+    { value: 'Banana' }
+];
+
+export const recents: RecentSection[] = [
+    {
+        title: 'Recents',
+        items: [
+            {
+                icon: '/images/badge-1.png',
+                path: '/',
+                pretitle: 'Pretitle',
+                title: 'Title'
+            }
+        ]
+    },
+    {
+        title: 'Favorites',
+        items: [
+            {
+                icon: '/images/badge-1.png',
+                iconBackgroundColor: 'var(--tds-color-brand)',
+                path: '/',
+                pretitle: 'Pretitle',
+                title: 'Title'
+            }
+        ]
+    }
+];