@salesforcedevs/dx-components 0.10.1-alpha.144 → 0.10.1-alpha.148

package/lwc.config.json

@@ -26,7 +26,7 @@
         "dx/featuredContentHeader",
         "dx/featureGrid",
         "dx/featuresList",
-        "dx/feedbackBanner",
+        "dx/banner",
         "dx/footer",
         "dx/newsletterForm",
         "dx/formattedDateTime",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.10.1-alpha.144",
+    "version": "0.10.1-alpha.148",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,6 +28,5 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    },
-    "gitHead": "4cc21fc7e5a26c53794426454cbf630fe1d54413"
+    }
 }

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

@@ -0,0 +1,31 @@
+import Banner from "dx/banner";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-banner";
+const render = createRenderComponent(TAG, Banner);
+
+describe(TAG, () => {
+    it("renders banner component", () => {
+        const element = render();
+
+        const innerContainer = element.shadowRoot.querySelectorAll(
+            ".container_inner"
+        );
+
+        expect(innerContainer).not.toBeNull();
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders custom banner markup in the banner", () => {
+        const element = render({ bannerMarkup: "Give feedback about our new site" });
+
+        const bannerContainer = element.shadowRoot.querySelector(
+            ".info-container"
+        );
+
+        return Promise.resolve().then(() => {
+            expect(bannerContainer.innerHTML).toContain('Give feedback about our new site')
+        });
+    });
+});

package/src/modules/dx/{feedbackBanner/feedbackBanner.css → banner/banner.css}

@@ -1,7 +1,7 @@
 @import "helpers/reset";
 @import "helpers/text";
 
-.feedback {
+.container {
     --primary-color: var(--dx-g-cloud-blue-vibrant-50);
     --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
 
@@ -21,26 +21,26 @@
     );
 }
 
