@salesforcedevs/dx-components 0.21.0 → 0.24.0

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

@@ -0,0 +1,31 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    display: block;
+}
+
+a {
+    --dx-c-max-lines: var(--dx-c-title-max-lines, 3);
+
+    color: var(--dx-g-blue-vibrant-50);
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+a + * {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    align-items: center;
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    display: flex;
+    padding: var(--dx-g-spacing-smd) 0;
+}

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" href={href} target={target}>
+            <h4>{title}</h4>
+        </a>
+        <dx-type-badge
+            color={badgeColor}
+            size={badgeSize}
+            type="content-type"
+            value={contentType}
+        ></dx-type-badge>
+    </div>
+</template>

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

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+import { blogPostMock, podcastEpisodeMock } from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-card-minimal",
+    component: "dx-card-minimal"
+};
+
+export const BlogPost = (args: { title: string; href: string }) => html`
+    <dx-card-minimal
+        title="${args.title}"
+        href="${args.href}"
+    ></dx-card-minimal>
+`;
+
+BlogPost.args = {
+    title: blogPostMock.title,
+    href: blogPostMock.href
+};
+
+export const PodcastEpisode = (args: { title: string; href: string }) => html`
+    <dx-card-minimal
+        title="${args.title}"
+        href="${args.href}"
+        content-type="${podcastEpisodeMock.contentType}"
+    ></dx-card-minimal>
+`;
+
+PodcastEpisode.args = {
+    title: podcastEpisodeMock.title,
+    href: podcastEpisodeMock.href
+};

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

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

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

