@salesforcedevs/docs-components 0.15.0-alpha.0 → 0.17.1

package/lwc.config.json

@@ -8,6 +8,7 @@
         "doc/contentMedia",
         "doc/content",
         "doc/header",
-        "doc/headingAnchor"
+        "doc/headingAnchor",
+        "doc/phase"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.15.0-alpha.0",
+    "version": "0.17.1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -14,5 +14,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ccf65c5d3c7390f1eb3cff119a800adafe89a2ed"
+    "gitHead": "53a3b2f6fa7d61fee0305c6bfd272f4806a662fa"
 }

package/src/modules/doc/contentCallout/contentCallout.css

@@ -1,13 +1,9 @@
 @import "helpers/reset";
 @import "helpers/text";
+@import "helpers/status";
 
 .dx-callout {
     border-radius: 4px;
-    border-left: 4px solid;
-}
-
-.dx-callout-icon {
-    padding-right: var(--dx-g-spacing-md);
 }
 
 .dx-callout-base {
@@ -25,11 +21,6 @@
     border-color: var(--dx-g-green-vibrant-60);
 }
 
-.dx-callout-warning {
-    background-color: rgb(254, 243, 217);
-    border-color: var(--dx-g-yellow-vibrant-80);
-}
-
 .dx-callout-caution {
     background-color: var(--dx-g-red-natural-95);
     border-color: var(--dx-g-red-vibrant-50);
@@ -37,7 +28,6 @@
 
 .dx-callout-base_section {
     width: 100%;
-    padding: var(--dx-g-spacing-md);
 }
 
 .dx-callout-base_section-large {
@@ -58,8 +48,4 @@
 
 .dx-callout-base_column > dx-type-badge-group {
     margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.dx-callout-title {
-    font-weight: bold;
-}
+}

package/src/modules/doc/contentCallout/contentCallout.html

@@ -1,10 +1,10 @@
 <template>
     <div class={className}>
-        <div class="dx-callout-icon">
+        <div class="doc-status-icon dx-callout-icon">
             <dx-icon symbol={iconName} size="large" color={iconColor}></dx-icon>
         </div>
         <div class="dx-callout-content">
-            <p class="dx-callout-title dx-text-body-3">{title}</p>
+            <p class="doc-status-title dx-callout-title dx-text-body-3">{title}</p>
             <span class="dx-callout-body dx-text-body-3">
                 <slot onslotchange={onSlotChange}></slot>
             </span>

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -17,7 +17,7 @@ export default class ContentCallout extends LightningElement {
                 this.iconName = "success";
                 break;
             case "warning":
-                this.cardVariant = "dx-callout-warning";
+                this.cardVariant = "doc-status-container dx-callout-warning";
                 this.iconColor = "gray-10";
                 this.iconName = "warning";
                 break;
@@ -37,6 +37,7 @@ export default class ContentCallout extends LightningElement {
     get className() {
         return cx(
             "dx-callout",
+            "doc-status-base",
             "dx-callout-base_section",
             "dx-callout-base_column",
             this.cardVariant

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

@@ -12,6 +12,7 @@ import {
 import Dropdown from "dx/dropdown";
 import { Option } from "typings/custom";
 import { track } from "dx/instrumentation";
+import { ANALYTICS_INFO } from "utils/headerBase";
 
 const EXPECTED_QUERY_TABLET = "(max-width: 980px)";
 const EXPECTED_QUERY_MOBILE = "(max-width: 880px)";
@@ -22,9 +23,6 @@ jest.mock("dx/instrumentation");
 const TAG = "doc-header";
 const render = createRenderComponent(TAG, Header);
 
-const GTM_EVENT_NAME = "custEv_signupStart";
-const SIGN_UP_LABEL = "Sign Up";
-
 const assertMediaMatchCalls = () => {
     expect(window.matchMedia).toBeCalledTimes(3);
     expect(window.matchMedia).toHaveBeenNthCalledWith(1, EXPECTED_QUERY_MOBILE);
@@ -98,13 +96,12 @@ describe(TAG, () => {
             const element = render();
             expect(element.headerHref).toBe("/");
 
-            const headerEl: HTMLElement = element.shadowRoot.querySelector(
-                "header"
-            );
+            const headerEl: HTMLElement =
+                element.shadowRoot.querySelector("header");
             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();
@@ -122,9 +119,8 @@ describe(TAG, () => {
                 element.shadowRoot.querySelector("dx-header-mobile-nav-menu")
             ).toBeNull();
 
-            const homeLink: HTMLAnchorElement = element.shadowRoot.querySelector(
-                ".home-link"
-            );
+            const homeLink: HTMLAnchorElement =
+                element.shadowRoot.querySelector(".home-link");
             expect(homeLink).not.toBeNull();
             expect(homeLink.href).toMatch(/\/$/);
             expect(homeLink.querySelector("dx-icon")).toBeNull();
@@ -150,9 +146,8 @@ describe(TAG, () => {
             );
             expect(signUp).not.toBeNull();
 
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
+            const headerNavs: Array<HeaderNav> =
+                element.shadowRoot.querySelectorAll("dx-header-nav");
             expect(headerNavs).toHaveLength(1);
             const [globalNav] = headerNavs;
             expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
@@ -181,9 +176,8 @@ describe(TAG, () => {
         it("renders with scoped nav items", () => {
             const element = render(mockPropsEmployees);
 
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
+            const headerNavs: Array<HeaderNav> =
+                element.shadowRoot.querySelectorAll("dx-header-nav");
             expect(headerNavs).toHaveLength(2);
             const [globalNav, scopedNav] = headerNavs;
             expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
@@ -207,9 +201,8 @@ describe(TAG, () => {
         it("renders the brand icon when a brand has an icon associated", () => {
             const element = render(mockPropsEmployees);
 
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
+            const brandIcon: Icon =
+                element.shadowRoot.querySelector(".brand-icon");
             expect(brandIcon).not.toBeNull();
             expect(brandIcon.symbol).toBe(mockPropsEmployees.brand);
         });
@@ -220,9 +213,8 @@ describe(TAG, () => {
                 brand: undefined
             });
 
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
+            const brandIcon: Icon =
+                element.shadowRoot.querySelector(".brand-icon");
             expect(brandIcon).toBeNull();
         });
 
@@ -271,9 +263,8 @@ describe(TAG, () => {
                 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[1].href).toEqual("test");
@@ -285,28 +276,50 @@ describe(TAG, () => {
                 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();
+        });
     });
 
     describe("tablet", () => {
@@ -322,9 +335,8 @@ describe(TAG, () => {
             );
             expect(button).toBeNull();
 
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
+            const headerSearch =
+                element.shadowRoot.querySelector("dx-header-search");
             expect(headerSearch).not.toBeNull();
             expect(headerSearch.mobile).toBe(true);
 
@@ -360,9 +372,8 @@ describe(TAG, () => {
             );
             expect(button).not.toBeNull();
 
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
+            const headerSearch =
+                element.shadowRoot.querySelector("dx-header-search");
 
             expect(
                 element.shadowRoot.querySelector(

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 {

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

@@ -0,0 +1,13 @@
+export default {
+    phase: "dev-preview",
+    title: "Developer Preview",
+    body: `This feature is not generally available and is being piloted with 
+            certain Customers subject to additional terms and conditions. It 
+            is not part of your purchased Services. This feature is subject to 
+            change, may be discontinued with no notice at any time in SFDC’s 
+            available. Make your purchase decisions only on the basis of 
+            generally available products and features. This feature is made 
+            available on an AS IS basis and use of this feature is at your 
+            sole risk. Check <a href="https://developer.salesforce.com/">
+            Developers Website</a> for more information.`
+};

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

@@ -0,0 +1,60 @@
+import DocPhase from "doc/phase";
+import { createRenderComponent } from "utils/tests";
+import mockProps from "./mockProps";
+
+const TAG = "doc-phase";
+const render = createRenderComponent(TAG, DocPhase);
+
+describe(TAG, () => {
+    let element: any;
+
+    beforeEach(() => {
+        element = render({
+            docPhaseInfo: mockProps
+        });
+    });
+
+    it("renders the icon, title & body with the default phase", async () => {
+        const els = [
+            ".doc-phase-container",
+            ".doc-phase-icon",
+            ".doc-phase-title",
+            ".doc-phase-body"
+        ].map((query) => element.shadowRoot.querySelector(query));
+
+        expect(els).not.toContain(null);
+
+        await expect(element).toBeAccessible();
+    });
+
+    it("hides the body when clicking button on expand state", async () => {
+
+        const showOrHideButton = element.shadowRoot.querySelector("dx-button");
+
+        const docPhaseBody: HTMLSpanElement =
+            element.shadowRoot.querySelector(".doc-phase-body");
+
+        showOrHideButton.click();
+
+        return Promise.resolve().then(() => {
+            expect(docPhaseBody.classList).toContain("doc-phase-body-hidden");
+        });
+    });
+
+    it("shows the body when clicking button on collapse state", async () => {
+        
+        const showOrHideButton = element.shadowRoot.querySelector("dx-button");
+
+        const docPhaseBody: HTMLSpanElement =
+            element.shadowRoot.querySelector(".doc-phase-body");
+
+        showOrHideButton.click();
+        showOrHideButton.click();
+
+        return Promise.resolve().then(() => {
+            expect(docPhaseBody.classList).not.toContain(
+                "doc-phase-body-hidden"
+            );
+        });
+    });
+});

package/src/modules/doc/phase/phase.css

@@ -0,0 +1,55 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/status";
+
+.doc-phase-container {
+    display: flex;
+    flex-direction: column;
+    padding-left: var(--dx-g-spacing-3xl);
+    padding-right: var(--dx-g-spacing-3xl);
+    width: 100%;
+}
+
+.doc-phase-title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+dx-button {
+    margin-left: auto;
+}
+
+/* 
+    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
+
+    It's one of the suggested way to achieve the expand/collapse animation
+    Ref: https://stackoverflow.com/a/41164095
+
+    Otherwise we need to change the height when user clicks on button
+    Ref: https://stackoverflow.com/a/11837673
+*/
+
+.doc-phase-body {
+    max-height: 1000px;
+    overflow: hidden;
+    padding-top: var(--dx-g-spacing-smd);
+    transition: max-height 0.25s ease, padding 0.25s ease;
+}
+
+.doc-phase-body-hidden {
+    max-height: 0;
+    padding-top: 0;
+    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
+}
+
+.doc-phase-body a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+/* Small Devices */
+@media screen and (max-width: 480px) {
+    .doc-phase-container {
+        padding: var(--doc-status-vertical-padding);
+    }
+}

package/src/modules/doc/phase/phase.html

@@ -0,0 +1,26 @@
+<template>
+    <div class={className} part="container">
+        <div class="doc-phase-title-container">
+            <dx-icon
+                class="doc-status-icon doc-phase-icon"
+                symbol="recipe"
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+            <p class="doc-status-title doc-phase-title dx-text-body-3">{docPhaseTitle}</p>
+            <dx-button
+                variant="inline"
+                onclick={onButtonClick}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+        </div>
+        <!--
+            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
+        -->
+        <span lwc:dom="manual" class={bodyClassName}></span>
+    </div>
+</template>

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

@@ -0,0 +1,12 @@
+import mockProps from "./__tests__/mockProps";
+
+export default {
+    title: "docs/doc-phase",
+    component: "doc-phase"
+};
+
+const docPhaseInfo = JSON.stringify(mockProps);
+
+export const Default = () => `
+  <doc-phase doc-phase-info='${docPhaseInfo}'></doc-phase>
+`;

package/src/modules/doc/phase/phase.ts

@@ -0,0 +1,57 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+import { DocPhaseInfo } from "typings/custom";
+import { toJson } from "utils/normalizers";
+
+export default class Phase extends LightningElement {
+    _docPhaseInfo!: DocPhaseInfo;
+
+    isBodyHidden = false;
+
+    get docPhaseTitle() {
+        return this.docPhaseInfo.title;
+    }
+
+    @api
+    get docPhaseInfo(): DocPhaseInfo {
+        return this._docPhaseInfo;
+    }
+
+    set docPhaseInfo(value) {
+        this._docPhaseInfo = toJson(value);
+    }
+
+    get hideBodyText() {
+        return this.isBodyHidden ? "Show" : "Hide"
+    }
+
+    get className() {
+        return cx(
+            "doc-status-base",
+            "doc-status-container",
+            "doc-phase-container"
+        );
+    }
+
+    get bodyClassName() {
+        return cx(
+            "doc-phase-body",
+            "dx-text-body-3",
+            this.isBodyHidden && "doc-phase-body-hidden"
+        );
+    }
+
+    renderedCallback() {
+        const phaseBodyContainer =
+            this.template.querySelector(".doc-phase-body");
+        if (phaseBodyContainer) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            phaseBodyContainer.innerHTML = this.docPhaseInfo.body;
+        }
+    }
+
+    onButtonClick() {
+        this.isBodyHidden = !this.isBodyHidden;
+    }
+}

package/src/modules/helpers/status/status.css

@@ -0,0 +1,22 @@
+:host {
+    --dx-status-icon-color: var(--dx-g-gray-10);
+    --doc-status-vertical-padding: var(--dx-g-spacing-md);
+}
+
+.doc-status-base {
+    border-left: 4px solid;
+    padding: var(--doc-status-vertical-padding);
+}
+
+.doc-status-container {
+    background-color: rgb(254, 243, 217);
+    border-color: var(--dx-g-yellow-vibrant-80);
+}
+
+.doc-status-title {
+    font-weight: var(--dx-g-font-bold);
+}
+
+.doc-status-icon {
+    margin-right: var(--dx-g-spacing-md);
+}