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

package/src/modules/tds/search/lib/listbox.ts

@@ -1,209 +0,0 @@
-import { ShadowRootTheGoodPart } from 'lwc';
-
-type Input = {
-    onChange: (state: ListboxState) => void;
-    onSelect: (index: number) => void;
-    onSubmit: () => void;
-    shadowRoot: ShadowRootTheGoodPart;
-};
-
-export type ListboxState = {
-    active: boolean;
-    selectedIndex: number;
-    setup: boolean;
-};
-
-export type Selector = 'root' | 'input' | 'options' | 'option';
-
-const SELECTOR_ROOT = 'root';
-const SELECTOR_INPUT = 'input';
-const SELECTOR_OPTIONS = 'options';
-const SELECTOR_OPTION = 'option';
-
-export function getSelector(selector: Selector) {
-    return `[data-listbox="${selector}"]`;
-}
-
-export class Listbox {
-    private _count: number = 0;
-    private _state: ListboxState = {
-        active: false,
-        selectedIndex: -1,
-        setup: false
-    };
-    private get state(): ListboxState {
-        return this._state;
-    }
-    private set state(value: ListboxState) {
-        this._state = value;
-        this.update();
-        this.input.onChange(this._state);
-    }
-
-    private get isExpanded() {
-        return this.state.active && this._count > 0;
-    }
-
-    private hover = false;
-
-    constructor(private input: Input) {
-        input.onChange(this.state);
-    }
-
-    private setState(
-        nextState:
-            | Partial<ListboxState>
-            | ((state: ListboxState) => Partial<ListboxState>)
-    ) {
-        const { state } = this;
-        this.state = {
-            ...state,
-            ...(typeof nextState === 'function' ? nextState(state) : nextState)
-        };
-    }
-
-    renderedCallback() {
-        if (!this.state.setup) {
-            const $input = this.getElement('input')!;
-            const $options = this.getElement(SELECTOR_OPTIONS)!;
-            $input.addEventListener('blur', this.onBlur as EventListener);
-            $input.addEventListener('focus', this.onFocus as EventListener);
-            $input.addEventListener('keydown', this.onKeyDown as EventListener);
-            $options.addEventListener('click', this.onClick as EventListener);
-            $options.addEventListener('mouseenter', this.onMouseEnter as EventListener);
-            $options.addEventListener('mouseleave', this.onMouseLeave as EventListener);
-            this.state.setup = true;
-        }
-        this._count = this.input.shadowRoot.querySelectorAll(
-            getSelector(SELECTOR_OPTION)
-        ).length;
-        this.update();
-    }
-
-    disconnectedCallback() {
-        const $input = this.getElement(SELECTOR_INPUT)!;
-        const $options = this.getElement(SELECTOR_OPTIONS)!;
-        if ($input) {
-            $input.removeEventListener('blur', this.onBlur as EventListener);
-            $input.removeEventListener('focus', this.onFocus as EventListener);
-            $input.removeEventListener('keydown', this.onKeyDown as EventListener);
-        }
-        if ($options) {
-            $options.removeEventListener('click', this.onClick as EventListener);
-            $options.removeEventListener('mouseenter', this.onMouseEnter as EventListener);
-            $options.removeEventListener('mouseleave', this.onMouseLeave as EventListener);
-        }
-    }
-
-    private getElement(selector: Selector) {
-        return this.input.shadowRoot.querySelector(getSelector(selector));
-    }
-
-    private onClick = (e: MouseEvent) => {
-        const selectedIndex = Array.from(
-            this.input.shadowRoot.querySelectorAll(getSelector(SELECTOR_OPTION))
-        ).findIndex((n) => n.contains(e.target as HTMLElement));
-        this.setState({ active: false, selectedIndex });
-        this.input.onSelect(this.state.selectedIndex);
-    };
-
-    private onBlur = (e: FocusEvent) => {
-        if (!this.hover) {
-            this.setState({ active: false });
-        }
-    };
-
-    private onFocus = (e: FocusEvent) => {
-        this.setState({ active: true, selectedIndex: -1 });
-    };
-
-    private onKeyDown = (e: KeyboardEvent) => {
-        switch (e.key) {
-            case 'ArrowUp':
-                this.setState((state) => {
-                    let { selectedIndex } = state;
-                    selectedIndex--;
-                    if (selectedIndex < 0) {selectedIndex = this._count - 1;}
-                    return { selectedIndex };
-                });
-                break;
-            case 'ArrowDown':
-                this.setState((state) => {
-                    let { selectedIndex } = state;
-                    selectedIndex++;
-                    if (selectedIndex === this._count) {selectedIndex = 0;}
-                    return { selectedIndex };
-                });
-                break;
-            case 'Enter':
-                this.setState({ active: false });
-                if (this.state.selectedIndex > -1) {
-                    this.input.onSelect(this.state.selectedIndex);
-                } else {
-                    this.input.onSubmit();
-                }
-                break;
-        }
-    };
-
-    private onMouseEnter = (e: MouseEvent) => {
-        this.hover = true;
-    };
-
-    private onMouseLeave = (e: MouseEvent) => {
-        this.hover = false;
-    };
-
-    private setRootAttributes() {
-        const $root = this.getElement(SELECTOR_ROOT)!;
-        $root.setAttribute('aria-expanded', String(this.isExpanded));
-        $root.setAttribute('aria-haspopup', 'listbox');
-        $root.setAttribute('role', 'combobox');
-    }
-
-    private setInputAttributes() {
-        const $activeDecendant = this.input.shadowRoot.querySelectorAll(
-            getSelector(SELECTOR_OPTION)
-        )[this.state.selectedIndex] as HTMLElement | undefined;
-        const $input = this.getElement(SELECTOR_INPUT)!;
-        const $options = this.getElement(SELECTOR_OPTIONS)!;
-        $input.setAttribute(
-            'aria-activedescendant',
-            $activeDecendant ? $activeDecendant.getAttribute('id') || '' : ''
-        );
-        $input.setAttribute('aria-autocomplete', 'list');
-        $input.setAttribute('aria-controls', $options.getAttribute('id') || '');
-        $input.setAttribute('autocomplete', 'off');
-    }
-
-    private setListboxAttributes() {
-        const $options = this.getElement(SELECTOR_OPTIONS)!;
-        $options.setAttribute('role', 'listbox');
-        $options.setAttribute('aria-hidden', String(!this.isExpanded));
-        this.input.shadowRoot.querySelectorAll('ui,li').forEach((node) => {
-            const element = node as HTMLElement;
-            if (element.hasAttribute('role')) {return;}
-            element.setAttribute('role', 'presentation');
-        });
-    }
-
-    private setListboxItemAttributes() {
-        this.input.shadowRoot
-            .querySelectorAll(getSelector(SELECTOR_OPTION))
-            .forEach((node, i) => {
-                const element = node as HTMLElement;
-                element.setAttribute(
-                    'aria-selected',
-                    String(i === this.state.selectedIndex)
-                );
-                element.setAttribute('role', 'option');
-            });
-    }
-
-    private update() {
-        this.setRootAttributes();
-        this.setInputAttributes();
-        this.setListboxAttributes();
-        this.setListboxItemAttributes();
-    }
-}

