@salesforcedevs/docs-components 1.3.2 → 1.3.4-alpha

package/src/modules/doc/content/content.css

@@ -6,8 +6,8 @@
 
 @import "dxHelpers/text";
 @import "dxHelpers/reset";
-@import "dxHelpers/card";
 @import "dxHelpers/table";
+@import "docHelpers/imgStyle";
 
 .doc-content {
     width: 100%;
@@ -31,11 +31,6 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.helpHead2 {
-    margin-top: 36px;
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
 .relinfo {
     padding-top: var(--dx-g-spacing-sm);
     padding-bottom: var(--dx-g-spacing-sm);
@@ -46,17 +41,10 @@
     padding-bottom: var(--dx-g-spacing-sm);
 }
 
-img.content-image {
-    height: auto;
-    display: unset;
-}
-
 .image-block .content-image {
     margin-top: var(--dx-g-spacing-lg);
     margin-bottom: var(--dx-g-spacing-sm);
     display: block;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 td > img.content-image:first-child:last-child[alt="Yes"],
@@ -64,61 +52,61 @@ td > img.content-image:first-child:last-child[alt="No"] {
     width: var(--dx-g-spacing-md);
 }
 
-h1 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-4xl);
-
-    /* not registered */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.4px;
-    line-height: 56px;
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
 }
 
-h2 {
-    font-family: var(--dx-g-font-display);
+h1 {
     font-size: var(--dx-g-text-3xl);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
+    letter-spacing: -0.8px;
     line-height: var(--dx-g-spacing-3xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-h3 {
-    font-family: var(--dx-g-font-display);
-    font-size: 32px;
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: -0.1px;
+h2 {
+    font-size: var(--dx-g-text-2xl);
+    letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
-h4 {
-    font-family: var(--dx-g-font-display);
+h3 {
     font-size: var(--dx-g-text-xl);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
+    letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
+}
+
+h4 {
+    font-size: var(--dx-g-text-base);
+    letter-spacing: -0.5px;
+    line-height: var(--dx-g-spacing-lg);
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
 }
 
 h5 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
-    line-height: 28px;
+    font-size: var(--dx-g-text-sm);
+    letter-spacing: -0.3px;
+    line-height: var(--dx-g-spacing-mlg);
+    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
 }
 
 h6 {
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    color: var(--dx-g-blue-vibrant-20);
-    letter-spacing: 0;
-    line-height: var(--dx-g-spacing-mlg);
+    font-size: var(--dx-g-text-xs);
+    letter-spacing: -0.3px;
+    line-height: var(--dx-g-spacing-md);
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
 }
 
-.dx-text-heading-alt-1 {
-    color: var(--dx-g-gray-30);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--slds-text-lg);
-    line-height: 25px;
+img {
+    image-rendering: optimize-contrast;
 }
 
 p,
@@ -165,10 +153,6 @@ a,
     color: var(--dx-g-blue-vibrant-50);
 }
 
-.helpHead1 {
-    margin-bottom: var(--dx-g-spacing-lg);
-}
-
 .shortdesc {
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
@@ -270,6 +254,10 @@ li {
         var(--dx-g-spacing-lg);
 }
 
+li table {
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
 li > li {
     margin-left: var(--dx-g-spacing-2xl);
 }
@@ -283,27 +271,6 @@ a:hover,
     text-decoration: underline;
 }
 
-@media (max-width: 640px) {
-    /* Mobile */
-    img.content-image {
-        max-width: 95vw;
-    }
-}
-
-@media (min-width: 641px) {
-    /* Tablet (medium) */
-    img.content-image {
-        max-width: 80vw;
-    }
-}
-
-@media (min-width: 769px) {
-    /* Desktop */
-    img.content-image {
-        max-width: min(60vw, 650px);
-    }
-}
-
 ul,
 ol {
     margin-left: var(--dx-g-spacing-lg);
@@ -376,13 +343,30 @@ ul ul ul ul ul ul {
     margin: var(--dx-g-spacing-lg) 0;
 }
 
-figure {
+figure,
+.fig {
     margin: var(--dx-g-spacing-lg) 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
 }
 
-figcaption {
+figcaption,
+.figcap {
+    display: block;
     font-size: var(--dx-g-text-xs);
-    margin-top: var(--dx-g-spacing-sm);
+    margin: var(--dx-g-spacing-sm) 0;
+    order: 2;
+}
+
+.figcap .image {
+    order: 1;
+}
+
+.fig.fig-centered {
+    text-align: center;
 }
 
 code,
@@ -397,3 +381,13 @@ samp,
 mark {
     background-color: var(--dx-g-yellow-vibrant-90);
 }
+
+/* offset page jump link due to fixed header */
+[id] {
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
+}

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

@@ -1,11 +1,11 @@
 /* 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 "dxUtils/highlight";
+import ContentCallout from "doc/contentCallout";
+import ContentMedia from "doc/contentMedia";
 
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
@@ -86,7 +86,7 @@ export default class Content extends LightningElement {
     }
 
     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
@@ -116,7 +116,7 @@ export default class Content extends LightningElement {
             const codeBlockEls = divEl.querySelectorAll(".codeSection");
             codeBlockEls.forEach((codeBlockEl) => {
                 codeBlockEl.setAttribute("lwc:dom", "manual");
-                const classList = codeBlockEl.firstChild.classList;
+                const classList = (codeBlockEl.firstChild as any).classList;
                 let language = "";
                 for (const key in classList) {
                     if (typeof classList[key] === "string") {
@@ -134,7 +134,7 @@ export default class Content extends LightningElement {
                     // ! 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.
+                    header: "", // Default no title.
                     variant: this.codeBlockType,
                     isEncoded: true
                 });
@@ -160,7 +160,7 @@ export default class Content extends LightningElement {
 
                 let flag = 1;
                 for (let i: number = 0; i < detailEls.length; i++) {
-                    flag &= detailEls[i].innerHTML.trim() === "";
+                    flag &= (detailEls[i].innerHTML.trim() === "") as any; // Dark Magic TM
                 }
 
                 if (flag) {
@@ -170,10 +170,10 @@ export default class Content extends LightningElement {
                     });
                 }
 
-                const type = calloutEl.querySelector("h4").textContent;
+                const type = calloutEl.querySelector("h4")!.textContent!;
                 const typeLower = type.toLowerCase();
                 Object.assign(calloutCompEl, {
-                    title: type,
+                    header: type,
                     variant: typeLower
                 });
                 // eslint-disable-next-line no-use-before-define
@@ -184,10 +184,10 @@ export default class Content extends LightningElement {
             // Modify links to work with any domain, links that start with "#" are excluded
             const anchorEls = divEl.querySelectorAll("a:not([href^='#'])");
 
-            anchorEls.forEach((anchorEl) => {
+            anchorEls.forEach((anchorEl: any) => {
                 if (
-                    anchorEl.textContent.includes("Next →") ||
-                    anchorEl.textContent.includes("← Previous")
+                    anchorEl.textContent!.includes("Next →") ||
+                    anchorEl.textContent!.includes("← Previous")
                 ) {
                     if (this.showPaginationButtons) {
                         this.renderPaginationButton(anchorEl);
@@ -253,6 +253,7 @@ export default class Content extends LightningElement {
                 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("/")
@@ -264,6 +265,7 @@ export default class Content extends LightningElement {
 
                     const img: HTMLImageElement = document.createElement("img");
                     img.src = src;
+                    img.alt = "";
                     if (alt) {
                         img.alt = alt;
                     }
@@ -276,8 +278,11 @@ export default class Content extends LightningElement {
                     if (width) {
                         img.width = parseFloat(width);
                     }
+                    if (className) {
+                        img.className = className;
+                    }
 
-                    img.className = "content-image";
+                    img.className = `content-image ${img.className}`;
                     mediaEl.parentNode!.insertBefore(img, mediaEl);
                 } else {
                     const contentMediaEl = createElement("doc-content-media", {
@@ -321,8 +326,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("#");

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

@@ -6,11 +6,17 @@
     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);
@@ -46,3 +52,8 @@
     display: flex;
     flex-direction: row;
 }
+
+.dx-callout-content {
+    flex: 1;
+    overflow: auto;
+}

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

@@ -1,11 +1,18 @@
 <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}
+                {header}
             </p>
             <span class="dx-callout-body dx-text-body-3">
                 <slot onslotchange={onSlotChange}></slot>

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";
@@ -49,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

@@ -1,98 +1 @@
-:host {
-    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
-
-    display: block;
-}
-
-doc-breadcrumbs {
-    --dx-c-popover-z-index: 5;
-
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
-dx-sidebar,
-dx-sidebar-old {
-    --dx-c-sidebar-height: 100%;
-    --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
-
-    z-index: 6;
-}
-
-dx-toc {
-    --dx-c-toc-width: unset;
-
-    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
-    margin: var(--dx-c-content-vertical-spacing) 0;
-    overflow-y: auto;
-}
-
-dx-sidebar,
-dx-toc {
-    display: block;
-}
-
-.content {
-    display: flex;
-}
-
-.content-body-doc-phase-container {
-    flex: 1;
-}
-
-.content-body-container {
-    display: flex;
-    flex-direction: row;
-    padding-right: var(--dx-g-page-padding-horizontal);
-}
-
-.content-body {
-    margin: var(--dx-g-spacing-sm) var(--dx-c-content-vertical-spacing)
-        var(--dx-g-spacing-xl);
-    flex: 1;
-    width: 0;
-}
-
-.is-sticky {
-    height: 100vh;
-    position: sticky;
-    top: 0;
-}
-
-.right-nav-bar {
-    max-width: 275px;
-}
-
-@media screen and (max-width: 1024px) {
-    .right-nav-bar {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 800px) {
-    .content-body {
-        margin-top: var(--dx-c-content-vertical-spacing);
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .content {
-        flex-direction: column;
-    }
-
-    .content-body-container {
-        padding-right: 0;
-    }
-
-    .left-nav-bar {
-        --dx-c-sidebar-height: 80vh;
-
-        height: unset;
-        z-index: 10;
-    }
-
-    .content-body {
-        margin-left: var(--dx-g-spacing-mlg, 20px);
-        margin-right: var(--dx-g-spacing-mlg, 20px);
-    }
-}
+@import "docHelpers/contentLayoutStyle";

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

@@ -1,16 +1,21 @@
 <template>
     <div class="content">
-        <template if:true={useOldSidebar}>
+        <template lwc:if={useOldSidebar}>
             <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}
             >
-                <slot name="sidebar-header" slot="header"></slot>
+                <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar-old>
         </template>
-        <template if:false={useOldSidebar}>
+        <template lwc:else>
             <dx-sidebar
                 class="is-sticky left-nav-bar"
                 trees={sidebarContent}
@@ -20,31 +25,40 @@
                 coveo-public-access-token={coveoPublicAccessToken}
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
-                <slot name="sidebar-header" slot="header"></slot>
+                <slot name="sidebar-header" slot="version-picker"></slot>
             </dx-sidebar>
         </template>
         <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
-                        if:true={showBreadcrumbs}
+                        lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
-                    <div style={docContentStyle}>
-                        <slot onslotchange={onSlotChange}></slot>
-                    </div>
+                    <slot onslotchange={onSlotChange}></slot>
+                    <doc-sprig-survey
+                        lwc:if={shouldDisplayFeedback}
+                    ></doc-sprig-survey>
                 </div>
-                <div class="right-nav-bar is-sticky">
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
-                        if:true={showToc}
-                        title={tocTitle}
+                        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>