@salesforcedevs/docs-components 1.3.228-version-picker2 → 1.3.242-dc-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.228-version-picker2",
+    "version": "1.3.242-dc-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -1,6 +1,6 @@
 <template>
     <doc-content-layout
-        if:true={isVersionFetched}
+        lwc:if={isVersionFetched}
         use-old-sidebar={useOldSidebar}
         class="content-type content-type-reference"
         coveo-organization-id={coveoOrganizationId}
@@ -22,18 +22,18 @@
     >
         <doc-phase
             slot="doc-phase"
-            if:true={docPhaseInfo}
+            lwc:if={docPhaseInfo}
             doc-phase-info={docPhaseInfo}
         ></doc-phase>
         <doc-phase
             slot="version-banner"
-            if:true={showVersionBanner}
+            lwc:if={showVersionBanner}
             doc-phase-info={oldVersionInfo}
             icon-name="warning"
             dismissible="true"
             ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
-        <div if:true={isVersionEnabled} slot="sidebar-header">
+        <div lwc:if={isVersionEnabled} slot="sidebar-header">
             <doc-version-picker
                 onchange={handleVersionChange}
                 data-type="version"
@@ -42,18 +42,18 @@
                 latest-version={latestVersion}
             ></doc-version-picker>
         </div>
-        <template if:false={showSpecBasedReference}>
-            <slot></slot>
-        </template>
-        <template if:true={showSpecBasedReference}>
+        <template lwc:if={showSpecBasedReference}>
             <div class="container">
                 <div class="api-documentation">
                     <doc-amf-topic
-                        if:true={topicModel}
+                        lwc:if={topicModel}
                         model={topicModel}
                     ></doc-amf-topic>
                 </div>
             </div>
         </template>
+        <template lwc:else>
+            <slot></slot>
+        </template>
     </doc-content-layout>
 </template>

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