package/src/modules/tds/search/search.css

@@ -1,122 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    font-size: var(--tds-font-size-md);
-    position: relative;
-    width: 100%;
-    z-index: 10;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.search-input__wrapper {
-    align-items: stretch;
-    display: flex;
-    position: relative;
-}
-
-.search-input__label {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    white-space: nowrap;
-}
-
-.search-input__input {
-    border-radius: var(--tds-radius-md);
-    border: 1px solid var(--tds-color-fog);
-    color: var(--tds-color-black);
-    flex: 1;
-    font-family: inherit;
-    font-size: var(--tds-font-size-md);
-    line-height: 1.875;
-    overflow: hidden;
-    padding: 0.4rem 0;
-    padding-left: var(--tds-spacing-8);
-    position: relative;
-    text-overflow: ellipsis;
-    transition: border 0.1s linear, background-color 0.1s linear;
-    white-space: nowrap;
-}
-
-.search-input__icon {
-    color: var(--tds-color-granite);
-    left: 10px;
-    position: absolute;
-    top: 13px;
-    z-index: 1;
-}
-
-.search-results {
-    background-color: white;
-    border-radius: var(--tds-radius-lg);
-    box-shadow: var(--tds-shadow-lg);
-    left: 0;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    padding: var(--tds-spacing-6);
-    box-sizing: border-box;
-    margin-top: var(--tds-spacing-1);
-}
-
-.search-result:hover,
-.search-result[aria-selected='true'] {
-    background-color: var(--tds-color-sand);
-    cursor: pointer;
-    border-radius: var(--tds-radius-lg);
-}
-
-.search-result,
-.search-result__heading {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-sm);
-    line-height: var(--tds-line-height-snug);
-    padding-left: var(--tds-spacing-2);
-    padding-right: var(--tds-spacing-2);
-}
-
-.search-result__heading {
-    font-weight: bold;
-    margin: var(--tds-spacing-5) 0 var(--tds-spacing-1) 0;
-}
-
-.search-result__group:first-child .search-result__heading {
-    font-weight: bold;
-    margin: 0 0 var(--tds-spacing-1) 0;
-}
-
-.search-result {
-    align-items: center;
-    display: flex;
-    padding: var(--tds-spacing-2);
-}
-
-.search-result__icon {
-    color: #b0adab; /* TODO: token */
-    margin-right: var(--tds-spacing-2);
-}
-
-.search-result__image {
-    border-radius: var(--tds-radius-lg);
-    margin-right: var(--tds-spacing-2);
-    max-width: 40px;
-}
-
-.search-result__pretitle {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-sm);
-    line-height: var(--tds-line-height-snug);
-}
-
-.search-result__title {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-md);
-    font-weight: bold;
-}
-
-[data-listbox='options'][aria-hidden='true'] {
-    display: none;
-}

