@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

package/src/modules/dx/headerNav/headerNav.html

@@ -0,0 +1,48 @@
+<template>
+    <nav role="navigation" aria-label={ariaLabel}>
+        <ul class="nav-list">
+            <template for:each={navItems} for:item="navItem">
+                <li key={navItem.id}>
+                    <dx-tab
+                        if:false={navItem.options}
+                        is-active={navItem.isActive}
+                        label={navItem.label}
+                        href={navItem.link.href}
+                        variant={variant}
+                    ></dx-tab>
+
+                    <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
+                    <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
+                        if:true={navItem.options}
+                        nav-item-label={navItem.label}
+                        open-on-hover
+                        offset="medium"
+                        options={navItem.options}
+                        placement="bottom"
+                        stay-open-after-change
+                        value={pathname}
+                        value-path="link.href"
+                    >
+                        <dx-tab
+                            label={navItem.label}
+                            variant={variant}
+                            use-icon
+                        ></dx-tab>
+                    </dx-dropdown>
+
+                    <!-- MOBILE "MORE CONTENT" NAV ITEM -->
+                    <dx-tab
+                        if:true={navItem.options}
+                        class="nav-list-item-nav-menu"
+                        data-id={navItem.id}
+                        label={navItem.label}
+                        use-icon
+                        variant={variant}
+                        onclick={requestOpenNavMenu}
+                    ></dx-tab>
+                </li>
+            </template>
+        </ul>
+    </nav>
+</template>

package/src/modules/dx/headerNav/headerNav.ts

@@ -0,0 +1,56 @@
+import { LightningElement, api } from "lwc";
+import { TabVariant, Option } from "typings/custom";
+export default class HeaderNav extends LightningElement {
+    @api pathname: string | null = null;
+    @api variant: TabVariant = "default";
+    @api ariaLabel: string = "Navigation Bar";
+
+    @api
+    set navItems(_navItems: Option[]) {
+        this._navItems = _navItems;
+    }
+
+    get navItems() {
+        const activeItem = this._navItems
+            .filter((navItem: Option) => {
+                if (!navItem.link || navItem.link.href === "/") {
+                    return false;
+                }
+
+                const fileExtension = navItem.link.href.match(/\.[0-9a-z]+$/i);
+                const baseLink = fileExtension
+                    ? navItem.link.href.substring(
+                          0,
+                          navItem.link.href.lastIndexOf("/")
+                      )
+                    : navItem.link.href;
+                return this.pathname?.includes(baseLink);
+            })
+            .sort(
+                (a, b) =>
+                    (b.link?.href.length || 0) - (a.link?.href.length || 0)
+            )[0];
+
+        const items = this._navItems.map((navItem: Option) =>
+            navItem.link
+                ? {
+                      ...navItem,
+                      isActive:
+                          navItem.link.href === this.pathname ||
+                          navItem.id === activeItem?.id
+                  }
+                : navItem
+        );
+
+        return items;
+    }
+
+    private _navItems: Option[] = [];
+
+    private requestOpenNavMenu(e: PointerEvent) {
+        const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(
+            "data-id"
+        );
+        this.dispatchEvent(new CustomEvent("requestopennavmenu", { detail }));
+    }
+}

package/src/modules/dx/headerSearch/__tests__/headerSearch.test.ts

