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

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

@@ -1,32 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,204 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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