@salesforcedevs/docs-components 1.3.197-code-overflow1 → 1.3.199-langpicker1-alpha

package/lwc.config.json

@@ -18,6 +18,7 @@
         "doc/overview",
         "doc/phase",
         "doc/xmlContent",
+        "doc/sidebarFooterNav",
         "docUtils/utils"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.197-code-overflow1",
+    "version": "1.3.199-langpicker1-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -16,6 +16,8 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
+        languages={languages}
+        language={language}
     >
         <doc-phase
             slot="doc-phase"

package/src/modules/doc/amfReference/amfReference.ts

@@ -4,6 +4,7 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
+import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -48,6 +49,8 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;

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

@@ -51,10 +51,4 @@
 .dx-callout-base_column {
     display: flex;
     flex-direction: row;
-    flex: 1;
-}
-
-.dx-callout-content {
-    flex: 1;
-    overflow: auto;
 }

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

@@ -7,6 +7,10 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
+                languages={languages}
+                language={language}
+                bail-href={bailHref}
+                bail-label={bailLabel}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -22,6 +26,10 @@
                 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>
             </dx-sidebar>

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -4,6 +4,7 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
+import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -36,6 +37,10 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get breadcrumbs() {

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

@@ -7,6 +7,8 @@ dx-logo {
 .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 {
@@ -16,16 +18,24 @@ dx-logo {
     );
 }
 
+.has-brand.has-scoped-nav-items {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
+    border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 header:not(.has-brand) > .header_l2 {
-    background: var(--dx-g-brand-current-color-background-2);
+    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 {
@@ -38,22 +48,8 @@ header:not(.has-brand) > .header_l2 {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-.header_lang-dropdown {
-    --button-primary-color: var(--dx-g-blue-vibrant-40);
-    --button-primary-color-hover: var(--dx-g-blue-vibrant-30);
-}
-
-.header_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-
-    border-bottom: 1px dashed var(--border-color);
-}
-
-.header_lang-dropdown > dx-button:hover {
-    --border-color: var(--button-primary-color-hover);
+.has-brand .header_l2_group-title {
+    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
 }
 
 @media (max-width: 768px) {
@@ -82,6 +78,10 @@ header:not(.has-brand) > .header_l2 {
         margin-right: var(--dx-g-spacing-sm);
     }
 
+    .has-brand .header_l2_group-title {
+        padding-bottom: var(--dx-g-spacing-smd);
+    }
+
     .header_l2_group-title {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
@@ -102,6 +102,10 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+        border-bottom: 1px solid var(--dx-g-gray-90);
+    }
+
+    header:not(.has-brand) > .header_l2 {
+        padding-bottom: 0;
     }
 }

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

@@ -14,28 +14,12 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="xlarge"
+                                size="large"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-6">
+                            <span class="subtitle dx-text-display-7">
                                 {subtitle}
                             </span>
                         </a>
-                        <dx-dropdown
-                            if:true={showMobileLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value={language}
-                            value-path={langValuePath}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="large"
-                                icon-symbol="world"
-                            ></dx-button>
-                        </dx-dropdown>
                     </div>
                     <div
                         if:true={hasScopedNavItems}
@@ -52,41 +36,6 @@
                             ></dx-header-nav>
                         </div>
                     </div>
-                    <div
-                        if:false={smallMobile}
-                        class="header_l2_group header_l2_group-right-ctas"
-                    >
-                        <dx-dropdown
-                            if:true={hasLanguages}
-                            class="header_lang-dropdown"
-                            options={languages}
-                            small
-                            value-path={langValuePath}
-                            value={language}
-                            onchange={onLangChange}
-                        >
-                            <dx-button
-                                aria-label="Select Language"
-                                variant="inline"
-                                icon-size="small"
-                                icon-symbol="world"
-                            >
-                                {languageLabel}
-                            </dx-button>
-                        </dx-dropdown>
-                        <dx-button
-                            if:true={hasBailLink}
-                            aria-label={bailLabel}
-                            class="header_bail-link"
-                            href={bailHref}
-                            onclick={handleBailClick}
-                            variant="tertiary"
-                            icon-symbol="new_window"
-                            target="_blank"
-                        >
-                            {bailLabel}
-                        </dx-button>
-                    </div>
                 </div>
             </header>
         </dx-brand-theme-provider>

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

@@ -1,10 +1,8 @@
 import { api } from "lwc";
 import cx from "classnames";
-import type { OptionWithNested, OptionWithLink } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
 import { HeaderBase } from "dxBaseElements/headerBase";
 import { toJson } from "dxUtils/normalizers";
-import get from "lodash.get";
-import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
@@ -23,28 +21,6 @@ export default class Header extends HeaderBase {
         this._scopedNavItems = toJson(value);
     }
 
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get language() {
-        return this._language;
-    }
-
-    set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
-    }
-
-    private _language: string | null = null;
-    private _languages!: OptionWithLink[];
     private _scopedNavItems!: OptionWithNested[];
     private smallMobile = false;
     private smallMobileMatchMedia!: MediaQueryList;
@@ -60,24 +36,6 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length);
-    }
-
-    private get showMobileLanguages(): boolean {
-        return this.smallMobile && this.hasLanguages;
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
-        );
-    }
-
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -129,34 +87,4 @@ export default class Header extends HeaderBase {
             this.hasScopedNavItems && "has-scoped-nav-items"
         );
     }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
-    }
-
-    private handleBailClick(event: Event) {
-        const payload = {
-            click_text: "pdf",
-            click_url: this.bailHref,
-            element_title: "pdf",
-            element_type: "link",
-            content_category: "download"
-        };
-        track(event.target!, "custEv_pdfDownload", {
-            ...payload,
-            file_name: this.getFilename(this.bailHref!),
-            file_extension: "pdf"
-        });
-
-        track(event.target!, "custEv_linkClick", {
-            ...payload
-        });
-    }
-
-    private getFilename = function (path: string) {
-        return path.substring(path.lastIndexOf("/") + 1);
-    };
 }

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.css

