@salesforcedevs/docs-components 0.7.0 → 0.7.59-sppage-alpha2

package/src/modules/doc/contentMedia/contentMedia.stories.ts

@@ -1,113 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "docs/doc-content-media",
-    component: "doc-content-media"
-};
-
-// prettier-ignore
-const styles = () => html `
-    <style>
-        .container-sm {
-            max-width: 540px;
-            margin: 0 auto;
-        }
-
-        .container-fw {
-            width: 100%;
-        }
-
-        h1 {
-            font-size: 36px;
-        }
-
-        h2 {
-            font-size: 24px;
-        }
-
-        h1, h2 {
-            font-weight: bold;
-        }
-    </style>
-`;
-
-// prettier-ignore
-export const Base = () => html`${styles()}
-    <div class="container-sm">
-        <h1>Small Container</h1>
-        <h2>Images</h2>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            media-title="A cute kitten"
-            caption="An incredibly cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            media-title="A cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            caption="An incredibly cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-        ></doc-content-media>
-
-        <h2>IFrames</h2>
-        <doc-content-media
-            content-type="iframe"
-            content-src="https://www.youtube.com/embed/DfV7WnyEPTE"
-            media-title="Master Lightning Web Components in 8 Easy Steps (1)"
-            caption="Lightning Web Components are a new development platform for Salesforce."
-        ></doc-content-media>
-        <doc-content-media
-            content-type="iframe"
-            content-src="https://play.vidyard.com/yThw736PBYf18ts1f8SKXa?disable_popouts=1&v=4.2.30&type=inline"
-            media-title="Non-YouTube Video"
-            caption="doc-content-media supports iframes from any origin."
-        ></doc-content-media>
-    </div>
-
-    <div class="container-fw">
-        <h1>Full-width Container</h1>
-        <h2>Images</h2>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            media-title="A cute kitten"
-            caption="An incredibly cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            media-title="A cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-            caption="An incredibly cute kitten"
-        ></doc-content-media>
-        <doc-content-media
-            content-type="image"
-            content-src="https://placekitten.com/400/300"
-        ></doc-content-media>
-
-        <h2>IFrames</h2>
-        <doc-content-media
-            content-type="iframe"
-            content-src="https://www.youtube.com/embed/DfV7WnyEPTE"
-            media-title="Master Lightning Web Components in 8 Easy Steps (1)"
-            caption="Lightning Web Components are a new development platform for Salesforce."
-        ></doc-content-media>
-        <doc-content-media
-            content-type="iframe"
-            content-src="https://play.vidyard.com/yThw736PBYf18ts1f8SKXa?disable_popouts=1&v=4.2.30&type=inline"
-            media-title="Non-YouTube Video"
-            caption="doc-content-media supports iframes from any origin."
-        ></doc-content-media>
-    </div>
-`;

package/src/modules/doc/header/__tests__/coveoConfig.ts

@@ -1,12 +0,0 @@
-// TODO: Move coveoConfig to a specific module to share it.
-export const coveoConfig = {
-    coveoOrganizationId: "coveosalesforcetestakshatha",
-    coveoPublicAccessToken: "xx8d9c92ef-1018-4d92-a3c7-647dff01c21c",
-    coveoSearchPipeline: "salesforcedevdoc",
-    coveoSearchHub: "salesforcedevdoc"
-};
-
-export default {
-    mobile: false,
-    ...coveoConfig
-};

package/src/modules/doc/header/__tests__/header.test.ts

