@salesforcedevs/dx-components 0.23.0 → 0.25.0

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { deepmapOptions } from "utils-internal/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;

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

@@ -1,5 +1,5 @@
 import HeaderMobileNavMenuOption from "dx/headerMobileNavMenuOption";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-header-mobile-nav-menu-option";
 const render = createRenderComponent(TAG, HeaderMobileNavMenuOption);

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

@@ -1,5 +1,5 @@
 import HeaderNav from "dx/headerNav";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import navItems from "../../header/__tests__/mockNavArchitects";
 const TAG = "dx-header-nav";
 

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

@@ -4,8 +4,8 @@ import Button from "dx/button";
 import Dropdown from "dx/dropdown";
 import HeaderSearch from "dx/headerSearch";
 import { PopoverRequestCloseType } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
-import { coveoHeaderConfig } from "utils/coveo";
+import { createRenderComponent } from "utils-internal/tests";
+import { coveoHeaderConfig } from "utils-internal/coveo";
 import { MOCK_SUGGESTIONS } from "./mockData";
 import mockProps from "./mockProps";
 

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

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

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
-import { buildSearchEngine } from "utils/coveo";
+import { buildSearchEngine } from "utils-internal/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,

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

@@ -1,5 +1,5 @@
 import Helmet from "dx/helmet";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { HelmetVariant } from "typings/custom";
 
 const TAG = "dx-helmet";
@@ -10,9 +10,8 @@ describe("dx-helmet", () => {
         const title = "Super Cool Title";
         const component = render({ title });
 
-        const titleSpan: HTMLElement = component.shadowRoot.querySelector(
-            ".home-link-title"
-        );
+        const titleSpan: HTMLElement =
+            component.shadowRoot.querySelector(".home-link-title");
         expect(titleSpan.textContent).toBe(title);
 
         const links: HTMLElement[] = component.shadowRoot.querySelectorAll("a");

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

@@ -1,5 +1,5 @@
 import Hr from "dx/hr";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import {
     separator as separatorProps,
     heading as headingProps,

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

@@ -1,5 +1,5 @@
 import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-icon";
 const render = createRenderComponent(TAG, Icon);

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "utils-internal/css";
 
 const fetches = new Map<string, Promise<any>>();
 

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

@@ -1,5 +1,5 @@
 import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-icon-badge";
 const render = createRenderComponent(TAG, IconBadge);

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "utils-internal/css";
 
 const validShapes = ["square", "circle"];
 

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

@@ -1,5 +1,5 @@
 import ImageAndLabel from "dx/imageAndLabel";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-image-and-label";

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

@@ -1,5 +1,5 @@
 import Input from "dx/input";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-input";
 const render = createRenderComponent(TAG, Input);
@@ -22,23 +22,20 @@ const mockUserAgent = (userAgent: string) => {
 
 const assertErrorRender = (element: any, errorMessage: string) =>
     Promise.resolve().then(() => {
-        const inputContainer: HTMLElement = element.shadowRoot.querySelector(
-            ".input-container"
-        );
+        const inputContainer: HTMLElement =
+            element.shadowRoot.querySelector(".input-container");
         expect(inputContainer.classList).toHaveLength(2);
         expect(inputContainer.classList).toContain("has-error");
 
-        const errorBox: HTMLElement = element.shadowRoot.querySelector(
-            ".error-message-box"
-        );
+        const errorBox: HTMLElement =
+            element.shadowRoot.querySelector(".error-message-box");
         expect(errorBox).not.toBeNull();
         expect(errorBox.textContent).toBe(errorMessage);
     });
 
 const assertErrorMissing = (element: any) => {
-    const inputContainer: HTMLElement = element.shadowRoot.querySelector(
-        ".input-container"
-    );
+    const inputContainer: HTMLElement =
+        element.shadowRoot.querySelector(".input-container");
     expect(inputContainer.classList).toHaveLength(1);
     expect(element.shadowRoot.querySelector(".error-message-box")).toBeNull();
 };
@@ -242,9 +239,8 @@ describe(TAG, () => {
             label: "Test label"
         });
 
-        const inputEl: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
+        const inputEl: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
         inputEl.value = "not_valid_email";
         inputEl.dispatchEvent(new Event("input"));
 
@@ -269,9 +265,8 @@ describe(TAG, () => {
 
         assertErrorMissing(element);
 
-        const inputEl: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
+        const inputEl: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
         expect(inputEl).not.toBeNull();
         inputEl.dispatchEvent(new Event("blur"));
 
@@ -285,9 +280,8 @@ describe(TAG, () => {
             label: "Test label"
         });
 
-        const inputEl: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
+        const inputEl: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
         inputEl.value = "I'm a value";
         inputEl.dispatchEvent(new Event("input"));
 
@@ -307,9 +301,8 @@ describe(TAG, () => {
             validityOnBlur: true
         });
 
-        const inputEl: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
+        const inputEl: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
         expect(inputEl).not.toBeNull();
         inputEl.value = "email@email.com";
         inputEl.dispatchEvent(new Event("input"));
@@ -327,9 +320,8 @@ describe(TAG, () => {
             clearable: true
         });
 
-        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
-            ".clear-button"
-        );
+        const clearButton: HTMLButtonElement =
+            element.shadowRoot.querySelector(".clear-button");
         expect(clearButton).not.toBeNull();
     });
 
@@ -339,9 +331,8 @@ describe(TAG, () => {
             clearable: true
         });
 
-        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
-            ".clear-button"
-        );
+        const clearButton: HTMLButtonElement =
+            element.shadowRoot.querySelector(".clear-button");
         expect(clearButton).toBeNull();
     });
 