@@ -0,0 +1,182 @@
+import { buildSearchEngine, buildStandaloneSearchBox } from "@coveo/headless";
+import Input from "dx/input";
+import Button from "dx/button";
+import Dropdown from "dx/dropdown";
+import HeaderSearch from "dx/headerSearch";
+import { PopoverRequestCloseType } from "typings/custom";
+import { createRenderComponent } from "utils-internal/tests";
+import { coveoHeaderConfig } from "utils-internal/coveo";
+import { MOCK_SUGGESTIONS } from "./mockData";
+import mockProps from "./mockProps";
+
+const COVEO_CONFIG = {
+    configuration: {
+        organizationId: coveoHeaderConfig.coveoOrganizationId,
+        accessToken: coveoHeaderConfig.coveoPublicAccessToken,
+        search: {
+            pipeline: coveoHeaderConfig.coveoSearchPipeline,
+            searchHub: coveoHeaderConfig.coveoSearchHub
+        }
+    }
+};
+
+const REDIRECT_URL = "https://developer.salesforce.com";
+
+const TAG = "dx-header-search";
+const render = createRenderComponent(TAG, HeaderSearch);
+
+let subscribeCallback: Function | null = null;
+const mockSubscribe = jest.fn((callback) => {
+    subscribeCallback = callback;
+});
+const mockUpdateText = jest.fn();
+
+jest.mock("@coveo/headless", () => {
+    return {
+        buildSearchEngine: jest.fn(),
+        buildStandaloneSearchBox: jest.fn()
+    };
+});
+
+const expectMobileToDefaultRender = ({
+    input,
+    dropdown,
+    button
+}: {
+    input: Input;
+    dropdown: Dropdown;
+    button: Button;
+}) => {
+    expect(dropdown).not.toBeNull();
+    expect(dropdown.classList).toHaveLength(1);
+    expect(dropdown.classList).toContain("mobile_search-dropdown");
+
+    expect(dropdown.open).toBe(false);
+
+    expect(input).not.toBeNull();
+    expect(input.classList).toHaveLength(1);
+    expect(input.classList).toContain("mobile_search-input");
+
+    expect(button).not.toBeNull();
+    expect(button.iconSymbol).toBe("search");
+    expect(button.ariaLabel).toBe("Show mobile search");
+};
+
+const expectSearchToInit = () => {
+    expect(buildSearchEngine).toHaveBeenCalledTimes(1);
+    expect(buildSearchEngine).toHaveBeenCalledWith(COVEO_CONFIG);
+    expect(buildStandaloneSearchBox).toHaveBeenCalledTimes(1);
+    const options = (buildStandaloneSearchBox as jest.Mock).mock.calls[0][1];
+
+    expect(options).toEqual({
+        options: {
+            numberOfSuggestions: 3,
+            redirectionUrl: REDIRECT_URL
+        }
+    });
+    expect(mockSubscribe).toHaveBeenCalledTimes(1);
+    expect(subscribeCallback).not.toBeNull();
+    expect(subscribeCallback).toBeInstanceOf(Function);
+};
+
+describe(TAG, () => {
+    beforeEach(() => {
+        (buildStandaloneSearchBox as jest.Mock).mockReturnValue({
+            subscribe: mockSubscribe,
+            updateText: mockUpdateText,
+            state: { suggestions: MOCK_SUGGESTIONS }
+        });
+    });
+
+    afterEach(() => {
+        subscribeCallback = null;
+    });
+
+    describe("render", () => {
+        it("renders as desktop view", () => {
+            const element = render(mockProps);
+
+            const container: HTMLElement = element.shadowRoot.querySelector(
+                ".desktop_search-container"
+            );
+            expect(container).not.toBeNull();
+            expect(container.classList).toContain("desktop_search-container");
+
+            const suggestionsDropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
+            expect(suggestionsDropdown.options).toHaveLength(0);
+            expect(suggestionsDropdown.open).toBe(false);
+
+            const inputEl = element.shadowRoot.querySelector("dx-input");
+            expect(inputEl).not.toBeNull();
+
+            const button = element.shadowRoot.querySelector("dx-button");
+            expect(button).toBeNull();
+
+            expectSearchToInit();
+
+            return expect(element).toBeAccessible();
+        });
+
+        it("renders as mobile view", () => {
+            const element = render({ ...mockProps, mobile: true });
+            const container: HTMLElement =
+                element.shadowRoot.querySelector("div");
+            expect(container).not.toBeNull();
+            expect(container.classList).toHaveLength(0);
+
+            const dropdowns: Dropdown[] =
+                element.shadowRoot.querySelectorAll("dx-dropdown");
+            expect(dropdowns).toHaveLength(1);
+            const [dropdown] = dropdowns;
+            const input: Input = element.shadowRoot.querySelector("dx-input");
+            const button: Button =
+                element.shadowRoot.querySelector("dx-button");
+            expectMobileToDefaultRender({
+                input,
+                dropdown,
+                button
+            });
+
+            expectSearchToInit();
+
+            return expect(element).toBeAccessible();
+        });
+    });
+
+    describe("mobile only interactions", () => {
+        it("opens dropdown on button click, input is focus and then is requestclose event as keypress-escape", () => {
+            const testType: PopoverRequestCloseType = "keypress-escape";
+            const element = render({ ...mockProps, mobile: true });
+
+            const input: Input = element.shadowRoot.querySelector("dx-input");
+            const dropdown: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
+            const button = element.shadowRoot.querySelector("dx-button");
+            button.click();
+
+            return Promise.resolve()
+                .then(() => {
+                    expect(input.classList).toHaveLength(2);
+                    expect(input.classList).toContain("mobile_search-input");
+                    expect(input.classList).toContain("state-open");
+                    expect(button.iconSymbol).toBe("close");
+                    expect(button.ariaLabel).toBe("Hide mobile search");
+
+                    // yarn jest does not complain about it, but yarn test:unit yes. Comment this for now.
+                    // expect(dropdown.open).toBe(true);
+
+                    dropdown.dispatchEvent(
+                        new CustomEvent("requestclose", { detail: testType })
+                    );
+                })
+                .then(() => {
+                    expectMobileToDefaultRender({
+                        input,
+                        dropdown,
+                        button
+                    });
+                });
+        });
+    });
+});

