@salesforcedevs/dx-components 0.16.1 → 0.16.2

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.16.1",
+    "version": "0.16.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": "d4ec506174be770808414504864f53bc8f7ed2c0"
+    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
 }

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/header/__tests__/header.test.ts

@@ -216,4 +216,27 @@ describe("dx-header", () => {
             clickText: SIGN_UP_LABEL
         });
     });
+
+    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

@@ -37,6 +37,7 @@ const versions = JSON.stringify([
 export const mockPropsDevelopers = {
     navItems: JSON.stringify(mockNavDevelopers),
     subtitle: "Developers",
+    signupLink: "/sign-up",
     ...coveoConfig
 };
 
@@ -45,15 +46,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 = {
@@ -62,9 +70,7 @@ export const mockPropsMarketing = {
     brand: "marketing",
     navItems: JSON.stringify(mockNavMarketing),
     subtitle: "Marketing",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsPartners = {
@@ -73,9 +79,7 @@ export const mockPropsPartners = {
     brand: "partners",
     navItems: JSON.stringify(mockNavPartners),
     subtitle: "Partners",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsCommerce = {
@@ -84,9 +88,7 @@ export const mockPropsCommerce = {
     brand: "commerce",
     navItems: JSON.stringify(mockNavCommerce),
     subtitle: "Commerce",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsSales = {
@@ -95,9 +97,7 @@ export const mockPropsSales = {
     brand: "sales",
     navItems: JSON.stringify(mockNavSales),
     subtitle: "Sales",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsSuccess = {
@@ -106,9 +106,7 @@ export const mockPropsSuccess = {
     brand: "success",
     navItems: JSON.stringify(mockNavSuccess),
     subtitle: "Success",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsIntegration = {
@@ -117,9 +115,7 @@ export const mockPropsIntegration = {
     brand: "integration",
     navItems: JSON.stringify(mockNavIntegration),
     subtitle: "Integration",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsPlatform = {
@@ -128,9 +124,7 @@ export const mockPropsPlatform = {
     brand: "platform",
     navItems: JSON.stringify(mockNavPlatform),
     subtitle: "Platform",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsIndustries = {
@@ -139,9 +133,7 @@ export const mockPropsIndustries = {
     brand: "industries",
     navItems: JSON.stringify(mockNavIndustries),
     subtitle: "Industries",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsLearning = {
@@ -150,9 +142,7 @@ export const mockPropsLearning = {
     brand: "learning",
     navItems: JSON.stringify(mockNavLearning),
     subtitle: "Learning",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsService = {
@@ -161,9 +151,7 @@ export const mockPropsService = {
     brand: "service",
     navItems: JSON.stringify(mockNavService),
     subtitle: "Service",
-    version: "1",
-    versions,
-    ...coveoConfig
+    ...mockPropsDevWebsite
 };
 
 export const mockPropsAnalytics = {
@@ -172,7 +160,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/utils/headerBase/headerBase.ts

@@ -33,6 +33,9 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
 
     @api
     get navItems() {

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

@@ -1,19 +0,0 @@
-import FeedbackBanner from "dx/feedbackBanner";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-feedback-banner";
-const render = createRenderComponent(TAG, FeedbackBanner);
-
-describe(TAG, () => {
-    it("renders a single dx-button component", () => {
-        const element = render();
-
-        const innerContainer = element.shadowRoot.querySelectorAll(
-            ".feedback_inner"
-        );
-
-        expect(innerContainer).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/feedbackBanner/feedbackBanner.html

@@ -1,13 +0,0 @@
-<template>
-    <div class="feedback">
-        <div class="feedback_inner dx-text-body-4">
-            <dx-icon symbol="announcement"></dx-icon>
-            <span>
-                <a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">
-                    Share your feedback
-                </a>
-                about our new site.
-            </span>
-        </div>
-    </div>
-</template>

package/src/modules/dx/feedbackBanner/feedbackBanner.ts

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