@@ -1,434 +0,0 @@
-import Button from "dx/button";
-import Header from "doc/header";
-import HeaderNav from "dx/headerNav";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
-import { createMediaMock } from "utils/jest";
-import {
-    mockPropsDevelopers,
-    mockPropsEmployees,
-    mockPropsNoNavigation
-} from "./mockProps";
-import Dropdown from "dx/dropdown";
-import { Option } from "typings/custom";
-import { track } from "dx/instrumentation";
-
-const EXPECTED_QUERY_TABLET = "(max-width: 980px)";
-const EXPECTED_QUERY_MOBILE = "(max-width: 880px)";
-const SMALL_MOBILE_MATCH = "(max-width: 740px)";
-
-jest.mock("dx/instrumentation");
-
-const TAG = "doc-header";
-const render = createRenderComponent(TAG, Header);
-
-const GTM_EVENT_NAME = "custEv_signUpClick";
-const SIGN_UP_LABEL = "Sign Up";
-
-const assertMediaMatchCalls = () => {
-    expect(window.matchMedia).toBeCalledTimes(3);
-    expect(window.matchMedia).toHaveBeenNthCalledWith(1, EXPECTED_QUERY_MOBILE);
-    expect(window.matchMedia).toHaveBeenNthCalledWith(2, EXPECTED_QUERY_TABLET);
-
-    expect(window.matchMedia).toHaveBeenLastCalledWith(SMALL_MOBILE_MATCH);
-};
-
-const assertDropdownRender = (
-    element: Header,
-    dropdown: Dropdown,
-    languages: Array<Option>
-) => {
-    expect(dropdown).not.toBeNull();
-    expect(dropdown.classList).toHaveLength(1);
-    expect(dropdown.classList).toContain("header_lang-dropdown");
-    expect(dropdown.options).toHaveLength(languages.length);
-    dropdown.options.forEach((option, index) => {
-        const mockLang = languages[index];
-        expect(option).toHaveProperty("id", mockLang.id);
-        expect(option).toHaveProperty("label", mockLang.label);
-    });
-
-    expect(dropdown.valuePath).toBe(element.langValuePath);
-    expect(dropdown.value).toBe(element.language);
-
-    expect(dropdown.querySelector("dx-button")).not.toBeNull();
-};
-
-const testLangEvent = () => {
-    const { languages } = mockPropsDevelopers;
-    const [firstLang, secondLang] = languages;
-
-    const element = render({
-        ...mockPropsDevelopers,
-        language: firstLang.id
-    });
-
-    expect(element.language).toBe(firstLang.id);
-
-    const dropdown: HTMLElement = element.shadowRoot.querySelector(
-        ".header_lang-dropdown"
-    );
-    const mockLangChange = jest.fn();
-    element.addEventListener("langchange", mockLangChange);
-
-    dropdown.dispatchEvent(
-        new CustomEvent("change", { detail: secondLang.id })
-    );
-
-    expect(element.language).toBe(secondLang.id);
-    expect(mockLangChange).toBeCalledTimes(1);
-    expect(mockLangChange.mock.calls[0][0]).toHaveProperty(
-        "detail",
-        secondLang.id
-    );
-    return expect(element).toBeAccessible();
-};
-
-describe(TAG, () => {
-    afterAll(() => {
-        jest.resetAllMocks();
-    });
-
-    describe("desktop", () => {
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
-        it("renders", () => {
-            const element = render();
-            expect(element.headerHref).toBe("/");
-
-            const headerEl: HTMLElement = element.shadowRoot.querySelector(
-                "header"
-            );
-            expect(headerEl).not.toBeNull();
-            expect(headerEl.classList).toHaveLength(0);
-
-            expect(headerEl.querySelector("dx-feedback-banner")).not.toBeNull();
-
-            const logo = element.shadowRoot.querySelector("dx-logo");
-            expect(logo).not.toBeNull();
-            expect(logo.label).toBe("Salesforce");
-
-            expect(
-                element.shadowRoot.querySelector("dx-header-nav")
-            ).toBeNull();
-
-            expect(
-                element.shadowRoot.querySelector("dx-header-search")
-            ).toBeNull();
-
-            expect(
-                element.shadowRoot.querySelector("dx-header-mobile-nav-menu")
-            ).toBeNull();
-
-            const homeLink: HTMLAnchorElement = element.shadowRoot.querySelector(
-                ".home-link"
-            );
-            expect(homeLink).not.toBeNull();
-            expect(homeLink.href).toMatch(/\/$/);
-            expect(homeLink.querySelector("dx-icon")).toBeNull();
-
-            expect(element.shadowRoot.querySelector("dx-dropdown")).toBeNull();
-
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-nav"
-                )
-            ).toBeNull();
-        });
-
-        it("renders with some properties", () => {
-            const subtitle = "testsubtitle";
-            const element = render({ ...mockPropsDevelopers, subtitle });
-
-            const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-            expect(subtitleEl.textContent).toEqual(subtitle);
-
-            const signUp: HTMLElement = element.shadowRoot.querySelector(
-                ".header-login-signup dx-button"
-            );
-            expect(signUp).not.toBeNull();
-
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
-            expect(headerNavs).toHaveLength(1);
-            const [globalNav] = headerNavs;
-            expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
-
-            const dropdown: Dropdown = element.shadowRoot.querySelector(
-                ".header_l2_group.header_l2_group-right-ctas dx-dropdown"
-            );
-
-            assertDropdownRender(
-                element,
-                dropdown,
-                mockPropsDevelopers.languages
-            );
-
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-title dx-dropdown"
-                )
-            ).toBeNull();
-
-            const brandIcon = element.shadowRoot.querySelector(".brand-icon");
-            expect(brandIcon).toBeNull();
-            return expect(element).toBeAccessible();
-        });
-
-        it("renders with scoped nav items", () => {
-            const element = render(mockPropsEmployees);
-
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
-            expect(headerNavs).toHaveLength(2);
-            const [globalNav, scopedNav] = headerNavs;
-            expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
-            expect(scopedNav.ariaLabel).toBe("Scoped Navigation Bar");
-
-            const brandIcon = element.shadowRoot.querySelector(".brand-icon");
-            expect(brandIcon).not.toBeNull();
-            return expect(element).toBeAccessible();
-        });
-
-        it("doesn't render subnav when navitems is empty", () => {
-            const element = render(mockPropsNoNavigation);
-
-            const els = element.querySelectorAll(
-                "dx-header-mobile-nav-menu, .header_l2_group-nav"
-            );
-
-            expect(els).toHaveLength(0);
-        });
-
-        it("renders the brand icon when a brand has an icon associated", () => {
-            const element = render(mockPropsEmployees);
-
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
-            expect(brandIcon).not.toBeNull();
-            expect(brandIcon.symbol).toBe(mockPropsEmployees.brand);
-        });
-
-        it("doesn't render brand icon when no brand is provided", () => {
-            const element = render({
-                ...mockPropsDevelopers,
-                brand: undefined
-            });
-
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
-            expect(brandIcon).toBeNull();
-        });
-
-        // eslint-disable-next-line jest/expect-expect
-        it("triggers event on language change", testLangEvent);
-
-        it("triggers event onrequestopennav", () => {
-            const element = render({
-                ...mockPropsDevelopers
-            });
-            const headerEl = element.shadowRoot.querySelector("dx-header-nav");
-            const headerMobile = element.shadowRoot.querySelector(
-                "dx-header-mobile-nav-menu"
-            );
-
-            headerEl.dispatchEvent(
-                new CustomEvent("requestopennavmenu", { detail: "123" })
-            );
-
-            return Promise.resolve().then(() => {
-                expect(headerMobile.value).toEqual("123");
-                expect(headerMobile.open).toEqual(true);
-            });
-        });
-
-        it("tests mobile nav change", () => {
-            const element = render({
-                ...mockPropsDevelopers
-            });
-            const headerMobile = element.shadowRoot.querySelector(
-                "dx-header-mobile-nav-menu"
-            );
-
-            headerMobile.dispatchEvent(
-                new CustomEvent("change", { detail: "test" })
-            );
-            return Promise.resolve().then(() => {
-                expect(headerMobile.value).toEqual("test");
-            });
-        });
-
-        it("renders signup button and has bailLink", () => {
-            const element = render({
-                ...mockPropsEmployees,
-                bailHref: "test",
-                bailLabel: "test",
-                signupLink: "/"
-            });
-            const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
-                "dx-button"
-            );
-
-            expect(buttons[0].href).toEqual("/");
-            expect(buttons[1].href).toEqual("test");
-            return expect(element).toBeAccessible();
-        });
-
-        it("won't render search if any coveo properties are missing", () => {
-            const element = render({
-                subtitle: mockPropsDevelopers.subtitle,
-                navItems: mockPropsDevelopers.navItems
-            });
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
-
-            expect(headerSearch).toBeNull();
-            return expect(element).toBeAccessible();
-        });
-
-        it("signup button track is beign called", () => {
-            const element = render(mockPropsDevelopers);
-
-            const button: HTMLElement = element.shadowRoot.querySelector(
-                "dx-button"
-            );
-
-            button.click();
-
-            expect(track).toBeCalledTimes(1);
-            expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
-                clickText: SIGN_UP_LABEL
-            });
-        });
-    });
-
-    describe("tablet", () => {
-        beforeEach(() => {
-            window.matchMedia = createMediaMock(false, [false, true, false]);
-        });
-
-        it("renders tablet specific elements", () => {
-            const element = render(mockPropsDevelopers);
-
-            const button: HTMLElement = element.shadowRoot.querySelector(
-                ".nav_menu-ctas .nav_menu-button"
-            );
-            expect(button).toBeNull();
-
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
-            expect(headerSearch).not.toBeNull();
-            expect(headerSearch.mobile).toBe(true);
-
-            const signupDiv = element.shadowRoot.querySelector(
-                ".header-login-signup"
-            );
-            expect(signupDiv).not.toBeNull();
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-right-ctas dx-dropdown"
-                )
-            ).not.toBeNull();
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-title dx-dropdown"
-                )
-            ).toBeNull();
-
-            assertMediaMatchCalls();
-        });
-    });
-
-    describe("mobile", () => {
-        beforeEach(() => {
-            window.matchMedia = createMediaMock(false, [true, true, false]);
-        });
-
-        it("renders mobile specific elements", () => {
-            const element = render(mockPropsDevelopers);
-
-            const button: HTMLElement = element.shadowRoot.querySelector(
-                ".nav_menu-ctas .nav_menu-button"
-            );
-            expect(button).not.toBeNull();
-
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
-
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-right-ctas dx-dropdown"
-                )
-            ).not.toBeNull();
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-title dx-dropdown"
-                )
-            ).toBeNull();
-            expect(headerSearch).not.toBeNull();
-            expect(headerSearch.mobile).toBe(true);
-
-            assertMediaMatchCalls();
-        });
-
-        it("tests toggle button", () => {
-            const element = render(mockPropsDevelopers);
-            const button: HTMLElement = element.shadowRoot.querySelector(
-                ".nav_menu-ctas .nav_menu-button"
-            );
-            expect(button).not.toBeNull();
-            const header = element.shadowRoot.querySelector(
-                "dx-header-mobile-nav-menu"
-            );
-            expect(header).not.toBeNull();
-
-            const toggleStatus = header.open;
-
-            button.click();
-
-            return Promise.resolve().then(() =>
-                expect(header.open).toEqual(!toggleStatus)
-            );
-        });
-    });
-
-    describe("small mobile", () => {
-        beforeEach(() => {
-            window.matchMedia = createMediaMock(true);
-        });
-
-        it("renders small mobile specific elements", () => {
-            const element = render(mockPropsDevelopers);
-            const dropdown = element.shadowRoot.querySelector(
-                ".header_l2_group.header_l2_group-title dx-dropdown"
-            );
-
-            expect(dropdown).not.toBeNull();
-            assertDropdownRender(
-                element,
-                dropdown,
-                mockPropsDevelopers.languages
-            );
-
-            expect(
-                element.shadowRoot.querySelector(
-                    ".header_l2_group.header_l2_group-right-ctas dx-dropdown"
-                )
-            ).toBeNull();
-
-            return expect(element).toBeAccessible();
-        });
-
-        // eslint-disable-next-line jest/expect-expect
-        it("triggers event on language change", testLangEvent);
-    });
-});