@@ -0,0 +1,33 @@
+@import "dxHelpers/reset";
+
+:host {
+    --button-primary-color: var(--dx-g-blue-vibrant-50);
+    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+}
+
+.footer-display {
+    display: flex;
+}
+
+.footer_lang-dropdown {
+    padding: var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+}
+
+.footer_lang-dropdown > dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-slot-empty-width: min-content;
+    --border-color: var(--button-primary-color);
+}
+
+.footer_lang-dropdown:hover,
+.footer_lang-dropdown:active,
+.footer_lang-dropdown:focus,
+.header_bail-link:hover {
+    background-color: var(--button-primary-color-hover);
+
+    --border-color: var(--button-primary-color-hover);
+}
+
+.header_bail-link {
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+}

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.html

@@ -0,0 +1,56 @@
+<template>
+    <div if:false={mobile} class="footer-display">
+        <dx-button
+            if:true={hasBailLink}
+            aria-label={bailLabel}
+            class="header_bail-link"
+            href={bailHref}
+            onclick={handleBailClick}
+            variant="tertiary"
+            icon-symbol="new_window"
+            target="_blank"
+        >
+            {bailLabel}
+        </dx-button>
+        <dx-dropdown
+            if:true={hasLanguages}
+            class="footer_lang-dropdown"
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+            variant="docoption"
+        >
+            <dx-button
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="large"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+    <div if:true={mobile} class="footer-display">
+        <dx-dropdown
+            if:true={hasLanguages}
+            class="footer_lang-dropdown"
+            options={languages}
+            small
+            value-path={langValuePath}
+            value={language}
+            onchange={onLangChange}
+            variant="docoption"
+        >
+            <dx-button
+                aria-label="Select Language"
+                variant="inline"
+                icon-size="small"
+                icon-symbol="world"
+            >
+                {languageLabel}
+            </dx-button>
+        </dx-dropdown>
+    </div>
+</template>

