@salesforcedevs/docs-components 0.0.1 → 0.0.2-edit

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

@@ -0,0 +1,64 @@
+@import "dxHelpers/reset";
+
+/* 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);
+}
+
+.version-picker-container {
+    padding: 8px var(--dx-g-spacing-lg) 8px
+        var(--dx-g-global-header-padding-horizontal);
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-bottom: 1px solid var(--dx-g-gray-90);
+}
+
+.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.
+ */
+dx-button::part(content) {
+    width: inherit;
+    overflow: hidden;
+}
+
+.selected-version {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.selected-version-label {
+    flex: 1;
+    overflow: hidden;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+dx-type-badge.latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-green-vibrant-95);
+
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-type-badge.not-latest-badge {
+    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-type-badge-background: var(--dx-g-red-vibrant-95);
+
+    margin-left: var(--dx-g-spacing-sm);
+}

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

@@ -0,0 +1,38 @@
+<template>
+    <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"
+                icon-size="medium"
+            >
+                <div class="selected-version">
+                    <p class="selected-version-label">
+                        {selectedVersion.label}
+                    </p>
+                    <template lwc:if={showLatestTag}>
+                        <dx-type-badge
+                            class="latest-badge"
+                            lwc:if={latestVersion}
+                            value="Latest"
+                            size="small"
+                        ></dx-type-badge>
+                        <dx-type-badge
+                            class="not-latest-badge"
+                            lwc:else
+                            value="Not Latest"
+                            size="small"
+                        ></dx-type-badge>
+                    </template>
+                </div>
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

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

@@ -0,0 +1,65 @@
+import { LightningElement, api, track } from "lwc";
+
+import { AnalyticsPayload, OptionWithNested } from "typings/custom";
+
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+
+export default class VersionPicker extends LightningElement {
+    @api analyticsEvent?: string;
+    @api analyticsPayload?: AnalyticsPayload;
+
+    @track private _versions!: OptionWithNested[];
+    private _selectedVersion?: OptionWithNested;
+    private _latestVersion: boolean = false;
+    private _hideBadge: boolean = false;
+
+    @api
+    get versions() {
+        return this._versions;
+    }
+
+    set versions(value: OptionWithNested[]) {
+        this._versions = toJson(value);
+    }
+
+    @api
+    get selectedVersion(): OptionWithNested | undefined {
+        return this._selectedVersion || this.versions[0];
+    }
+
+    set selectedVersion(value: OptionWithNested) {
+        if (value) {
+            this._selectedVersion = toJson(value);
+        }
+    }
+
+    @api
+    get latestVersion() {
+        return this._latestVersion;
+    }
+
+    set latestVersion(value) {
+        this._latestVersion = normalizeBoolean(value);
+    }
+
+    @api
+    get hideBadge() {
+        return this._hideBadge;
+    }
+
+    set hideBadge(value) {
+        this._hideBadge = normalizeBoolean(value);
+    }
+
+    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/types.ts

@@ -35,6 +35,9 @@ type DropdownOption = {
 export type DocVersion = DropdownOption & {
     releaseVersion: string;
     url: string;
+    link?: {
+        href: string;
+    };
 };
 
 export type DocLanguage = DropdownOption & {
@@ -58,12 +61,15 @@ export type ApiDocLanguage = {
 
 export interface Header extends Element {
     subtitle: string;
+    headerHref: string;
+}
+
+export type SiderbarFooter = {
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
-    language: string;
-    headerHref: string;
-}
+    language?: string;
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

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

@@ -87,7 +87,9 @@ export class FetchContent {
         return json;
     }
 
-    private normalizeToc(apiToc: Array<ApiNavItem>): {
+    private normalizeToc(
+        apiToc: Array<ApiNavItem>
+    ): {
         tocMap: { [key: string]: TreeNode };
         normalizedToc: Array<TreeNode>;
     } {

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

@@ -3,11 +3,16 @@
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
+doc-content-layout {
+    --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 {
     --dx-c-popover-z-index: 5;
 
     display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 dx-dropdown {
@@ -26,7 +31,24 @@ dx-dropdown > dx-button:hover {
     --border-color: var(--button-primary-color-hover);
 }
 
-.document-pickers {
-    margin-left: auto;
-    margin-right: var(--dx-g-spacing-sm);
+doc-phase {
+    --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,32 +1,45 @@
 <template>
     <doc-content-layout
-        if:true={loaded}
+        lwc:if={loaded}
+        lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
-        coveo-search-hub="Developer_Docs_SS"
+        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}
+        bail-label={sidebarFooterContent.bailLabel}
+        show-footer={enableFooter}
     >
-        <div slot="sidebar-header" class="document-pickers">
-            <dx-dropdown
+        <doc-phase
+            slot="version-banner"
+            lwc:if={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
+        <div lwc:if={showVersionPicker} slot="sidebar-header">
+            <doc-version-picker
                 data-type="version"
-                suppress-gtm-nav-headings
-                analytics-event={analyticsEvent}
-                options={versionOptions}
-                value={version.id}
-                width="290px"
-            >
-                <dx-button variant="inline" disabled={disableVersion}>
-                    {version.releaseVersion}
-                </dx-button>
-            </dx-dropdown>
+                analytics-event="custEv_ctaLinkClick"
+                analytics-payload={ANALYTICS_PAYLOAD}
+                versions={versionOptions}
+                selected-version={version}
+                latest-version={latestVersion}
+                hide-badge={previewVersion}
+            ></doc-version-picker>
         </div>
         <doc-breadcrumbs
-            if:true={showBreadcrumbs}
+            lwc:if={showBreadcrumbs}
             breadcrumbs={breadcrumbs}
             pixel-per-character={breadcrumbPixelPerCharacter}
         ></doc-breadcrumbs>
@@ -34,7 +47,6 @@
             docs-data={docContent}
             page-reference={pageReference}
             onnavclick={handleNavClick}
-            style={docContentStyle}
         ></doc-content>
     </doc-content-layout>
 </template>