@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,51 @@
+import Feature from "dx/feature";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-feature";
+const render = createRenderComponent(TAG, Feature);
+
+const dataCodeSample = {
+    title: "Redwoods Insurance",
+    label: "Featured Demo",
+    buttonHref: "https://github.com/trailheadapps/ebikes-lwc",
+    buttonLabel: "Explore on Github",
+    imageSrc:
+        "https://d12fd6m9xo0jeo.cloudfront.net/0953ee82-173a-484d-b4f4-7467bce5e200.jpg",
+    isExternalLink: "true",
+    variant: "display"
+};
+
+describe(TAG, () => {
+    it("renders an accessible feature with description on the left by default", () => {
+        const element = render(mockProps);
+        const sectionEl = element.shadowRoot.querySelector("section");
+        expect(sectionEl).not.toBeNull();
+        expect(sectionEl.className).toBe("description-left");
+        expect(element.shadowRoot.querySelector(".image-container")).toBe(null);
+        return expect(sectionEl).toBeAccessible();
+    });
+
+    it("renders a feature with description on the rigth", () => {
+        const element = render(mockProps);
+        element.descriptionPosition = "right";
+        document.body.appendChild(element);
+        const sectionEl = element.shadowRoot.querySelector("section");
+        expect(sectionEl).not.toBeNull();
+        expect(sectionEl.className).toBe("description-right");
+        expect(element.shadowRoot.querySelector(".image-container")).toBe(null);
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders a feature for code-samples", () => {
+        const element = render(dataCodeSample);
+        document.body.appendChild(element);
+        const sectionEl = element.shadowRoot.querySelector("section");
+        expect(sectionEl).not.toBeNull();
+        expect(sectionEl.className).toBe("description-left");
+        const imgContainer =
+            element.shadowRoot.querySelector(".image-container");
+        expect(imgContainer).not.toBe(null);
+        return expect(element).toBeAccessible();
+    });
+});

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

@@ -0,0 +1,8 @@
+export default {
+    title: "Einstein Prediction Builder",
+    buttonHref: "https://lmgtfy.app",
+    buttonLabel: "Build a predictive app",
+    imageSrc: "https://i.imgur.com/FUsyxR5.jpg",
+    body:
+        "Build AI predictions into your <b>Salesforce</b> app for data stored in standard or custom objects using only clicks—then deploy and embed predictions onto any page in Salesforce."
+};

package/src/modules/dx/feature/feature.css

@@ -0,0 +1,135 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
+    --dx-c-feature-description-left-img-src: url(/assets/svg/feature-backdrop1.svg);
+    --dx-c-feature-description-max-width: 31.75rem;
+    --dx-c-feature-img-margin-left: auto;
+    --dx-c-feature-img-container-padding: 4rem;
+    --dx-c-feature-image-max-width: 100%;
+    --dx-c-feature-description-font-size: var(--dx-g-text-base);
+}
+
+.label {
+    display: inline-block;
+    padding-bottom: 15px;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    line-height: 20px;
+}
+
+.dx-text-body-2 {
+    font-size: var(--dx-c-feature-description-font-size);
+}
+
+h3 {
+    padding-bottom: var(--dx-g-spacing-lg);
+}
+
+section {
+    display: flex;
+    align-items: center;
+}
+
+.description,
+.image {
+    width: 45%;
+}
+
+.image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    padding: var(--dx-c-feature-img-container-padding);
+}
+
+.image img {
+    box-shadow: var(--dx-c-feature-img-box-shadow);
+    max-width: var(--dx-c-feature-image-max-width);
+}
+
+.body {
+    max-width: var(--dx-c-feature-description-max-width);
+}
+
+.cta-button {
+    display: block;
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.description-left {
+    flex-direction: row;
+}
+
+.description-right {
+    flex-direction: row-reverse;
+}
+
+.description-left .image {
+    margin-left: var(--dx-c-feature-img-margin-left);
+    background-image: var(--dx-c-feature-description-left-img-src);
+}
+
+.description-right .image {
+    margin-right: auto;
+    background-image: url(/assets/svg/feature-backdrop2.svg);
+}
+
+.image-display-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: -40px;
+}
+
+.image-display-container .image-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.image-display-container .image-container > img {
+    width: 71.75%;
+    margin-top: -7.2%;
+    margin-left: 6%;
+    height: 55%;
+    border-radius: 6px;
+}
+
+.image-display-container .image-display {
+    width: 100%;
+}
+
+/* Mobile responsiveness */
+
+@media screen and (max-width: 768px) {
+    h3 {
+        padding-bottom: var(--dx-g-spacing-md);
+    }
+
+    .body {
+        max-width: unset;
+    }
+
+    .description,
+    .image {
+        width: 100%;
+    }
+
+    .description-right,
+    .description-left {
+        flex-direction: column-reverse;
+    }
+
+    .description-right .image,
+    .description-left .image {
+        margin: auto;
+        background-image: none;
+        padding: 3rem;
+    }
+}

