@salesforcedevs/docs-components 0.56.2 → 0.56.3-example

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);
@@ -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-base_column > dx-type-badge-group {
-    margin-bottom: var(--dx-g-spacing-sm);
+.dx-callout-content {
+    flex: 1;
+    overflow: auto;
 }

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

@@ -1,100 +1 @@
-:host {
-    --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
-
-    display: block;
-}
-
-dx-sidebar,
-dx-sidebar-old {
-    --dx-c-sidebar-height: 100%;
-    --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
-
-    z-index: 5;
-}
-
-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;
-}
-
-dx-breadcrumbs {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
-@media screen and (max-width: 1024px) {
-    .right-nav-bar {
-        display: none;
-    }
-}
-
-@media screen and (max-width: 800px) {
-    dx-breadcrumbs {
-        display: none;
-    }
-
-    .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,23 @@
 <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}
+                dev-center={devCenter}
+                brand={brand}
             >
-                <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,36 +27,42 @@
                 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}
+                dev-center={devCenter}
+                brand={brand}
             >
-                <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">
-                    <dx-breadcrumbs
-                        if:true={breadcrumbs}
+                    <doc-breadcrumbs
+                        lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
-                        truncate
-                        hide-current-location
-                    ></dx-breadcrumbs>
-                    <dx-breadcrumbs
-                        if:false={breadcrumbs}
-                        pathname={pathname}
-                        hide-current-location
-                    ></dx-breadcrumbs>
+                    ></doc-breadcrumbs>
                     <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>