package/src/modules/tds/search/search.html

@@ -1,21 +0,0 @@
-<template>
-    <div class="search" data-listbox="root">
-        <div class="search-input__wrapper">
-            <label class="search-input__label" for="search"
-                >{placeholder}</label
-            >
-            <tds-icon
-                class="search-input__icon"
-                size="small"
-                symbol="search"
-            ></tds-icon>
-            <input
-                class="search-input__input"
-                id="search"
-                onkeydown={onInput}
-                onfocus={onFocus}
-                placeholder={placeholder}
-            />
-        </div>
-    </div>
-</template>

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

@@ -1,20 +0,0 @@
-import { html } from 'lit-html';
-
-import { completions, recents } from './__fixtures__/';
-
-export default {
-    title: 'tds/tds-search',
-    parameters: {
-        modules: ['/modules/tds-search.js']
-    }
-};
-
-export const Completions = () =>
-    html`
-    <tds-search .completions=${completions} placeholder="Really really long placeholder that is too long"></th-search>
-  `;
-
-export const Recents = () =>
-    html`
-    <tds-search .recents=${recents}></th-search>
-  `;

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

@@ -1,107 +0,0 @@
-import { api, LightningElement } from 'lwc';
-
-import { Listbox, ListboxState } from './lib/listbox';
-
-import { Completion, RecentSection, SearchEvent } from './types';
-
-export default class extends LightningElement {
-    @api completions: Completion[] | null = [];
-    @api defaultValue: string | null = null;
-    @api placeholder: string = 'Search on architect.salesforce.com';
-    @api recents: RecentSection[] | null = null;
-
-    private completionTerms: string | null = null;
-    private setup = false;
-
-    private listbox = new Listbox({
-        onChange: (state) => {
-            this.listboxState = state;
-        },
-        onSelect: (index) => {
-            const { completions, hasCompletions, hasRecents, recents } = this;
-            if (hasCompletions) {
-                this.dispatchSearchEvent({
-                    type: 'completion',
-                    value: completions![index]
-                });
-            } else if (hasRecents) {
-                this.dispatchSearchEvent({
-                    type: 'recent',
-                    value: recents!.flatMap((s) => s.items)[index]
-                });
-            }
-        },
-        onSubmit: () => {
-            const { completionTerms } = this;
-            if (!completionTerms) {return;}
-            this.dispatchSearchEvent({ type: 'input', value: completionTerms });
-        },
-        shadowRoot: this.template
-    });
-    private listboxState: ListboxState | null = null;
-
-    private get hasCompletions() {
-        return this.completions && this.completions.length > 0;
-    }
-
-    private get hasRecents() {
-        return this.recents && this.recents.length > 0;
-    }
-
-    private get recentsWithStyle() {
-        return this.recents!.map((section) =>
-            Object.assign({}, section, {
-                items: section.items.map((item) =>
-                    Object.assign({}, item, {
-                        iconStyle: item.iconBackgroundColor
-                            ? `background-color: ${item.iconBackgroundColor};`
-                            : ''
-                    })
-                )
-            })
-        );
-    }
-
-    private dispatchSearchEvent(event: SearchEvent) {
-        this.dispatchEvent(new CustomEvent('search', { detail: event }));
-    }
-
-    private onFocus(e: FocusEvent) {
-        this.dispatchEvent(new CustomEvent('focus'));
-    }
-
-    private onInput(e: InputEvent) {
-        const { value } = e.currentTarget as HTMLInputElement;
-        if ((e as any).key === 'Enter') {
-            const search = encodeURIComponent(value);
-            window.location.replace(`/search/?keywords=${search}`);
-        }
-    }
-
-    private get showRecents() {
-        const { completionTerms, hasCompletions, hasRecents, listboxState } =
-            this;
-        if (!listboxState) {return false;}
-        if (completionTerms && completionTerms.length) {return false;}
-        return listboxState.active && hasRecents && !hasCompletions;
-    }
-
-    private get showCompletions() {
-        const { hasCompletions, listboxState } = this;
-        if (!listboxState) {return false;}
-        return listboxState.active && hasCompletions;
-    }
-
-    renderedCallback() {
-        if (!this.setup) {
-            this.setup = true;
-            if (this.defaultValue) {
-                const input = this.template.querySelector(
-                    'input'
-                ) as HTMLInputElement;
-                input.value = this.defaultValue;
-                this.completionTerms = this.defaultValue;
-            }
-        }
-    }
-}

