@salesforcedevs/dx-components 0.26.1-alpha0.2 → 0.26.1-alpha0.3

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

@@ -1,51 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,135 +0,0 @@
-@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

@@ -1,33 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-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

@@ -1,21 +0,0 @@
-// 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

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

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/featureGrid/featureGrid.ts

@@ -1,15 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

@@ -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"
-        }
-    ]
-};