package/src/modules/doc/sidebarFooterNav/sidebarFooterNav.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import get from "lodash.get";
+import { track } from "dxUtils/analytics";
+
+const MOBILE_SIZE_MATCH = "768px";
+
+export default class ContentLayout extends LightningElement {
+    @api langValuePath: string = "id";
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get language() {
+        return this._language;
+    }
+
+    set language(value) {
+        if (this._language !== value) {
+            this._language = value;
+        }
+    }
+
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
+    private mobile: boolean = false;
+    private matchMedia!: MediaQueryList;
+
+    private get hasLanguages(): boolean {
+        return !!(this.languages && this.languages.length > 1);
+    }
+
+    private get languageLabel(): string {
+        return (
+            (this.language &&
+                this.languages.find(
+                    (lang) => get(lang, this.langValuePath) === this.language
+                )?.label) ||
+            this.languages[0].label
+        );
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(
+            new CustomEvent("langchange", {
+                detail,
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
+
+    private getFilename = function (path: string) {
+        return path.substring(path.lastIndexOf("/") + 1);
+    };
+
+    private handleBailClick(event: Event) {
+        const payload = {
+            click_text: "pdf",
+            click_url: this.bailHref,
+            element_title: "pdf",
+            element_type: "link",
+            content_category: "download"
+        };
+        track(event.target!, "custEv_pdfDownload", {
+            ...payload,
+            file_name: this.getFilename(this.bailHref!),
+            file_extension: "pdf"
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            ...payload
+        });
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_SIZE_MATCH})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+    };
+}

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

@@ -59,14 +59,14 @@ export type ApiDocLanguage = {
     url: string;
 };
 
-export interface Header extends Element {
+export type SiderbarFooter = {
     subtitle: string;
     bailHref: string;
     bailLabel: string;
     languages: Array<DocLanguage>;
     language?: string;
     headerHref: string;
-}
+};
 
 export type ApiNavItem = {
     children: Array<ApiNavItem>;

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

@@ -11,6 +11,11 @@
         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}
     >
         <doc-phase
             slot="version-banner"

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

@@ -7,7 +7,7 @@ import {
     DocLanguage,
     DocVersion,
     TreeNode,
-    Header,
+    SiderbarFooter,
     HistoryState,
     PageReference,
     TocMap
@@ -16,7 +16,6 @@ import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
 import { logCoveoPageView, oldVersionDocInfo } from "docUtils/utils";
 import { Breadcrumb, DocPhaseInfo, Language } from "typings/custom";
-import { track as trackGTM } from "dxUtils/analytics";
 
 // TODO: Imitating from actual implementation as doc-content use it like this. We should refactor it later.
 const handleContentError = (error: any): void => console.log(error);
@@ -26,6 +25,14 @@ const PIXEL_PER_CHARACTER_MAP: { [key: string]: number } = {
     "ja-jp": 12.5
 };
 
+const defaultSidebarFooter: SiderbarFooter = {
+    subtitle: "",
+    bailHref: "",
+    bailLabel: "",
+    languages: [],
+    language: "",
+    headerHref: ""
+};
 export default class DocXmlContent extends LightningElementWithState<{
     isFetchingDocument: boolean;
     isFetchingContent: boolean;
@@ -70,9 +77,9 @@ export default class DocXmlContent extends LightningElementWithState<{
     private version: DocVersion | null = null;
     private docTitle = "";
     private _pathName = "";
-    private _pageHeader?: Header;
     private listenerAttached = false;
     private _enableCoveo?: boolean = false;
+    private sidebarFooterContent: SiderbarFooter = { ...defaultSidebarFooter };
 
     private searchSyncer = new SearchSyncer({
         callbacks: {
@@ -214,13 +221,6 @@ export default class DocXmlContent extends LightningElementWithState<{
     disconnectedCallback(): void {
         window.removeEventListener("popstate", this.handlePopState);
         this.searchSyncer.dispose();
-        if (this.listenerAttached) {
-            this.pageHeader.removeEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = false;
-        }
     }
 
     private get languageId(): string | undefined {
@@ -268,14 +268,6 @@ export default class DocXmlContent extends LightningElementWithState<{
         return config;
     }
 
-    private get pageHeader(): Header {
-        if (!this._pageHeader) {
-            this._pageHeader = document.querySelector("doc-header")!;
-        }
-
-        return this._pageHeader;
-    }
-
     private get sidebarValue(): string {
         if (this.pageReference?.contentDocumentId) {
             const hashedUri = `${
@@ -371,17 +363,6 @@ export default class DocXmlContent extends LightningElementWithState<{
             ({ id }) => id === event.detail
         );
         this.pageReference.docId = this.language!.url;
-
-        trackGTM(event.target!, "custEv_ctaLinkClick", {
-            click_text: event.detail,
-            element_title: "language selector",
-            click_url: `${window.location.origin}${this.pageReferenceToString(
-                this.pageReference
-            )}`,
-            element_type: "link",
-            content_category: "cta"
-        });
-
         this.updateUrl();
         this.fetchDocument();
     };
@@ -469,7 +450,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.availableVersions = data.availableVersions;
         this.pdfUrl = data.pdfUrl;
 
-        this.updateHeader();
+        this.updateSidebarFooter();
 
         this.buildBreadcrumbs();
 
@@ -533,34 +514,22 @@ export default class DocXmlContent extends LightningElementWithState<{
         });
     }
 
-    updateHeader(): void {
-        if (!this.pageHeader) {
-            return;
-        }
-
+    updateSidebarFooter(): void {
         if (this.docTitle) {
-            this.pageHeader.subtitle = this.docTitle;
+            this.sidebarFooterContent.subtitle = this.docTitle;
         }
 
         if (this.pdfUrl) {
-            this.pageHeader.bailHref = this.pdfUrl;
-            this.pageHeader.bailLabel = "PDF";
-        }
-
-        if (!this.listenerAttached) {
-            this.pageHeader.addEventListener(
-                "langchange",
-                this.handleLanguageChange
-            );
-            this.listenerAttached = true;
+            this.sidebarFooterContent.bailHref = this.pdfUrl;
+            this.sidebarFooterContent.bailLabel = "PDF";
         }
 
-        this.pageHeader.languages = this.availableLanguages;
-        this.pageHeader.language = this.language?.id;
+        this.sidebarFooterContent.languages = this.availableLanguages;
+        this.sidebarFooterContent.language = this.language?.id;
 
         if (this.pageReference) {
             const { docId, deliverable, page } = this.pageReference;
-            this.pageHeader.headerHref = `/${page}/${docId}/${deliverable}/`;
+            this.sidebarFooterContent.headerHref = `/${page}/${docId}/${deliverable}/`;
         }
     }