@salesforcedevs/dx-components 1.3.202-alpha → 1.3.202-langpicker1-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.202-alpha",
+    "version": "1.3.202-langpicker1-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -38,7 +38,7 @@
 }
 
 .option:active {
-    background: var(--dx-g-blue-vibrant-95) !important;
+    background: var(--dx-g-cloud-blue-vibrant-95) !important;
 }
 
 .option:not(.option-active):hover {
@@ -46,7 +46,7 @@
 }
 
 .option-active {
-    background: var(--dx-g-blue-vibrant-95);
+    background: var(--dx-g-cloud-blue-vibrant-95);
 }
 
 .option_details {
@@ -79,6 +79,21 @@
     -webkit-box-orient: vertical;
 }
 
+.option-docoption {
+    align-items: center;
+    flex-direction: row;
+}
+
+.option-docoption .option_label {
+    color: var(--dx-g-gray-10);
+    font-weight: normal !important;
+}
+
+.option-docoption.option-active .option_label {
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
+    font-weight: var(--dx-g-font-bold);
+}
+
 .option_label > *:last-child {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -79,6 +79,13 @@
                 title="No Results"
                 size="small"
             ></dx-empty-state>
+            <div if:true={hasSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></doc-sidebar-footer-nav>
+            </div>
         </div>
         <div class="sidebar-content sidebar-content-tree">
             <dx-tree
@@ -92,5 +99,17 @@
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>
+
+        <template if:true={hasSidebarFooter}>
+            <div class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></doc-sidebar-footer-nav>
+            </div>
+        </template>
     </div>
 </template>

package/src/modules/dx/sidebar/sidebar.ts

@@ -5,6 +5,7 @@ import { getSidebarSearchParams } from "dxUtils/coveo";
 import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
+import type { OptionWithLink } from "typings/custom";
 
 const MOBILE_SIZE_MATCH = "768px";
 
@@ -14,6 +15,11 @@ export default class Sidebar extends SidebarBase {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api header: string = "";
+    @api langValuePath: string = "id";
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get value() {
@@ -256,4 +262,17 @@ export default class Sidebar extends SidebarBase {
             this.template.querySelector("dx-sidebar-search") as any
         )?.requestOpenDropdown(false);
     }
+
+    private get hasSidebarFooter(): boolean {
+        if (this.mobile) {
+            return (
+                !!(this.languages && toJson(this.languages).length > 1) &&
+                this.expanded
+            );
+        }
+        return !!(
+            (this.languages && toJson(this.languages).length > 1) ||
+            Boolean(this.bailHref)
+        );
+    }
 }

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

@@ -67,6 +67,25 @@
                 title="No Results"
                 if:false={anyResultMatch}
             ></dx-empty-state>
+            <div if:true={hasSidebarFooter} class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></doc-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template if:true={hasSidebarFooter}>
+            <div class="footer-nav">
+                <doc-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></doc-sidebar-footer-nav>
+            </div>
         </template>
     </div>
 </template>

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

@@ -4,12 +4,18 @@ 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";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
 
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
+    @api langValuePath: string = "id";
+    @api languages!: OptionWithLink[];
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
 
     @api
     get value() {
@@ -190,4 +196,14 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private get hasSidebarFooter(): boolean {
+        if (this.mobile) {
+            return !!(this.languages && toJson(this.languages).length > 1);
+        }
+        return !!(
+            (this.languages && toJson(this.languages).length > 1) ||
+            Boolean(this.bailHref)
+        );
+    }
 }

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

@@ -13,7 +13,12 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
-dx-tree:not(:last-child) {
+dx-tree {
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+dx-tree:last-child {
+    border-bottom: 1px solid var(--dx-g-gray-90);
     margin-bottom: var(--dx-g-spacing-sm);
 }
 
@@ -53,7 +58,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,10 +71,10 @@ 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
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
     position: relative;
 }
 
@@ -127,9 +132,30 @@ dx-tree:not(:last-child) {
     white-space: nowrap;
 }
 
+.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);
+    height: var(--dx-g-spacing-xl);
+}
+
 @media screen and (max-width: 768px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);
         padding-right: var(--dx-g-spacing-md);
     }
+
+    .header_l2_group-title .header_lang-dropdown {
+        margin-left: auto;
+    }
+
+    .header_lang-dropdown > dx-button {
+        padding: var(--dx-g-spacing-2xs) 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);
 }