@salesforcedevs/dx-components 0.23.0 → 0.25.0

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

@@ -0,0 +1,52 @@
+import slackCta from "dx/slackCta";
+import { createRenderComponent } from "utils-internal/tests";
+
+const TAG = "dx-slack-cta";
+const render = createRenderComponent(TAG, slackCta);
+
+describe(TAG, () => {
+    it("renders the button linking to slack", () => {
+        const element = render();
+
+        const slackBtn = element.shadowRoot.querySelectorAll(".slack-cta-btn");
+        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-cta-btn")
+            .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-cta-btn")
+            .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/slackCta/slackCta.css

@@ -0,0 +1,46 @@
+@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;
+}
+
+.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%;
+}
+
+.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%;
+    }
+
+    .dx-text-heading-4 {
+        max-width: 28ex;
+        font-size: var(--dx-g-text-lg);
+    }
+}
+
+@media screen and (min-width: 768px) {
+    .container {
+        min-height: 242px;
+        padding-top: 22px;
+    }
+}

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

@@ -0,0 +1,6 @@
+<template>
+    <div class={containerClass}>
+        <h2 class="dx-text-heading-4">{headerText}</h2>
+        <dx-slack-button class="slack-cta-btn">{innerText}</dx-slack-button>
+    </div>
+</template>

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

