@salesforcedevs/docs-components 0.15.0 → 0.16.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.15.0",
+    "version": "0.16.2",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -14,5 +14,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e5ccea7a857ee11117727b9bfabb544e8b0e6922"
+    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
 }

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

@@ -104,7 +104,7 @@ describe(TAG, () => {
             expect(headerEl).not.toBeNull();
             expect(headerEl.classList).toHaveLength(0);
 
-            expect(headerEl.querySelector("dx-feedback-banner")).not.toBeNull();
+            expect(headerEl.querySelector("dx-banner")).not.toBeNull();
 
             const logo = element.shadowRoot.querySelector("dx-logo");
             expect(logo).not.toBeNull();
@@ -307,6 +307,29 @@ describe(TAG, () => {
                 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();
+        });
     });
 
     describe("tablet", () => {

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

@@ -32,6 +32,9 @@ export const mockPropsDevelopers = {
     title: "Salesforce Developers",
     subtitle: "Apex Developer Guides",
     languages,
+    signupLink: "/sign-up",
+    bannerMarkup:
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>',
     ...coveoConfig
 };
 

package/src/modules/doc/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">
                 <div if:true={showMenuButton} class="nav_menu-ctas">
                     <dx-button

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

@@ -101,6 +101,8 @@ const headerStoryGenerator = (
         bail-label="${args.bailLabel}"
         brand="${brand}"
         onclick="headerClick(event)"
+        signup-link="${mockProps.signupLink}"
+        banner-markup="${mockProps.bannerMarkup}"
     ></doc-header>`;
 
 export const Base = (args: any) => html`
@@ -158,3 +160,31 @@ export const Service = (args: any) =>
 
 export const Analytics = (args: any) =>
     headerStoryGenerator(mockPropsAnalytics, "analytics", args);
+
+export const AnalyticsWithoutSignup = (args: any) =>
+    headerStoryGenerator(
+        { ...mockPropsAnalytics, signupLink:"" },
+        "analytics",
+        args
+    );
+
+export const AnalyticsWithCustomBannerText = (args: any) =>
+    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.'
+        },
+        "analytics",
+        args
+    );
+
+export const AnalyticsWithoutBanner = (args: any) =>
+    headerStoryGenerator(
+        {
+            ...mockPropsMarketing,
+            bannerMarkup: ""
+        },
+        "analytics",
+        args
+    );

package/src/modules/doc/header/header.ts

@@ -63,7 +63,9 @@ export default class Header extends HeaderBase {
     }
 
     private get showSignup(): boolean {
-        return (this.tablet && !this.isSearchOpen) || !this.tablet;
+        return this.signupLink
+            ? (this.tablet && !this.isSearchOpen) || !this.tablet
+            : false;
     }
 
     private get hasLanguages(): boolean {