@@ -25,10 +25,6 @@ describe(TAG, () => {
     const oldNavigator = window.navigator;
     const oldError = console.error;
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     afterAll(() => {
         Object.assign(window.navigator, oldNavigator);
         Object.assign(console.error, oldError);

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

@@ -5,10 +5,6 @@ const TAG = "dx-grid";
 const render = createRenderComponent(TAG, Grid);
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     [
         [4, "four", "dynamic"],
         [8, "four", "dynamic"],
@@ -21,9 +17,8 @@ describe(TAG, () => {
     ].forEach(([numElements, calculatedColumns, columns]) =>
         it(`choses ${calculatedColumns} columns when there are ${numElements} elements`, () => {
             const element = render({ columns });
-            const slot: HTMLSlotElement = element.shadowRoot.querySelector(
-                "slot"
-            );
+            const slot: HTMLSlotElement =
+                element.shadowRoot.querySelector("slot");
             const div = document.createElement("div");
             slot.assignedElements = jest
                 .fn()

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

@@ -89,7 +89,6 @@ describe(TAG, () => {
     });
 
     afterEach(() => {
-        jest.clearAllMocks();
         subscribeCallback = null;
     });
 

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -1,10 +1,22 @@
 <template>
     <div if:false={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </div>
     <a if:true={href} href={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </a>
 </template>

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

@@ -16,10 +16,6 @@ describe(TAG, () => {
             global.console = { ...global.console, error: jest.fn() };
         });
 
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
         afterAll(() => {
             global.console = originalConsole;
         });
@@ -29,15 +25,13 @@ describe(TAG, () => {
 
             expect(console.error).not.toBeCalled();
 
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
 
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(1);
 
@@ -47,15 +41,13 @@ describe(TAG, () => {
         it("renders with api properties", () => {
             const component = render(mockProps);
             expect(console.error).not.toBeCalled();
-            const menuEl: HTMLElement = component.shadowRoot.querySelector(
-                ".popover-container"
-            );
+            const menuEl: HTMLElement =
+                component.shadowRoot.querySelector(".popover-container");
             expect(menuEl).not.toBeNull();
             expect(menuEl.classList).toHaveLength(1);
 
-            const popoverDiv: HTMLElement = menuEl.querySelector(
-                "div.popover"
-            )!;
+            const popoverDiv: HTMLElement =
+                menuEl.querySelector("div.popover")!;
             expect(popoverDiv).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(4);
             expect(popoverDiv.classList).toContain(
@@ -74,9 +66,8 @@ describe(TAG, () => {
 
             expect(console.error).not.toBeCalled();
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.classList).toHaveLength(2);
             expect(popoverDiv.classList).toContain("popover-fullwidth");
         });
@@ -89,9 +80,8 @@ describe(TAG, () => {
                 'The "width" and "full-width" properties cannot be provided simultaneously.'
             );
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                "div.popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector("div.popover");
             expect(popoverDiv.style).not.toBeNull();
             expect(popoverDiv.classList).toHaveLength(5);
             expect(popoverDiv.classList).toContain(
@@ -120,9 +110,8 @@ describe(TAG, () => {
 
         it("doesn't render menu content before interaction", async () => {
             const component = render();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(content).toBeNull();
 
@@ -130,9 +119,8 @@ describe(TAG, () => {
 
             await Promise.resolve();
 
-            const contentAfterOpen = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const contentAfterOpen =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(contentAfterOpen).not.toBeNull();
 
@@ -145,9 +133,8 @@ describe(TAG, () => {
 
             const renderComponent = createRenderComponent(TAG, Popover);
             const component = renderComponent();
-            const content = component.shadowRoot.querySelector(
-                ".popover-content"
-            );
+            const content =
+                component.shadowRoot.querySelector(".popover-content");
 
             expect(content).not.toBeNull();
         });
@@ -183,9 +170,12 @@ describe(TAG, () => {
         it("doesn't fire open if passed control is disabled", () => {
             const element = render();
 
-            const { slot: controlSlot, slottedElement } = mockSlottedElement<
-                HTMLButtonElement
-            >(element, "button", "control");
+            const { slot: controlSlot, slottedElement } =
+                mockSlottedElement<HTMLButtonElement>(
+                    element,
+                    "button",
+                    "control"
+                );
             expect(controlSlot.assignedElements).toBeCalledTimes(1);
             expect(slottedElement.ariaHasPopup).toBe("true");
             expect(slottedElement.style.cursor).toBe("cursor");
@@ -237,9 +227,8 @@ describe(TAG, () => {
             const closeEvent = jest.fn();
             component.addEventListener("close", closeEvent);
 
-            const popoverDiv: HTMLElement = component.shadowRoot.querySelector(
-                ".popover"
-            );
+            const popoverDiv: HTMLElement =
+                component.shadowRoot.querySelector(".popover");
             expect(popoverDiv).not.toBeNull();
 
             expect(component.open).toBe(true);

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

@@ -25,10 +25,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("desktop", () => {
         beforeEach(() => {
             unmockQueryParameter();

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

@@ -19,10 +19,6 @@ const GTM_EVENT_NAME = "custEv_leftNavLinkClick";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";
 
 describe(TAG, () => {
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("desktop", () => {
         describe("component render", () => {
             it("should render as expanded with all the elements that sidebar includes", () => {

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -10,9 +10,9 @@
         <dx-input
             class="search-box"
             type="search"
-            placeholder="Search this list..."
+            placeholder="Search"
             role="search"
-            aria-label="Content Search"
+            aria-label="Search in this guide"
             icon-symbol="search"
             size="small"
             value={value}

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

@@ -0,0 +1,52 @@
+import slackAdd from "dx/slackAdd";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-slack-add";
+const render = createRenderComponent(TAG, slackAdd);
+
+describe(TAG, () => {
+    it("renders the button linking to slack", () => {
+        const element = render();
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".slack-btn a");
+        expect(slackBtn).not.toBe(undefined);
+        return expect(slackBtn.length).toBe(1);
+    });
+
+    it("renders a button meeting all accesibilty requirements", () => {
+        const element = render();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders the inner button text correctly", () => {
+        const element = render({
+            innerText: "foobar"
+        });
+
+        const header = element.shadowRoot
+            .querySelectorAll(".container")
+            .item(0);
+        expect(header.textContent).toBe("Follow along with Slackfoobar");
+
+        const slackBtn = element.shadowRoot
+            .querySelectorAll(".slack-btn a")
+            .item(0);
+        return expect(slackBtn.textContent).toBe("foobar");
+    });
+
+    it("renders the header text correctly", () => {
+        const element = render({
+            headerText: "foobar"
+        });
+
+        const slackBtn = element.shadowRoot
+            .querySelectorAll(".slack-btn a")
+            .item(0);
+        expect(slackBtn.textContent).toBe("Add to Slack");
+
+        const header = element.shadowRoot
+            .querySelectorAll(".container")
+            .item(0);
+        return expect(header.textContent).toBe("foobarAdd to Slack");
+    });
+});

package/src/modules/dx/slackAdd/slackAdd.css

@@ -0,0 +1,93 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.container {
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.slack-cta-button {
+    align-items: center;
+    background-color: #fff;
+    border: 2px solid rgb(1, 118, 211);
+    border-radius: 4px;
+    display: inline-flex;
+    height: 48px;
+    justify-content: center;
+    text-decoration: none;
+    padding: 10px;
+    color: rgb(1, 118, 211);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+    line-height: 20px;
+}
+
+.podcast {
+    background-image: url("/assets/svg/slack-cta-podcast-background-left.svg"),
+        url("/assets/svg/slack-cta-podcast-background-right.svg");
+    background-size: 40% 40%;
+    background-position: 5% 25%, 95% 75%;
+}
+
+.blog {
+    background-image: url("/assets/svg/slack-cta-blog-background-left.svg"),
+        url("/assets/svg/slack-cta-blog-background-right.svg");
+    background-position: 20% 25%, 80% 75%;
+}
+
+.dx-text-heading-4 {
+    font-size: var(--dx-g-text-lg);
+    max-width: 40%;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        background-position: -100% 25%, 180% 75%;
+    }
+
+    .podcast.container {
+        background-size: 75% 60%;
+    }
+
+    .blog.container {
+        background-size: 75% 20%;
+    }
+
+    .dx-text-heading-4 {
+        max-width: 28ex;
+        font-size: var(--dx-g-text-lg);
+    }
+
+    .slack-btn a {
+        display: inline-flex;
+        margin: 4px auto;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        min-height: 242px;
+        padding-top: 22px;
+    }
+
+    .slack-btn a {
+        display: inline-flex;
+        margin: 22px 13px 8px 13px;
+    }
+
+    .slack-btn img {
+        height: 20px;
+        padding-right: 10px;
+    }
+}

package/src/modules/dx/slackAdd/slackAdd.html

@@ -0,0 +1,17 @@
+<template>
+    <div class={containerClass}>
+        <h2 class="dx-text-heading-4">{headerText}</h2>
+        <div class="slack-btn">
+            <a
+                class="slack-cta-button"
+                href="https://slack.com/oauth/v2/authorize?scope=chat%3Awrite%2Ccommands&amp;user_scope=&amp;redirect_uri=https%3A%2F%2Fdsc-slack-app.herokuapp.com%2Fslack%2Foauth_redirect&amp;client_id=1814240140212.2864842743411"
+            >
+                <img
+                    src="/assets/svg/slack-logo.svg"
+                    alt="install slack extension"
+                />
+                {innerText}
+            </a>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,25 @@
+export default {
+    title: "dx/dx-slack-add",
+    component: "dx-slack-add"
+};
+
+const createStyles = () => `
+    <style>
+        h2 {
+            font-weight: bold;
+            font-size: 24px;
+            margin: 10px 0 30px 0;
+        }
+    </style>
+`;
+
+export const Base = () => `
+    ${createStyles()}
+    <h2>Add to Slack</h2>
+
+    <dx-slack-add header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-add>
+    
+    <dx-slack-add header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-add>
+
+    <dx-slack-add header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-add>
+`;

package/src/modules/dx/slackAdd/slackAdd.ts

@@ -0,0 +1,13 @@
+import { LightningElement, api } from "lwc";
+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;
+
+    get containerClass() {
+        return cx("container", this.background);
+    }
+}

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

@@ -14,10 +14,6 @@ describe(TAG, () => {
         global.console = { ...global.console, error: jest.fn() };
     });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     afterAll(() => {
         global.console = originalConsole;
     });
@@ -25,9 +21,8 @@ describe(TAG, () => {
     it("renders dx-icon-badge for each social link", () => {
         const component = render();
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
 
         const [facebookLink, twitterLink, linkedinLink] = links;
@@ -50,9 +45,8 @@ describe(TAG, () => {
         expect(linkedinLink.target).toBe("_blank");
         expect(linkedinLink.title).toBe("Linkedin");
 
-        const iconBadge: Array<IconBadge> = component.shadowRoot.querySelectorAll(
-            "dx-icon-badge"
-        );
+        const iconBadge: Array<IconBadge> =
+            component.shadowRoot.querySelectorAll("dx-icon-badge");
         expect(iconBadge).toHaveLength(3);
 
         const [facebookIcon, twitterIcon, linkedinIcon] = iconBadge;
@@ -66,9 +60,8 @@ describe(TAG, () => {
         expect(linkedinIcon.sprite).toBe("brand");
         expect(linkedinIcon.symbol).toBe("linkedin-in");
 
-        const detailSection = component.shadowRoot.querySelector(
-            ".details-section"
-        );
+        const detailSection =
+            component.shadowRoot.querySelector(".details-section");
         expect(detailSection).toBeNull();
 
         return expect(component).toBeAccessible();
@@ -78,9 +71,8 @@ describe(TAG, () => {
         const expectedTarget = "_self";
         const component = render({ linksTarget: expectedTarget });
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe(expectedTarget));
 
@@ -93,9 +85,8 @@ describe(TAG, () => {
         const testTarget = "not_valid_at_all";
         const component = render({ linksTarget: testTarget });
 
-        const links: Array<HTMLAnchorElement> = component.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const links: Array<HTMLAnchorElement> =
+            component.shadowRoot.querySelectorAll("a");
         expect(links).toHaveLength(3);
         links.forEach(({ target }) => expect(target).toBe("_blank"));
 
@@ -110,9 +101,8 @@ describe(TAG, () => {
     it("renders details section", () => {
         const component = render({ details: "Test|Another Test" });
 
-        const details: Array<HTMLElement> = component.shadowRoot.querySelectorAll(
-            ".details-section span"
-        );
+        const details: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll(".details-section span");
         expect(details).toHaveLength(2);
 
         const [testDetail, anotherTestDetail] = details;

package/src/modules/dx/topics/__tests__/mockProps.ts

@@ -0,0 +1,3 @@
+export default {
+    topics: ["mobile", "performance"]
+};

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

@@ -0,0 +1,31 @@
+import Topics from "dx/topics";
+import { createRenderComponent } from "utils/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-topics";
+const render = createRenderComponent(TAG, Topics);
+describe(TAG, () => {
+    it("renders", () => {
+        const component = render(mockProps);
+        expect(component.topics).toEqual(mockProps.topics);
+
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(3);
+
+        const [expectedFirst, expectedSecond] = mockProps.topics;
+        const [first, dot, second] = spans;
+        expect(first.textContent).toBe(expectedFirst);
+        expect(second.textContent).toBe(expectedSecond);
+        expect(dot.classList).toContain("dot-separator");
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("doesn't render any span if list is empty", () => {
+        const component = render();
+        const spans: Array<HTMLElement> =
+            component.shadowRoot.querySelectorAll("span");
+        expect(spans).toHaveLength(0);
+    });
+});

package/src/modules/dx/topics/topics.css

@@ -0,0 +1,25 @@
+:host {
+    display: block;
+}
+
+.container {
+    align-items: center;
+    color: var(--dx-g-blue-vibrant-20);
+    font-size: var(--dx-g-text-xs);
+    font-family: var(--dx-g-font-display);
+    font-weight: var(--dx-g-font-demi);
+    display: flex;
+    gap: var(--dx-g-spacing-sm);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+.dot-separator {
+    --size: 4px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-blue-vibrant-20);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}