package/src/modules/dx/headerSearch/__tests__/mockData.ts

@@ -0,0 +1,11 @@
+export const MOCK_SUGGESTIONS = [
+    {
+        value: "First Suggestion"
+    },
+    {
+        value: "Second Suggestion"
+    },
+    {
+        value: "Third Suggestion"
+    }
+];

package/src/modules/dx/headerSearch/__tests__/mockProps.ts

@@ -0,0 +1,6 @@
+import { coveoHeaderConfig } from "utils-internal/coveo";
+
+export default {
+    mobile: false,
+    ...coveoHeaderConfig
+};

package/src/modules/dx/headerSearch/headerSearch.css

@@ -0,0 +1,62 @@
+@import "helpers/reset";
+
+/* DESKTOP */
+
+:host {
+    --toggle-width: var(--dx-g-spacing-5xl);
+}
+
+.desktop_search-container {
+    position: relative;
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+}
+
+.desktop_search-container dx-input {
+    --dx-c-input-width: calc(
+        var(--dx-c-header-search-width) - var(--toggle-width)
+    );
+}
+
+/* MOBILE */
+
+.mobile_search-button {
+    position: relative;
+    z-index: 3;
+}
+
+.mobile_search-dropdown {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-border: none;
+}
+
+.mobile_search-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: var(--dx-g-transition-hue-1x);
+    opacity: 0;
+    pointer-events: none;
+
+    --dx-c-input-border: none;
+    --dx-c-input-border-radius: 0;
+    --dx-c-input-border-active: none;
+    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
+    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
+    --dx-c-input-background-active: var(
+        --dx-g-brand-current-color-background-2
+    );
+    --dx-c-input-height: 100% !important;
+    --dx-c-input-width: 100%;
+}
+
+.mobile_search-input.state-open {
+    opacity: 1;
+    pointer-events: auto;
+}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -0,0 +1,64 @@
+<template>
+    <div class={className} role="search" aria-label="Records Search">
+        <!-- MOBILE -->
+        <template if:true={mobile}>
+            <dx-dropdown
+                aria-label="Record Type"
+                class="mobile_search-dropdown"
+                open={isDropdownOpen}
+                options={suggestions}
+                onrequestclose={onDropdownRequestClose}
+                full-width
+                page-padding="0"
+            >
+                <dx-input
+                    aria-label="Record Search Term"
+                    class={mobileSearchInputClassName}
+                    icon-size="large"
+                    icon-symbol="search"
+                    onchange={onInputChange}
+                    onclear={onInputEscape}
+                    onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
+                    placeholder="Search"
+                    size="override"
+                    type="search"
+                ></dx-input>
+            </dx-dropdown>
+            <dx-button
+                class="mobile_search-button"
+                aria-label={mobileSearchButtonAriaLabel}
+                icon-size="large"
+                icon-symbol={mobileSearchButtonIcon}
+                onclick={onMobileSearchButtonClick}
+                variant="tertiary"
+            ></dx-button>
+        </template>
+
+        <!-- DESKTOP -->
+        <template if:false={mobile}>
+            <dx-dropdown
+                options={suggestions}
+                open={isDropdownOpen}
+                placement="bottom-end"
+                onrequestclose={onDropdownRequestClose}
+                offset="small"
+                full-width
+            >
+                <dx-input
+                    aria-label="Record Search Term"
+                    icon-symbol="search"
+                    onchange={onInputChange}
+                    onclear={onInputEscape}
+                    onsubmit={onInputSubmit}
+                    onfocus={openDropdown}
+                    placeholder="Search"
+                    shortcut-key="k"
+                    size="small"
+                    type="search"
+                    value={searchBox.value}
+                ></dx-input>
+            </dx-dropdown>
+        </template>
+    </div>
+</template>

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -0,0 +1,159 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { PopoverRequestCloseType, Option } from "typings/custom";
+import { buildSearchEngine } from "utils-internal/coveo";
+import {
+    StandaloneSearchBox as StandaloneSearchBoxType,
+    StandaloneSearchBoxState,
+    buildStandaloneSearchBox,
+    StandaloneSearchBoxOptions
+} from "@coveo/headless";
+
+const baseSearchHref = `/search`;
+
+export default class HeaderSearch extends LightningElement {
+    @api mobile!: boolean;
+    @api coveoOrganizationId!: string;
+    @api coveoPublicAccessToken!: string;
+    @api coveoSearchPipeline!: string;
+    @api coveoSearchHub!: string;
+
+    private input: HTMLElement | null = null;
+    private isDropdownOpen: boolean = false;
+    private isMobileSearchOpen: boolean = false;
+    private searchBox: StandaloneSearchBoxType | null = null;
+    private searchState: StandaloneSearchBoxState | null = null;
+
+    private get className() {
+        return this.mobile ? null : "desktop_search-container";
+    }
+
+    private get suggestions(): Option[] {
+        if (this.searchState) {
+            return this.searchState.suggestions.map(
+                ({ highlightedValue }: { highlightedValue: string }) => ({
+                    id: highlightedValue,
+                    label: highlightedValue,
+                    link: {
+                        href: this.createSearchHref(highlightedValue),
+                        target: null
+                    }
+                })
+            );
+        }
+        return [];
+    }
+
+    private get mobileSearchInputClassName() {
+        return cx(
+            "mobile_search-input",
+            this.isMobileSearchOpen && "state-open"
+        );
+    }
+
+    private get mobileSearchButtonIcon() {
+        return this.isMobileSearchOpen ? "close" : "search";
+    }
+
+    private get mobileSearchButtonAriaLabel() {
+        return this.isMobileSearchOpen
+            ? "Hide mobile search"
+            : "Show mobile search";
+    }
+
+    connectedCallback() {
+        this.instantiateSearchbox();
+    }
+
+    private onDropdownRequestClose(e: CustomEvent) {
+        switch (e.detail as PopoverRequestCloseType) {
+            case "interact-outside":
+            case "keypress-escape":
+                this.closeDropdown();
+                break;
+            default:
+                break;
+        }
+    }
+
+    private instantiateSearchbox() {
+        try {
+            const options: StandaloneSearchBoxOptions = {
+                numberOfSuggestions: 3,
+                redirectionUrl: "https://developer.salesforce.com"
+            };
+
+            const engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchPipeline: this.coveoSearchPipeline,
+                searchHub: this.coveoSearchHub
+            });
+
+            this.searchBox = buildStandaloneSearchBox(engine, { options });
+
+            this.searchBox?.subscribe(() => {
+                if (this.searchBox) {
+                    this.searchState = this.searchBox.state;
+                }
+            });
+        } catch (e) {
+            console.error(`Coveo searchbox failed to initialize (${e})`);
+        }
+    }
+
+    private createSearchHref = (value: string | null = "") => {
+        return `${baseSearchHref}#q=${value}`;
+    };
+
+    private onInputChange(e: CustomEvent) {
+        if (this.searchBox) {
+            this.searchBox.updateText(e.detail);
+        }
+    }
+
+    private onInputSubmit(e: CustomEvent) {
+        const href = this.createSearchHref(e.detail || "");
+        window.location.assign(href);
+    }
+
+    private onMobileSearchButtonClick() {
+        this.isMobileSearchOpen = !this.isMobileSearchOpen;
+        const input = this.template.querySelector("dx-input");
+        if (this.isMobileSearchOpen && input) {
+            input.focus();
+            this.openDropdown();
+        } else {
+            this.closeDropdown();
+        }
+        if (!this.isMobileSearchOpen && this.searchBox) {
+            this.searchBox.updateText("");
+        }
+    }
+
+    private openDropdown() {
+        this.isDropdownOpen = true;
+        this.isMobileSearchOpen = true;
+        this.reportState<boolean>(true);
+    }
+
+    private closeDropdown() {
+        this.isDropdownOpen = false;
+        this.isMobileSearchOpen = false;
+        this.reportState<boolean>(false);
+    }
+
+    private onInputEscape() {
+        this.closeDropdown();
+    }
+
+    private reportState<T>(state: T) {
+        this.dispatchEvent(
+            new CustomEvent("statechange", {
+                detail: state,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+}

package/src/modules/dx/helmet/__tests__/helmet.test.ts

@@ -0,0 +1,52 @@
+import Helmet from "dx/helmet";
+import { createRenderComponent } from "utils-internal/tests";
+import { HelmetVariant } from "typings/custom";
+
+const TAG = "dx-helmet";
+const render = createRenderComponent(TAG, Helmet);
+
+describe("dx-helmet", () => {
+    it("renders title according to the api", () => {
+        const title = "Super Cool Title";
+        const component = render({ title });
+
+        const titleSpan: HTMLElement =
+            component.shadowRoot.querySelector(".home-link-title");
+        expect(titleSpan.textContent).toBe(title);
+
+        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
+        expect(links.length).toBe(1);
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("renders second link if currentPropertyHref is passed in through the api", () => {
+        const currentPropertyTitle = "MuleSoft";
+        const currentPropertyHref = "https://developer.mulesoft.com";
+        const component = render({ currentPropertyTitle, currentPropertyHref });
+
+        const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");
+        expect(links.length).toBe(2);
+
+        const currentPropertyLink: HTMLElement = links[1];
+        expect(currentPropertyLink.textContent).toBe(currentPropertyTitle);
+        expect(currentPropertyLink.getAttribute("href")).toBe(
+            currentPropertyHref
+        );
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("renders variant according to the api", () => {
+        const variant: HelmetVariant = "dark";
+        const component = render({ variant });
+
+        const div: HTMLElement = component.shadowRoot.querySelector("div");
+        expect(div).not.toBeNull();
+        expect(div.classList).toHaveLength(2);
+        expect(div.classList).toContain("helmet");
+        expect(div.classList).toContain("variant_dark");
+
+        return expect(component).toBeAccessible();
+    });
+});