@salesforcedevs/docs-components 0.16.2 → 0.19.0

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.16.2",
+    "version": "0.19.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -14,5 +14,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
+    "gitHead": "d5a5baab1cef348d1846d92deed55022ce5dd60b"
 }

package/src/modules/doc/content/content.ts

@@ -7,7 +7,7 @@ import ContentMedia from "doc/contentMedia";
 import Button from "dx/button";
 import { highlightTerms } from "utils/highlight";
 
-const ALLOWED_ELEMENTS = [
+const HIGHLIGHTABLE_SELECTOR = [
     "p",
     ".p",
     ".shortdesc",
@@ -21,7 +21,7 @@ const ALLOWED_ELEMENTS = [
     "dl",
     "th",
     "td"
-];
+].join(",");
 
 const LANGUAGE_MAP: { [key: string]: string } = {
     js: "javascript"
@@ -334,9 +334,7 @@ export default class Content extends LightningElement {
 
     updateHighlighted = (event: any) =>
         highlightTerms(
-            Array.from(
-                this.template.querySelectorAll(ALLOWED_ELEMENTS.join(","))
-            ),
+            this.template.querySelectorAll(HIGHLIGHTABLE_SELECTOR),
             event.detail
         );
 

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,9 +96,8 @@ 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);
 
@@ -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,33 +276,32 @@ 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:""
+                signupLink: ""
             };
             const element = render(updatedMockPropsDevelopers);
             const signupButtonContainer: HTMLElement =
@@ -345,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);
 
@@ -383,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/header.html

@@ -1,7 +1,7 @@
 <template>
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
-            <dx-banner 
+            <dx-banner
                 if:true={bannerMarkup}
                 banner-markup={bannerMarkup}
             ></dx-banner>

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 | null = null;
+
+    isBodyHidden = false;
+
+    get docPhaseTitle() {
+        return this.docPhaseInfo?.title;
+    }
+
+    @api
+    get docPhaseInfo(): DocPhaseInfo | null {
+        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 && this.docPhaseInfo) {
+            // 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);
+}