@@ -0,0 +1,25 @@
+export default {
+    title: "dx/dx-slack-cta",
+    component: "dx-slack-cta"
+};
+
+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-cta header-text="Get notified of new episodes with the new Salesforce Developers Slack app" background="podcast"></dx-slack-cta>
+    
+    <dx-slack-cta header-text="Get the latest Salesforce Developer posts exactly how you want." inner-text="Send posts to Slack" background="blog"></dx-slack-cta>
+
+    <dx-slack-cta header-text="Get notified of new events with the new Salesforce Developers Slack app"></dx-slack-cta>
+`;

package/src/modules/dx/slackCta/slackCta.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

@@ -1,6 +1,6 @@
 import Socials from "dx/socials";
 import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-socials";
 const render = createRenderComponent(TAG, Socials);

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

@@ -1,5 +1,5 @@
 import Spinner from "dx/spinner";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-spinner";
 const render = createRenderComponent(TAG, Spinner);

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

@@ -1,7 +1,7 @@
 import Tab from "dx/tab";
 import Icon from "dx/icon";
 import { track } from "dx/instrumentation";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 jest.mock("dx/instrumentation");
 

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

@@ -1,6 +1,6 @@
 import Button from "dx/button";
 import Toc from "dx/toc";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-toc";
@@ -11,12 +11,10 @@ describe(TAG, () => {
         const element = render(mockProps);
 
         const container: HTMLElement = element.shadowRoot.querySelector(".toc");
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h2"
-        );
-        const button: Button = element.shadowRoot.querySelector(
-            ".toggle-button"
-        );
+        const renderedTitle: HTMLElement =
+            element.shadowRoot.querySelector("h2");
+        const button: Button =
+            element.shadowRoot.querySelector(".toggle-button");
         expect(renderedTitle).not.toBeNull();
         expect(container).not.toBeNull();
         expect(renderedTitle.textContent).toEqual(mockProps.title);
@@ -27,9 +25,8 @@ describe(TAG, () => {
     it("renders table of contents buttons, and the first one is selected", () => {
         const element = render(mockProps);
 
-        const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "a"
-        );
+        const optionsListComponent: Array<HTMLElement> =
+            element.shadowRoot.querySelectorAll("a");
         expect(optionsListComponent).toHaveLength(mockProps.options.length);
         expect(optionsListComponent[0].className).toEqual(
             "content-button selected"
@@ -59,9 +56,8 @@ describe(TAG, () => {
         const element = render({ ...mockProps });
 
         return Promise.resolve().then(() => {
-            const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const optionsListComponent: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             optionsListComponent.forEach((e) => {
                 if (e.getAttribute("contentid") === mockProps.value) {
                     expect(e.className).toEqual("content-button selected");
@@ -75,9 +71,8 @@ describe(TAG, () => {
         const element = render({ ...mockProps, value: undefined });
 
         return Promise.resolve().then(() => {
-            const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const buttons: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             expect(buttons[0].className).toEqual("content-button selected");
             return expect(element).toBeAccessible();
         });
@@ -105,9 +100,8 @@ describe(TAG, () => {
         });
 
         return Promise.resolve().then(() => {
-            const optionListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-                "a"
-            );
+            const optionListComponent: Array<HTMLElement> =
+                element.shadowRoot.querySelectorAll("a");
             expect(optionListComponent).toHaveLength(element.options.length);
             return expect(element).toBeAccessible();
         });

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

@@ -1,5 +1,5 @@
 import Tooltip from "dx/tooltip";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-tooltip";
 const render = createRenderComponent(TAG, Tooltip);
@@ -8,9 +8,8 @@ describe(TAG, () => {
     it("calls tippy constructor with correct parameters", () => {
         const element = render({ label: "First Label", placement: "top" });
 
-        const slotContainer: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
+        const slotContainer: HTMLElement =
+            element.shadowRoot.querySelector("div");
 
         expect(slotContainer).not.toBeNull();
         expect(slotContainer.getAttribute("data-microtip-position")).toEqual(

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

@@ -1,5 +1,5 @@
 import Topics from "dx/topics";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps from "./mockProps";
 
 const TAG = "dx-topics";

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

@@ -1,6 +1,6 @@
 import Tree from "dx/tree";
 import TreeItem from "dx/treeItem";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { TreeHandler } from "../treeHandler";
 import {
     INITIALIZE_MOCK_PARAMETER,

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

@@ -6,7 +6,7 @@ import {
 import { track } from "dx/instrumentation";
 import TreeItem from "dx/treeItem";
 import TreeTile from "dx/treeTile";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 const TAG = "dx-tree-item";
 const renderComponent = createRenderComponent(TAG, TreeItem);

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

@@ -1,6 +1,6 @@
 import TreeTile from "dx/treeTile";
 import Icon from "dx/icon";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 
 import { SINGLE_NODE, SINGLE_NODE_WITH_METHOD } from "./mockProps";
 

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

@@ -1,5 +1,5 @@
 import TypeBadge from "dx/typeBadge";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import { TypeBadgeSize, BadgeType } from "typings/custom";
 
 const TAG = "dx-type-badge";

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

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

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

@@ -1,7 +1,7 @@
 import TypeBadge from "dx/typeBadge";
 import TypeBadgeGroup from "dx/typeBadgeGroup";
 import { TypeBadgeSize } from "typings/custom";
-import { createRenderComponent } from "utils/tests";
+import { createRenderComponent } from "utils-internal/tests";
 import mockProps, { badges } from "./mockProps";
 
 const TAG = "dx-type-badge-group";
@@ -12,9 +12,8 @@ describe(TAG, () => {
         const expectedSize: TypeBadgeSize = "medium";
         const element = render(mockProps);
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(badges.length);
         els.forEach((el, index) => {
             expect(el.value).toBe(badges[index]);
@@ -31,9 +30,8 @@ describe(TAG, () => {
             size: expectedSize
         });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(3);
         els.forEach((el) => expect(el.size).toBe(expectedSize));
         expect(els[0].value).toBe("test1");
@@ -47,9 +45,8 @@ describe(TAG, () => {
         const expectedBadge = "testsinglebadge";
         const element = render({ badges: expectedBadge });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(1);
         expect(els[0].value).toBe(expectedBadge);
 
@@ -59,9 +56,8 @@ describe(TAG, () => {
     it("can render a regular array of string", () => {
         const element = render({ badges });
 
-        const els: Array<TypeBadge> = element.shadowRoot.querySelectorAll(
-            "dx-type-badge"
-        );
+        const els: Array<TypeBadge> =
+            element.shadowRoot.querySelectorAll("dx-type-badge");
         expect(els).toHaveLength(badges.length);
         els.forEach((el, index) => expect(el.value).toBe(badges[index]));
 

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

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

package/src/modules/{utils → utils-internal}/headerBase/headerBase.ts

@@ -43,7 +43,6 @@ export abstract class HeaderBase extends LightningElement {
     @api bannerMarkup =
         '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
-
     @api
     get navItems() {
         return this._navItems;
@@ -193,7 +192,7 @@ export abstract class HeaderBase extends LightningElement {
     private handleSignUpClick(e: PointerEvent) {
         track(e.currentTarget!, "custEv_signupStart", {
             ...ANALYTICS_INFO,
-            clickUrl: this.signupLink,
+            clickUrl: this.signupLink
         });
     }