@@ -22,7 +22,7 @@ doc-breadcrumbs {
 
 dx-sidebar,
 dx-sidebar-old {
-    --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 
     z-index: calc(var(--dx-g-z-index-100) + 5);
 }
@@ -54,6 +54,7 @@ dx-toc {
 
 .content-body-doc-phase-container {
     flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
 }
 
 .content-body-container {
@@ -70,7 +71,7 @@ dx-toc {
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 0;
+    margin: var(--dx-g-spacing-md) 0 0;
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -96,6 +97,10 @@ dx-toc {
     .content-body {
         margin-top: var(--dx-c-content-vertical-spacing);
     }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -115,7 +120,6 @@ dx-toc {
 
     .left-nav-bar {
         height: unset;
-        z-index: 10;
     }
 
     .content-body {

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

@@ -1,6 +1,6 @@
 <template>
     <div class="content">
-        <template if:true={useOldSidebar}>
+        <template lwc:if={useOldSidebar}>
             <dx-sidebar-old
                 class="is-sticky left-nav-bar"
                 trees={sidebarContent}
@@ -15,7 +15,7 @@
                 <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}
@@ -40,15 +40,15 @@
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs
-                        if:true={showBreadcrumbs}
+                        lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
-                        if:true={shouldDisplayFeedback}
+                        lwc:if={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div if:true={showToc} class="right-nav-bar is-sticky">
+                <div lwc:if={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
                         title={tocTitle}
                         options={tocOptions}

package/src/modules/doc/header/header.css

@@ -4,11 +4,26 @@ dx-logo {
     min-width: fit-content;
 }
 
+.dev-center-link {
+    display: inline-block;
+    margin-left: var(--dx-g-global-header-padding-horizontal);
+    height: 20px;
+}
+
+.dev-center-content {
+    display: flex; /* This makes the anchor element a flex container */
+    align-items: center; /* This centers the content vertically */
+    text-decoration: none; /* Remove underline from the anchor element */
+    color: inherit;
+}
+
+.dev-center-content > * + * {
+    margin-left: 8px; /* Adjust this value to your desired spacing */
+}
+
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
-    padding-bottom: var(--dx-g-spacing-xs);
-    background: white;
 }
 
 .nav_menu-button {
@@ -35,7 +50,6 @@ header:not(.has-brand) > .header_l1 {
 header:not(.has-brand) > .header_l2 {
     border-bottom: 1px solid var(--dx-g-gray-90);
     border-top: 1px solid var(--dx-g-gray-90);
-    padding-bottom: var(--dx-g-spacing-lg);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
@@ -43,7 +57,13 @@ header:not(.has-brand) > .header_l2 {
 }
 
 .has-brand .header_l2_group-title {
-    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
+        calc(var(--dx-g-spacing-smd) - 1px) 0;
+    min-width: 320px;
+}
+
+.no-header-content {
+    border-top: 1px solid var(--dx-g-gray-90);
 }
 
 @media (max-width: 768px) {
@@ -61,37 +81,41 @@ header:not(.has-brand) > .header_l2 {
         width: 100%;
     }
 
+    .header_l2_group-title {
+        margin-right: 0;
+        padding: var(--dx-g-spacing-sm) 0 2px
+            var(--dx-g-global-header-padding-horizontal);
+        min-height: var(--dx-g-doc-header-main-nav-height);
+    }
+
     .header_l2_group-nav {
         height: var(--dx-g-spacing-3xl);
         padding: 0;
-        padding-left: var(--dx-g-spacing-sm);
+        margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
     }
 
     .header_l2_group-nav_overflow {
-        height: 48px;
+        height: var(--dx-g-spacing-3xl);
         margin-right: var(--dx-g-spacing-sm);
     }
 
-    .has-brand .header_l2_group-title {
-        padding-bottom: var(--dx-g-spacing-smd);
+    .subtitle {
+        font-weight: var(--dx-g-font-demi);
+        letter-spacing: -0.08px;
     }
 
-    .header_l2_group-title {
+    .has-brand .header_l2_group-title {
         margin-right: 0;
-        padding: var(--dx-g-spacing-smd)
+        padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xs)
             var(--dx-g-global-header-padding-horizontal);
-        min-height: var(--dx-g-doc-header-main-nav-height);
     }
 
     .has-scoped-nav-items > .header_l2 {
         height: unset;
     }
 
-    .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-gray-90);
-    }
-
     header:not(.has-brand) > .header_l2 {
         padding-bottom: 0;
+        border: 0;
     }
 }

package/src/modules/doc/header/header.html

@@ -1,9 +1,22 @@
 <template>
-    <template if:true={shouldRender}>
+    <template lwc:if={shouldRender}>
+        <div lwc:if={devCenter} class="dev-center-link">
+            <a href={devCenter.link} class="dev-center-content">
+                <dx-icon symbol="back" size="small"></dx-icon>
+                <dx-icon
+                    class="brand-icon"
+                    lwc:if={devCenter.icon}
+                    sprite="salesforcebrand"
+                    symbol={brand}
+                    size="small"
+                ></dx-icon>
+                <span>{devCenter.title}</span>
+            </a>
+        </div>
         <dx-brand-theme-provider brand={brand}>
             <header class={className}>
                 <dx-banner
-                    if:true={showBanner}
+                    lwc:if={showBanner}
                     banner-markup={bannerMarkup}
                 ></dx-banner>
                 <div class="header_l2">
@@ -11,7 +24,7 @@
                         <a href={headerHref} class="home-link">
                             <dx-icon
                                 class="brand-icon"
-                                if:true={isValidBrand}
+                                lwc:if={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
                                 size="large"
@@ -22,7 +35,7 @@
                         </a>
                     </div>
                     <div
-                        if:true={hasScopedNavItems}
+                        lwc:if={hasScopedNavItems}
                         class="header_l2_group header_l2_group-nav"
                     >
                         <div
@@ -40,4 +53,7 @@
             </header>
         </dx-brand-theme-provider>
     </template>
+    <template lwc:if={showDocDivider}>
+        <div class="no-header-content"></div>
+    </template>
 </template>

package/src/modules/doc/header/header.ts

@@ -5,7 +5,7 @@ import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
 
 const TABLET_MATCH = "980px";
-const MOBILE_MATCH = "880px";
+const MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
@@ -20,10 +20,22 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
+    @api
+    get devCenter() {
+        return this._devCenter;
+    }
+
+    set devCenter(value) {
+        this._devCenter = toJson(value);
+        console.log(this._devCenter);
+    }
+
     private _scopedNavItems!: OptionWithNested[];
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
-    private shouldRender = false;
+    private shouldRender: boolean = false;
+    private showDocDivider: boolean = false;
+    private _devCenter: any;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -51,6 +63,13 @@ export default class Header extends HeaderBase {
         ) {
             this.shouldRender = true;
         }
+
+        if (this.shouldRender && window.location.pathname.includes("/docs/")) {
+            if (!this.brand && !this.mobile) {
+                this.shouldRender = false;
+                this.showDocDivider = true;
+            }
+        }
     }
 
     disconnectedCallback(): void {

package/src/modules/doc/versionPicker/versionPicker.css

@@ -2,6 +2,8 @@
 
 /* NOTE: doc-version-picker-width width variable is used by both dx-button and dx-dropdown to maintain a consistent width. */
 :host {
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
     --popover-container-open-transform: translateY(4px);
 }
 
@@ -12,11 +14,18 @@
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
-dx-button {
+.version-picker-button {
     display: flex;
     width: var(--doc-version-picker-width, 296px);
 }
 
+.version-picker-button:hover,
+.version-picker-button:active,
+.version-picker-button:focus {
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
+}
+
 /**
  * NOTE: This CSS ensures the span inside the button stays within the parent's width, avoiding overflow.
  * Not keeping this in common component to ensure that existing functionality works as it is.

package/src/modules/doc/versionPicker/versionPicker.html

@@ -1,11 +1,13 @@
 <template>
-    <div if:true={showVersionPicker} class="version-picker-container">
+    <div lwc:if={showVersionPicker} class="version-picker-container">
         <dx-dropdown
             options={versions}
             value={selectedVersion.id}
             width="var(--doc-version-picker-width)"
+            onchange={onVersionChange}
         >
             <dx-button
+                class="version-picker-button"
                 variant="tertiary"
                 size="small"
                 icon-symbol="chevrondown"
@@ -15,16 +17,16 @@
                     <p class="selected-version-label">
                         {selectedVersion.label}
                     </p>
-                    <template if:false={hideBadge}>
+                    <template lwc:if={showLatestTag}>
                         <dx-type-badge
                             class="latest-badge"
-                            if:true={latestVersion}
+                            lwc:if={latestVersion}
                             value="Latest"
                             size="small"
                         ></dx-type-badge>
                         <dx-type-badge
                             class="not-latest-badge"
-                            if:false={latestVersion}
+                            lwc:else
                             value="Not Latest"
                             size="small"
                         ></dx-type-badge>

package/src/modules/doc/versionPicker/versionPicker.ts

@@ -1,4 +1,4 @@
-import { LightningElement, api } from "lwc";
+import { LightningElement, api, track } from "lwc";
 
 import { AnalyticsPayload, OptionWithNested } from "typings/custom";
 
@@ -8,7 +8,7 @@ export default class VersionPicker extends LightningElement {
     @api analyticsEvent?: string;
     @api analyticsPayload?: AnalyticsPayload;
 
-    private _versions!: OptionWithNested[];
+    @track private _versions!: OptionWithNested[];
     private _selectedVersion?: OptionWithNested;
     private _latestVersion: boolean = false;
     private _hideBadge: boolean = false;
@@ -54,4 +54,12 @@ export default class VersionPicker extends LightningElement {
     private get showVersionPicker() {
         return this._versions && this._versions.length !== 0;
     }
+
+    private get showLatestTag(): boolean {
+        return !this.hideBadge;
+    }
+
+    private onVersionChange(e: CustomEvent) {
+        this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
+    }
 }

package/src/modules/doc/xmlContent/xmlContent.css

@@ -4,17 +4,8 @@
 }
 
 doc-content-layout {
-    --dx-c-content-sidebar-sticky-top: calc(
-        var(--dx-g-global-header-height) +
-            var(--dx-g-doc-header-main-nav-height)
-    );
-    --dx-c-sidebar-height: calc(
-        100vh -
-            calc(
-                var(--dx-g-global-header-height) +
-                    var(--dx-g-doc-header-main-nav-height)
-            )
-    );
+    --dx-c-content-sidebar-sticky-top: var(--dx-g-global-header-height);
+    --dx-c-sidebar-height: calc(100vh - var(--dx-g-global-header-height));
 }
 
 doc-breadcrumbs {
@@ -41,7 +32,23 @@ dx-dropdown > dx-button:hover {
 }
 
 doc-phase {
-    --doc-c-phase-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
-    );
+    --doc-c-phase-top: var(--dx-g-global-header-height);
+}
+
+@media screen and (max-width: 768px) {
+    doc-content-layout {
+        --dx-g-doc-header-main-nav-height: 41px;
+        --dx-g-doc-header-height: calc(
+            var(--dx-g-doc-header-main-nav-height) + 40px
+        );
+        --dx-c-content-sidebar-sticky-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        );
+    }
+
+    doc-phase {
+        --doc-c-phase-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+        );
+    }
 }

package/src/modules/doc/xmlContent/xmlContent.html

@@ -1,16 +1,18 @@
 <template>
     <doc-content-layout
-        if:true={loaded}
+        lwc:if={loaded}
+        lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
         coveo-analytics-token={coveoAnalyticsToken}
         coveo-search-hub={coveoSearchHub}
         coveo-advanced-query-config={coveoAdvancedQueryConfig}
-        sidebar-header="Pages"
+        sidebar-header={docTitle}
         sidebar-content={sidebarContent}
         sidebar-value={sidebarValue}
         onselect={handleSelect}
         use-old-sidebar={useOldSidebar}
+        onlangchange={handleLanguageChange}
         languages={sidebarFooterContent.languages}
         language={sidebarFooterContent.language}
         bail-href={sidebarFooterContent.bailHref}
@@ -18,13 +20,13 @@
     >
         <doc-phase
             slot="version-banner"
-            if:true={showVersionBanner}
+            lwc:if={showVersionBanner}
             doc-phase-info={oldVersionInfo}
             icon-name="warning"
             dismissible="true"
             ondismissphase={handleDismissVersionBanner}
         ></doc-phase>
-        <div if:false={disableVersion} slot="sidebar-header">
+        <div lwc:if={showVersionPicker} slot="sidebar-header">
             <doc-version-picker
                 data-type="version"
                 analytics-event="custEv_ctaLinkClick"
@@ -36,7 +38,7 @@
             ></doc-version-picker>
         </div>
         <doc-breadcrumbs
-            if:true={showBreadcrumbs}
+            lwc:if={showBreadcrumbs}
             breadcrumbs={breadcrumbs}
             pixel-per-character={breadcrumbPixelPerCharacter}
         ></doc-breadcrumbs>

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -66,7 +66,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private availableLanguages: Array<DocLanguage> = [];
-    private availableVersions: Array<DocVersion> = [];
+    @track private availableVersions: Array<DocVersion> = [];
     private contentProvider?: FetchContent;
     private docContent = "";
     private language?: DocLanguage | null = null;
@@ -578,9 +578,7 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (
-            this.template.querySelector("doc-content-layout") as any
-        )?.setSidebarInputValue(searchParam);
+        (this.refs.docContentLayout as any)?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
@@ -770,4 +768,8 @@ export default class DocXmlContent extends LightningElementWithState<{
             headTag[0].appendChild(robotsMeta);
         }
     }
+
+    private get showVersionPicker(): boolean {
+        return !this.disableVersion;
+    }
 }