@salesforcedevs/dx-components 1.3.194-alpha5 → 1.3.194-langpicker2-alpha

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.194-alpha5",
+    "version": "1.3.194-langpicker2-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": ">=16.x"
+        "node": "16.x"
     },
     "publishConfig": {
         "access": "public"
@@ -12,7 +12,7 @@
     "dependencies": {
         "@coveo/headless": "2.16.5",
         "@floating-ui/dom": "1.5.1",
-        "@sfdocs-internal/wires": "0.6.90-alpha6",
+        "@sfdocs-internal/wires": "0.6.89",
         "@types/throttle-debounce": "^5.0.0",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
@@ -40,8 +40,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    },
-    "volta": {
-        "node": "16.19.1"
     }
 }

package/src/modules/dx/footer/links.ts

@@ -21,7 +21,7 @@ export const generalLinksRaw: OptionWithRequiredNested[] = [
                 id: "Tableau"
             },
             {
-                link: { href: "https://developer.commercecloud.com/s/" },
+                link: { href: "/developer-centers/commerce-cloud" },
                 label: "Commerce Cloud",
                 id: "Commerce Cloud"
             },

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -24,3 +24,16 @@ dx-empty-state {
 .header-toggle-icon dx-button[aria-expanded="true"]:hover {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
+
+.footer-nav {
+    display: flex;
+    padding: 0 var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xl);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: inherit;
+    background: white;
+    border-top: 1px solid var(--dx-g-gray-90);
+    border-right: 1px solid var(--dx-g-gray-90);
+    line-height: var(--dx-g-spacing-xl);
+}

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -68,5 +68,26 @@
                 if:false={anyResultMatch}
             ></dx-empty-state>
         </template>
+
+        <div if:false={mobile} class="footer-nav">
+            <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>
+        </div>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -4,12 +4,15 @@ import { api } from "lwc";
 import { TreeNode } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import type { OptionWithLink } from "typings/custom";
+import get from "lodash.get";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
+    @api langValuePath: string = "id";
 
     @api
     get value() {
@@ -37,6 +40,26 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
+    @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 expanded: boolean = true;
     private _searchTimeout?: number;
     private _value?: string = undefined;
@@ -48,6 +71,9 @@ export default class Sidebar extends SidebarBase {
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
 
+    private _languages!: OptionWithLink[];
+    private _language: string | null = null;
+
     private get anyResultMatch() {
         return this.filteredTrees.length > 0;
     }
@@ -190,4 +216,25 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private get hasLanguages(): boolean {
+        return !!(this.languages && this.languages.length);
+    }
+
+    private get languageLabel(): string {
+        return (
+            (this.language &&
+                this.languages.find(
+                    (lang) => get(lang, this.langValuePath) === this.language
+                )?.label) ||
+            this.languages[0].label
+        );
+    }
+
+    private onLangChange(event: CustomEvent<string>): void {
+        const { detail } = event;
+        this._language = detail;
+
+        this.dispatchEvent(new CustomEvent("langchange", { detail }));
+    }
 }

package/src/modules/dx/tab/tab.css

@@ -11,22 +11,13 @@ a {
     );
 
     position: relative;
-    display: flex;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
-    color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
+    height: calc(var(--dx-g-spacing-3xl) - 4px);
 }
 
 .nav-list-item_default {
-    border: 0;
-    border-radius: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    padding: 0 var(--horizontal-spacing);
+    padding: calc(var(--dx-g-spacing-sm) + 2px) var(--dx-g-spacing-md);
+    justify-content: center;
+    display: flex;
 }
 
 .nav-list-item_small {
@@ -46,8 +37,6 @@ button.nav-list-item_small > dx-icon {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.nav-list-item_default:hover,
-.nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
     background: var(
         --dx-g-brand-current-button-color-background-inactive,
@@ -76,11 +65,10 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    background: var(
-        --dx-g-brand-current-button-color-background-active,
-        var(--dx-g-brand-default-button-color-background-active)
-    );
-    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
+    color: var(--dx-g-blue-vibrant-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
 }
 
 @media (max-width: 1160px) {
@@ -100,3 +88,10 @@ button.nav-list-item:active > dx-icon,
         );
     }
 }
+
+@media (max-width: 768px) {
+    .nav-list-item {
+        height: var(--dx-g-spacing-3xl);
+        display: flex;
+    }
+}

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -58,7 +58,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    background: var(--dx-g-brand-current-color-background);
+    background: white;
     padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
@@ -70,6 +70,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
+    padding-right: var(--dx-g-spacing-xl);
 }
 
 .header_l2_group-title

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -17,6 +17,14 @@ dx-tree:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
+dx-tree {
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+dx-tree:last-child {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+}
+
 .header {
     box-sizing: content-box;
     display: flex;
@@ -53,7 +61,7 @@ dx-tree:not(:last-child) {
 }
 
 .container {
-    background-color: var(--dx-g-gray-95);
+    background-color: white;
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
@@ -66,6 +74,7 @@ dx-tree:not(:last-child) {
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
+    border-right: 1px solid var(--dx-g-gray-90);
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
     padding: var(--dx-c-sidebar-vertical-padding) 0

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -8,14 +8,14 @@
 
 .sidebar-item-selected {
     background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
     border-radius: 0;
 }
 
 .sidebar-item {
-    padding: 6px var(--dx-g-spacing-md);
+    padding: 6px var(--dx-g-spacing-xl);
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {
-    background-color: var(--dx-g-gray-90);
+    color: var(--dx-g-blue-vibrant-50);
 }