@salesforcedevs/dx-components 0.54.2 → 0.54.7-alpha

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.2",
+    "version": "0.54.7-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -16,7 +16,6 @@
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
-        "lightning-base-components": "1.12.3-alpha",
         "lodash.get": "^4.4.2",
         "microtip": "0.2.2"
     },
@@ -25,6 +24,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "c06230bbb3bb9e9a03d3712d3e9c5677a579e7a2"
+    }
 }

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 { Breadcrumb, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
 type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
@@ -19,7 +19,7 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
+    @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
     @api title: string = "Salesforce";
     @api logo: boolean = false;
@@ -42,19 +42,22 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
         return this.navItems ? deepReducer(this.navItems) : {};
     }
 
@@ -82,16 +85,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

@@ -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);