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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,52 +0,0 @@
-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();
-    });
-});