@salesforcedevs/docs-components 1.3.209-lang3-alpha → 1.3.209-lang5-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.209-lang3-alpha",
+    "version": "1.3.209-lang5-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -3,6 +3,10 @@
 :host {
     --button-primary-color: var(--dx-g-blue-vibrant-50);
     --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
+    --popover-container-open-transform: translateX(-4px) translateY(-8px);
+    --popover-transition: none;
+    --dx-c-dropdown-option-font-weight: normal;
+    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
 }
 
 .footer-display {
@@ -10,6 +14,9 @@
 }
 
 .footer_lang-dropdown {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --border-color: var(--button-primary-color);
+
     display: flex;
     padding: 0 var(--dx-g-spacing-md);
     margin-left: var(--dx-g-spacing-sm);
@@ -18,10 +25,10 @@
     align-items: center;
 }
 
-.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[aria-expanded="true"] {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --border-color: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .footer_lang-dropdown:hover,
@@ -35,6 +42,7 @@
 
 .pdf_bail-link {
     --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
+    --dx-c-button-priamry-color-hover: var(--dx-g-cloud-blue-vibrant-95);
 
     padding: 0 var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-xs);

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

@@ -15,16 +15,14 @@
         </dx-button>
         <dx-dropdown
             if:true={hasLanguages}
-            class="footer_lang-dropdown"
             options={languages}
             small
             value-path={langValuePath}
             value={language}
             onchange={onLangChange}
-            variant="docoption"
-            lang-picker="true"
         >
             <dx-button
+                class="footer_lang-dropdown"
                 aria-label="Select Language"
                 variant="inline"
                 icon-size="medium"
@@ -37,16 +35,14 @@
     <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"
-            lang-picker="true"
         >
             <dx-button
+                class="footer_lang-dropdown"
                 aria-label="Select Language"
                 variant="inline"
                 icon-size="small"

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

@@ -27,9 +27,7 @@ export default class SidebarFooterNav extends LightningElement {
     }
 
     set language(value) {
-        if (this._language !== value) {
-            this._language = value;
-        }
+        this._language = value;
     }
 
     private _languages!: OptionWithLink[];
@@ -38,17 +36,16 @@ export default class SidebarFooterNav extends LightningElement {
     private matchMedia!: MediaQueryList;
 
     private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length > 1);
+        return 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
-        );
+        const matchingLanguageData = this.language
+            ? this.languages.find(
+                  (lang) => get(lang, this.langValuePath) === this.language
+              )
+            : null;
+        return matchingLanguageData?.label || this.languages[0].label;
     }
 
     get hasBailLink(): boolean {

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

@@ -17,6 +17,7 @@ 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);
@@ -371,6 +372,17 @@ 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();
     };