@@ -351,14 +342,12 @@ describe(TAG, () => {
             clearable: true
         });
 
-        const input: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
+        const input: HTMLInputElement =
+            element.shadowRoot.querySelector("input");
         expect(input.value).toEqual("test");
 
-        const clearButton: HTMLButtonElement = element.shadowRoot.querySelector(
-            ".clear-button"
-        );
+        const clearButton: HTMLButtonElement =
+            element.shadowRoot.querySelector(".clear-button");
         clearButton.dispatchEvent(new MouseEvent("click"));
 
         await Promise.resolve();

package/src/modules/dx/input/input.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils/devices";
+import { isMac } from "utils-internal/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

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

@@ -1,6 +1,6 @@
 import { track, developerwebTrackEventListener } from "dx/instrumentation";
-import InstrumentationTest from "tests/instrumentationTest";
-import { createRenderComponent } from "utils/tests";
+import InstrumentationTest from "test-components/instrumentationTest";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-instrumentation";
 const render = createRenderComponent(

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

@@ -1,6 +1,6 @@
 import Dropdown from "dx/dropdown";
 import InteractiveImage from "dx/interactiveImage";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import {
     mockSingleDownloadPropsAsArray,
     mockSingleDownloadPropsAsString,
@@ -26,9 +26,8 @@ describe(TAG, () => {
 
             const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
             expect(dropdownEl).toBeNull();
-            const buttonEl = element.shadowRoot.querySelector(
-                "header dx-button"
-            );
+            const buttonEl =
+                element.shadowRoot.querySelector("header dx-button");
             expect(buttonEl).not.toBeNull();
             expect(buttonEl.href).toBe(
                 mockSingleDownloadPropsAsString.downloadUrls
@@ -42,9 +41,8 @@ describe(TAG, () => {
 
             const dropdownEl = element.shadowRoot.querySelector("dx-dropdown");
             expect(dropdownEl).toBeNull();
-            const buttonEl = element.shadowRoot.querySelector(
-                "header dx-button"
-            );
+            const buttonEl =
+                element.shadowRoot.querySelector("header dx-button");
             expect(buttonEl).not.toBeNull();
             expect(buttonEl.href).toBe(
                 mockSingleDownloadPropsAsArray.downloadUrls[0]
@@ -66,9 +64,8 @@ describe(TAG, () => {
         it("renders a dropdown", () => {
             const element = render(mockMultipleDownloadProps);
 
-            const dropdownEl: Dropdown = element.shadowRoot.querySelector(
-                "dx-dropdown"
-            );
+            const dropdownEl: Dropdown =
+                element.shadowRoot.querySelector("dx-dropdown");
             expect(dropdownEl).not.toBeNull();
             const { options } = dropdownEl;
 

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

@@ -1,5 +1,5 @@
 import Lazy from "dx/lazy";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-lazy";
 const renderComponent = createRenderComponent(TAG, Lazy);

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

@@ -1,5 +1,5 @@
 import Pagination from "dx/pagination";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-pagination";
 const render = createRenderComponent(TAG, Pagination);

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

@@ -1,5 +1,5 @@
 import PodcastHost from "dx/podcastHost";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-podcast-host";

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

@@ -1,5 +1,5 @@
 import PodcastPlayer from "dx/podcastPlayer";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-podcast-player";
 const render = createRenderComponent(TAG, PodcastPlayer);

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

@@ -1,5 +1,5 @@
 import podcastSubscription from "dx/podcastSubscription";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-podcast-subscription";
 const render = createRenderComponent(TAG, podcastSubscription);

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

@@ -1,6 +1,9 @@
 import Popover from "dx/popover";
-import PopoverTest from "tests/popoverTest";
-import { createRenderComponent, mockSlottedElement } from "utils/tests";
+import PopoverTest from "test-components/popoverTest";
+import {
+    createRenderComponent,
+    mockSlottedElement
+} from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-popover";

package/src/modules/dx/popover/popover.ts

@@ -8,7 +8,7 @@ import {
 import { createPopper } from "@popperjs/core";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils/seo";
+import { isPrerender } from "utils-internal/seo";
 
 const isEventOutsideElements = (
     e: Event,

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

@@ -1,5 +1,5 @@
 import RadioGroup from "dx/radioGroup";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-radio-group";

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

@@ -1,6 +1,6 @@
 /* eslint-disable jest/no-mocks-import */
 import RelativeDateTime from "dx/relativeDateTime";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-relative-date-time";

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

@@ -1,5 +1,5 @@
 import Section from "dx/section";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-section";
 const render = createRenderComponent(TAG, Section);

package/src/modules/dx/section/section.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "utils-internal/css";
 
 export default class Section extends LightningElement {
     @api backgroundColor?: string | null = "transparent";

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

@@ -1,5 +1,5 @@
 import SectionSignup from "dx/sectionSignup";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-section-signup";
 const render = createRenderComponent(TAG, SectionSignup);

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

@@ -7,9 +7,9 @@ import {
     createMediaMock,
     mockQueryParameter,
     unmockQueryParameter
-} from "utils/jest";
-import { createRenderComponent } from "utils/tests";
-import { coveoXMLDocsConfig } from "utils/coveo";
+} from "utils-internal/jest";
+import { createRenderComponent } from "utils-internal/tests";
+import { coveoXMLDocsConfig } from "utils-internal/coveo";
 import mockSearchChangeEvent from "./mockSearchChangeEvent";
 import mockSearchChangeEmptyEvent from "./mockSearchChangeEmptyEvent";
 import { SAMPLE_TREES } from "./mockProps";

package/src/modules/dx/sidebar/sidebar.ts

@@ -6,7 +6,7 @@ import {
     SidebarGtmAction,
     SidebarSearchResult
 } from "typings/custom";
-import { getSidebarSearchParams } from "utils/coveo";
+import { getSidebarSearchParams } from "utils-internal/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 

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

@@ -4,8 +4,8 @@ import { track } from "dx/instrumentation";
 import SidebarOld from "dx/sidebarOld";
 import Tree from "dx/tree";
 import { TreeNode } from "typings/custom";
-import { createMediaMock } from "utils/jest";
-import { createRenderComponent } from "utils/tests";
+import { createMediaMock } from "utils-internal/jest";
+import { createRenderComponent } from "utils-internal/tests";
 import { SAMPLE_TREES } from "./mockProps";
 
 jest.mock("dx/instrumentation");

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

@@ -1,8 +1,11 @@
 import { createElement } from "lwc";
 import SidebarSearch from "dx/sidebarSearch";
-import { createRenderComponent, renderLightningElement } from "utils/tests";
-import { coveoXMLDocsConfig } from "utils/coveo";
-import { mockQueryParameter, unmockQueryParameter } from "utils/jest";
+import {
+    createRenderComponent,
+    renderLightningElement
+} from "utils-internal/tests";
+import { coveoXMLDocsConfig } from "utils-internal/coveo";
+import { mockQueryParameter, unmockQueryParameter } from "utils-internal/jest";
 import { SESSION_KEY } from "dx/sidebarSearch";
 import mockPreloadedState from "./mockPreloadedState";
 

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -14,8 +14,11 @@ import {
     SearchAppState,
     loadQueryActions
 } from "@coveo/headless";
-import { buildSearchEngine, getSidebarSearchParams } from "utils/coveo";
-import { RecentSearches } from "utils/recentSearches";
+import {
+    buildSearchEngine,
+    getSidebarSearchParams
+} from "utils-internal/coveo";
+import { RecentSearches } from "utils-internal/recentSearches";
 import { toJson } from "utils/normalizers";
 import {
     Option,
@@ -51,9 +54,12 @@ export default class SidebarSearch extends LightningElement {
             );
         this._coveoAdvancedQueryConfig = jsonValue;
 
+        if (hasChanged && this.engine && this.value !== "") {
+            this.dispatchOnLoading(true);
+        }
+
         if (hasChanged && this.engine) {
             // set advanced filters needs access to the latest coveoAdvancedQueryConfig
-            this.dispatchOnLoading(true);
             this.setAdvancedFilters(this.engine);
             this.submitSearch(true);
         }

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

@@ -1,5 +1,5 @@
 import SidebarSearchResult from "dx/sidebarSearchResult";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-sidebar-search-result";
 const render = createRenderComponent(TAG, SidebarSearchResult);

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

@@ -0,0 +1,20 @@
+import slackButton from "dx/slackButton";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-slack-button";
+const render = createRenderComponent(TAG, slackButton);
+
+describe(TAG, () => {
+    it("renders the button linking to slack", () => {
+        const element = render();
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".slack-btn a");
+        expect(slackBtn).not.toBe(undefined);
+        return expect(slackBtn.length).toBe(1);
+    });
+
+    it("renders a button meeting all accesibilty requirements", () => {
+        const element = render();
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/slackButton/slackButton.css

@@ -0,0 +1,43 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.slack-cta-button {
+    align-items: center;
+    background-color: #fff;
+    border: 2px solid rgb(1, 118, 211);
+    border-radius: 4px;
+    display: inline-flex;
+    height: 48px;
+    justify-content: center;
+    text-decoration: none;
+    padding: 10px;
+    color: rgb(1, 118, 211);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+    line-height: 20px;
+}
+
+@media screen and (max-width: 768px) {
+    .slack-btn a {
+        display: inline-flex;
+        margin: 4px auto;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .slack-btn a {
+        display: inline-flex;
+        margin: 22px 13px 8px 13px;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}

package/src/modules/dx/slackButton/slackButton.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="slack-btn">
+        <a
+            class="slack-cta-button"
+            href="https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Ccommands&amp;user_scope=&amp;redirect_uri=https%3A%2F%2Fdsc-slack-app.herokuapp.com%2Fslack%2Foauth_redirect&amp;client_id=1814240140212.2864842743411"
+        >
+            <img
+                src="/assets/svg/slack-logo.svg"
+                alt="install slack extension"
+            />
+            <slot></slot>
+        </a>
+    </div>
+</template>

package/src/modules/dx/slackButton/slackButton.stories.ts

@@ -0,0 +1,21 @@
+export default {
+    title: "dx/dx-slack-button",
+    component: "dx-slack-button"
+};
+
+const createStyles = () => `
+    <style>
+        h2 {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 10px 0 30px 0;
+        }
+    </style>
+`;
+
+export const Base = () => `
+    ${createStyles()}
+    <h2>Slack Button</h2>
+
+    <dx-slack-button>Slack</dx-slack-button>
+`;

package/src/modules/dx/slackButton/slackButton.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from "lwc";
+
+export default class SlackAdd extends LightningElement {}