@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

package/src/modules/{utils → dxBaseElements}/headerBase/headerBase.ts

@@ -1,24 +1,32 @@
 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 { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
     "analytics",
     "commerce",
     "employees",
+    "data",
     "industries",
     "integration",
     "learning",
     "marketing",
     "partners",
     "platform",
+    "revenue",
     "sales",
     "service",
-    "success"
+    "success",
+    "einstein"
 ];
-const SIGN_UP_LABEL = "Sign Up";
+
+export const ANALYTICS_INFO = {
+    click_text: "browse trials",
+    element_type: "button",
+    content_category: "cta"
+};
 
 export abstract class HeaderBase extends LightningElement {
     @api bailHref?: string | null = null;
@@ -31,11 +39,12 @@ export abstract class HeaderBase extends LightningElement {
     @api signupLink?: string | null = null;
     @api href = null;
     @api subtitle!: string;
-    @api title: string = "Salesforce";
+    @api tbidApiBaseUrl: string | null = null;
+    @api tbidBaseUrl: string | null = null;
+    @api header: 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>';
-
+        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
 
     @api
     get navItems() {
@@ -54,14 +63,24 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
-    private _navItems!: Option[];
-    private _versions!: Option[];
+    @api
+    get showBanner() {
+        return this._showBanner && this.bannerMarkup;
+    }
+
+    set showBanner(value) {
+        this._showBanner = normalizeBoolean(value);
+    }
+
+    private _navItems!: OptionWithNested[];
+    private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
     protected mobile: boolean = false;
     private mobileNavMenuValue: string | null = null;
     private showMobileNavMenu: boolean = false;
     private showNavScrollShadow: boolean = false;
     protected isSearchOpen: boolean = false;
+    private _showBanner?: boolean = false;
 
     get url() {
         return this.href ? new URL(this.href!) : window.location;
@@ -184,9 +203,14 @@ export abstract class HeaderBase extends LightningElement {
     };
 
     private handleSignUpClick(e: PointerEvent) {
-        track(e.currentTarget!, "custEv_signupStart", {
-            clickText: SIGN_UP_LABEL
-        });
+        const payload = {
+            ...ANALYTICS_INFO,
+            click_url: this.signupLink,
+            element_title: this.header
+        };
+
+        track(e.currentTarget!, "custEv_browseTrialsClick", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
     }
 
     protected additionalClasses(): string {

package/src/modules/dxBaseElements/lightningElementWithState/lightningElementWithState.ts

@@ -0,0 +1,93 @@
+import { LightningElement, track } from "lwc";
+
+/**
+ * This is a helper class for when you want your LWC component to have state
+ * that is automatically tracked _along with_ its previous state, in a React-
+ * like fashion, so that you can compare current state with previous state
+ * after a render (like React's `commponentDidUpdate`). One benefit of doing
+ * things this way is that you can put all of your reactions to state changes
+ * in one place, in `renderedCallback`, rather than having them in various
+ * places throughout the component.
+ *
+ * The API consists in `this.prevState`, `this.state`, and `this.setState`.
+ *
+ * Usage:
+ *
+ * ```
+ * type MyState = {
+ *     isFetchingContent: boolean;
+ * };
+ *
+ * class MyFetchingComponent extends LightningElementWithState<MyState> {
+ *     constructor() {
+ *         // `this.state` can only be initialized once
+ *         this.state = {
+ *             isFetchingContent: false
+ *         };
+ *     }
+ *
+ *     // Queued for execution whenever a `setState` call completes
+ *     renderedCallback() {
+ *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
+ *             // Do something knowing that we just finished fetching.
+ *             notifyFetchSuccessful();
+ *         }
+ *     }
+ *
+ *     fetchSomething() {
+ *         this.setState({
+ *             isFetchingContent: true
+ *         });
+ *
+ *         fetch(whatever).then(() => {
+ *             this.setState({
+ *                 isFetching: false
+ *             }
+ *         });
+ *     }
+ * }
+ * ```
+ */
+export abstract class LightningElementWithState<
+    T extends { [key: string]: unknown }
+> extends LightningElement {
+    private _prevState = {} as T;
+    @track private _state = {} as T;
+
+    private _didInitializeState = false;
+
+    protected get prevState(): T {
+        return Object.freeze({
+            ...this._prevState
+        });
+    }
+
+    protected get state(): T {
+        return Object.freeze({
+            ...this._state
+        });
+    }
+
+    protected set state(initialState: T) {
+        if (!this._didInitializeState) {
+            this._state = {
+                ...initialState
+            };
+            this._didInitializeState = true;
+        } else {
+            throw new Error(
+                "To mutate state after initialization, use `this.setState`."
+            );
+        }
+    }
+
+    protected setState = (state: Partial<T>): void => {
+        this._prevState = {
+            ...this._state
+        };
+        this._state = {
+            ...this._state,
+            ...state
+        };
+    };
+}

package/src/modules/dxBaseElements/matchMediaElement/matchMediaElement.ts

@@ -0,0 +1,63 @@
+import { LightningElement } from "lwc";
+import {
+    BREAKPOINT_MOBILE,
+    BREAKPOINT_TABLET,
+    DEVICE_DESKTOP,
+    DEVICE_TABLET,
+    DEVICE_MOBILE
+} from "dxUtils/constants";
+
+const boilerplate = "screen and ";
+const BREAKPOINT_QUERY_MOBILE = `${boilerplate}(max-width: ${BREAKPOINT_MOBILE})`;
+const BREAKPOINT_QUERY_TABLET = `${boilerplate}(min-width: ${BREAKPOINT_MOBILE}) and (max-width: ${BREAKPOINT_TABLET})`;
+const BREAKPOINT_QUERY_DESKTOP = `${boilerplate}(min-width: ${BREAKPOINT_TABLET})`;
+
+type DeviceType =
+    | typeof DEVICE_MOBILE
+    | typeof DEVICE_TABLET
+    | typeof DEVICE_DESKTOP;
+
+const breakpointConfigs = [
+    { name: DEVICE_MOBILE, query: BREAKPOINT_QUERY_MOBILE },
+    { name: DEVICE_TABLET, query: BREAKPOINT_QUERY_TABLET },
+    { name: DEVICE_DESKTOP, query: BREAKPOINT_QUERY_DESKTOP }
+] as { name: DeviceType; query: string }[];
+
+export abstract class MatchMediaElement extends LightningElement {
+    private deviceType: DeviceType = DEVICE_DESKTOP;
+    private matches: {
+        match: MediaQueryList;
+        callback: (e: MediaQueryListEvent | MediaQueryList) => void;
+    }[] = [];
+
+    private get isMobile(): boolean {
+        return this.deviceType === DEVICE_MOBILE;
+    }
+    private get isTablet(): boolean {
+        return this.deviceType === DEVICE_TABLET;
+    }
+    private get isDesktop(): boolean {
+        return this.deviceType === DEVICE_DESKTOP;
+    }
+
+    connectedCallback() {
+        this.matches = breakpointConfigs.map(
+            ({ name, query }: { name: DeviceType; query: string }) => {
+                const match = window.matchMedia(query);
+                const callback = (e: MediaQueryListEvent | MediaQueryList) => {
+                    if (e.matches) {
+                        this.deviceType = name;
+                    }
+                };
+                match.addEventListener("change", callback);
+                return { match, callback };
+            }
+        );
+    }
+
+    disconnectedCallback() {
+        this.matches.forEach(({ match, callback }) =>
+            match.removeEventListener("change", callback)
+        );
+    }
+}

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -0,0 +1,176 @@
+import { LightningElement, api } from "lwc";
+import type { OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import { Brand, DevCenterConfig } from "typings/custom";
+
+export const HEIGHT_OF_SIDEBAR_ITEM = 32;
+export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
+
+export class SidebarBase extends LightningElement {
+    _sidebarContent: HTMLElement | null = null;
+
+    selectedElement: HTMLElement | null = null;
+    timerId: ReturnType<typeof setTimeout> | null = null;
+    _languages!: OptionWithLink[];
+    mobile: boolean = true;
+    expanded: boolean = true;
+    _value?: string = undefined;
+    showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
+    _devCenter!: DevCenterConfig;
+
+    @api langValuePath: string = "id";
+    @api language!: string;
+    @api bailHref!: string;
+    @api bailLabel!: string;
+    @api brand: Brand | null = null;
+
+    @api
+    get devCenter(): DevCenterConfig {
+        return this._devCenter;
+    }
+
+    set devCenter(value) {
+        this._devCenter = toJson(value);
+    }
+
+    @api
+    get languages() {
+        return this._languages;
+    }
+
+    set languages(value) {
+        this._languages = toJson(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+    }
+
+    get sidebarContent() {
+        if (!this._sidebarContent) {
+            this._sidebarContent = this.template.querySelector(
+                ".sidebar-content-tree"
+            );
+        }
+        return this._sidebarContent;
+    }
+
+    /**
+     * This method is to handle the scroll event for LNB and show box shadow
+     * @param scrollEvent
+     */
+    handleScroll(scrollEvent: any) {
+        const lnb = scrollEvent.target;
+
+        if (!this.scrolling) {
+            this.scrolling = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                // Check if lnb is scrolled
+                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
+                    this.showBoxShadow = true;
+                } else {
+                    this.showBoxShadow = false;
+                }
+                // Reset scrolling back to false after handling the scroll
+                this.scrolling = false;
+            }, 200);
+        }
+    }
+
+    renderedCallback(): void {
+        /**
+         * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
+         */
+
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+        this.timerId = setTimeout(
+            this.renderedCallbackWithTimeout,
+            WAIT_TIME_BEFORE_SCROLL_IN_MS
+        );
+    }
+
+    disconnectedCallback(): void {
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+        }
+    }
+
+    renderedCallbackWithTimeout = () => {
+        this.scrollToSelectedItem();
+    };
+
+    private onSelectedItemRendered = (event: CustomEvent) => {
+        event.stopPropagation();
+        this.selectedElement = event.detail.element;
+    };
+
+    /*Scroll to selected tree item */
+    private scrollToSelectedItem() {
+        if (this.selectedElement && this.sidebarContent) {
+            const scrollHeight: number =
+                this.selectedElement.getBoundingClientRect().bottom -
+                this.sidebarContent.getBoundingClientRect().bottom + // We need to remove parent bottom
+                HEIGHT_OF_SIDEBAR_ITEM * 3 + // add height of 3 more items so that user can see at least three more items after selected item
+                this.sidebarContent.offsetTop; // We need to add sidebar offsetTop value as scrollTo will consider it
+            this.sidebarContent.scrollTo({
+                top: scrollHeight,
+                behavior: "smooth"
+            });
+            this.selectedElement = null;
+        }
+    }
+
+    onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
+        this.mobile = event.matches;
+        this.expanded = !this.mobile;
+    };
+
+    onSelect(event: CustomEvent) {
+        this._value = event.detail.name;
+
+        if (this.mobile) {
+            this.onToggleClick();
+        }
+    }
+
+    onToggleClick() {
+        this.expanded = !this.expanded;
+        this.dispatchEvent(
+            new CustomEvent("togglesidebar", {
+                detail: {
+                    open: this.expanded,
+                    bubbles: true,
+                    composed: true
+                }
+            })
+        );
+    }
+
+    private get hasMobileSidebarFooter(): boolean {
+        return this.mobile && this.languages?.length > 1 && this.expanded;
+    }
+
+    private get hasSidebarFooter(): boolean {
+        return this.languages?.length > 1 || Boolean(this.bailHref);
+    }
+
+    private get sidebarContentClass(): string {
+        const sidebarConterCss = "sidebar-content sidebar-content-tree";
+        return this.hasSidebarFooter || this.hasMobileSidebarFooter
+            ? sidebarConterCss + " sidebar-content-hasfooter"
+            : sidebarConterCss;
+    }
+
+    private get isDesktop(): boolean {
+        return !this.mobile;
+    }
+}

package/src/modules/dxConstants/brands/brands.ts

@@ -0,0 +1,18 @@
+import { Brand } from "typings/custom";
+
+export const BRANDS = [
+    "employees",
+    "data",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics",
+    "einstein"
+] as Brand[];

package/src/modules/dxConstants/colors/colors.ts

@@ -0,0 +1,14 @@
+export const COLORS = [
+    "hot-orange",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "cloud-blue",
+    "blue",
+    "indigo",
+    "purple",
+    "violet",
+    "pink",
+    "red"
+];

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -0,0 +1,72 @@
+import { ContentType, IconData } from "typings/custom";
+
+export const CONTENT_TYPE_LABELS = {
+    documentation: "Developer Documentation",
+    help_documentation: "Product Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast",
+    community_posts: "Community"
+};
+
+export const CONTENT_TYPE_ICONS: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    help_documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    },
+    community_posts: {
+        iconSprite: "general",
+        iconSymbol: "users"
+    }
+};
+
+export const CONTENT_TYPES = [
+    "documentation",
+    "help_documentation",
+    "trailhead",
+    "blog",
+    "forum",
+    "api",
+    "event",
+    "website",
+    "podcast",
+    "community_posts"
+] as ContentType[];

package/src/modules/{helpers → dxHelpers}/animations/animations.css

@@ -1,4 +1,4 @@
-@keyframes fadeIn {
+@keyframes fadein {
     0% {
         opacity: 0;
         transform: translateY(var(--dx-g-spacing-sm));

package/src/modules/dxHelpers/button/button.css

@@ -0,0 +1,4 @@
+:host {
+    --dx-g-button-image-filter-hover: brightness(90%);
+    --dx-g-button-heading-color-hover: var(--dx-g-link-hover-color);
+}

package/src/modules/{helpers → dxHelpers}/card/card.css

@@ -1,4 +1,4 @@
-@import "helpers/button";
+@import "dxHelpers/button";
 
 /* main card base */
 
@@ -12,6 +12,10 @@
     --dx-c-body-max-lines: 6;
 }
 
+span {
+    word-break: break-word;
+}
+
 .dx-card-base {
     height: 100%;
 }
@@ -100,12 +104,8 @@
 
 .dx-card-base_ctas {
     /* this is a hack since we can't target the ::slotted ctas */
-    display: grid;
-    grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
-    grid-template-columns: repeat(
-        auto-fill,
-        minmax(min-content, var(--dx-c-card-grid-max-width, 50px))
-    );
+    display: flex;
+    gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
 }
 
 /* card image */
@@ -170,13 +170,13 @@ a.dx-card-base:hover a.dx-card-base_borderless-image_link {
 dx-card-title:hover,
 .dx-card-base_link-hovered dx-card-title,
 a.dx-card-base:hover dx-card-title {
-    --dx-c-card-title-color: var(--dx-g-button-heading-color-hover);
+    --dx-c-card-title-color: var(--dx-card-title-hover-color);
 }
 
 /* Line Limits */
 .dx-text-body-2,
 .dx-text-body-3 {
-    display: -webkit-box;
+    display: box;
     -webkit-line-clamp: var(--dx-c-body-max-lines);
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -184,18 +184,6 @@ a.dx-card-base:hover dx-card-title {
 
 /* Desktop Only */
 @media screen and (min-width: 1024px) {
-    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
-        align-self: flex-start;
-        flex-shrink: 0;
-        width: 0;
-        height: unset;
-        margin-right: var(--dx-g-card-img-spacing);
-        margin-bottom: unset;
-        padding-top: unset;
-        padding-right: 45%;
-        padding-bottom: 22.5%;
-    }
-
     .dx-card-base_featured dx-card-title {
         --dx-c-card-title-letter-spacing: -0.6px;
         --dx-c-card-title-font-size: 32px;
@@ -216,6 +204,21 @@ a.dx-card-base:hover dx-card-title {
     }
 }
 
+/* Tablet + Desktop Only */
+@media screen and (min-width: 764px) {
+    .dx-card-base_layout-horizontal .dx-card-base_borderless-image_link {
+        align-self: flex-start;
+        flex-shrink: 0;
+        width: 0;
+        height: unset;
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        padding-top: unset;
+        padding-right: 45%;
+        padding-bottom: 22.5%;
+    }
+}
+
 /* Tablet */
 @media screen and (max-width: 1024px) {
     :host {
@@ -223,36 +226,34 @@ a.dx-card-base:hover dx-card-title {
         --dx-g-card-img-spacing: 16px;
     }
 
-    .dx-card-base_borderless-image {
-        min-height: unset;
-    }
-
     /* text resp */
     .dx-text-body-2,
     .dx-text-body-3 {
         -webkit-line-clamp: 3;
     }
 
-    .dx-text-body-2 {
+    .dx-text-body-2:not(.static-font) {
         font-size: var(--dx-g-text-sm);
         line-height: 20px;
     }
 
-    .dx-text-body-3 {
+    .dx-text-body-3:not(.static-font) {
         font-size: var(--dx-g-text-xs);
         line-height: 16px;
     }
 
-    .dx-text-heading-3 {
+    .dx-text-display-4:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5 {
-        font-size: 12px;
+    .dx-text-display-8:not(.static-font) {
+        font-size: var(--dx-g-text-sm);
     }
+}
 
-    .dx-text-heading-6 {
-        font-size: var(--dx-g-text-sm);
+@media screen and (max-width: 764px) {
+    .dx-card-base_borderless-image {
+        min-height: unset;
     }
 }