@salesforcedevs/docs-components 0.17.1 → 0.17.12-search-alpha

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

@@ -1,13 +1,13 @@
 /* eslint-disable @lwc/lwc/no-inner-html */
 import { createElement, LightningElement, api, track } from "lwc";
 import { DocContent, PageReference } from "typings/custom";
-import ContentCallout from "doc/contentCallout";
 import CodeBlock from "dx/codeBlock";
-import ContentMedia from "doc/contentMedia";
 import Button from "dx/button";
-import { highlightTerms } from "utils/highlight";
+import { highlightTerms } from "dxUtils/highlight";
+import ContentCallout from "doc/contentCallout";
+import ContentMedia from "doc/contentMedia";
 
-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"
@@ -43,26 +43,10 @@ export default class Content extends LightningElement {
         return this.docContent;
     }
 
-    @api
-    set codeBlockTheme(value) {
-        this._codeBlockTheme = value;
-    }
-
-    get codeBlockTheme() {
-        return this._codeBlockTheme;
-    }
-
     @track docContent: DocContent = "";
-    _codeBlockTheme: string = "dark";
     _docRendered: boolean = false;
-    originalCodeBlockThemeValue: String = "";
 
     connectedCallback() {
-        this.template.addEventListener(
-            "themechange",
-            this.updateTheme.bind(this) // eslint-disableline no-use-before-define
-        );
-
         window.addEventListener(
             "highlightedtermchange",
             this.updateHighlighted
@@ -76,17 +60,8 @@ export default class Content extends LightningElement {
         );
     }
 
-    updateTheme() {
-        this._codeBlockTheme =
-            this._codeBlockTheme === "dark" ? "light" : "dark";
-        const codeBlockEls = this.template.querySelectorAll("dx-code-block");
-        codeBlockEls.forEach((codeBlockEl) => {
-            codeBlockEl.setAttribute("theme", this._codeBlockTheme);
-        });
-    }
-
     renderPaginationButton(anchorEl: HTMLElement) {
-        const isNext = anchorEl.textContent.includes("Next →");
+        const isNext = anchorEl.textContent!.includes("Next →");
         anchorEl.innerHTML = "";
         const buttonEl = createElement("dx-button", { is: Button });
         const params = isNext
@@ -109,173 +84,194 @@ export default class Content extends LightningElement {
     insertDocHtml(docContent?: string) {
         const divEl = this.getCleanContainer();
 
-        // Some simple data mutation to make Prism work on-the-fly with the existing datasource
-        const templateEl = document.createElement("template");
-        // eslint-disable-next-line no-use-before-define
-        templateEl.innerHTML = docContent || this.docContent;
-
-        // Query the code blocks and create a dx-code-block component that contains the code
-        const codeBlockEls =
-            templateEl.content.querySelectorAll(".codeSection");
-        codeBlockEls.forEach((codeBlockEl) => {
-            codeBlockEl.setAttribute("lwc:dom", "manual");
-            const classList = codeBlockEl.firstChild.classList;
-            let language = "";
-            for (const key in classList) {
-                if (typeof classList[key] === "string") {
-                    const className = classList[key];
-                    if (className.startsWith("brush:")) {
-                        language = className.split(":")[1];
+        if (divEl) {
+            divEl.innerHTML = docContent || this.docContent;
+
+            // Query the code blocks and create a dx-code-block component that contains the code
+            const codeBlockEls = divEl.querySelectorAll(".codeSection");
+            codeBlockEls.forEach((codeBlockEl) => {
+                codeBlockEl.setAttribute("lwc:dom", "manual");
+                const classList = codeBlockEl.firstElementChild?.classList;
+                let language = "";
+                if (classList) {
+                    for (let i = 0; i < classList.length; i++) {
+                        const className = classList[i];
+                        if (className.startsWith("brush:")) {
+                            language = className.split(":")[1];
+                        }
                     }
                 }
-            }
-            const blockCmp = createElement("dx-code-block", { is: CodeBlock });
-            Object.assign(blockCmp, {
-                codeBlock: codeBlockEl.innerHTML,
-                // ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please
-                language: LANGUAGE_MAP[language] || language,
-                theme: this.codeBlockTheme,
-                title: "", // Default no title.
-                variant: this.codeBlockType,
-                isEncoded: true
-            });
-            // eslint-disable-next-line no-use-before-define
-            codeBlockEl.innerHTML = "";
-            codeBlockEl.appendChild(blockCmp);
-        });
-
-        // Query the callouts and create a doc-content-callout component that contains the code
-        const calloutEls = templateEl.content.querySelectorAll(".message");
-        calloutEls.forEach((calloutEl) => {
-            const calloutCompEl = createElement("doc-content-callout", {
-                is: ContentCallout
-            });
-            const detailEls = calloutEl.querySelectorAll(
-                "p, div.data, ol, ul, .codeSection, .mediaBd > span.ph"
-            );
-            detailEls.forEach((detailEl) => {
-                calloutCompEl.appendChild(detailEl);
-            });
-            const type = calloutEl.querySelector("h4").textContent;
-            const typeLower = type.toLowerCase();
-            Object.assign(calloutCompEl, {
-                title: type,
-                variant: typeLower
+                const blockCmp = createElement("dx-code-block", {
+                    is: CodeBlock
+                });
+                Object.assign(blockCmp, {
+                    codeBlock: codeBlockEl.innerHTML,
+                    // ! Hot fix for incoming html tags from couchdb for xml blocks, fix me soon please
+                    language: LANGUAGE_MAP[language] || language,
+                    header: "", // Default no title.
+                    variant: this.codeBlockType,
+                    isEncoded: true
+                });
+                // eslint-disable-next-line no-use-before-define
+                codeBlockEl.innerHTML = "";
+                codeBlockEl.appendChild(blockCmp);
             });
-            // eslint-disable-next-line no-use-before-define
-            calloutEl.innerHTML = "";
-            calloutEl.appendChild(calloutCompEl);
-        });
-
-        // Modify links to work with any domain, links that start with "#" are excluded
-        const anchorEls =
-            templateEl.content.querySelectorAll("a:not([href^='#'])");
-        anchorEls.forEach((anchorEl) => {
-            if (
-                anchorEl.textContent.includes("Next →") ||
-                anchorEl.textContent.includes("← Previous")
-            ) {
-                if (this.showPaginationButtons) {
-                    this.renderPaginationButton(anchorEl);
-                } else {
-                    anchorEl.remove();
-                }
-            }
-
-            const href = anchorEl.href.split("/");
-            if (
-                (href[3] === this.pageReference.docId && this.isStorybook) ||
-                href[4] === this.pageReference.docId ||
-                href[6] === this.pageReference.docId
-            ) {
-                let updatedURL;
-                switch (href.length) {
-                    case 8:
-                        updatedURL = href.splice(5).join("/");
-                        break;
-                    case 7:
-                        updatedURL = href.splice(4).join("/");
-                        break;
-                    case 6:
-                        updatedURL = href.splice(3).join("/");
-                        break;
-                    default:
-                        updatedURL = href.splice(6).join("/");
-                        break;
-                }
-                anchorEl.addEventListener(
-                    "click",
-                    // eslint-disable-next-line no-use-before-define
-                    this.handleNavClick.bind(this)
+
+            // Query the callouts and create a doc-content-callout component that contains the code
+            const calloutEls = divEl.querySelectorAll(".message");
+            calloutEls.forEach((calloutEl) => {
+                const calloutCompEl = createElement("doc-content-callout", {
+                    is: ContentCallout
+                });
+                const detailEls = calloutEl.querySelectorAll(
+                    "p, .p, div.data, ol, ul, p+.codeSection, p~.codeSection, div >.codeSection, .mediaBd > span.ph"
                 );
-                // anchor href event is not propagated here as we want SPA nature.
-                // But in prerender.io - as javascript is not executed, we want the anchor links are proper (absolute urls).
-                anchorEl.setAttribute("href", "/docs/" + updatedURL);
-                anchorEl.setAttribute("data-id", "docs/" + updatedURL);
-                return;
-            }
-
-            anchorEl.setAttribute("data-id", anchorEl.href);
-        });
-
-        // Modify image src to work with any domain and replace images/iframes with doc-content-media
-        const imgEls = templateEl.content.querySelectorAll("img, iframe");
-
-        imgEls.forEach((mediaEl) => {
-            const isImage = mediaEl.nodeName === "IMG";
-            let src = mediaEl.getAttribute("src");
-            if (!src) {
-                return;
-            }
-            const alt = mediaEl.getAttribute("alt");
-            const title = mediaEl.getAttribute("title");
-            const label = mediaEl.getAttribute("label");
-            const width = mediaEl.getAttribute("width");
-            const height = mediaEl.getAttribute("height");
-
-            if (isImage) {
-                src = src.startsWith("/")
-                    ? `https://developer.salesforce.com${src}`
-                    : src.replace(
-                          window.location.origin,
-                          "https://developer.salesforce.com"
-                      );
-
-                const img: HTMLImageElement = document.createElement("img");
-                img.src = src;
-                if (alt) {
-                    img.alt = alt;
+                detailEls.forEach((detailEl) => {
+                    if (detailEl.innerHTML.trim() !== "") {
+                        calloutCompEl.appendChild(detailEl);
+                    }
+                });
+
+                // Set a flag to 1 (true) if and only if all detailEls have no content.
+                let flag = 1;
+                for (let i: number = 0; i < detailEls.length; i++) {
+                    flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
                 }
-                if (title) {
-                    img.title = title;
+
+                if (flag) {
+                    const codeEls = calloutEl.querySelectorAll(".codeSection");
+                    codeEls.forEach((codeEl) => {
+                        calloutCompEl.appendChild(codeEl);
+                    });
                 }
-                if (height) {
-                    img.height = parseFloat(height);
+
+                const type = calloutEl.querySelector("h4")!.textContent!;
+                const typeLower = type.toLowerCase();
+                Object.assign(calloutCompEl, {
+                    header: type,
+                    variant: typeLower
+                });
+                // eslint-disable-next-line no-use-before-define
+                calloutEl.innerHTML = "";
+                calloutEl.appendChild(calloutCompEl);
+            });
+
+            // Modify links to work with any domain, links that start with "#" are excluded
+            const anchorEls = divEl.querySelectorAll("a:not([href^='#'])");
+
+            anchorEls.forEach((anchorEl: any) => {
+                if (
+                    anchorEl.textContent!.includes("Next →") ||
+                    anchorEl.textContent!.includes("← Previous")
+                ) {
+                    if (this.showPaginationButtons) {
+                        this.renderPaginationButton(anchorEl);
+                    } else {
+                        anchorEl.remove();
+                    }
                 }
-                if (width) {
-                    img.width = parseFloat(width);
+
+                // ! This is a hack
+                // Normalize urls in case it doesn't come complete.
+                if (anchorEl.href.startsWith("atlas.")) {
+                    anchorEl.href = "/docs/" + anchorEl.href;
                 }
 
-                img.className = "content-image";
-                mediaEl.parentNode!.insertBefore(img, mediaEl);
-            } else {
-                const contentMediaEl = createElement("doc-content-media", {
-                    is: ContentMedia
-                });
-                Object.assign(contentMediaEl, {
-                    contentType: "iframe",
-                    contentSrc: src,
-                    mediaTitle: alt || title || label
-                });
-                mediaEl.parentNode!.insertBefore(contentMediaEl, mediaEl);
-            }
-            mediaEl.remove();
-        });
+                const href = anchorEl.href.split("/");
+                if (
+                    (href[3] === this.pageReference.docId &&
+                        this.isStorybook) ||
+                    href[4] === this.pageReference.docId ||
+                    href[6] === this.pageReference.docId
+                ) {
+                    let updatedURL;
+                    switch (href.length) {
+                        case 8:
+                            updatedURL = href.splice(5).join("/");
+                            break;
+                        case 7:
+                            updatedURL = href.splice(4).join("/");
+                            break;
+                        case 6:
+                            updatedURL = href.splice(3).join("/");
+                            break;
+                        default:
+                            updatedURL = href.splice(6).join("/");
+                            break;
+                    }
+                    anchorEl.addEventListener(
+                        "click",
+                        // eslint-disable-next-line no-use-before-define
+                        this.handleNavClick.bind(this)
+                    );
+                    // anchor href event is not propagated here as we want SPA nature.
+                    // But in prerender.io - as javascript is not executed, we want the anchor links are proper (absolute urls).
+                    anchorEl.setAttribute("href", "/docs/" + updatedURL);
+                    anchorEl.setAttribute("data-id", "docs/" + updatedURL);
+                    return;
+                }
 
-        if (divEl) {
-            // eslint-disable-next-line no-use-before-define
-            divEl.innerHTML = "";
-            divEl.append(templateEl.content);
+                anchorEl.setAttribute("data-id", anchorEl.href);
+            });
+
+            // Modify image src to work with any domain and replace images/iframes with doc-content-media
+            const imgEls = divEl.querySelectorAll("img, iframe");
+
+            imgEls.forEach((mediaEl) => {
+                const isImage = mediaEl.nodeName === "IMG";
+                let src = mediaEl.getAttribute("src");
+                if (!src) {
+                    return;
+                }
+                const alt = mediaEl.getAttribute("alt");
+                const title = mediaEl.getAttribute("title");
+                const label = mediaEl.getAttribute("label");
+                const width = mediaEl.getAttribute("width");
+                const height = mediaEl.getAttribute("height");
+                const className = mediaEl.getAttribute("class");
+
+                if (isImage) {
+                    src = src.startsWith("/")
+                        ? `https://developer.salesforce.com${src}`
+                        : src.replace(
+                              window.location.origin,
+                              "https://developer.salesforce.com"
+                          );
+
+                    const img: HTMLImageElement = document.createElement("img");
+                    img.src = src;
+                    img.alt = "";
+                    if (alt) {
+                        img.alt = alt;
+                    }
+                    if (title) {
+                        img.title = title;
+                    }
+                    if (height) {
+                        img.height = parseFloat(height);
+                    }
+                    if (width) {
+                        img.width = parseFloat(width);
+                    }
+                    if (className) {
+                        img.className = className;
+                    }
+
+                    img.className = `content-image ${img.className}`;
+                    mediaEl.parentNode!.insertBefore(img, mediaEl);
+                } else {
+                    const contentMediaEl = createElement("doc-content-media", {
+                        is: ContentMedia
+                    });
+                    Object.assign(contentMediaEl, {
+                        contentType: "iframe",
+                        contentSrc: src,
+                        mediaTitle: alt || title || label
+                    });
+                    mediaEl.parentNode!.insertBefore(contentMediaEl, mediaEl);
+                }
+                mediaEl.remove();
+            });
         }
 
         // Once the html has been corectly modified, naviage to the page reference on the page
@@ -305,8 +301,7 @@ export default class Content extends LightningElement {
 
     handleNavClick(event: InputEvent) {
         event.preventDefault();
-        // eslint-disable-next-line no-use-before-define
-        const target = event.currentTarget.dataset.id;
+        const target = (event.currentTarget! as any).dataset.id;
         const [page, docId, deliverable, tempContentDocumentId] =
             target.split("/");
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");
@@ -334,14 +329,12 @@ 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
         );
 
     @api
-    public navigateToHash(hash: String) {
+    public navigateToHash = (hash: String) => {
         const splitHash = hash.split("#");
         if (splitHash.length === 2) {
             hash = splitHash[1];
@@ -352,7 +345,7 @@ export default class Content extends LightningElement {
         } else {
             window.scrollTo({ top: 0, behavior: "smooth" });
         }
-    }
+    };
 
     renderedCallback() {
         if (this._docRendered) {

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

@@ -1,16 +1,22 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/status";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "docHelpers/status";
 
 .dx-callout {
     border-radius: 4px;
 }
 
-.dx-callout-base {
+.dx-callout-base,
+.dx-callout-plain {
     background-color: var(--dx-g-gray-95);
     border-color: var(--dx-g-gray-50);
 }
 
+.dx-callout-plain {
+    border: none;
+    margin-bottom: var(--dx-g-text-2xl);
+}
+
 .dx-callout-note {
     background-color: var(--dx-g-blue-vibrant-95);
     border-color: var(--dx-g-blue-vibrant-50);
@@ -26,6 +32,11 @@
     border-color: var(--dx-g-red-vibrant-50);
 }
 
+.dx-callout-warning {
+    background-color: var(--dx-g-red-natural-95);
+    border-color: var(--dx-g-red-vibrant-50);
+}
+
 .dx-callout-base_section {
     width: 100%;
 }
@@ -42,10 +53,7 @@
     flex-direction: row;
 }
 
-.dx-callout-base_column > *:not(:last-child):not(dx-type-badge-group) {
-    margin-bottom: var(--dx-g-spacing-sm);
+.dx-callout-content {
+    flex: 1;
+    overflow: auto;
 }
-
-.dx-callout-base_column > dx-type-badge-group {
-    margin-bottom: var(--dx-g-spacing-sm);
-}

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

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

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

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { CalloutVariant, LightningSlotElement } from "typings/custom";
 
 export default class ContentCallout extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api variant!: CalloutVariant;
     cardVariant?: string;
     iconName?: string;
@@ -11,6 +11,9 @@ export default class ContentCallout extends LightningElement {
 
     connectedCallback() {
         switch (this.variant) {
+            case "plain":
+                this.cardVariant = "dx-callout-plain";
+                break;
             case "tip":
                 this.cardVariant = "dx-callout-tip";
                 this.iconColor = "green-vibrant-60";
@@ -18,7 +21,7 @@ export default class ContentCallout extends LightningElement {
                 break;
             case "warning":
                 this.cardVariant = "doc-status-container dx-callout-warning";
-                this.iconColor = "gray-10";
+                this.iconColor = "red-vibrant-50";
                 this.iconName = "warning";
                 break;
             case "caution":
@@ -26,6 +29,11 @@ export default class ContentCallout extends LightningElement {
                 this.iconColor = "red-vibrant-50";
                 this.iconName = "alert";
                 break;
+            case "important":
+                this.cardVariant = "doc-status-container dx-callout-important";
+                this.iconColor = "gray-10";
+                this.iconName = "announcement";
+                break;
             case "note":
             default:
                 this.cardVariant = "dx-callout-note";
@@ -44,6 +52,10 @@ export default class ContentCallout extends LightningElement {
         );
     }
 
+    get hideIcon() {
+        return this.variant === "plain";
+    }
+
     private isSlotEmpty: boolean = true;
     private onSlotChange(e: LightningSlotElement) {
         // @ts-ignore

package/src/modules/doc/contentLayout/contentLayout.css

@@ -0,0 +1 @@
+@import "docHelpers/contentLayoutStyle";

package/src/modules/doc/contentLayout/contentLayout.html

@@ -0,0 +1,46 @@
+<template>
+    <div class="content">
+        <dx-sidebar-old
+            class="is-sticky left-nav-bar"
+            trees={sidebarContent}
+            value={sidebarValue}
+            header={sidebarHeader}
+            ontogglesidebar={onToggleSidebar}
+            languages={languages}
+            language={language}
+            bail-href={bailHref}
+            bail-label={bailLabel}
+            dev-center={devCenter}
+            brand={brand}
+            empty-state-message={emptyStateMessage}
+        >
+            <slot name="sidebar-header" slot="version-picker"></slot>
+        </dx-sidebar-old>
+        <div class="content-body-doc-phase-container">
+            <slot name="doc-phase"></slot>
+            <slot name="version-banner"></slot>
+            <div class="content-body-container">
+                <div class="content-body">
+                    <doc-breadcrumbs
+                        lwc:if={showBreadcrumbs}
+                        breadcrumbs={breadcrumbs}
+                    ></doc-breadcrumbs>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        lwc:if={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
+                </div>
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                    <dx-toc
+                        header={tocTitle}
+                        options={tocOptions}
+                        value={tocValue}
+                    ></dx-toc>
+                </div>
+            </div>
+            <div lwc:if={showFooter} class="footer-container">
+                <dx-footer variant="no-signup"></dx-footer>
+            </div>
+        </div>
+    </div>
+</template>