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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import Radio from '../radio';
-
-customElements.define('tds-radio', Radio.CustomElementConstructor);
-
-describe('tds-radio', () => {
-    it('works', () => {
-        const 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

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

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

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

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

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

@@ -1,32 +0,0 @@
-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'
-            }
-        ]
-    }
-];