@salesforcedevs/dx-components 0.10.1-alpha.13 → 0.10.1-alpha.133

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

@@ -8,15 +8,12 @@ const render = createRenderComponent(TAG, EmptyState);
 describe(TAG, () => {
     it("renders", () => {
         const element = render(mockProps);
-        const container: HTMLElement = element.shadowRoot.querySelector(
-            ".container"
-        );
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h3"
-        );
-        const renderedSubTitle: HTMLElement = element.shadowRoot.querySelector(
-            "p"
-        );
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const renderedTitle: HTMLElement =
+            element.shadowRoot.querySelector("h3");
+        const renderedSubTitle: HTMLElement =
+            element.shadowRoot.querySelector("p");
         const image: HTMLImageElement = element.shadowRoot.querySelector("img");
 
         expect(renderedTitle).not.toBeNull();
@@ -29,4 +26,27 @@ describe(TAG, () => {
 
         return expect(element).toBeAccessible();
     });
+
+    it("renders as the large variant by default", () => {
+        const element = render(mockProps);
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
+        expect(container.classList).toContain("size-large");
+        expect(container.classList).toHaveLength(2);
+        expect(image.src).not.toContain("-small.svg");
+    });
+
+    it("renders as the small variant when specified", () => {
+        const element = render({
+            ...mockProps,
+            size: "small"
+        });
+        const container: HTMLElement =
+            element.shadowRoot.querySelector(".container");
+        const image: HTMLImageElement = element.shadowRoot.querySelector("img");
+        expect(container.classList).toContain("size-small");
+        expect(container.classList).toHaveLength(2);
+        expect(image.src).toContain("-small.svg");
+    });
 });

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

@@ -24,6 +24,11 @@ img {
     min-width: var(--dx-c-empty-state-image-width);
 }
 
+.size-small img {
+    width: calc(100% - 40px);
+    min-width: calc(100% - 40px);
+}
+
 .text {
     position: absolute;
     top: 35%;
@@ -38,10 +43,19 @@ img {
     padding: 0 var(--dx-g-spacing-xl);
 }
 
+.size-small .text {
+    top: 40%;
+}
+
 .title {
     font-size: var(--dx-g-text-2xl);
 }
 
+.size-small .title {
+    font-size: var(--dx-g-text-base);
+    white-space: nowrap;
+}
+
 .subtitle {
     padding-top: var(--dx-g-spacing-sm);
     color: var(--dx-g-text-heading-color);

package/src/modules/dx/emptyState/emptyState.html

@@ -1,6 +1,6 @@
 <template>
-    <div class="container" part="container">
-        <img src="/assets/svg/docs-empty-state.svg" alt="Mountains" />
+    <div class={containerClassName} part="container">
+        <img src={imageAssetPath} alt="Mountains" />
         <div class="text">
             <h3 class="title dx-text-heading-3">{title}</h3>
             <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>

package/src/modules/dx/emptyState/emptyState.stories.ts

@@ -20,6 +20,9 @@ const createStyles = () => html`
             width: 300px;
             display: block;
         }
+        .small-container {
+            width: 250px;
+        }
     </style>
 `;
 
@@ -34,4 +37,9 @@ export const Base = () => html`
 
     ${title("No subtitle and customized with style hooks")}
     <dx-empty-state id="styled" title="No Results"></dx-empty-state>
+
+    ${title("Small variant")}
+    <div class="small-container">
+        <dx-empty-state title="No Results" size="small"></dx-empty-state>
+    </div>
 `;

package/src/modules/dx/emptyState/emptyState.ts

@@ -1,6 +1,20 @@
 import { LightningElement, api } from "lwc";
+import { EmptyStateSize } from "typings/custom";
 
 export default class EmptyState extends LightningElement {
     @api title: string = "";
     @api subtitle?: string | null = null;
+    @api size?: EmptyStateSize = "large";
+
+    get containerClassName() {
+        return `container ${
+            !this.size || this.size === "large" ? "size-large" : "size-small"
+        }`;
+    }
+
+    get imageAssetPath() {
+        return `/assets/svg/docs-empty-state${
+            this.size === "small" ? "-small" : ""
+        }.svg`;
+    }
 }

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

@@ -45,7 +45,7 @@ export const generalLinksRaw = [
         label: "Community",
         options: [
             {
-                href: "https://trailblazers.salesforce.com/",
+                href: "https://trailhead.salesforce.com/trailblazer-community/feed",
                 label: "Trailblazer Community"
             },
             {
@@ -90,13 +90,11 @@ export const intellectualHref =
 export const termsLinks = [
     { href: privacyHref, label: "Privacy Statement" },
     {
-        href:
-            "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
+        href: "https://trailblazer.me/resource/documents/documents/pdf/TermsOfUse_en_US.pdf",
         label: "Terms of Use"
     },
     {
-        href:
-            "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
+        href: "https://www.salesforce.com/company/privacy/full_privacy/#nav_info",
         label: "Use of Cookies"
     },
     { href: "https://trust.salesforce.com/en/", label: "Trust" }

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

@@ -11,9 +11,7 @@ describe(TAG, () => {
             const element = render({ navItems });
 
             const items = element.shadowRoot.querySelectorAll(".nav-list-item");
-            const dropdownItems = element.shadowRoot.querySelectorAll(
-                "dx-header-nav-option"
-            );
+            const dropdownItems = element.shadowRoot.querySelectorAll("dx-tab");
 
             // items with more options render something different on mobile and desktop whose display is toggled by `display: none;`
             const expectedItemLength =
@@ -34,7 +32,7 @@ describe(TAG, () => {
             const mockOpenNav = jest.fn();
             element.addEventListener("requestopennavmenu", mockOpenNav);
             const navOption: HTMLElement = element.shadowRoot.querySelector(
-                "dx-header-nav-option.nav-list-item-nav-menu"
+                "dx-tab.nav-list-item-nav-menu"
             );
             expect(navOption).not.toBeNull();
             navOption.click();

package/src/modules/dx/headerNav/headerNav.html

@@ -3,13 +3,13 @@
         <ul class="nav-list">
             <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
-                    <dx-header-nav-option
+                    <dx-tab
                         if:false={navItem.options}
                         is-active={navItem.isActive}
                         label={navItem.label}
                         href={navItem.link.href}
                         variant={variant}
-                    ></dx-header-nav-option>
+                    ></dx-tab>
 
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
@@ -23,21 +23,23 @@
                         value={pathname}
                         value-path="link.href"
                     >
-                        <dx-header-nav-option
+                        <dx-tab
                             label={navItem.label}
                             variant={variant}
-                        ></dx-header-nav-option>
+                            use-icon
+                        ></dx-tab>
                     </dx-dropdown>
 
                     <!-- MOBILE "MORE CONTENT" NAV ITEM -->
-                    <dx-header-nav-option
+                    <dx-tab
                         if:true={navItem.options}
                         class="nav-list-item-nav-menu"
                         data-id={navItem.id}
                         label={navItem.label}
+                        use-icon
                         variant={variant}
                         onclick={requestOpenNavMenu}
-                    ></dx-header-nav-option>
+                    ></dx-tab>
                 </li>
             </template>
         </ul>

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
-import { HeaderNavVariant, Option } from "typings/custom";
+import { TabVariant, Option } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
-    @api variant: HeaderNavVariant = "default";
+    @api variant: TabVariant = "default";
     @api ariaLabel: string = "Navigation Bar";
 
     @api

package/src/modules/dx/lazy/lazy.ts

@@ -2,13 +2,6 @@ import { LightningElement, api } from "lwc";
 
 import { LazyMode } from "typings/custom";
 
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
 /**
  * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
  * Currently BackgroundTasksAPI is supported by all major browsers

package/src/modules/dx/newsletterForm/newsletterForm.html

@@ -4,9 +4,11 @@
         onchange={handleChange}
         onkeydown={handleKeyDown}
     >
-        <h4 class="dx-text-heading-8">
-            Sign up now to receive the newsletter.
-        </h4>
+        <slot name="form-heading">
+            <h4 class="newsletter-form-heading dx-text-heading-8">
+                Sign up now to receive the newsletter.
+            </h4>
+        </slot>
         <dx-input
             name="fname"
             value={firstName}