@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,32 @@
+import { createSearchRegExp } from "utils-internal/regexps";
+
+const MARK_TAGS = /<\/?mark>/gi;
+
+export const highlightTerms = (
+    // eslint-disable-next-line no-undef
+    elements: NodeListOf<Element>,
+    searchTerm: string
+): void => {
+    searchTerm = searchTerm.trim();
+    const searchExp = createSearchRegExp(searchTerm);
+    elements.forEach((element) => {
+        if (
+            element?.innerHTML.includes("<dx-") ||
+            element?.innerHTML.includes("<doc-")
+        ) {
+            return;
+        }
+
+        let innerHtml = element.innerHTML.replace(
+            // Remove previously added mark tags
+            MARK_TAGS,
+            ""
+        );
+
+        if (searchTerm) {
+            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        }
+
+        element.innerHTML = innerHtml;
+    });
+};

package/src/modules/utils/normalizers/normalizers.ts

@@ -0,0 +1,91 @@
+import get from "lodash.get";
+
+export const toJson = (value: string | object | null) =>
+    typeof value === "string" ? JSON.parse(value) : value;
+
+export const normalizeToArray = (
+    value: string[] | string | null,
+    splitKey: string = ","
+): Array<string> => {
+    if (!value) {
+        return [];
+    }
+
+    if (typeof value === "string") {
+        try {
+            value = JSON.parse(value);
+        } catch (e) {
+            value = (value as string).split(splitKey);
+        }
+    }
+
+    return (Array.isArray(value) ? value : [value]) as Array<string>;
+};
+
+type WordpressPodcastEpisode = {
+    date: string;
+    description: string;
+    id: string;
+    originalUrl: string;
+    podcastDuration: string;
+    title: string;
+    url: string;
+};
+
+const getLength = (duration: string) => {
+    if (!duration || !duration.includes(":")) {
+        return undefined;
+    }
+    return `${get(duration.split(":"), "[1]")} min`;
+};
+
+export const normalizeEpisode = ({
+    url,
+    id,
+    title,
+    description,
+    date,
+    podcastDuration
+}: WordpressPodcastEpisode) => ({
+    body: description,
+    datetime: date,
+    href: url,
+    id,
+    length: getLength(podcastDuration),
+    title
+});
+
+type WordpressBlogPost = {
+    date: string;
+    description: string;
+    id: string;
+    originalUrl: string;
+    title: string;
+    url: string;
+    authors: any[];
+    featuredImage: string;
+};
+
+export const normalizePost = ({
+    authors = [],
+    date,
+    description,
+    featuredImage,
+    id,
+    title,
+    url
+}: WordpressBlogPost) => ({
+    body: description,
+    datetime: date,
+    href: url,
+    authorHref: get(authors, "[0].link"),
+    authorImgSrc: get(authors, "[0].avatar_urls.48"),
+    authorName: get(authors, "[0].name"),
+    imgAlt: "Blogpost image",
+    imgSrc: featuredImage,
+    id,
+    title
+});
+
+export const normalizeBoolean = (value: string | boolean | number): boolean =>
+    typeof value === "string" ? value === "true" : !!value;

package/src/modules/utils-internal/archiveCard/archiveCard.ts