package/src/modules/tds/search/types.d.ts

@@ -1,22 +0,0 @@
-export type Completion = {
-    value: string;
-    valueHighlighted?: string;
-};
-
-export type Recent = {
-    icon?: string;
-    iconBackgroundColor?: string;
-    path: string;
-    pretitle: string;
-    title: string;
-};
-
-export type RecentSection = {
-    items: Recent[];
-    title: string;
-};
-
-export type SearchEvent =
-    | { type: 'completion'; value: Completion }
-    | { type: 'input'; value: string }
-    | { type: 'recent'; value: Recent };

package/src/modules/tds/searchList/searchList.css

@@ -1,120 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    font-size: var(--tds-font-size-md);
-    position: relative;
-    width: 100%;
-    z-index: 10;
-}
-
-.search-input__wrapper {
-    align-items: stretch;
-    display: flex;
-    position: relative;
-}
-
-.search-input__label {
-    position: absolute !important;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    white-space: nowrap;
-}
-
-.search-input__input {
-    border-radius: var(--tds-radius-md);
-    border: 1px solid var(--tds-color-fog);
-    color: var(--tds-color-black);
-    flex: 1;
-    font-family: inherit;
-    font-size: var(--tds-font-size-md);
-    line-height: 1.875;
-    overflow: hidden;
-    padding: 0.4rem 0;
-    padding-left: var(--tds-spacing-8);
-    position: relative;
-    text-overflow: ellipsis;
-    transition: border 0.1s linear, background-color 0.1s linear;
-    white-space: nowrap;
-}
-
-.search-input__icon {
-    color: var(--tds-color-granite);
-    left: 10px;
-    position: absolute;
-    top: 13px;
-    z-index: 1;
-}
-
-.search-results {
-    background-color: white;
-    border-radius: var(--tds-radius-lg);
-    box-shadow: var(--tds-shadow-lg);
-    left: 0;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    padding: var(--tds-spacing-6);
-    box-sizing: border-box;
-    margin-top: var(--tds-spacing-1);
-}
-
-.search-result:hover,
-.search-result[aria-selected='true'] {
-    background-color: var(--tds-color-sand);
-    cursor: pointer;
-    border-radius: var(--tds-radius-lg);
-}
-
-.search-result,
-.search-result__heading {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-sm);
-    line-height: var(--tds-line-height-snug);
-    padding-left: var(--tds-spacing-2);
-    padding-right: var(--tds-spacing-2);
-}
-
-.search-result__heading {
-    font-weight: bold;
-    margin: var(--tds-spacing-5) 0 var(--tds-spacing-1) 0;
-}
-
-.search-result__group:first-child .search-result__heading {
-    font-weight: bold;
-    margin: 0 0 var(--tds-spacing-1) 0;
-}
-
-.search-result {
-    align-items: center;
-    display: flex;
-    padding: var(--tds-spacing-2);
-}
-
-.search-result__icon {
-    color: #b0adab; /* TODO: token */
-    margin-right: var(--tds-spacing-2);
-}
-
-.search-result__image {
-    border-radius: var(--tds-radius-lg);
-    margin-right: var(--tds-spacing-2);
-    max-width: 40px;
-}
-
-.search-result__pretitle {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-sm);
-    line-height: var(--tds-line-height-snug);
-}
-
-.search-result__title {
-    color: var(--tds-color-black);
-    font-size: var(--tds-font-size-md);
-    font-weight: bold;
-}
-
-[data-listbox='options'][aria-hidden='true'] {
-    display: none;
-}