-.feedback_inner {
+.container_inner {
     height: 100%;
     display: flex;
-    align-items: center;
     background: var(--primary-color);
     padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
     color: white;
     font-weight: bold;
 }
 
-.feedback a {
+.container a {
     text-decoration: underline;
     transition: var(--dx-g-transition-hue-1x);
     margin-right: 4px;
 }
 
-.feedback a:hover {
+.container a:hover {
     opacity: 0.8;
 }
 
-.feedback dx-icon {
+.container dx-icon {
     margin-right: var(--dx-g-spacing-sm);
+    margin-top:var(  --dx-g-spacing-2xs)
 }

package/src/modules/dx/banner/banner.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/banner/banner.ts

@@ -0,0 +1,14 @@
+import { LightningElement, api } from "lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    renderedCallback(){
+        const container = this.template.querySelector(".info-container");
+        if(container){
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            container.innerHTML = this.bannerMarkup
+        }
+    }
+}

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,11 +1,11 @@
-import { LightningElement, api, track } from "lwc";
+import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-// import Prism from "utils/prismjs";
-// import {
-//     getLocalStorageData,
-//     setLocalStorageData
-// } from "@sfdocs-internal/wires";
+import Prism from "utils/prismjs";
+import {
+    getLocalStorageData,
+    setLocalStorageData
+} from "@sfdocs-internal/wires";
 import { track as gtmTrack } from "dx/instrumentation";
 
 // Used por remove enclosing <pre> tag's (if occurs)
@@ -13,8 +13,8 @@ const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
 const LIGHT = "light";
 const DARK = "dark";
-// const themes: CodeBlockTheme[] = [LIGHT, DARK];
-// const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
+const themes: CodeBlockTheme[] = [LIGHT, DARK];
+const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
@@ -69,17 +69,17 @@ export default class CodeBlock extends LightningElement {
 
     @track private theme: CodeBlockTheme | null = null;
 
-    // @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
-    // updateThemeForCodeblock(value: any) {
-    //     if (themes.includes(value)) {
-    //         this.theme = value;
-    //     } else {
-    //         setLocalStorageData(
-    //             LOCAL_STORAGE_KEY,
-    //             this.theme || this.defaultTheme
-    //         );
-    //     }
-    // }
+    @wire(getLocalStorageData, { key: "dx-codeblock-theme" })
+    updateThemeForCodeblock(value: any) {
+        if (themes.includes(value)) {
+            this.theme = value;
+        } else {
+            setLocalStorageData(
+                LOCAL_STORAGE_KEY,
+                this.theme || this.defaultTheme
+            );
+        }
+    }
 
     get updateThemeBtnText(): string {
         return `Switch to ${this.theme === DARK ? "Light" : "Dark"} mode`;
@@ -134,7 +134,7 @@ export default class CodeBlock extends LightningElement {
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
-            // Prism.highlightAllUnder(codeBlockEl);
+            Prism.highlightAllUnder(codeBlockEl);
         });
 
         if (divEl) {
@@ -192,7 +192,7 @@ export default class CodeBlock extends LightningElement {
 
     updateTheme(event: any) {
         this.theme = this.theme === DARK ? LIGHT : DARK;
-        // setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
+        setLocalStorageData(LOCAL_STORAGE_KEY, this.theme);
 
         gtmTrack(event.target, "custEv_codeBlock", {
             codeBlockAction: this.theme === DARK ? "darkmode" : "lightmode"

package/src/modules/dx/dropdown/dropdown.html

@@ -21,6 +21,7 @@
         >
             <template for:each={options} for:item="option">
                 <dx-dropdown-option
+                    analytics-event={analyticsEvent}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
@@ -39,6 +40,7 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
+                            analytics-event={analyticsEvent}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -29,8 +29,10 @@ export default class Dropdown extends LightningElement {
     @api small?: boolean = false;
     @api openOnHover?: boolean = false; // dropdown opens/closes with hover
     @api width?: string | null = null;
-    @api fullWidth?: boolean | null;
-    @api navItemLabel: string | null = null;
+    @api fullWidth?: boolean | null; @api navItemLabel: string | null = null;
+
+    // props forwarded to dropdown option
+    @api analyticsEvent: string | null = null
 
     @api
     get options() {

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

@@ -1,6 +1,7 @@
 import DropdownOption from "dx/dropdownOption";
 import { createRenderComponent } from "utils/tests";
 import { MOCK_BUTTON_PROPS, MOCK_LINK_PROPS } from "./mockProps";
+import * as instrumentation from "dx/instrumentation";
 
 const TAG = "dx-dropdown-option";
 const render = createRenderComponent(TAG, DropdownOption);
@@ -13,6 +14,10 @@ const appendToMenu = (element: HTMLElement) => {
 };
 
 describe(TAG, () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it("renders a button by default", () => {
         const component = render(MOCK_BUTTON_PROPS);
         expect(component.shadowRoot.querySelector("button")).not.toBeNull();
@@ -23,8 +28,8 @@ describe(TAG, () => {
 
     it("renders the correct label, description, and img", () => {
         const component = render(MOCK_BUTTON_PROPS);
-        const label = component.shadowRoot.querySelector(".option_label")
-            .textContent;
+        const label =
+            component.shadowRoot.querySelector(".option_label").textContent;
         expect(label).toEqual(MOCK_BUTTON_PROPS.option.label);
 
         const description = component.shadowRoot.querySelector(
@@ -79,4 +84,29 @@ describe(TAG, () => {
 
         expect(onClickMock).toBeCalled();
     });
+
+    it("fires analytics when given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render({
+            ...MOCK_BUTTON_PROPS,
+            analyticsEvent: "mock"
+        });
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesn't fire analytics when not given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render(MOCK_BUTTON_PROPS);
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).not.toHaveBeenCalled();
+    });
 });

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -8,6 +8,7 @@ export default class DropdownOption extends LightningElement {
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -26,11 +27,13 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        track(e.currentTarget, "custEv_topNavLinkClick", {
-            navHeading: this.navItemLabel || undefined,
-            navSubHeading: this.option.label || undefined,
-            clickText: this.keyValue || undefined,
-            pageLocation: window.location.pathname || undefined
-        });
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                navHeading: this.navItemLabel || undefined,
+                navSubHeading: this.option.label || undefined,
+                clickText: this.keyValue || undefined,
+                pageLocation: window.location.pathname || undefined
+            });
+        }
     }
 }

package/src/modules/dx/emptyState/emptyState.css

@@ -25,8 +25,9 @@ img {
 }
 
 .size-small img {
+    max-width: 250px;
+    min-width: unset;
     width: calc(100% - 40px);
-    min-width: calc(100% - 40px);
 }
 
 .text {

package/src/modules/dx/footer/footer.ts

@@ -14,6 +14,12 @@ import { track } from "dx/instrumentation";
 const createNewsletterSignupHref = (email: string): string =>
     `/newsletter?subscriberEmail=${email}`;
 
+const ANALYTICS_INFO = {
+    itemTitle: "Newsletter Sign Up Footer",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
 export default class Footer extends LightningElement {
     @api locale: string | null = null;
     @api
@@ -85,7 +91,13 @@ export default class Footer extends LightningElement {
 
     private onSubmitEmail = async (e: CustomEvent) => {
         const href = createNewsletterSignupHref(e.detail);
-        track(e.currentTarget, "custEv_newsletterSubscriptionStart");
+
+        track(e.currentTarget, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
+            clickText: e.detail,
+            clickUrl: href,
+        });
+
         window.location.assign(href);
     };
 

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

@@ -9,23 +9,20 @@ import {
     mockPropsNoNavigation
 } from "./mockProps";
 import { track } from "dx/instrumentation";
+import { ANALYTICS_INFO } from "utils/headerBase";
 
 const TAG = "dx-header";
 const render = createRenderComponent(TAG, Header);
 
 jest.mock("dx/instrumentation");
 
-const GTM_EVENT_NAME = "custEv_signupStart";
-const SIGN_UP_LABEL = "Sign Up";
-
 describe("dx-header", () => {
     it("renders", () => {
         const subtitle = "testsubtitle";
         const element = render({ ...mockPropsDevelopers, subtitle });
         const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-        const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<HTMLElement> =
+            element.shadowRoot.querySelectorAll("dx-button");
         const dropdown = element.shadowRoot.querySelector("dx-dropdown");
         const headerEl = element.shadowRoot.querySelector("dx-header-nav");
 
@@ -88,9 +85,8 @@ describe("dx-header", () => {
             ...mockPropsDevelopers,
             versions: JSON.stringify([version])
         });
-        const dropdown: Dropdown = element.shadowRoot.querySelector(
-            "dx-dropdown"
-        );
+        const dropdown: Dropdown =
+            element.shadowRoot.querySelector("dx-dropdown");
         expect(dropdown).not.toBeNull();
         expect(dropdown.options).toHaveLength(1);
 
@@ -180,9 +176,8 @@ describe("dx-header", () => {
             bailLabel: "test",
             signupLink: "/"
         });
-        const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
-            "dx-button"
-        );
+        const buttons: Array<Button> =
+            element.shadowRoot.querySelectorAll("dx-button");
 
         expect(buttons[0].href).toEqual("/");
         expect(buttons[2].href).toEqual("test");
@@ -194,26 +189,48 @@ describe("dx-header", () => {
             subtitle: mockPropsDevelopers.subtitle,
             navItems: mockPropsDevelopers.navItems
         });
-        const headerSearch = element.shadowRoot.querySelector(
-            "dx-header-search"
-        );
+        const headerSearch =
+            element.shadowRoot.querySelector("dx-header-search");
 
         expect(headerSearch).toBeNull();
         return expect(element).toBeAccessible();
     });
 
-    it("signup button track is beign called", () => {
+    it("signup button track is being called", () => {
         const element = render(mockPropsDevelopers);
 
-        const button: HTMLElement = element.shadowRoot.querySelector(
-            "dx-button"
-        );
+        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
+        expect(track).toBeCalledWith(button, "custEv_signupStart", {
+            ...ANALYTICS_INFO,
+            clickUrl: "/sign-up"
         });
     });
+
+    it("hides signup button when signupLink property is empty", () => {
+        const updatedMockPropsDevelopers = {
+            ...mockPropsDevelopers,
+            signupLink: ""
+        };
+        const element = render(updatedMockPropsDevelopers);
+        const signupButtonContainer: HTMLElement =
+            element.shadowRoot.querySelector(".header-login-signup");
+        expect(signupButtonContainer).toBeNull();
+    });
+
+    it("hides banner when banner markup is empty", () => {
+        const bannerMarkup = "";
+        const updatedMockPropsDevelopers = {
+            ...mockPropsDevelopers,
+            bannerMarkup
+        };
+        const element = render(updatedMockPropsDevelopers);
+        const bannerElement: HTMLElement =
+            element.shadowRoot.querySelector("dx-banner");
+        expect(bannerElement).toBeNull();
+    });
 });

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

@@ -43,6 +43,7 @@ const versions = JSON.stringify([
 export const mockPropsDevelopers = {
     navItems: JSON.stringify(mockNavDevelopers),
     subtitle: "Developers",
+    signupLink: "/sign-up",
     ...coveoConfig
 };
 
@@ -51,15 +52,22 @@ export const mockPropsNoNavigation = {
     ...coveoConfig
 };
 
+export const mockPropsDevWebsite = {
+    version: "1",
+    versions,
+    ...coveoConfig,
+    signupLink: "/sign-up",
+    bannerMarkup:
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>'
+};
+
 export const mockPropsEmployees = {
     bailHref: "/quip-dev-center",
     bailLabel: "Quip Development Center",
     brand: "employees",
     navItems: JSON.stringify(mockNavEmployees),
     subtitle: "Employees",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsMarketing = {
@@ -68,9 +76,7 @@ export const mockPropsMarketing = {
     brand: "marketing",
     navItems: JSON.stringify(mockNavMarketing),
     subtitle: "Marketing",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsPartners = {
@@ -79,9 +85,7 @@ export const mockPropsPartners = {
     brand: "partners",
     navItems: JSON.stringify(mockNavPartners),
     subtitle: "Partners",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsCommerce = {
@@ -90,9 +94,7 @@ export const mockPropsCommerce = {
     brand: "commerce",
     navItems: JSON.stringify(mockNavCommerce),
     subtitle: "Commerce",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsSales = {
@@ -101,9 +103,7 @@ export const mockPropsSales = {
     brand: "sales",
     navItems: JSON.stringify(mockNavSales),
     subtitle: "Sales",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsSuccess = {
@@ -112,9 +112,7 @@ export const mockPropsSuccess = {
     brand: "success",
     navItems: JSON.stringify(mockNavSuccess),
     subtitle: "Success",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsIntegration = {
@@ -123,9 +121,7 @@ export const mockPropsIntegration = {
     brand: "integration",
     navItems: JSON.stringify(mockNavIntegration),
     subtitle: "Integration",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsPlatform = {
@@ -134,9 +130,7 @@ export const mockPropsPlatform = {
     brand: "platform",
     navItems: JSON.stringify(mockNavPlatform),
     subtitle: "Platform",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsIndustries = {
@@ -145,9 +139,7 @@ export const mockPropsIndustries = {
     brand: "industries",
     navItems: JSON.stringify(mockNavIndustries),
     subtitle: "Industries",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsLearning = {
@@ -156,9 +148,7 @@ export const mockPropsLearning = {
     brand: "learning",
     navItems: JSON.stringify(mockNavLearning),
     subtitle: "Learning",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsService = {
@@ -167,9 +157,7 @@ export const mockPropsService = {
     brand: "service",
     navItems: JSON.stringify(mockNavService),
     subtitle: "Service",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsAnalytics = {
@@ -178,7 +166,5 @@ export const mockPropsAnalytics = {
     brand: "analytics",
     navItems: JSON.stringify(mockNavAnalytics),
     subtitle: "Analytics",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };

package/src/modules/dx/header/header.html

@@ -1,7 +1,10 @@
 <template>
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
-            <dx-feedback-banner></dx-feedback-banner>
+            <dx-banner 
+                if:true={bannerMarkup}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
                 <dx-breadcrumbs
                     title={title}