@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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

@@ -1,21 +0,0 @@
-// This test requires a wrapper component that's not exposed in the build.
-import FeatureGridTest from "tests/featureGridTest";
-import { createRenderComponent } from "utils/tests";
-
-const TAG = "dx-feature-grid";
-const render = createRenderComponent(TAG, FeatureGridTest);
-
-describe(TAG, () => {
-    it("renders a feature grid with mixed description positions", async () => {
-        const gridTestEl = render();
-        const featureEls = gridTestEl.shadowRoot.querySelectorAll("dx-feature");
-
-        await Promise.resolve();
-        expect(featureEls.length).toBe(3);
-        expect(featureEls[0].descriptionPosition).toBe("left");
-        expect(featureEls[1].descriptionPosition).toBe("right");
-        expect(featureEls[2].descriptionPosition).toBe("left");
-
-        return expect(gridTestEl).toBeAccessible();
-    });
-});

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

@@ -1,120 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-feature-grid",
-    component: "dx-feature-grid"
-};
-
-
-
-const codeSampleStyles = () => html `
-<style>
-    .code-samples-feature {
-        --dx-c-feature-img-box-shadow: unset;
-        --dx-c-feature-description-left-img-src: unset;
-        --dx-c-feature-description-max-width: 100%;
-        --dx-c-feature-description-font-size: 20px;
-        --dx-c-feature-img-margin-left: -40px;
-        --dx-c-feature-img-container-padding: 0px;
-        --dx-c-feature-image-max-width: 110%;
-    }
-</style>`
-
-
-export const Base = () => html`
-    <dx-feature-grid>
-        <dx-feature
-            title="Einstein Prediction Builder"
-            button-href="https://lmgtfy.app"
-            button-label="Build a predictive app"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Build AI predictions into your Salesforce app for data stored in
-            standard or custom objects using only clicks—then deploy and embed
-            predictions onto any page in Salesforce.
-        </dx-feature>
-
-        <dx-feature
-            title="Einstein Next Best Action"
-            button-href="https://lmgtfy.app"
-            button-label="Learn how Next Best Action works"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Make predictions actionable by unifying data from your organization
-            and other sources to create optimal recommendations, and then
-            automate them using flows.
-        </dx-feature>
-
-        <dx-feature
-            title="Einstein Chatbots"
-            button-href="https://lmgtfy.app"
-            button-label="Learn chatbot basics"
-            image-src="https://i.imgur.com/FUsyxR5.jpg"
-        >
-            Automate support with an Einstein chatbot to make your apps smarter
-            without code, and extend the functionality of your chatbot using
-            Lightning Web Components, Apex, or external integrations.
-        </dx-feature>
-    </dx-feature-grid>
-`
-
-export const CodeSamples = () => html `
-    ${codeSampleStyles()}
-    <dx-feature-grid>
-        <dx-feature
-            class="code-samples-feature"
-            title="E-Bikes"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/ebikes-lwc"
-            button-label="Explore on Github"
-            image-src="https://trailhead-sample-apps-temp.s3.amazonaws.com/ecars.png"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample retail application. This application helps E-Bikes, a fictitious electric
-            bicycle manufacturer, manage their products and reseller orders using a rich User
-            Experience. Explore this application, that also integrates with Salesfoce
-            Communities, and learn how to build rich User Experiences with Lightning Web
-            Components using different data access strategies.
-        </dx-feature>
-
-        <dx-feature
-            class="code-samples-feature"
-            title="Easy Spaces"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/easy-spaces-lwc"
-            button-label="Explore on Github"
-            image-src="https://d12fd6m9xo0jeo.cloudfront.net/cdb2ca7c-824f-4037-9187-dab8b58ff50c.jpg"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample event management application. Easy Spaces is a fictitious event management company.
-            This application helps Easy Spaces event coordinators manage reservations and find the
-            right theme for their customers. Regardless of the industry you work in,
-            this app demonstrates how to build flexible, user-centric experiences with dynamic flows,
-            Flow Actions, and object-agnostic Lightning components. This app also demonstrates how
-            to structure your source code for modular distribution using unlocked packages.
-        </dx-feature>
-
-        <dx-feature
-            class="code-samples-feature"
-            title="Redwoods Insurance"
-            label="Featured Demo"
-            button-href="https://github.com/trailheadapps/ebikes-lwc"
-            button-label="Explore on Github"
-            image-src="https://d12fd6m9xo0jeo.cloudfront.net/0953ee82-173a-484d-b4f4-7467bce5e200.jpg"
-            is-external-link="true"
-            variant="display"
-        >
-            Sample car insurance app. Redwoods Insurance is a fictitious car insurance company.
-            This application, which consists of a Salesforce Lightning Console app and a mobile
-            application for iOS, helps agents and customers with insurance claims.
-            Customers use the mobile application to capture pictures and other
-            details about accidents. The sample iOS application uses the new Mobile SDK
-            to provide rich, native connections to a customer's device.
-            Redwoods Insurance claims adjusters use the Salesforce console app to view
-            multimedia files uploaded by customers and manage the claims process.
-        </dx-feature>
-    </dx-feature-grid>`;
-
-

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

