@salesforcedevs/dx-components 0.10.1-alpha.147 → 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.147",
+    "version": "0.10.1-alpha.148",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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/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}

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

@@ -82,6 +82,8 @@ const headerStoryGenerator = (
         bail-label="Quip Development Center"
         brand="${brand}"
         breadcrumbs="${mockProps.breadcrumbs}"
+        signup-link="${mockProps.signupLink}"
+        banner-markup="${mockProps.bannerMarkup}"
     ></dx-header>`;
 
 // ALL STORIES
@@ -140,3 +142,31 @@ export const Service = () =>
     headerStoryGenerator(mockPropsService, "service", "Service");
 export const Analytics = () =>
     headerStoryGenerator(mockPropsAnalytics, "analytics", "Analytics");
+
+export const MarketingWithoutSignup = () =>
+    headerStoryGenerator(
+        { ...mockPropsMarketing, signupLink: "" },
+        "marketing",
+        "Marketing"
+    );
+
+export const MarketingWithCustomBannerText = () =>
+    headerStoryGenerator(
+        {
+            ...mockPropsMarketing,
+            bannerMarkup:
+                'Salesforce Subscription Management API ("the API") is available as a developer preview. The API is not generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All components of the API including request names, parameters, objects, and fields are subject to change or deprecation at any time, with or without notice. Do not use the API with real data or in a production environment.'
+        },
+        "marketing",
+        "Marketing"
+    );
+
+export const MarketingWithoutBanner = () =>
+    headerStoryGenerator(
+        {
+            ...mockPropsMarketing,
+            bannerMarkup: ""
+        },
+        "marketing",
+        "Marketing"
+    );

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

@@ -10,12 +10,15 @@ export default class Header extends HeaderBase {
     get breadcrumbs() {
         return this._breadcrumbs;
     }
+
     set breadcrumbs(value) {
         this._breadcrumbs = toJson(value);
     }
 
     private get showSignup(): boolean {
-        return (this.mobile && !this.isSearchOpen) || !this.mobile;
+        return this.signupLink
+            ? (this.mobile && !this.isSearchOpen) || !this.mobile
+            : false;
     }
 
     protected mobileBreakpoint(): string {

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

@@ -13,6 +13,7 @@
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
+                        analytics-event="custEv_topNavLinkClick"
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover