@salesforcedevs/docs-components 0.17.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.17.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": "b7a26c9e46cee9298b3ebc7cbea85930320b83a0"
+    "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/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);
+}