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

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

@@ -1,83 +1,133 @@
-export const generalLinksRaw = [
+import { OptionWithRequiredNested } from "typings/custom";
+
+export const generalLinksRaw: OptionWithRequiredNested[] = [
     {
+        id: "Developer Centers",
         label: "Developer Centers",
         options: [
-            { href: "https://devcenter.heroku.com/", label: "Heroku" },
-            { href: "https://developer.mulesoft.com/", label: "MuleSoft" },
-            { href: "https://www.tableau.com/developer", label: "Tableau" },
             {
-                href: "https://developer.commercecloud.com/s/",
-                label: "Commerce Cloud"
+                link: { href: "https://devcenter.heroku.com/" },
+                label: "Heroku",
+                id: "Heroku"
+            },
+            {
+                link: { href: "https://developer.mulesoft.com/" },
+                label: "MuleSoft",
+                id: "MuleSoft"
             },
             {
-                href: "https://www.lightningdesignsystem.com/",
-                label: "Lightning Design System"
+                link: { href: "https://www.tableau.com/developer" },
+                label: "Tableau",
+                id: "Tableau"
             },
             {
-                href: "https://metamind.readme.io/",
-                label: "Einstein"
+                link: { href: "/developer-centers/commerce-cloud" },
+                label: "Commerce Cloud",
+                id: "Commerce Cloud"
             },
-            { href: "https://salesforce.quip.com/dev", label: "Quip" }
+            {
+                link: { href: "https://www.lightningdesignsystem.com/" },
+                label: "Lightning Design System",
+                id: "Lightning Design System"
+            },
+            {
+                link: {
+                    href: "/developer-centers/einstein-1-studio"
+                },
+                label: "Einstein",
+                id: "Einstein"
+            },
+            {
+                link: { href: "https://salesforce.quip.com/dev" },
+                label: "Quip",
+                id: "Quip"
+            }
         ]
     },
     {
+        id: "Popular Resources",
         label: "Popular Resources",
         options: [
-            { href: "/docs", label: "Documentation" },
             {
-                href: "/docs/component-library",
-                label: "Component Library"
+                link: { href: "/docs" },
+                label: "Documentation",
+                id: "Documentation"
+            },
+            {
+                link: { href: "/docs/component-library" },
+                label: "Component Library",
+                id: "Component Library"
             },
-            { href: "/docs/apis", label: "APIs" },
-            { href: "https://trailhead.salesforce.com/", label: "Trailhead" },
+            { link: { href: "/docs/apis" }, label: "APIs", id: "APIs" },
             {
-                href: "/code-samples-and-sdks",
-                label: "Code Samples and SDKs"
+                link: { href: "https://trailhead.salesforce.com/" },
+                label: "Trailhead",
+                id: "Trailhead"
             },
-            { href: "/podcast", label: "Podcasts" },
             {
-                href: "https://appexchange.salesforce.com/",
-                label: "AppExchange"
+                link: { href: "/sample-apps" },
+                label: "Sample Apps",
+                id: "Sample Apps"
+            },
+            { link: { href: "/podcast" }, label: "Podcasts", id: "Podcasts" },
+            {
+                link: { href: "https://appexchange.salesforce.com/" },
+                label: "AppExchange",
+                id: "AppExchange"
             }
         ]
     },
     {
         label: "Community",
+        id: "Community",
         options: [
             {
-                href: "https://trailhead.salesforce.com/trailblazer-community/feed",
-                label: "Trailblazer Community"
+                link: {
+                    href: "https://trailhead.salesforce.com/trailblazer-community/feed"
+                },
+                label: "Trailblazer Community",
+                id: "Trailblazer Community"
             },
             {
-                href: "/forums#!/feedtype=RECENT&criteria=ALLQUESTIONS&",
-                label: "Forums"
+                link: { href: "/events" },
+                label: "Events and Calendar",
+                id: "Events and Calendar"
             },
-            { href: "/events", label: "Events and Calendar" },
             {
-                href: "https://go.appexchange.com/partnerprogram",
-                label: "Partner Community"
+                link: {
+                    href: "https://www.salesforce.com/partners/become-a-partner/"
+                },
+                label: "Partner Community",
+                id: "Partner Community"
             },
-            { href: "/blogs", label: "Blog" },
+            { link: { href: "/blogs" }, label: "Blog", id: "Blog" },
             {
-                href: "https://admin.salesforce.com/",
-                label: "Salesforce Admins"
+                link: { href: "https://admin.salesforce.com/" },
+                label: "Salesforce Admins",
+                id: "Salesforce Admins"
             },
             {
-                href: "https://architect.salesforce.com/",
-                label: "Salesforce Architects"
+                link: { href: "https://architect.salesforce.com/" },
+                label: "Salesforce Architects",
+                id: "Salesforce Architects"
             }
         ]
     }
 ];
 
-export const generalLinks = generalLinksRaw.map((section) => ({
+export const defaultGeneralLinks = generalLinksRaw.map((section) => ({
     ...section,
     options: section.options.map((option) => {
-        const external = option.href.startsWith("http");
+        if (!option.link) {
+            return option;
+        }
+        const external = option.link.href.startsWith("http");
         return {
             ...option,
-            iconSymbol: external ? "new_window" : null,
-            target: external ? "_blank" : null
+            link: {
+                ...option.link,
+                target: external ? "_blank" : null
+            }
         };
     })
 }));
@@ -87,54 +137,92 @@ export const privacyHref = "https://www.salesforce.com/company/privacy/";
 export const intellectualHref =
     "https://www.salesforce.com/company/legal/intellectual/";
 
+const openOneTrustInfoDisplay = () => {
+    if (
+        (window as any).OneTrust &&
+        (window as any).OneTrust.ToggleInfoDisplay
+    ) {
+        (window as any).OneTrust.ToggleInfoDisplay();
+    }
+};
+
 export const termsLinks = [
-    { href: privacyHref, label: "Privacy Statement" },
+    { href: privacyHref, label: "Privacy Information" },
     {
-        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        href: "https://www.salesforce.com/company/program-agreement/",
         label: "Terms of Use"
     },
+    {
+        href: "https://www.salesforce.com/company/legal/",
+        label: "Legal"
+    },
     {
         href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
-    { href: "https://trust.salesforce.com/en/", label: "Trust" }
+    { href: "https://trust.salesforce.com/en/", label: "Trust" },
+    {
+        href: "#",
+        rel: "nofollow",
+        label: "Cookie Preferences",
+        onclick: openOneTrustInfoDisplay
+    },
+    {
+        href: "https://www.salesforce.com/form/other/privacy-request/",
+        label: "Your Privacy Choices",
+        img: "https://a.sfdcstatic.com/developer-website/images/privacyoptions.svg"
+    },
+    {
+        href: "https://www.salesforce.com/company/disclosure/",
+        label: "Responsible Disclosure"
+    },
+    {
+        href: "https://www.salesforce.com/company/contact-us/?d=cta-glob-footer-11",
+        label: "Contact"
+    }
 ];
 
 export const socialLinks = [
     {
-        href: "https://github.com/trailheadapps",
-        iconSymbol: "github",
+        href: "https://developer.salesforce.com/blogs/feed",
+        iconSymbol: "rss",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-rss",
+        iconSprite: "general",
+        label: "RSS"
+    },
+    {
+        href: "https://www.instagram.com/salesforcedevs",
+        iconSymbol: "instagram",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-instagram",
         iconSprite: "brand",
-        label: "Github"
+        label: "Instagram"
     },
     {
-        href: "https://www.facebook.com/salesforcedevs",
-        iconSymbol: "facebook-f",
+        href: "https://github.com/trailheadapps",
+        iconSymbol: "github",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-github",
         iconSprite: "brand",
-        label: "Facebook"
+        label: "Github"
     },
     {
         href: "https://twitter.com/salesforcedevs",
-        iconSymbol: "twitter",
+        iconSymbol: "twitter-x",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#twitter-x",
         iconSprite: "brand",
         label: "Twitter"
     },
     {
         href: "https://www.linkedin.com/showcase/salesforce-developers",
-        iconSymbol: "linkedin-in",
+        iconSymbol: "linked-in",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-linked-in",
         iconSprite: "brand",
         label: "LinkedIn"
     },
     {
         href: "https://www.youtube.com/user/DeveloperForce",
         iconSymbol: "youtube",
+        iconURL: "/assets/icons/brand-sprite/svg/symbols.svg#themed-youtube",
         iconSprite: "brand",
         label: "Youtube"
-    },
-    {
-        href: "https://developer.salesforce.com/blogs/feed",
-        iconSymbol: "rss",
-        iconSprite: "general",
-        label: "RSS"
     }
 ];

package/src/modules/dx/footerOption/footerOption.css

@@ -1,4 +1,11 @@
-dx-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-20);
+a {
+    color: var(--dx-footer-themed-header-link-color);
+    text-decoration: none;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a:hover {
+    color: var(--dx-footer-themed-header-link-hover-color);
 }

package/src/modules/dx/footerOption/footerOption.html

@@ -1,12 +1,3 @@
 <template>
-    <dx-button
-        href={href}
-        icon-symbol={iconSymbol}
-        target={target}
-        font="sans"
-        variant="inline"
-        onclick={sendGtm}
-    >
-        {label}
-    </dx-button>
+    <a href={href} target={target} onclick={sendGtm}>{label}</a>
 </template>

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

@@ -1,19 +1,33 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "dxUtils/analytics";
 
 export default class FooterOption extends LightningElement {
     @api href: string | null = null;
     @api generalLabel: string | null = null;
     @api label: string | null = null;
-    @api iconSymbol: string | null = null;
     @api target: string | null = null;
 
-    sendGtm(e: PointerEvent) {
+    sendGtm(e: any) {
         track(e.currentTarget, "custEv_bottomNavLinkClick", {
-            navHeading: this.generalLabel || undefined,
-            navSubHeading: this.label || undefined,
-            clickText: this.href || undefined,
-            pageLocation: window.location.pathname || undefined
+            click_text: this.label || undefined,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
+            nav_item: this.label || undefined,
+            nav_level: "1",
+            element_type: "link",
+            nav_type: "footer"
+        });
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.label,
+            element_title: this.generalLabel,
+            click_url:
+                (this.href && this.href.includes("http")
+                    ? this.href
+                    : `${window.location.origin}${this.href}`) || undefined,
+            element_type: "link",
+            content_category: "cta"
         });
     }
 }

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

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import { convertForDaylightSavings } from "dxUtils/dates";
 import {
     formattedDateDay,
     formattedDateHour,
@@ -10,6 +11,7 @@ import {
     formattedDateWeekday,
     formattedDateYear
 } from "typings/custom";
+import { DateTime } from "luxon";
 
 export default class FormattedDateTime extends LightningElement {
     @api weekday: formattedDateWeekday;
@@ -27,11 +29,19 @@ export default class FormattedDateTime extends LightningElement {
             return;
         }
 
-        this._unformattedDate = new Date(value);
+        this._unformattedDate = convertForDaylightSavings(value).toJSDate();
+
+        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();
-        this._formattedDate = this.formatDate(this._unformattedDate, options);
+        this._formattedDate = this.formatDate(
+            this._unformattedDate,
+            options as any
+        );
         return this._formattedDate;
     }
 
@@ -40,24 +50,23 @@ export default class FormattedDateTime extends LightningElement {
 
     formatDate(unformattedDate: Date, options: formattedDateOptions) {
         const locale = navigator.language;
-        let formattedDateTime = Intl.DateTimeFormat(locale, options).format(
-            unformattedDate
-        ) as String;
+
+        let formattedDateTime = DateTime.fromISO(unformattedDate?.toISOString())
+            .setLocale(locale)
+            .toLocaleString(options as any);
+
         formattedDateTime = this.updateDayPeriodFormatting(formattedDateTime);
         return formattedDateTime;
     }
 
-    updateDayPeriodFormatting(formattedDateTime: String) {
-        if (formattedDateTime.includes("AM")) {
-            formattedDateTime = formattedDateTime.replace(" AM", "am");
-        } else if (formattedDateTime.includes("PM")) {
-            formattedDateTime = formattedDateTime.replace(" PM", "pm");
-        }
-        return formattedDateTime;
+    updateDayPeriodFormatting(formattedDateTime: string) {
+        return formattedDateTime
+            .replace(/(\b|\d+)AM\b/, (_, part1) => `${part1}a.m.`)
+            .replace(/(\b|\d+)PM\b/, (_, part1) => `${part1}p.m.`);
     }
 
     getOptions() {
-        const options = {
+        return {
             weekday: this.weekday || undefined,
             year: this.year || undefined,
             month: this.month || undefined,
@@ -67,6 +76,5 @@ export default class FormattedDateTime extends LightningElement {
             second: this.second,
             timeZoneName: this.timeZoneName || undefined
         };
-        return options;
     }
 }

package/src/modules/dx/formattedRichText/formattedRichText.css

@@ -0,0 +1,32 @@
+:host {
+    --dx-c-formatted-rich-text-inline-link-color: var(--dx-g-blue-vibrant-40);
+    --dx-c-formatted-rich-text-inline-link-color-hover: var(
+        --dx-g-blue-vibrant-30
+    );
+}
+
+a {
+    color: var(--dx-c-formatted-rich-text-inline-link-color);
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+a:hover {
+    color: var(--dx-c-formatted-rich-text-inline-link-color-hover);
+}
+
+ol {
+    list-style-type: var(--dx-c-formatted-rich-text-list-style-type, disc);
+}
+
+ol ol {
+    list-style-type: var(
+        --dx-c-formatted-rich-text-list-style-type-secondary,
+        disc
+    );
+}
+
+@media screen and (min-width: 480px) {
+    .mobile-break {
+        display: none;
+    }
+}

package/src/modules/dx/formattedRichText/formattedRichText.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="container" lwc:dom="manual"></div>
+</template>

package/src/modules/dx/formattedRichText/formattedRichText.ts

@@ -0,0 +1,17 @@
+import { LightningElement, api } from "lwc";
+import { sanitizeHtml } from "dxUtils/sanitizeHtml";
+
+export default class FormattedRichText extends LightningElement {
+    @api value!: string;
+
+    private get sanitizedValue(): string {
+        return sanitizeHtml(this.value);
+    }
+    renderedCallback() {
+        const containerEl = this.template.querySelector(".container");
+
+        if (containerEl) {
+            containerEl.innerHTML = this.sanitizedValue;
+        }
+    }
+}

package/src/modules/dx/grid/grid.css

@@ -14,7 +14,12 @@
     /* This class intentionally left blank. */
 }
 
-@media (min-width: 600px) {
+.search-input {
+    margin-bottom: var(--dx-g-spacing-md);
+    width: 250px;
+}
+
+@media (min-width: 640px) {
     .col-two,
     .col-three,
     .col-four {
@@ -22,7 +27,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1024px) {
     .col-two-slim-left {
         grid-template-columns: var(--one-third-width) calc(
                 2 * var(--one-third-width) + var(--dx-g-page-grid-gap)

package/src/modules/dx/grid/grid.html

@@ -1,3 +1,18 @@
 <template>
+    <div class="search-input" lwc:if={isSearchable}>
+        <dx-input
+            class="search-box"
+            type="search"
+            placeholder={getSearchPlaceholder}
+            role="search"
+            aria-label="Search the below items"
+            icon-symbol="search"
+            size="small"
+            value={searchValue}
+            onchange={onInputChange}
+            shortcut-key="j"
+            clearable
+        ></dx-input>
+    </div>
     <div class={className}><slot onslotchange={onSlotChange}></slot></div>
 </template>

package/src/modules/dx/grid/grid.ts

@@ -4,6 +4,11 @@ import { GridVariant, LightningSlotElement } from "typings/custom";
 
 const DEFAULT_COLUMNS = "three";
 
+interface SlottedItem {
+    originalDiplayValue: string;
+    htmlElement: HTMLElement;
+}
+
 export default class Grid extends LightningElement {
     @api
     get columns() {
@@ -16,8 +21,69 @@ export default class Grid extends LightningElement {
         this._columns = value;
     }
 
+    @api searchPlaceholder?: string;
+
+    /*
+        The data passed in must be an array of elements equal to the number of items 
+        slotted into this grid. Each item in the array can either be a string, or an object.
+        In the second case, we will search on all the string values of these objects.
+    */
+    @api
+    set searchData(value: string) {
+        const data = JSON.parse(value);
+        this._searchData = data.map((item: any) =>
+            typeof item === "string"
+                ? item.toLowerCase()
+                : Object.values(item)
+                      .filter((e) => typeof e === "string")
+                      .join("")
+                      .toLowerCase()
+        );
+    }
+    get searchData(): string[] {
+        return this._searchData;
+    }
+    searchValue: string = "";
+
+    private get isSearchable(): boolean {
+        return (
+            Boolean(this.searchData) &&
+            this._itemCount > 1 &&
+            this.searchData.length === this._itemCount
+        );
+    }
+
+    private get getSearchPlaceholder(): string {
+        return this.searchPlaceholder ? this.searchPlaceholder : "Search";
+    }
+
+    private onInputChange(e: CustomEvent) {
+        this.searchValue = e.detail.toLowerCase();
+        this.displaySearchResults();
+    }
+
+    private displaySearchResults() {
+        if (this.searchValue) {
+            this._slottedItems?.forEach((item, index) => {
+                const searchDatum = this._searchData[index];
+                if (searchDatum && searchDatum.indexOf(this.searchValue) > -1) {
+                    item.htmlElement.style.display = item.originalDiplayValue;
+                } else {
+                    item.htmlElement.style.display = "none";
+                }
+            });
+        } else {
+            // show all items
+            this._slottedItems?.forEach((item) => {
+                item.htmlElement.style.display = item.originalDiplayValue;
+            });
+        }
+    }
+
     _columns!: GridVariant;
-    _itemCount: number | null = null;
+    _itemCount: number = 0;
+    _slottedItems?: SlottedItem[];
+    _searchData: string[] = [];
 
     private get className(): string {
         return cx("container", `col-${this.columns}`);
@@ -67,6 +133,16 @@ export default class Grid extends LightningElement {
     }
 
     onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
+        const slottedItems = (
+            e.target as LightningSlotElement
+        ).assignedElements();
+        this._itemCount = slottedItems.length;
+        this._slottedItems = slottedItems.map((item) => {
+            const htmlElement = item as HTMLElement;
+            return {
+                originalDiplayValue: htmlElement.style.display,
+                htmlElement: htmlElement
+            };
+        });
     }
 }

package/src/modules/dx/groupText/groupText.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;
@@ -76,12 +76,12 @@
 /* breakpoints tablet */
 
 @media screen and (max-width: 1024px) {
-    .title.dx-text-heading-2 {
+    .title.dx-text-display-2 {
         font-size: var(--dx-g-text-3xl);
         line-height: var(--dx-g-spacing-2xl);
     }
 
-    .subtitle.dx-text-heading-6 {
+    .subtitle.dx-text-display-8 {
         font-size: var(--dx-g-text-sm);
     }
 
@@ -90,15 +90,11 @@
         line-height: var(--dx-g-spacing-lg);
     }
 
-    .title.dx-text-heading-3 {
+    .title.dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-xl);
     }
 
-    .subtitle.dx-text-heading-7 {
-        font-size: var(--dx-g-text-xs);
-    }
-
     .body.dx-text-body-2 {
         font-size: var(--dx-g-text-sm);
         line-height: var(--dx-g-spacing-lg);