package/src/modules/dx/feature/feature.html

@@ -0,0 +1,33 @@
+<template>
+    <section class={sectionClass}>
+        <div class="description">
+            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
+            <h3 class="dx-text-heading-3">{title}</h3>
+            <div class="body dx-text-body-2">
+                <slot></slot>
+            </div>
+            <dx-button
+                class="cta-button"
+                size="large"
+                target={target}
+                icon-symbol={iconSymbol}
+                href={buttonHref}
+            >
+                {buttonLabel}
+            </dx-button>
+        </div>
+        <div if:true={isDisplay} class="image-display-container">
+            <img
+                class="image-display"
+                src="/assets/svg/featured-demo-art-blank.svg"
+                alt={title}
+            />
+            <div class="image-container">
+                <img src={imageSrc} alt={title} />
+            </div>
+        </div>
+        <div if:false={isDisplay} class="image">
+            <img src={imageSrc} alt={title} />
+        </div>
+    </section>
+</template>

package/src/modules/dx/feature/feature.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+
+export default class Feature extends LightningElement {
+    @api label!: string;
+    @api title!: string;
+    @api imageSrc!: string;
+    @api buttonHref: string | null = null;
+    @api buttonLabel: string | null = null;
+    @api descriptionPosition?: "right" | "left" = "left";
+    @api isExternalLink: boolean = false;
+    @api variant?: "display";
+
+    private get isDisplay(): boolean {
+        return this.variant === "display";
+    }
+
+    private get sectionClass(): string {
+        return this.descriptionPosition === "left"
+            ? "description-left"
+            : "description-right";
+    }
+
+    get hasLabel(): boolean {
+        return !!this.label;
+    }
+
+    get target(): string {
+        return this.isExternalLink ? '_blank' : '_self';
+    }
+
+    get iconSymbol(): string {
+        return this.isExternalLink ? 'new_window' : '';
+    }
+}

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

@@ -0,0 +1,21 @@
+// This test requires a wrapper component that's not exposed in the build.
+import FeatureGridTest from "test-components/featureGridTest";
+import { createRenderComponent } from "utils-internal/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.html

@@ -0,0 +1,3 @@
+<template>
+    <slot onslotchange={onSlotChange}></slot>
+</template>

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

@@ -0,0 +1,120 @@
+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/featureGrid/featureGrid.ts

@@ -0,0 +1,15 @@
+import { LightningElement } from "lwc";
+import { LightningSlotElement } from "typings/custom";
+
+export default class FeatureGrid extends LightningElement {
+    private onSlotChange(e: LightningSlotElement) {
+        // @ts-ignore
+        const slot = e.target;
+        slot.assignedElements().forEach(
+            (featureElement: any, index: number) => {
+                featureElement.descriptionPosition =
+                    index % 2 === 0 ? "left" : "right";
+            }
+        );
+    }
+}

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

@@ -0,0 +1,178 @@
+import FeaturedContentHeader from "dx/featuredContentHeader";
+import ImageAndLabel from "dx/imageAndLabel";
+import { createRenderComponent } from "utils-internal/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

@@ -0,0 +1,73 @@
+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"
+        }
+    ]
+};