@@ -1,191 +0,0 @@
-import FeaturedContentHeader from "dx/featuredContentHeader";
-import ImageAndLabel from "dx/imageAndLabel";
-import { createRenderComponent } from "utils/tests";
-import mockProps, { blogPodcastMock } from "./mockProps";
-
-const TAG = "dx-featured-content-header";
-const render = createRenderComponent(TAG, FeaturedContentHeader);
-
-const testHeadingAttributes = (
-    el: HTMLElement,
-    role: string | null,
-    ariaLevel: string | null
-): void => {
-    const elRole = el.getAttribute("role");
-    const elAriaLevel = el.getAttribute("aria-level");
-    expect(elRole).toEqual(role);
-    expect(elAriaLevel).toEqual(ariaLevel);
-};
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-        const renderedLabel: HTMLElement = element.shadowRoot.querySelector(
-            ".label"
-        );
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            ".title"
-        );
-        const renderedBody: HTMLElement = element.shadowRoot.querySelector(
-            "span"
-        );
-
-        expect(renderedLabel).not.toBeNull();
-        expect(renderedLabel.textContent).toEqual(mockProps.label);
-        expect(renderedTitle).not.toBeNull();
-        expect(renderedBody).not.toBeNull();
-        expect(renderedBody.textContent).toEqual(mockProps.body);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders title as h1 and label without aria role by default", () => {
-        const element = render(mockProps);
-
-        const title: HTMLElement = element.shadowRoot.querySelector(".title");
-        testHeadingAttributes(title, "heading", "1");
-
-        const label: HTMLElement = element.shadowRoot.querySelector(".label");
-        testHeadingAttributes(label, null, null);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders title as h2 and label as h1 when labelAsPrimaryHeading is true", () => {
-        const element = render({ ...mockProps, labelAsPrimaryHeading: true });
-
-        const title: HTMLElement = element.shadowRoot.querySelector(".title");
-        testHeadingAttributes(title, "heading", "2");
-
-        const label: HTMLElement = element.shadowRoot.querySelector(".label");
-        testHeadingAttributes(label, "heading", "1");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no links when not given an href", () => {
-        const element = render({ ...mockProps, href: null, target: null });
-        const link: HTMLElement = element.shadowRoot.querySelector("a");
-
-        expect(link).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no img when not given an imgSrc", () => {
-        const element = render({ ...mockProps, imgSrc: null });
-        const img: HTMLElement = element.shadowRoot.querySelector("img");
-
-        expect(img).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders authors", () => {
-        const element = render(mockProps);
-
-        const optionsListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            "dx-image-and-label"
-        );
-        expect(optionsListComponent).toHaveLength(mockProps.authors.length);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("specifies authors image", () => {
-        const element = render(blogPodcastMock);
-
-        const optionsListComponent: Array<ImageAndLabel> = element.shadowRoot.querySelectorAll(
-            "dx-image-and-label"
-        );
-        expect(optionsListComponent).toHaveLength(
-            blogPodcastMock.authors.length
-        );
-
-        const [firstAuthor] = optionsListComponent;
-        expect(firstAuthor.imgSrc).toBe(
-            blogPodcastMock.authors[0].avatar_urls["24"]
-        );
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("fallbacks in imgSrc if avatar_urls is not defined", () => {
-        const element = render(mockProps);
-
-        const optionsListComponent: Array<ImageAndLabel> = element.shadowRoot.querySelectorAll(
-            "dx-image-and-label"
-        );
-        expect(optionsListComponent).toHaveLength(
-            blogPodcastMock.authors.length
-        );
-
-        const [firstAuthor] = optionsListComponent;
-        expect(firstAuthor.imgSrc).toBe(mockProps.authors[0].imgSrc);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("filters authors with no names", () => {
-        const authors = [
-            {
-                foo: "bar"
-            },
-            {
-                foo: "bar"
-            }
-        ];
-
-        const element = render({ ...mockProps, authors });
-
-        const optionsListComponent: Array<ImageAndLabel> = element.shadowRoot.querySelectorAll(
-            "dx-image-and-label"
-        );
-
-        expect(optionsListComponent).toHaveLength(0);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("set proper class names", () => {
-        const element = render({
-            ...mockProps,
-            dark: "true",
-            imgPlacement: "below",
-            imgSrc: "www.test.com",
-            authors: undefined,
-            href: "www.test.com",
-            target: "_test",
-            title: "test"
-        });
-
-        const renderedContainer: HTMLElement = element.shadowRoot.querySelector(
-            ".container"
-        );
-        const renderedLabel: HTMLElement = element.shadowRoot.querySelector(
-            ".label"
-        );
-        const renderedTitleLink: HTMLElement = element.shadowRoot.querySelector(
-            ".title a"
-        );
-        const renderedBody: HTMLElement = element.shadowRoot.querySelector(
-            "span"
-        );
-        const renderedImage: HTMLElement = element.shadowRoot.querySelector(
-            "img"
-        );
-        const renderedImageLabel: HTMLElement = element.shadowRoot.querySelector(
-            "dx-image-and-label"
-        );
-
-        expect(renderedContainer.className).toBe(
-            "container img-placement_below variant_dark"
-        );
-        expect(renderedLabel.className).toBe("label dx-text-heading-4");
-        expect(renderedTitleLink.getAttribute("href")).toEqual("www.test.com");
-        expect(renderedTitleLink.getAttribute("target")).toEqual("_test");
-        expect(renderedTitleLink.textContent).toEqual("test");
-        expect(renderedBody.className).toBe("body dx-text-body-1");
-        expect(renderedImage).not.toBeNull();
-        expect(renderedImageLabel).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,73 +0,0 @@
-export const blogPodcastMock = {
-    label: "Developers Blog",
-    title: "Custom Notifications for your Mobile SDK Apps",
-    href: "https://www.google.com",
-    target: "_blank",
-    body:
-        "Is it time to expand Salesforce within your company? Then it’s also time to develop a performance testing method so you can be confident that your solution can scale to meet your user needs without unwanted side effects. ",
-    authors: [
-        {
-            avatar_urls: {
-                "24": "https://placekitten.com/24/24",
-                "48": "https://placekitten.com/48/48"
-            },
-            description: "",
-            id: 1,
-            link: "https://developer.salesforce.com/user/1",
-            name: "First Author Name",
-            slug: "first-author-name"
-        },
-        {
-            avatar_urls: {
-                "24": "https://placekitten.com/24/24",
-                "48": "https://placekitten.com/48/48"
-            },
-            description: "",
-            id: 2,
-            link: "https://developer.salesforce.com/user/2",
-            name: "Second Author Name",
-            slug: "second-author-name"
-        },
-        {
-            avatar_urls: {
-                "24": "https://placekitten.com/24/24",
-                "48": "https://placekitten.com/48/48"
-            },
-            description: "",
-            id: 3,
-            link: "https://developer.salesforce.com/user/3",
-            name: "Third Author Name",
-            slug: "third-author-name"
-        }
-    ]
-};
-
-export default {
-    ...blogPodcastMock,
-    authors: [
-        {
-            imgSrc: "https://placekitten.com/24/24",
-            description: "",
-            id: 1,
-            link: "https://developer.salesforce.com/user/1",
-            name: "First Author Name",
-            slug: "first-author-name"
-        },
-        {
-            imgSrc: "https://placekitten.com/24/24",
-            description: "",
-            id: 2,
-            link: "https://developer.salesforce.com/user/2",
-            name: "Second Author Name",
-            slug: "second-author-name"
-        },
-        {
-            imgSrc: "https://placekitten.com/24/24",
-            description: "",
-            id: 3,
-            link: "https://developer.salesforce.com/user/3",
-            name: "Third Author Name",
-            slug: "third-author-name"
-        }
-    ]
-};

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

@@ -1,153 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-const BACKGROUND_IMAGE_OPTIONS = ["trees", "codey", "blog"];
-
-export default {
-    title: "dx/dx-featured-content-header ",
-    component: "dx-featured-content-header "
-};
-
-const createStylesLightVariant = () => html`
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-header-background-color: rgb(58, 73, 218);
-        }
-    </style>
-`;
-
-const createBaseStyles = () => html`
-    <style>
-        body {
-            padding: 0 !important;
-        }
-        dx-podcast-player {
-            display: block;
-            width: 300px;
-        }
-    </style>
-`;
-
-const authors = JSON.stringify(mockProps.authors);
-
-export const PodcastEpisode = () => html` ${createBaseStyles()}
-    <dx-featured-content-header
-        label="Developers Podcast"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-    >
-        <dx-podcast-player
-            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-        >
-        </dx-podcast-player>
-    </dx-featured-content-header>`;
-
-export const BlogPost = () => html` ${createBaseStyles()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        img-placement="below"
-    >
-        <dx-podcast-player
-            src="https://www3.assets.heroku.com/podcasts/codeish/Codeish_Episode_108_Wicked_CoolKit.mp3"
-        >
-        </dx-podcast-player>
-    </dx-featured-content-header>`;
-
-export const LightVariation = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        href="${mockProps.href}"
-        target="${mockProps.target}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const LightVariationNoLink = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <dx-featured-content-header
-        label="${mockProps.label}"
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        img-alt="test alt"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const MainContentWidth = () => html` ${createBaseStyles()}
-    ${createStylesLightVariant()}
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-main-content-max-width: 600px;
-        }
-    </style>
-    <dx-featured-content-header
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        dark="true"
-    >
-    </dx-featured-content-header>`;
-
-export const BackgroundImage = ({
-    backgroundImage
-}: {
-    backgroundImage: string;
-}) => html` ${createBaseStyles()} ${createStylesLightVariant()}
-    <style>
-        dx-featured-content-header {
-            --dx-c-featured-content-main-content-max-width: 600px;
-        }
-    </style>
-    <dx-featured-content-header
-        title="${mockProps.title}"
-        body="${mockProps.body}"
-        authors="${authors}"
-        dark="true"
-        background-img="${backgroundImage}"
-    >
-    </dx-featured-content-header>`;
-
-BackgroundImage.args = {
-    backgroundImage: "codey"
-};
-
-BackgroundImage.argTypes = {
-    backgroundImage: {
-        control: {
-            type: "select",
-            options: BACKGROUND_IMAGE_OPTIONS
-        }
-    }
-};
-
-export const CodeSamples = () => html` 
-
-<style>
-    dx-featured-content-header {
-        --dx-c-featured-content-main-content-max-width: 600px;
-    }
-</style>
-<dx-featured-content-header
-    class="documentation_header"
-    title="Code Samples"
-    body="all the description here"
-    dark="true"
-    background-img="moon"
-></dx-featured-content-header>`;

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

@@ -1,47 +0,0 @@
-import FeaturesList from "dx/featuresList";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-features-list";
-const render = createRenderComponent(TAG, FeaturesList);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const container: HTMLElement = element.shadowRoot.querySelector(
-            ".container"
-        );
-        const renderedTitle: HTMLElement = element.shadowRoot.querySelector(
-            "h2"
-        );
-
-        expect(renderedTitle).not.toBeNull();
-        expect(container).not.toBeNull();
-
-        expect(renderedTitle.textContent).toEqual(mockProps.title);
-
-        const optionListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            ".option"
-        );
-        expect(optionListComponent).toHaveLength(mockProps.options.length);
-
-        return expect(element).toBeAccessible();
-    });
-    it("test list recieved as string ", () => {
-        const optionsListParameter = [
-            { title: "Introduction", id: "A", description: "test description" }
-        ];
-        const element = render({
-            ...mockProps,
-            options: JSON.stringify(optionsListParameter)
-        });
-
-        const optionListComponent: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
-            ".option"
-        );
-        expect(optionListComponent).toHaveLength(element.options.length);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,17 +0,0 @@
-export default {
-    title: "Key features",
-    options: [
-        {
-            title: "Einstein Image Classification",
-            id: "A",
-            description:
-                "Train deep learning models to recognize and classify images at scale"
-        },
-        {
-            title: "Einstein Object Detection",
-            id: "B",
-            description:
-                "Train models to recognize and count multiple distinct objects within an image, providing granular details like the size and location of each object."
-        }
-    ]
-};

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

@@ -1,30 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-
-export default {
-    title: "dx/dx-features-list",
-    component: "dx-features-list"
-};
-
-const options = JSON.stringify(mockProps.options);
-
-const createStyles = () => html`
-    <style>
-        #root {
-            max-width: 417px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-features-list
-        title="Key features"
-        options="${options}"
-    ></dx-features-list>
-`;
-
-export const NoTitle = () => html`
-    ${createStyles()}
-    <dx-features-list options="${options}"></dx-features-list>
-`;