@@ -0,0 +1,35 @@
+import { LightningElement, api } from "lwc";
+import { LinkTarget, Color } from "typings/custom";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+
+export abstract class ArchiveCard extends LightningElement {
+    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api href!: string;
+    @api title!: string;
+    @api target: LinkTarget = "_self";
+
+    private matchMedia!: MediaQueryList;
+    protected mobile = false;
+
+    protected get badgeColor(): Color {
+        return this.contentType === "Blog" ? "teal" : "blue";
+    }
+
+    connectedCallback(): void {
+        this.matchMedia = window.matchMedia(MOBILE_QUERY);
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback(): void {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = e.matches);
+
+    protected get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+}

package/src/modules/utils-internal/coveo/coveo.ts

@@ -0,0 +1,70 @@
+import {
+    buildSearchEngine as _buildSearchEngine,
+    SearchAppState,
+    SearchEngineOptions
+} from "@coveo/headless";
+
+export const buildSearchEngine = ({
+    organizationId,
+    preloadedState,
+    publicAccessToken,
+    searchHub,
+    searchPipeline
+}: {
+    organizationId: string;
+    publicAccessToken: string;
+    searchPipeline?: string;
+    searchHub: string;
+    preloadedState?: SearchAppState;
+}) => {
+    const search = searchPipeline
+        ? { pipeline: searchPipeline, searchHub }
+        : { searchHub };
+
+    const configuration = {
+        accessToken: publicAccessToken,
+        organizationId,
+        search
+    };
+
+    const engineConfiguration: SearchEngineOptions = preloadedState
+        ? { configuration, preloadedState }
+        : { configuration };
+
+    return _buildSearchEngine(engineConfiguration);
+};
+
+export const getSidebarSearchParams = () =>
+    new URLSearchParams(window.location.search).get("q");
+
+const coveoOrganizationId = "coveosalesforcetestakshatha";
+const coveoPublicAccessToken = "xxfeb39525-e402-4e41-a870-7132441f7875";
+
+export const coveoHeaderConfig = {
+    coveoOrganizationId,
+    coveoPublicAccessToken,
+    coveoSearchPipeline: "salesforcedevdoc",
+    coveoSearchHub: "salesforcedevdoc"
+};
+
+export const coveoXMLDocsConfig = {
+    coveoOrganizationId,
+    coveoPublicAccessToken,
+    coveoSearchHub: "Developer_Docs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        objecttype: "HTDeveloperDocumentsC",
+        sflocale__c: "en_US",
+        sfrelease__c: "232.0",
+        sfdelivarable__c: "apexcode"
+    })
+};
+
+export const coveoSFDocsConfig = {
+    coveoOrganizationId,
+    coveoPublicAccessToken,
+    coveoSearchHub: "Developer_MdDocs_SS",
+    coveoAdvancedQueryConfig: JSON.stringify({
+        source: "Sitemap - Developer Docs",
+        path_segment_3: "pardot"
+    })
+};

package/src/modules/utils-internal/css/css.ts

@@ -0,0 +1,43 @@
+import { Color } from "typings/custom";
+
+const LABEL_TO_DX_VAR: { [key: string]: string } = {
+    blue: "blue-vibrant",
+    "cloud-blue": "cloud-blue-vibrant",
+    green: "green-vibrant",
+    "hot-orange": "hot-orange-vibrant",
+    indigo: "indigo-vibrant",
+    orange: "orange-vibrant",
+    pink: "pink-vibrant",
+    purple: "purple-vibrant",
+    red: "red-vibrant",
+    teal: "teal-natural",
+    violet: "violet-vibrant",
+    yellow: "yellow-natural"
+};
+
+const DEFAULT_BACKGROUND_LEVEL = 95;
+const DEFAULT_COLOR_LEVEL = 40;
+
+export const colorToDxColors = (
+    color?: Color
+): {
+    background: string;
+    color: string;
+} | null => {
+    if (!color) {
+        return null;
+    }
+
+    const dxVarColor = LABEL_TO_DX_VAR[color];
+    if (!dxVarColor) {
+        return null;
+    }
+
+    return {
+        background: `--dx-g-${dxVarColor}-${DEFAULT_BACKGROUND_LEVEL}`,
+        color: `--dx-g-${dxVarColor}-${DEFAULT_COLOR_LEVEL}`
+    };
+};
+
+export const toDxColor = (color: string) =>
+    ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;

package/src/modules/utils-internal/devices/devices.ts

@@ -0,0 +1 @@
+export const isMac = () => navigator.userAgent.indexOf("Mac OS X") !== -1;

package/src/modules/utils-internal/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-internal/jest/jest.ts

@@ -0,0 +1,58 @@
+const mockMediaMatch = (matches: boolean) => (query: string) => ({
+    matches,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+});
+
+export const createMediaMock = (
+    defaultMatch = false,
+    matchesList: Array<boolean> = []
+) => {
+    const mediaMock = jest.fn(mockMediaMatch(defaultMatch));
+    matchesList.forEach((value) =>
+        mediaMock.mockImplementationOnce(mockMediaMatch(value))
+    );
+    return mediaMock;
+};
+
+export const matchMediaMock = createMediaMock();
+
+export const mockLocalStorage = function () {
+    let store: { [key: string]: string } = {};
+    return {
+        getItem: function (key: string) {
+            return store[key] || null;
+        },
+        setItem: function (key: string, value: string) {
+            store[key] = value.toString();
+        },
+        removeItem: function (key: string) {
+            delete store[key];
+        },
+        clear: function () {
+            store = {};
+        }
+    };
+};
+
+export const mockQueryParameter = (q: string): void => {
+    global.window = Object.create(window);
+    const search = q ? `?q=${q}` : "";
+    const href = `http://dummy.com${search}`;
+    // @ts-ignore
+    delete window.location.value;
+    Object.defineProperty(window, "location", {
+        value: {
+            href,
+            search
+        },
+        writable: true
+    });
+};
+
+export const unmockQueryParameter = () => mockQueryParameter("");

package/src/modules/utils-internal/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-internal/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>