package/src/modules/tds/searchList/searchList.html

@@ -1,43 +0,0 @@
-<template>
-    <tm-section-a background="white" title={titleSearchResults}>
-        <template if:true={results}>
-            <template for:each={results} for:item="result">
-                <div key={result.title}>
-                    <tds-summary
-                        description={result.description}
-                        compact
-                        display-mode="brick-tile"
-                        path={result.url}
-                        title={result.title}
-                    >
-                        <tds-content-icon
-                            slot="image"
-                            src={result.image}
-                            size="small"
-                        ></tds-content-icon>
-
-                        <div slot="pretitle"></div>
-                        <span slot="meta-right"></span>
-                        <span slot="meta-left">{result.description}</span>
-                    </tds-summary>
-                    <!-- prettier-ignore -->
-                    <hr>
-                </div>
-            </template>
-        </template>
-        <template if:true={showSearchSuggestions}>
-            <div style="display: block">
-                <center>
-                    <img src="/assets/images/ruth_search.png" />
-                    <h4 style="padding-top: 8px">Here are some search tips</h4>
-                    <span style="display: block"
-                        >Check the spelling of your keywords.</span
-                    ><span style="display: block"
-                        >Try using fewer, different, or more general
-                        words.</span
-                    >
-                </center>
-            </div>
-        </template>
-    </tm-section-a>
-</template>

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

@@ -1,10 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tds/tds-search-list',
-    parameters: {
-        modules: ['/modules/tds-search-list.js']
-    }
-};
-
-export const Base = () => html` <tds-search-list></tds-search-list> `;