@salesforcedevs/dx-components 0.26.1 → 0.27.1

package/lwc.config.json

@@ -49,6 +49,7 @@
         "dx/interactiveImage",
         "dx/lazy",
         "dx/logo",
+        "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
         "dx/podcastPlayer",
@@ -80,7 +81,7 @@
         "helpers/reset",
         "helpers/table",
         "helpers/text",
-        "utils-internal/headerBase",
+        "base-elements/headerBase",
         "utils/normalizers",
         "utils/highlight"
     ]

package/package.json

@@ -1,15 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.26.1",
+    "version": "0.27.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
         "node": ">= 14.x"
     },
-    "files": [
-        "src/",
-        "lwc.config.json"
-    ],
     "publishConfig": {
         "access": "public"
     },
@@ -29,5 +25,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "2a51ec546bb18ade7d60d2591d4402a5512d89a0"
+    "gitHead": "1d34b413562745177b687c499afd1395f766c397"
 }

package/src/modules/dx/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils-internal/wordpress";
+import { fetchWordpressPosts } from "utils/wordpress";
 import { normalizePost } from "utils/normalizers";
 
 type BlogPost = {

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 import { track } from "dx/instrumentation";
 
 export default class CardCallout extends LightningElement {

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

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-internal/slot";
+import { stopPropagationOnSlotted } from "utils/slot";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 import {
     CardNewsButtonType,
     CardNewsImagePlacement,

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "utils-internal/wordpress";
+import { fetchWordpressPosts } from "utils/wordpress";
 import { normalizeEpisode } from "utils/normalizers";
 
 type PodcastEpisode = {

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

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

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

@@ -1,7 +1,7 @@
 import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import Prism from "utils-internal/prismjs";
+import Prism from "utils/prismjs";
 import {
     getLocalStorageData,
     setLocalStorageData

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

@@ -2,7 +2,7 @@ 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-internal/options";
+import { deepmapOptions } from "utils/options";
 import { toJson } from "utils/normalizers";
 
 interface DropdownOption extends Option {

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { api } from "lwc";
-import { HeaderBase } from "utils-internal/headerBase";
+import { HeaderBase } from "base-elements/headerBase";
 import { toJson } from "utils/normalizers";
 import type { Option } from "typings/custom";
 

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-internal/options";
+import { deepmapOptions } from "utils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;

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-internal/coveo";
+import { buildSearchEngine } from "utils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,

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-internal/css";
+import { toDxColor } from "utils/css";
 
 const fetches = new Map<string, Promise<any>>();
 

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-internal/css";
+import { toDxColor } from "utils/css";
 
 const validShapes = ["square", "circle"];
 

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-internal/devices";
+import { isMac } from "utils/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

package/src/modules/dx/modalDrawer/modalDrawer.css

@@ -0,0 +1,40 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+    --dx-c-modal-padding-around: var(--dx-g-spacing-smd);
+    --dx-c-modal-height: calc(100vh - var(--dx-c-modal-padding-around) * 2);
+}
+
+dx-button {
+    display: block;
+    margin-left: auto;
+}
+
+.modal-drawer_container {
+    background-color: white;
+    height: var(--dx-c-modal-height);
+    left: 0;
+    padding: var(--dx-c-modal-padding-around);
+    position: fixed;
+    transform: translateX(-100%);
+    transition: transform 0.4s ease;
+    top: 0;
+    width: inherit;
+    z-index: var(--dx-c-modal-drawer-z-index);
+}
+
+.modal-drawer_container.modal-drawer_active {
+    transform: translateX(0);
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -0,0 +1,11 @@
+<template>
+    <div class={containerClass}>
+        <slot></slot>
+        <dx-button onclick={handleCloseModal}>Done</dx-button>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleCloseModal}
+    ></div>
+</template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -0,0 +1,27 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "utils/normalizers";
+
+export default class ModalDrawer extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    handleCloseModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+}

package/src/modules/dx/podcastSubscription/podcastSubscription.css

@@ -49,8 +49,7 @@
 @media screen and (min-width: 768px) {
     .container {
         background-image: url("/assets/svg/podcast-subscription-clouds.svg");
-        min-height: 242px;
-        padding-top: 22px;
+        min-height: 230px;
     }
 
     .badges {

package/src/modules/dx/popover/popover.ts

@@ -8,7 +8,7 @@ import {
 import { createPopper } from "@popperjs/core";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils-internal/seo";
+import { isPrerender } from "utils/seo";
 
 const isEventOutsideElements = (
     e: Event,

package/src/modules/dx/section/section.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils-internal/css";
+import { toDxColor } from "utils/css";
 
 export default class Section extends LightningElement {
     @api backgroundColor?: string | null = "transparent";

package/src/modules/dx/sidebar/sidebar.ts

@@ -6,7 +6,7 @@ import {
     SidebarGtmAction,
     SidebarSearchResult
 } from "typings/custom";
-import { getSidebarSearchParams } from "utils-internal/coveo";
+import { getSidebarSearchParams } from "utils/coveo";
 import { toJson } from "utils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
 

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -14,11 +14,8 @@ import {
     SearchAppState,
     loadQueryActions
 } from "@coveo/headless";
-import {
-    buildSearchEngine,
-    getSidebarSearchParams
-} from "utils-internal/coveo";
-import { RecentSearches } from "utils-internal/recentSearches";
+import { buildSearchEngine, getSidebarSearchParams } from "utils/coveo";
+import { RecentSearches } from "utils/recentSearches";
 import { toJson } from "utils/normalizers";
 import {
     Option,

package/src/modules/dx/slackCta/slackCta.css

@@ -18,12 +18,21 @@
 .podcast {
     background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
         url("/assets/svg/slack-cta-podcast-background-right.svg");
-    background-position: 20% 25%, 80% 75%;
+    background-position: 20% 0%, 80% 100%;
+    padding-top: 20px;
+    margin-top: -20px;
+    padding-bottom: var(--dx-g-spacing-2xl);
+    margin-bottom: calc(var(--dx-g-spacing-2xl) * -1);
 }
 
 .dx-text-heading-4 {
-    font-size: var(--dx-g-text-lg);
-    max-width: 40%;
+    font-size: var(--dx-g-text-xl);
+    max-width: 370px;
+}
+@media screen and (max-width: 1000px) {
+    .podcast {
+        background-position: 10% 10%, 90% 100%;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -31,11 +40,8 @@
         max-width: 28ex;
         font-size: var(--dx-g-text-lg);
     }
-}
 
-@media screen and (min-width: 768px) {
-    .container {
-        min-height: 242px;
-        padding-top: 22px;
+    .podcast {
+        background-image: none;
     }
 }

package/src/modules/dx/slackCta/slackCta.html

@@ -1,9 +1,9 @@
 <template>
     <div class={containerClass}>
-        <h2 class="dx-text-heading-4">{headerText}</h2>
+        <h2 class="dx-text-heading-4"><slot></slot></h2>
 
         <dx-button
-            size="large"
+            size="small"
             variant="secondary"
             icon-symbol="slack"
             icon-sprite="salesforcebrand"

package/src/modules/dx/slackCta/slackCta.ts

@@ -3,7 +3,6 @@ import { SlackCtaBackgroundVariant } from "typings/custom";
 import cx from "classnames";
 
 export default class SlackAdd extends LightningElement {
-    @api headerText?: string = "Follow along with Slack";
     @api innerText?: string = "Add to Slack";
     @api background?: SlackCtaBackgroundVariant;
 

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -7,7 +7,7 @@ import {
     BadgeType,
     Brand
 } from "typings/custom";
-import { colorToDxColors } from "utils-internal/css";
+import { colorToDxColors } from "utils/css";
 
 const DEFAULT_TYPE = "typebadge_metadata";
 const VALID_BRANDS: Array<Brand> = [

package/src/modules/utils/highlight/highlight.ts

@@ -1,4 +1,4 @@
-import { createSearchRegExp } from "utils-internal/regexps";
+import { createSearchRegExp } from "utils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 

package/src/modules/dx/banner/__tests__/banner.test.ts

@@ -1,33 +0,0 @@
-import Banner from "dx/banner";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-banner";
-const render = createRenderComponent(TAG, Banner);
-
-describe(TAG, () => {
-    it("renders banner component", () => {
-        const element = render();
-
-        const innerContainer =
-            element.shadowRoot.querySelectorAll(".container_inner");
-
-        expect(innerContainer).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders custom banner markup in the banner", () => {
-        const element = render({
-            bannerMarkup: "Give feedback about our new site"
-        });
-
-        const bannerContainer =
-            element.shadowRoot.querySelector(".info-container");
-
-        return Promise.resolve().then(() => {
-            expect(bannerContainer.innerHTML).toContain(
-                "Give feedback about our new site"
-            );
-        });
-    });
-});

package/src/modules/dx/brandThemeProvider/__tests__/brandThemeProvider.test.ts

@@ -1,49 +0,0 @@
-import BrandThemeProvider, { toCss } from "dx/brandThemeProvider";
-import { createRenderComponent } from "utils-internal/tests";
-import brandCssVars from "../brandCssVars";
-
-const TAG = "dx-brand-theme-provider";
-const render = createRenderComponent(TAG, BrandThemeProvider);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render();
-        return expect(element).toBeAccessible();
-    });
-
-    it("all css variables are accounted for", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        brandCssVars.forEach((v: string) => {
-            expect(textContent).toContain(
-                `${v}: var(${v.replace("current", brand)});`
-            );
-        });
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a style element with textcontent that matches the output from the tocss fn()", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const expectedTextContent = toCss(brand);
-        const style = element.shadowRoot.querySelector("style");
-        const { textContent } = style.childNodes[0];
-        expect(textContent).toEqual(expectedTextContent);
-        return expect(element).toBeAccessible();
-    });
-
-    it("keeps one style element with one childnode at a time", () => {
-        const brand = "commerce";
-        const element = render({ brand });
-
-        const styles = element.shadowRoot.querySelectorAll("style");
-        expect(styles.length).toEqual(1);
-        expect(Array.from(styles[0].childNodes).length).toEqual(1);
-        return expect(element).toBeAccessible();
-    });
-});