@salesforcedevs/dx-components 0.54.1 → 0.54.6-alpha-1

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -1,5 +1,5 @@
 import { api } from "lwc";
-import { ArchiveCard } from "base-elements/archiveCard";
+import { ArchiveCard } from "dxBaseElements/archiveCard";
 import cx from "classnames";
 
 export default class ExpandedCard extends ArchiveCard {

package/src/modules/dx/cardMinimal/cardMinimal.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -1,3 +1,3 @@
-import { ArchiveCard } from "base-elements/archiveCard";
+import { ArchiveCard } from "dxBaseElements/archiveCard";
 
 export default class MinimalCard extends ArchiveCard {}

package/src/modules/dx/cardNews/cardNews.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .dx-card-news {
     position: relative;

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 import {
     ButtonTextColor,
     CardNewsButtonType,
@@ -9,7 +9,7 @@ import {
     CardNewsSize,
     CardNewsTextContainerSize
 } from "typings/custom";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor?: string = "indigo-vibrant-40";

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-podcast-episode {
     display: flex;

package/src/modules/dx/cardSmall/cardSmall.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --heading-offset: var(--dx-g-spacing-sm);

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -6,7 +6,7 @@ import {
     IconSymbol,
     IconBadgeShape
 } from "typings/custom";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
+import { isSlotEmpty, stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardSmall extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-50";

package/src/modules/dx/cardTitle/cardTitle.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-card-title-color: var(--dx-g-text-heading-color);

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 .badge {
     --badge-size: var(--dx-g-spacing-5xl);

package/src/modules/dx/cardTrial/cardTrial.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-trial {
     position: relative;

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 export default class CardTrial extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-90";

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 .dx-play-button {
     position: absolute;

package/src/modules/dx/checkbox/checkbox.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 fieldset {
     display: grid;

package/src/modules/dx/checkboxGroup/checkboxGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;

package/src/modules/dx/codeBlock/codeBlock.css

@@ -1,5 +1,5 @@
-@import "helpers/code";
-@import "helpers/text";
+@import "dxHelpers/code";
+@import "dxHelpers/text";
 @import "./darkTheme.css";
 @import "./lightTheme.css";
 

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

@@ -1,12 +1,12 @@
 import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import Prism from "utils/prismjs";
+import Prism from "dxUtils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData
 } from "@sfdocs-internal/wires";
-import { track as gtmTrack } from "utils/analytics";
+import { track as gtmTrack } from "dxUtils/analytics";
 
 // Used por remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;

package/src/modules/dx/dropdown/dropdown.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .menu-nested::part(content) {
     padding-top: var(--dx-g-spacing-sm);

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,11 +1,11 @@
-import { Option, PopperPlacement } from "typings/custom";
+import { OptionWithNested, PopperPlacement } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
-import { deepmapOptions } from "utils/options";
-import { toJson } from "utils/normalizers";
+import { deepmapOptions } from "dxUtils/options";
+import { toJson } from "dxUtils/normalizers";
 
-interface DropdownOption extends Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .option {
     display: flex;

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

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { track } from "utils/analytics";
+import { OptionWithNested } from "typings/custom";
+import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
-    @api option!: Option;
+    @api option!: OptionWithNested;
     @api suppressGtmNavHeadings: boolean = false;
     @api keyValue!: string;
     @api active: boolean = false;

package/src/modules/dx/emptyState/emptyState.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-empty-state-background: var(--dx-g-gray-95);

package/src/modules/dx/feature/feature.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -1,7 +1,7 @@
-@import "helpers/button";
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     width: 100%;

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
 import { ImageAndLabel } from "../imageAndLabel";
 import svgs from "./svgs";
 

package/src/modules/dx/featuresList/featuresList.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .dx-text-heading-5 {
     display: inline-flex;

package/src/modules/dx/featuresList/featuresList.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { FeatureItem } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 /**
  * @element dx-features-list

package/src/modules/dx/filterMenu/filterMenu.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --dx-c-filter-menu-margin: 0;

package/src/modules/dx/footer/footer.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .content-container {
     padding: 0 var(--dx-g-page-padding-horizontal);

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toJson } from "utils/normalizers";
-import { FooterVariant, Option } from "typings/custom";
+import { FooterVariant, OptionWithLink } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 import {
     generalLinks,
     termsLinks,
@@ -9,7 +9,7 @@ import {
     privacyHref,
     intellectualHref
 } from "./links";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 const PATH = "/newsletter";
 const createNewsletterSignupHref = (email: string): string =>
@@ -31,7 +31,7 @@ export default class Footer extends LightningElement {
         this._locales = toJson(value);
     }
 
-    private _locales?: Option[] | null = null;
+    private _locales?: OptionWithLink[] | null = null;
     private termsLinks = termsLinks;
     private generalLinks = generalLinks;
     private socialLinks = socialLinks;

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

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/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.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;

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

@@ -1,9 +1,9 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
-import { track } from "utils/analytics";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 type OptionalLink = Link | null;
 

package/src/modules/dx/header/header.css

@@ -1,4 +1,4 @@
-@import "helpers/commonHeader";
+@import "dxHelpers/commonHeader";
 
 :host {
     --dx-c-header-search-width: 316px;

package/src/modules/dx/header/header.html

@@ -26,6 +26,7 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <dx-avatar-button></dx-avatar-button>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

package/src/modules/dx/header/header.ts

@@ -1,10 +1,10 @@
 import { api } from "lwc";
-import { HeaderBase } from "base-elements/headerBase";
-import { toJson } from "utils/normalizers";
-import type { Option } from "typings/custom";
+import type { OptionWithNested } from "typings/custom";
+import { HeaderBase } from "dxBaseElements/headerBase";
+import { toJson } from "dxUtils/normalizers";
 
 export default class Header extends HeaderBase {
-    private _breadcrumbs!: Option[];
+    private _breadcrumbs!: OptionWithNested[];
 
     @api
     get breadcrumbs() {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { OptionWithNested } from "typings/custom";
+import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

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

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

package/src/modules/dx/headerNav/headerNav.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 a {
     text-decoration: none;

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,7 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 /* DESKTOP */
 

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { PopoverRequestCloseType, Option } from "typings/custom";
-import { buildSearchEngine } from "utils/coveo";
+import { PopoverRequestCloseType, OptionWithLink } from "typings/custom";
+import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,
@@ -28,7 +28,7 @@ export default class HeaderSearch extends LightningElement {
         return this.mobile ? null : "desktop_search-container";
     }
 
-    private get suggestions(): Option[] {
+    private get suggestions(): OptionWithLink[] {
         if (this.searchState) {
             return this.searchState.suggestions.map(
                 ({ highlightedValue }: { highlightedValue: string }) => ({

package/src/modules/dx/helmet/helmet.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 span {
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/hr/hr.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);

package/src/modules/dx/icon/icon.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const fetches = new Map<string, Promise<any>>();
 

package/src/modules/dx/iconBadge/iconBadge.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/button";
 
 :host {
     --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);

package/src/modules/dx/input/input.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-input-background-active: white;

package/src/modules/dx/input/input.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils/devices";
+import { isMac } from "dxUtils/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

package/src/modules/dx/logo/logo.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);