@salesforcedevs/dx-components 0.15.1 → 0.15.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.15.1",
+    "version": "0.15.2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "2f4882a3e2e0b3693ff8d16612d54953be57a522"
+    "gitHead": "7363f31ed0a0565c41611cb1e41fff7ea6c43c06"
 }

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

@@ -11,9 +11,7 @@ describe(TAG, () => {
             const element = render({ navItems });
 
             const items = element.shadowRoot.querySelectorAll(".nav-list-item");
-            const dropdownItems = element.shadowRoot.querySelectorAll(
-                "dx-header-nav-option"
-            );
+            const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
 
             // items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
             const expectedItemLength =
@@ -34,7 +32,7 @@ describe(TAG, () => {
             const mockOpenNav = jest.fn();
             element.addEventListener("requestopennavmenu", mockOpenNav);
             const navOption: HTMLElement = element.shadowRoot.querySelector(
-                "dx-header-nav-option.nav-list-item-nav-menu"
+                "dx-tab.nav-list-item-nav-menu"
             );
             expect(navOption).not.toBeNull();
             navOption.click();

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

@@ -3,13 +3,13 @@
         <ul class="nav-list">
             <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
-                    <dx-header-nav-option
+                    <dx-tab
                         if:false={navItem.options}
                         is-active={navItem.isActive}
                         label={navItem.label}
                         href={navItem.link.href}
                         variant={variant}
-                    ></dx-header-nav-option>
+                    ></dx-tab>
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
@@ -23,21 +23,23 @@
                         value={pathname}
                         value-path="link.href"
                     >
-                        <dx-header-nav-option
+                        <dx-tab
                             label={navItem.label}
                             variant={variant}
-                        ></dx-header-nav-option>
+                            use-icon
+                        ></dx-tab>
                     </dx-dropdown>
 
                     <!-- MOBILE "MORE CONTENT" NAV ITEM -->
-                    <dx-header-nav-option
+                    <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-header-nav-option>
+                    ></dx-tab>
                 </li>
             </template>
         </ul>

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
-import { HeaderNavVariant, Option } from "typings/custom";
+import { TabVariant, Option } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
-    @api variant: HeaderNavVariant = "default";
+    @api variant: TabVariant = "default";
     @api ariaLabel: string = "Navigation Bar";
 
     @api

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;