@salesforcedevs/dx-components 0.54.1 → 0.54.6

package/lwc.config.json

@@ -1,8 +1,6 @@
 {
     "modules": [{ "dir": "src/modules" }],
     "expose": [
-        "base-elements/headerBase",
-        "base-elements/matchMediaElement",
         "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
@@ -69,22 +67,24 @@
         "dx/typeBadge",
         "dx/typeBadgeGroup",
         "dx/vimeoPlayer",
-        "helpers/animations",
-        "helpers/button",
-        "helpers/card",
-        "helpers/code",
-        "helpers/commonHeader",
-        "helpers/reset",
-        "helpers/table",
-        "helpers/text",
-        "utils/analytics",
-        "utils/constants",
-        "utils/coveo",
-        "utils/dates",
-        "utils/highlight",
-        "utils/normalizers",
-        "utils/queryCoordinator",
-        "utils/recentSearches",
-        "utils/wordpress"
+        "dxBaseElements/headerBase",
+        "dxBaseElements/matchMediaElement",
+        "dxHelpers/animations",
+        "dxHelpers/button",
+        "dxHelpers/card",
+        "dxHelpers/code",
+        "dxHelpers/commonHeader",
+        "dxHelpers/reset",
+        "dxHelpers/table",
+        "dxHelpers/text",
+        "dxUtils/analytics",
+        "dxUtils/constants",
+        "dxUtils/coveo",
+        "dxUtils/dates",
+        "dxUtils/highlight",
+        "dxUtils/normalizers",
+        "dxUtils/queryCoordinator",
+        "dxUtils/recentSearches",
+        "dxUtils/wordpress"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.54.1",
+    "version": "0.54.6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "2261fe819c0a82d687f1fe0bb9fe2f7dd6e73161"
+    "gitHead": "643dd94de9c0f755960b748bdb425720f4ad53f3"
 }

package/src/modules/dx/banner/banner.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .container {
     --primary-color: var(--dx-g-cloud-blue-vibrant-50);
@@ -42,5 +42,5 @@
 
 .container dx-icon {
     margin-right: var(--dx-g-spacing-sm);
-    margin-top:var(  --dx-g-spacing-2xs)
+    margin-top: var(--dx-g-spacing-2xs);
 }

package/src/modules/dx/breadcrumbs/breadcrumbs.css

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

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Breadcrumb, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
 type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
@@ -82,16 +82,14 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map(
-            (breadcrumb, i): NormalizedBreadcrumb => {
-                const last = i === length - 1;
-                return {
-                    ...breadcrumb,
-                    asLink: this.hideCurrentLocation || !last,
-                    last
-                };
-            }
-        );
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/button/button.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     width: min-content;
@@ -108,6 +108,15 @@
     width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
 }
 
+.button.size-hero {
+    font-size: var(--dx-g-text-lg);
+    height: 52px;
+}
+
+.button.size-hero.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
 /* primary */
 
 .button.variant_primary {

package/src/modules/dx/button/button.ts

@@ -17,7 +17,7 @@ export default class Button extends LightningElement {
     @api iconSymbol?: IconSymbol;
     @api iconPosition?: "right" | "left" = "right";
     @api loading: boolean = false;
-    @api size: "large" | "small" = "small";
+    @api size: "large" | "hero" | "small" = "small";
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 dx-card-content {
     --dx-c-body-max-lines: 3;

package/src/modules/dx/cardCallout/cardCallout.css

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

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
-import { track } from "utils/analytics";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
 
 export default class CardCallout extends LightningElement {
     @api backgroundColor: string = "indigo-vibrant-40";

package/src/modules/dx/cardContent/cardContent.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     /* because this is used within other cards */

package/src/modules/dx/cardContent/cardContent.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 { toDxColor } from "utils/css";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toDxColor } from "dxUtils/css";
 
 export default class CardContent extends LightningElement {
     @api authorHref?: string | null = null;

package/src/modules/dx/cardDemo/cardDemo.css

@@ -1 +1 @@
-@import "helpers/card";
+@import "dxHelpers/card";

package/src/modules/dx/cardDocs/cardDocs.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --dx-c-heading-max-lines: 4;

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { stopPropagationOnSlotted } from "utils/slot";
+import { stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;

package/src/modules/dx/cardEvent/cardEvent.css

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

package/src/modules/dx/cardExpanded/cardExpanded.css

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

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

@@ -2,8 +2,8 @@ import { Option, 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 {
     // link that gets shown as a highlighted link at end of option group

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,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Option } from "typings/custom";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 
 export default class DropdownOption extends LightningElement {
     @api option!: Option;

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,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import { FooterVariant, Option } from "typings/custom";
 import {
     generalLinks,
@@ -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 =>

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.ts

@@ -1,6 +1,6 @@
 import { api } from "lwc";
-import { HeaderBase } from "base-elements/headerBase";
-import { toJson } from "utils/normalizers";
+import { HeaderBase } from "dxBaseElements/headerBase";
+import { toJson } from "dxUtils/normalizers";
 import type { Option } from "typings/custom";
 
 export default class Header extends HeaderBase {