@salesforcedevs/dx-components 1.30.6 → 1.31.1-alpha-gh

package/lwc.config.json

@@ -59,6 +59,7 @@
         "dx/footerMfe",
         "dx/formattedDateTime",
         "dx/formattedRichText",
+        "dx/globalHeader",
         "dx/grid",
         "dx/groupText",
         "dx/headerMobileNavMenu",

package/package.json

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

package/src/modules/dx/globalHeader/globalHeader.html

@@ -0,0 +1,5 @@
+<template lwc:render-mode="light">
+    <div lwc:ref="globalNavContainer" part="container">
+        <dx-skip-nav-link></dx-skip-nav-link>
+    </div>
+</template>

package/src/modules/dx/globalHeader/globalHeader.ts

@@ -0,0 +1,84 @@
+import kebabCase from "lodash.kebabcase";
+import { LightningElement, api } from "lwc";
+
+const defaultDomain = "https://developer.salesforce.com";
+const defaultLocale = "en-us";
+const defaultHeaderSettingsBasePath = "/c/public/header-settings";
+const headerSettingsJsonKeys = [
+    "regionSelectorOverride",
+    "contactLinksOverride"
+];
+
+export default class DevExNavigation extends LightningElement {
+    static renderMode = "light";
+
+    @api locale: string = defaultLocale;
+    @api path: string = defaultHeaderSettingsBasePath;
+    @api domain: string = defaultDomain;
+
+    async connectedCallback(): Promise<void> {
+        try {
+            const headerSettingsResponse = await fetch(
+                `${this.domain}${this.path}/${this.locale}.json`,
+                {
+                    headers: {
+                        "Content-Type": "application/json"
+                    }
+                }
+            );
+            if (headerSettingsResponse.ok) {
+                this.createFullNav(await headerSettingsResponse.json());
+            } else {
+                this.createBarebonesNav();
+            }
+        } catch (ex) {
+            console.error(`Navigation error: ${ex}`);
+            this.createBarebonesNav();
+        }
+    }
+
+    private createGlobalNav(globalNavSettings: any): HTMLElement {
+        const hgfNav = document.createElement("hgf-c360nav");
+
+        Object.entries(globalNavSettings).forEach(([key, value]) => {
+            if (headerSettingsJsonKeys.includes(key)) {
+                value = JSON.stringify(value);
+            }
+            hgfNav.setAttribute(kebabCase(key), value as string);
+        });
+
+        return hgfNav;
+    }
+
+    private createContextNav(contextNavData: any): HTMLElement {
+        const hgfNavContext = document.createElement("hgf-c360contextnav");
+        hgfNavContext.setAttribute("data", JSON.stringify(contextNavData));
+        return hgfNavContext;
+    }
+
+    private createFullNav(headerData: any): void {
+        const hgfNav = this.createGlobalNav(headerData.headerSettings);
+        const hgfNavContext = this.createContextNav(headerData.navItems);
+        const containerEl = this.refs.globalNavContainer as Element;
+        containerEl.appendChild(hgfNav);
+        containerEl.appendChild(hgfNavContext);
+    }
+
+    private createBarebonesNav(): void {
+        const hgfNav = this.createGlobalNav({
+            origin: "",
+            contextNavEnabled: "true"
+        });
+        const hgfNavContext = this.createContextNav({
+            variation: "static",
+            propertyTitle: {
+                label: "Developers",
+                url: "/"
+            },
+            menuGroup: {}
+        });
+        const containerEl = this.refs.globalNavContainer as Element;
+        containerEl.appendChild(hgfNav);
+        containerEl.appendChild(hgfNavContext);
+    }
+}