@salesforcedevs/arch-components 1.20.17-alpha1

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

@@ -0,0 +1,209 @@
+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>)
+    ) {
+        let { state } = this;
+        this.state = {
+            ...state,
+            ...(typeof nextState === 'function' ? nextState(state) : nextState)
+        };
+    }
+
+    renderedCallback() {
+        if (!this.state.setup) {
+            let $input = this.getElement('input')!;
+            let $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() {
+        let $input = this.getElement(SELECTOR_INPUT)!;
+        let $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) => {
+        let 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() {
+        let $root = this.getElement(SELECTOR_ROOT)!;
+        $root.setAttribute('aria-expanded', String(this.isExpanded));
+        $root.setAttribute('aria-haspopup', 'listbox');
+        $root.setAttribute('role', 'combobox');
+    }
+
+    private setInputAttributes() {
+        let $activeDecendant = this.input.shadowRoot.querySelectorAll(
+            getSelector(SELECTOR_OPTION)
+        )[this.state.selectedIndex] as HTMLElement | undefined;
+        let $input = this.getElement(SELECTOR_INPUT)!;
+        let $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() {
+        let $options = this.getElement(SELECTOR_OPTIONS)!;
+        $options.setAttribute('role', 'listbox');
+        $options.setAttribute('aria-hidden', String(!this.isExpanded));
+        this.input.shadowRoot.querySelectorAll('ui,li').forEach((node) => {
+            let 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) => {
+                let 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

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

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

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

@@ -0,0 +1,107 @@
+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) => {
+            let { 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: () => {
+            let { 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) {
+        let { value } = e.currentTarget as HTMLInputElement;
+        if ((e as any).key === 'Enter') {
+            const search = encodeURIComponent(value);
+            window.location.replace(`/search/?keywords=${search}`);
+        }
+    }
+
+    private get showRecents() {
+        let { completionTerms, hasCompletions, hasRecents, listboxState } =
+            this;
+        if (!listboxState) return false;
+        if (completionTerms && completionTerms.length) return false;
+        return listboxState.active && hasRecents && !hasCompletions;
+    }
+
+    private get showCompletions() {
+        let { hasCompletions, listboxState } = this;
+        if (!listboxState) return false;
+        return listboxState.active && hasCompletions;
+    }
+
+    renderedCallback() {
+        if (!this.setup) {
+            this.setup = true;
+            if (this.defaultValue) {
+                let input = this.template.querySelector(
+                    'input'
+                ) as HTMLInputElement;
+                input.value = this.defaultValue;
+                this.completionTerms = this.defaultValue;
+            }
+        }
+    }
+}

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

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

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

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

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