@salesforcedevs/dx-components 0.53.12-loading-img-update-3 → 0.54.0-alpha01

package/lwc.config.json

@@ -1,11 +1,13 @@
 {
     "modules": [{ "dir": "src/modules" }],
     "expose": [
+        "base-elements/headerBase",
+        "base-elements/matchMediaElement",
+        "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",
         "dx/cardBlogPost",
-        "dx/cardBlogPostProvider",
         "dx/cardCallout",
         "dx/cardContent",
         "dx/cardDemo",
@@ -15,25 +17,21 @@
         "dx/cardMinimal",
         "dx/cardNews",
         "dx/cardPodcastEpisode",
-        "dx/cardPodcastEpisodeProvider",
         "dx/cardSmall",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
         "dx/cardVideoPreview",
         "dx/checkbox",
-        "dx/checkboxNative",
         "dx/checkboxGroup",
+        "dx/checkboxNative",
         "dx/codeBlock",
-        "dx/contentArchive",
         "dx/dropdown",
         "dx/emptyState",
         "dx/feature",
         "dx/featuredContentHeader",
         "dx/featuresList",
         "dx/filterMenu",
-        "dx/banner",
         "dx/footer",
-        "dx/newsletterForm",
         "dx/formattedDateTime",
         "dx/grid",
         "dx/groupText",
@@ -47,17 +45,14 @@
         "dx/iconBadge",
         "dx/imageAndLabel",
         "dx/input",
-        "dx/instrumentation",
         "dx/logo",
         "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
         "dx/podcastPlayer",
-        "dx/podcastSubscription",
         "dx/popover",
         "dx/radioGroup",
         "dx/relativeDateTime",
-        "dx/searchResults",
         "dx/section",
         "dx/sectionSignup",
         "dx/sectionSmall",
@@ -65,28 +60,31 @@
         "dx/sidebar",
         "dx/sidebarOld",
         "dx/skipNavLink",
-        "dx/slackCta",
         "dx/socials",
+        "dx/spinner",
+        "dx/toc",
         "dx/toc",
-        "dx/tree",
         "dx/tooltip",
+        "dx/tree",
         "dx/typeBadge",
         "dx/typeBadgeGroup",
-        "dx/toc",
         "dx/vimeoPlayer",
         "helpers/animations",
+        "helpers/button",
         "helpers/card",
         "helpers/code",
         "helpers/commonHeader",
         "helpers/reset",
         "helpers/table",
         "helpers/text",
-        "base-elements/headerBase",
-        "base-elements/matchMediaElement",
+        "utils/analytics",
         "utils/constants",
-        "utils/normalizers",
+        "utils/coveo",
+        "utils/dates",
         "utils/highlight",
-        "utils/contentArchive",
-        "utils/dates"
+        "utils/normalizers",
+        "utils/queryCoordinator",
+        "utils/recentSearches",
+        "utils/wordpress"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.53.12-loading-img-update-3",
+    "version": "0.54.0-alpha01",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -15,12 +15,10 @@
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
-        "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
         "lightning-base-components": "1.12.3-alpha",
         "lodash.get": "^4.4.2",
-        "microtip": "0.2.2",
-        "query-string": "^7.1.1"
+        "microtip": "0.2.2"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",

package/src/modules/base-elements/headerBase/headerBase.ts

@@ -2,7 +2,7 @@ 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";
+import { track } from "utils/analytics";
 
 const VALID_BRANDS = [
     "analytics",

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -1,14 +1,14 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { toDxColor } from "utils/css";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 export default class CardCallout extends LightningElement {
-    @api backgroundColor?: string = "indigo-vibrant-40";
-    @api color?: string = "white";
+    @api backgroundColor: string = "indigo-vibrant-40";
+    @api color: string = "white";
     @api href!: string;
     @api label: string = "";
-    @api target?: string | null = null;
+    @api target?: string;
     @api title!: string;
 
     private get style(): string {

package/src/modules/dx/cardNews/cardNews.ts

@@ -9,7 +9,7 @@ import {
     CardNewsSize,
     CardNewsTextContainerSize
 } from "typings/custom";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor?: string = "indigo-vibrant-40";

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -6,7 +6,7 @@ import {
     getLocalStorageData,
     setLocalStorageData
 } from "@sfdocs-internal/wires";
-import { track as gtmTrack } from "dx/instrumentation";
+import { track as gtmTrack } from "utils/analytics";
 
 // Used por remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Option } from "typings/custom";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 export default class DropdownOption extends LightningElement {
     @api option!: Option;

package/src/modules/dx/footer/footer.ts

@@ -9,7 +9,7 @@ import {
     privacyHref,
     intellectualHref
 } from "./links";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 const PATH = "/newsletter";
 const createNewsletterSignupHref = (email: string): string =>

package/src/modules/dx/footerOption/footerOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 export default class FooterOption extends LightningElement {
     @api href: string | null = null;

package/src/modules/dx/formattedDateTime/formattedDateTime.ts

@@ -28,6 +28,11 @@ export default class FormattedDateTime extends LightningElement {
         }
 
         this._unformattedDate = new Date(value);
+
+        if (this._unformattedDate.toString() === "Invalid Date") {
+            // this is a fix for Safari since it doesn't support date strings with 'yyyy/mm/dd' patterns
+            this._unformattedDate = new Date(value.replace(/-/g, "/"));
+        }
     }
     get value() {
         const options = this.getOptions();

package/src/modules/dx/groupText/groupText.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
 import { isSlotEmpty } from "utils/slot";
 import { toJson } from "utils/normalizers";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 type OptionalLink = Link | null;
 

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 export default class HeaderMobileNavMenuOption extends LightningElement {
     @api href: string | null = null;

package/src/modules/dx/pagination/pagination.ts

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 
 const ANALYTICS_INFO = {
     clickUrl: window.location.href,

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

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { track as trackAnalytics } from "dx/instrumentation";
+import { track as trackAnalytics } from "utils/analytics";
 import { api, track } from "lwc";
 import {
     TreeNode,

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

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 import { api } from "lwc";
 
 import { TreeNode, SidebarGtmAction } from "typings/custom";

package/src/modules/dx/tab/tab.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 import cx from "classnames";
 import { TabVariant } from "typings/custom";
 import { normalizeBoolean } from "utils/normalizers";

package/src/modules/dx/treeItem/treeItem.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
-import { track } from "dx/instrumentation";
+import { track } from "utils/analytics";
 import { SidebarGtmAction } from "typings/custom";
 import { isInViewport } from "utils/browser";
 

package/src/modules/utils/analytics/analytics.ts

@@ -0,0 +1,24 @@
+export const TRACKING_EVENT_NAME = "developerwebsite_track";
+export const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
+export const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
+
+export function track(
+    element: EventTarget,
+    event: string,
+    payload: Record<string, unknown>
+): void {
+    const detail = { event, payload };
+    // if window.LISTENER_INDICATOR is undefined, `dx-instrumentation` has not
+    // been mounted, and the listener hasn't been attached.
+    if ((window as any)[LISTENER_INDICATOR] === undefined) {
+        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
+        (window as any)[LISTENER_QUEUE].push(detail);
+    } else {
+        const e = new CustomEvent(TRACKING_EVENT_NAME, {
+            bubbles: true,
+            composed: true,
+            detail
+        });
+        element.dispatchEvent(e);
+    }
+}

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

@@ -1,4 +1,5 @@
 import get from "lodash.get";
+import { WordpressPodcastEpisode, WordpressBlogPost } from "typings/custom";
 
 export const toJson = (value: string | object | null) =>
     typeof value === "string" ? JSON.parse(value) : value;
@@ -22,16 +23,6 @@ export const normalizeToArray = (
     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;
@@ -55,17 +46,6 @@ export const normalizeEpisode = ({
     title
 });
 
-type WordpressBlogPost = {
-    date: string;
-    description: string;
-    id: string;
-    originalUrl: string;
-    title: string;
-    url: string;
-    authors: any[];
-    featuredImage: string;
-};
-
 export const normalizePost = ({
     authors = [],
     date,
@@ -89,3 +69,11 @@ export const normalizePost = ({
 
 export const normalizeBoolean = (value: string | boolean | number): boolean =>
     typeof value === "string" ? value === "true" : !!value;
+
+/**
+ * Cleans characters that are invalid for DOM IDs
+ * @param {string} id id to normalize
+ */
+export const normalizeDomId = (id: string): string => {
+    return id.replace(/^[^a-z]+|[^\w.-]+/gi, "");
+};

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.css

@@ -1,3 +0,0 @@
-:host {
-    display: contents;
-}

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.html

@@ -1,16 +0,0 @@
-<template>
-    <template for:each={posts} for:item="post">
-        <dx-card-blog-post
-            label="BLOG POST"
-            author-img-src={post.authorImgSrc}
-            author-label={post.authorName}
-            body={post.body}
-            datetime={post.datetime}
-            href={post.href}
-            img-alt={post.imgAlt}
-            img-src={post.imgSrc}
-            key={post.id}
-            title={post.title}
-        ></dx-card-blog-post>
-    </template>
-</template>

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -1,29 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils/wordpress";
-import { normalizePost } from "utils/normalizers";
-
-type BlogPost = {
-    body: string;
-    datetime: string;
-    href: string;
-    id: string;
-    title: string;
-};
-
-export default class CardBlogPostProvider extends LightningElement {
-    @api count?: string;
-
-    @track posts: BlogPost[] = [];
-
-    private fetchPosts = async () => {
-        this.posts = await fetchWordpressPosts(
-            "/blogs/api",
-            normalizePost,
-            this.count
-        );
-    };
-
-    connectedCallback() {
-        this.fetchPosts();
-    }
-}

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.css

@@ -1,3 +0,0 @@
-:host {
-    display: contents;
-}

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.html

@@ -1,12 +0,0 @@
-<template>
-    <template for:each={episodes} for:item="episode">
-        <dx-card-podcast-episode
-            body={episode.body}
-            datetime={episode.datetime}
-            href={episode.href}
-            key={episode.id}
-            length={episode.length}
-            title={episode.title}
-        ></dx-card-podcast-episode>
-    </template>
-</template>

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.ts

@@ -1,29 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils/wordpress";
-import { normalizeEpisode } from "utils/normalizers";
-
-type PodcastEpisode = {
-    body: string;
-    datetime: string;
-    href: string;
-    id: string;
-    length: string;
-    title: string;
-};
-export default class CardPodcastEpisodeProvider extends LightningElement {
-    @api count?: string;
-
-    @track episodes: PodcastEpisode[] = [];
-
-    private fetchEpisodes = async () => {
-        this.episodes = await fetchWordpressPosts(
-            "/podcast/api",
-            normalizeEpisode,
-            this.count
-        );
-    };
-
-    connectedCallback() {
-        this.fetchEpisodes();
-    }
-}