@salesforcedevs/dx-components 0.26.1-alpha.10 → 0.26.1-alpha.14

package/src/modules/utils/headerBase/headerBase.ts

@@ -0,0 +1,204 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Brand, Option } from "typings/custom";
+import { toJson } from "utils/normalizers";
+import { track } from "dx/instrumentation";
+
+const VALID_BRANDS = [
+    "analytics",
+    "commerce",
+    "employees",
+    "industries",
+    "integration",
+    "learning",
+    "marketing",
+    "partners",
+    "platform",
+    "sales",
+    "service",
+    "success"
+];
+
+export const ANALYTICS_INFO = {
+    clickText: "Sign Up",
+    itemTitle: "Sign Up Header Button",
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
+
+export abstract class HeaderBase extends LightningElement {
+    @api bailHref?: string | null = null;
+    @api bailLabel?: string | null = null;
+    @api brand: Brand | null = null;
+    @api coveoOrganizationId: string | null = null;
+    @api coveoPublicAccessToken: string | null = null;
+    @api coveoSearchHub: string | null = null;
+    @api coveoSearchPipeline: string | null = null;
+    @api signupLink?: string | null = null;
+    @api href = null;
+    @api subtitle!: string;
+    @api title: string = "Salesforce";
+    @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    @api
+    get navItems() {
+        return this._navItems;
+    }
+
+    set navItems(value) {
+        this._navItems = toJson(value);
+    }
+
+    @api
+    get versions() {
+        return this._versions;
+    }
+    set versions(value) {
+        this._versions = toJson(value);
+    }
+
+    private _navItems!: Option[];
+    private _versions!: Option[];
+    private matchMedia!: MediaQueryList;
+    protected mobile: boolean = false;
+    private mobileNavMenuValue: string | null = null;
+    private showMobileNavMenu: boolean = false;
+    private showNavScrollShadow: boolean = false;
+    protected isSearchOpen: boolean = false;
+
+    get url() {
+        return this.href ? new URL(this.href!) : window.location;
+    }
+
+    get hasBailLink(): boolean {
+        return !!(this.bailHref && this.bailLabel);
+    }
+
+    get hasSearch() {
+        return (
+            this.coveoOrganizationId &&
+            this.coveoPublicAccessToken &&
+            this.coveoSearchHub &&
+            this.coveoSearchPipeline
+        );
+    }
+
+    get pathname() {
+        return this.url.pathname;
+    }
+
+    get className() {
+        return cx(
+            this.hasNavItems && "has-nav-items",
+            this.showMobileNavMenu && "state-show-mobile-nav",
+            this.showNavScrollShadow &&
+                !this.showMobileNavMenu &&
+                "has-navscrollshadow",
+            this.additionalClasses()
+        );
+    }
+
+    get versionLabel() {
+        const selectedVersion = (this.versions || []).find(
+            (v) => v.id === this.version
+        );
+        return selectedVersion ? selectedVersion.label : "";
+    }
+
+    get mobileMenuIconSymbol() {
+        return this.showMobileNavMenu ? "close" : "rows";
+    }
+
+    get isValidBrand() {
+        return this.brand && VALID_BRANDS.includes(this.brand);
+    }
+
+    get hasNavItems(): boolean {
+        return this.navItems && this.navItems.length > 0;
+    }
+
+    connectedCallback() {
+        this.matchMedia = window.matchMedia(
+            `(max-width: ${this.mobileBreakpoint()})`
+        );
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+        this.hashLinkScroll();
+    }
+
+    disconnectedCallback() {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    // Temporary solution to restore native anchor scrolling
+    private hashLinkScroll() {
+        const hash = window.location.hash;
+
+        if (hash !== "") {
+            // Push onto callback queue so it runs after the DOM is updated
+            setTimeout(() => {
+                const id = hash.replace("#", "");
+                const element = document.getElementById(id);
+                if (element && element.scrollIntoView) {
+                    element.scrollIntoView();
+                }
+            }, 0);
+        }
+    }
+
+    private handleStateChange(event: CustomEvent<boolean>) {
+        event.stopPropagation();
+        this.isSearchOpen = event.detail;
+    }
+
+    onVersionChange(e: CustomEvent) {
+        this.dispatchEvent(
+            new CustomEvent("versionchange", {
+                detail: e.detail
+            })
+        );
+    }
+
+    onRequestOpenNavMenu(e: { detail: string }) {
+        this.mobileNavMenuValue = e.detail;
+        this.showMobileNavMenu = true;
+    }
+    private onMobileNavMenuChange(e: { detail: string }) {
+        this.mobileNavMenuValue = e.detail;
+    }
+    private toggleMobileNavMenu() {
+        this.showMobileNavMenu = !this.showMobileNavMenu;
+    }
+    private closeMobileNavMenu() {
+        this.showMobileNavMenu = false;
+    }
+
+    private onNavScroll(e: Event) {
+        this.showNavScrollShadow =
+            (<HTMLElement>e.currentTarget).scrollLeft > 4;
+    }
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (!e.matches) {
+            this.mobile = false;
+            this.closeMobileNavMenu();
+        } else {
+            this.mobile = true;
+        }
+    };
+
+    private handleSignUpClick(e: PointerEvent) {
+        track(e.currentTarget!, "custEv_signupStart", {
+            ...ANALYTICS_INFO,
+            clickUrl: this.signupLink
+        });
+    }
+
+    protected additionalClasses(): string {
+        return "";
+    }
+
+    protected abstract mobileBreakpoint(): string;
+}

package/src/modules/utils/highlight/highlight.ts

@@ -1,4 +1,4 @@
-import { createSearchRegExp } from "utils-internal/regexps";
+import { createSearchRegExp } from "utils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 

package/src/modules/utils/options/options.ts

@@ -0,0 +1,39 @@
+import { Option } from "typings/custom";
+
+const deepmapper = (
+    _options: Option[],
+    _callback: (option: Option, lavel: number) => Option,
+    level: number = 0
+): Option[] => {
+    const _level = level + 1;
+    return _options?.map((option: Option) =>
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        option.options
+            ? {
+                  ...option,
+                  options: deepmapper(option.options, _callback, _level)
+              }
+            : _callback(option, _level)
+    );
+};
+
+export const deepmapOptions = (
+    options: Option[],
+    callback: (option: Option, index: number, level: number) => Option
+): Option[] => {
+    let index = 0;
+    return deepmapper(options, (option, level) => {
+        const newOption = callback(option, index, level);
+        index += 1;
+        return newOption;
+    });
+};
+
+export const getOptionsCount = (options: Option[]) => {
+    let count = 0;
+    deepmapper(options, (option) => {
+        count += 1;
+        return option;
+    });
+    return count;
+};

package/src/modules/utils/prismjs/prismjs.html

@@ -0,0 +1,3 @@
+<template>
+    <!-- TODO: We don't need this file and have to figure why it's required by the build process. 🤷🏼‍♂️ -->
+</template>