@salesforcedevs/dx-components 0.10.1-alpha.95 → 0.10.1-alpha.96

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

@@ -0,0 +1,42 @@
+import SidebarSearchResult from "dx/sidebarSearchResult";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-sidebar-search-result";
+const render = createRenderComponent(TAG, SidebarSearchResult);
+
+const PROPS = {
+    description: "test description here",
+    descriptionHighlights: [{ length: 5, offset: 5 }],
+    href: "/test",
+    selected: false,
+    title: "test title here",
+    titleHighlights: [{ length: 5, offset: 5 }]
+};
+
+describe(TAG, () => {
+    it("renders a result with the correct highlighted content", () => {
+        const element = render(PROPS);
+
+        const titleBolds = element.shadowRoot.querySelectorAll(".title .bold");
+        expect(titleBolds.length).toEqual(1);
+        expect(titleBolds[0].textContent).toEqual("title");
+
+        const descriptionBolds =
+            element.shadowRoot.querySelectorAll(".description .bold");
+        expect(descriptionBolds.length).toEqual(1);
+        expect(descriptionBolds[0].textContent).toEqual("descr");
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a result as selected when specified", () => {
+        const element = render({ ...PROPS, selected: true });
+
+        const selected = element.shadowRoot.querySelector(
+            ".sidebar-item-selected"
+        );
+        expect(selected).not.toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/{headerNavOption/__tests__/headerNavOption.test.ts → tab/__tests__/tab.test.ts}

@@ -1,9 +1,12 @@
-import HeaderNavOption from "dx/headerNavOption";
+import Tab from "dx/tab";
 import Icon from "dx/icon";
+import { track } from "dx/instrumentation";
 import { createRenderComponent } from "utils/tests";
 
-const TAG = "dx-header-nav-option";
-const render = createRenderComponent(TAG, HeaderNavOption);
+jest.mock("dx/instrumentation");
+
+const TAG = "dx-tab";
+const render = createRenderComponent(TAG, Tab);
 
 const PROPS = {
     label: "documentation",
@@ -14,9 +17,8 @@ describe(TAG, () => {
     it("renders a single link with a label", () => {
         const element = render(PROPS);
 
-        const links: Array<HTMLAnchorElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            element.shadowRoot.querySelectorAll("a");
 
         expect(links.length).toEqual(1);
         const [singleLink] = links;
@@ -53,9 +55,8 @@ describe(TAG, () => {
         const label = "test button";
         const element = render({ label });
 
-        const buttons: Array<HTMLButtonElement> = element.shadowRoot.querySelectorAll(
-            "button"
-        );
+        const buttons: Array<HTMLButtonElement> =
+            element.shadowRoot.querySelectorAll("button");
 
         expect(buttons).toHaveLength(1);
         const [singleButton] = buttons;
@@ -66,6 +67,23 @@ describe(TAG, () => {
 
         const span: HTMLElement = singleButton.querySelector("span")!;
         expect(span.textContent).toBe(label);
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a button with an icon if useIcon is passed as true", () => {
+        const label = "test button";
+        const element = render({ label, useIcon: true });
+
+        const buttons: Array<HTMLButtonElement> =
+            element.shadowRoot.querySelectorAll("button");
+
+        expect(buttons).toHaveLength(1);
+        const [singleButton] = buttons;
+
+        const span: HTMLElement = singleButton.querySelector("span")!;
+        expect(span.textContent).toBe(label);
+
         const icon: Element & Icon = singleButton.querySelector("dx-icon")!;
         expect(icon).not.toBeNull();
         expect(icon.size).toBe("small");
@@ -75,11 +93,10 @@ describe(TAG, () => {
 
     it("renders a button with label only if variant is small", () => {
         const label = "test button";
-        const element = render({ label, variant: "small" });
+        const element = render({ label, variant: "small", useIcon: "true" });
 
-        const button: HTMLButtonElement = element.shadowRoot.querySelector(
-            "button"
-        );
+        const button: HTMLButtonElement =
+            element.shadowRoot.querySelector("button");
 
         expect(button.classList).toHaveLength(2);
         expect(button.classList).toContain("nav-list-item");
@@ -95,19 +112,18 @@ describe(TAG, () => {
         return expect(element).toBeAccessible();
     });
 
-    it("fires sendGtm function when button is clicked", () => {
-        const sendGtmMock = jest.fn();
-        const element = render({
-            ...PROPS,
-            onclick: sendGtmMock
-        });
-
-        const link = element.shadowRoot.querySelector("a");
+    it("calls track when the link is clicked", () => {
+        const element = render(PROPS);
 
+        const link: HTMLElement = element.shadowRoot.querySelector("a");
+        expect(link).not.toBeNull();
         link.click();
 
-        expect(sendGtmMock).toHaveBeenCalled();
-
-        return expect(element).toBeAccessible();
+        expect(track).toHaveBeenCalledTimes(1);
+        expect(track).toBeCalledWith(link, "custEv_topNavLinkClick", {
+            navHeading: PROPS.label,
+            clickText: PROPS.href,
+            pageLocation: window.location.pathname
+        });
     });
 });

package/src/modules/dx/{headerNavOption/headerNavOption.css → tab/tab.css}

@@ -5,7 +5,10 @@ a {
 }
 
 .nav-list-item {
-    --horizontal-spacing: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(
+        --dx-c-tab-horizontal-spacing,
+        var(--dx-g-spacing-md)
+    );
 
     position: relative;
     display: flex;
@@ -50,12 +53,15 @@ button.nav-list-item_small > dx-icon {
 .nav-list-item_default:hover,
 .nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
-    background: var(--dx-g-brand-current-button-color-background-inactive);
+    background: var(
+        --dx-g-brand-current-button-color-background-inactive,
+        var(--dx-g-brand-default-button-color-background-inactive)
+    );
 }
 
-button.nav-list-item:hover > *:last-child,
-button.nav-list-item:active > *:last-child,
-:host([aria-expanded="true"]) button.nav-list-item > *:last-child {
+button.nav-list-item:hover > dx-icon,
+button.nav-list-item:active > dx-icon,
+:host([aria-expanded="true"]) button.nav-list-item > dx-icon {
     transform: rotateX(180deg);
 }
 
@@ -74,18 +80,27 @@ button.nav-list-item:active > *:last-child,
 }
 
 .nav-list-item_default.state-active {
-    background: var(--dx-g-brand-current-button-color-background-active);
-    color: var(--dx-g-brand-current-color);
+    background: var(
+        --dx-g-brand-current-button-color-background-active,
+        var(--dx-g-brand-default-button-color-background-active)
+    );
+    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
 }
 
 @media (max-width: 1160px) {
     .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-smd);
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-smd)
+        );
     }
 }
 
 @media (max-width: 1090px) {
     .nav-list-item_small {
-        --horizontal-spacing: var(--dx-g-spacing-sm);
+        --horizontal-spacing: var(
+            --dx-c-tab-horizontal-spacing,
+            var(--dx-g-spacing-sm)
+        );
     }
 }

package/src/modules/dx/{headerNavOption/headerNavOption.html → tab/tab.html}

@@ -4,6 +4,10 @@
     </a>
     <button if:false={href} class={className}>
         <span>{label}</span>
-        <dx-icon symbol="chevrondown" size={iconSize}></dx-icon>
+        <dx-icon
+            if:true={useIcon}
+            symbol="chevrondown"
+            size={iconSize}
+        ></dx-icon>
     </button>
 </template>

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

@@ -0,0 +1,57 @@
+import { html } from "lit-html";
+import { TabVariant } from "typings/custom";
+
+type StoryArgs = {
+    isActive: boolean;
+    label: string;
+    useIcon: boolean;
+    variant: TabVariant;
+};
+const VARIANT_OPTIONS: Array<TabVariant> = ["default", "small"];
+
+export default {
+    title: "dx/dx-tab",
+    component: "dx-tab",
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+                options: VARIANT_OPTIONS
+            }
+        }
+    }
+};
+
+const Template = ({ variant, label, isActive, useIcon }: StoryArgs) => html`
+    <dx-tab
+        label="${label}"
+        is-active="${isActive}"
+        variant="${variant}"
+        use-icon="${useIcon}"
+    ></dx-tab>
+`;
+
+export const Base = (args: StoryArgs) => Template(args);
+Base.args = {
+    isActive: false,
+    useIcon: false,
+    label: "Banana",
+    variant: VARIANT_OPTIONS[0]
+};
+
+export const TabGroup = ({ variant }: { variant: TabVariant }) => html`
+    <style>
+        .container {
+            display: flex;
+            --dx-c-tab-horizontal-spacing: var(--dx-g-spacing-xs);
+        }
+    </style>
+    <nav class="container">
+        <dx-tab label="Banana" variant="${variant}"></dx-tab>
+        <dx-tab label="Apple" variant="${variant}"></dx-tab>
+    </nav>
+`;
+
+TabGroup.args = {
+    variant: VARIANT_OPTIONS[0]
+};

package/src/modules/dx/{headerNavOption/headerNavOption.ts → tab/tab.ts}

@@ -1,19 +1,40 @@
 import { LightningElement, api } from "lwc";
 import { track } from "dx/instrumentation";
 import cx from "classnames";
-import { HeaderNavVariant } from "typings/custom";
+import { TabVariant } from "typings/custom";
+import { normalizeBoolean } from "utils/normalizers";
 
-export default class HeaderNavOption extends LightningElement {
-    @api isActive: boolean = false;
+export default class Tab extends LightningElement {
     @api label: string | null = null;
     @api href: string | null = null;
-    @api variant: HeaderNavVariant = "default";
+    @api variant: TabVariant = "default";
+
+    @api
+    get isActive() {
+        return this._isActive;
+    }
+
+    set isActive(value) {
+        this._isActive = normalizeBoolean(value);
+    }
+
+    @api
+    get useIcon() {
+        return this._useIcon;
+    }
+
+    set useIcon(value) {
+        this._useIcon = normalizeBoolean(value);
+    }
+
+    _useIcon = false;
+    _isActive = false;
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_topNavLinkClick", {
             navHeading: this.label || undefined,
             clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
+            pageLocation: window.location.pathname
         });
     }
 

package/src/modules/utils/normalizers/normalizers.ts

@@ -86,3 +86,6 @@ export const normalizePost = ({
     id,
     title
 });
+
+export const normalizeBoolean = (value: string | boolean | number): boolean =>
+    typeof value === "string" ? value === "true" : !!value;

package/src/modules/utils/recentSearches/recentSearches.ts

@@ -19,7 +19,7 @@ export class RecentSearches {
         }
         const normalized = item.trim();
         if (normalized === "") {
-            return
+            return;
         }
         this._prepend(normalized);
         this._removeDuplicates(normalized);