@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,166 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-small",
-    component: "dx-card-small"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-small {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;

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

@@ -1,46 +0,0 @@
-import CardTitle from "dx/cardTitle";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-card-title";
-const render = createRenderComponent(TAG, CardTitle);
-
-describe(TAG, () => {
-    it("renders the link and title", () => {
-        const title = "Title";
-        const element = render({ href: "/test", title });
-
-        const el = element.shadowRoot.querySelector("a");
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-
-        expect(el.textContent).toEqual(title);
-        expect(nowrap).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a the last word grouped with a new window icon when target is blank", () => {
-        const title = "Title with multiple words";
-        const element = render({ href: "/test", title, target: "_blank" });
-
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-        const newWindowIcon = element.shadowRoot.querySelector("dx-icon");
-
-        expect(nowrap.textContent).toContain("words");
-        expect(newWindowIcon).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a span when no href", () => {
-        const title = "Title with multiple words";
-        const element = render({ title });
-
-        const el = element.shadowRoot.querySelector("span");
-        const link = element.shadowRoot.querySelector("a");
-
-        expect(el.textContent).toEqual(title);
-        expect(link).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,18 +0,0 @@
-import CardTrailheadModule from "dx/cardTrailheadModule";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-trailhead-module";
-const render = createRenderComponent(TAG, CardTrailheadModule);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const cardContent = element.shadowRoot.querySelector("dx-card-content");
-        expect(cardContent).not.toBeNull();
-
-        expect(cardContent.subtitle).toEqual("1000 Points");
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-export default {
-    badgeImgAlt: "Scenic view of a mountain.",
-    badgeImgSrc:
-        "https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png",
-    body:
-        "Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data.",
-    href: "https://developer.salesforce.com/",
-    length: "1 hr",
-    points: "1000",
-    title: "Lightning Platform API Basics With Extra Title"
-};

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

@@ -1,122 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-trailhead-module",
-    component: "dx-card-trailhead-module"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-trailhead-module {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-trailhead-module
-        badge-img-alt="Scenic view of a mountain."
-        badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-        body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-        href="https://developer.salesforce.com/"
-        length="1 hr"
-        points="1000"
-        title="Lightning Platform API Basics"
-    >
-    </dx-card-trailhead-module>
-`;
-
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;

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

@@ -1,22 +0,0 @@
-import CardVideoPreview from "dx/cardVideoPreview";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-video-preview";
-const render = createRenderComponent(TAG, CardVideoPreview);
-
-describe(TAG, () => {
-    it("renders the content card, play button & date", () => {
-        const element = render(mockProps);
-
-        const els = [
-            "dx-card-content",
-            ".dx-play-button",
-            "dx-formatted-date-time"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-const fourDaysAgo = new Date(Date.now() - 3.456e8).toISOString();
-
-export default {
-    datetime: fourDaysAgo,
-    title: "This is a cool video about driving up to estes park to go skiing",
-    body: "This is a cool video about driving up to estes park to go skiing",
-    href: "/test-href",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    imgAlt: "Scenic view of a mountain",
-    target: "_blank"
-};

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

@@ -1,132 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-video-preview",
-    component: "dx-card-video-preview"
-};
-
-const date = new Date().toISOString();
-
-const createStyles = () => html`
-    <style>
-        dx-card-video-preview {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-            margin-botom: 48px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-video-preview
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${date}"
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="How to Harness Einstein Vision and Language in Any App"
-        target="_blank"
-    >
-    </dx-card-video-preview>
-
-    <br />
-    featured
-    <br />
-    <dx-card-video-preview
-        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-        datetime="${date}"
-        featured="true"
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="How to Harness Einstein Vision and Language in Any App"
-        target="_blank"
-    >
-    </dx-card-video-preview>
-`;
-
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Confidence is hard-earned. Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned. Do you know how your customizations will perform when the crowds show up?"
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a banana."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App Banana"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-video-preview
-            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
-            datetime="${date}"
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="How to Harness Einstein Vision and Language in Any App"
-        >
-        </dx-card-video-preview>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;

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

@@ -1,56 +0,0 @@
-import Checkbox from "dx/checkbox";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-checkbox";
-const render = createRenderComponent(TAG, Checkbox);
-
-describe(TAG, () => {
-    it("renders with the correct defaults", () => {
-        const element = render({ ...mockProps, type: "radio" });
-
-        const input = element.shadowRoot.querySelector("input");
-        const span = element.shadowRoot.querySelector("span");
-
-        expect(input).not.toBeNull();
-        expect(input.type).toBe("radio");
-        expect(input.checked).toBe(true);
-        expect(input.value).toBe(mockProps.value);
-        expect(span.textContent).toBe(mockProps.label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("passes disabled through correctly", () => {
-        const element = render({ ...mockProps, disabled: true });
-
-        const input = element.shadowRoot.querySelector("input");
-
-        expect(input.disabled).toBe(true);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fires the correct event onclick", () => {
-        const mockChange = jest.fn();
-
-        const element = render(mockProps);
-
-        element.addEventListener("change", mockChange);
-
-        const input: HTMLInputElement = element.shadowRoot.querySelector(
-            "input"
-        );
-        input.checked = false;
-        input.dispatchEvent(new InputEvent("change"));
-
-        expect(mockChange.mock.calls[0][0].detail).toEqual(
-            expect.objectContaining({
-                value: mockProps.value,
-                checked: false
-            })
-        );
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,5 +0,0 @@
-export default {
-    value: "industries",
-    label: "Industries",
-    checked: true
-};

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

@@ -1,12 +0,0 @@
-export default {
-    title: "dx/dx-checkbox",
-    component: "dx-checkbox"
-};
-
-export const Base = () => `
-  <dx-checkbox value="industries" label="Industries">
-  </dx-checkbox>
-  <br />
-  <dx-checkbox value="industries" label="Industries" type="radio">
-  </dx-checkbox>
-`;