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

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

@@ -1,299 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-docs",
-    component: "dx-card-docs"
-};
-
-const createStyles = () => html`
-    <style>
-        span {
-            color: grey;
-        }
-        dx-card-docs {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span>With image</span>
-
-    <dx-card-docs
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Read Guide
-        </dx-button>
-    </dx-card-docs>
-
-    <span>Without image</span>
-
-    <dx-card-docs
-        body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-        href="https://developer.salesforce.com/"
-        label="API"
-        title="Quip SCIM API Documentation"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Overview
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Guides
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Reference
-        </dx-button>
-    </dx-card-docs>
-
-    <span>With new window icon and target set to '_blank'</span>
-
-    <dx-card-docs
-        body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-        href="https://developer.salesforce.com/"
-        label="API"
-        title="Quip SCIM API Documentation"
-        target="_blank"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Overview
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Guides
-        </dx-button>
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-        >
-            Reference
-        </dx-button>
-    </dx-card-docs>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-docs
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            label="Documentation"
-            title="Einstein Platform Services Developer Guide"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            label="Documentation"
-            title="Einstein Platform Services Developer Guide"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="Quip SCIM API is a specification designed to make it easier to manage user identities in cloud-based applications and services."
-            href="https://developer.salesforce.com/"
-            label="API"
-            title="Quip SCIM API"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Overview
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Guides
-            </dx-button>
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-            >
-                Reference
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            label="Documentation"
-            title="Einstein Platform Services Developer Guide"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <dx-card-docs
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            label="Documentation"
-            title="Einstein Platform Services Developer Guide"
-        >
-            <dx-button
-                href="http://tweetflight.wearebrightly.com/"
-                target="_blank"
-                variant="inline"
-                icon-symbol="forward"
-            >
-                Read Guide
-            </dx-button>
-        </dx-card-docs>
-        <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/cardEvent/__tests__/cardEvent.test.ts

@@ -1,99 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import CardEvent from "dx/cardEvent";
-import { createRenderComponent } from "utils/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-event";
-const render = createRenderComponent(TAG, CardEvent);
-
-describe(TAG, () => {
-    it("renders the date", () => {
-        const component = render(mockProps);
-        const dateEl = component.shadowRoot.querySelector(".card-event");
-        expect(dateEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("doesn't render end datetime ui if property not provided", () => {
-        const component = render({
-            title: mockProps.title,
-            startDatetime: mockProps.startDatetime,
-            hre: mockProps.href
-        });
-        const endtimeEls = component.shadowRoot.querySelectorAll(
-            ".end-date-time"
-        );
-        expect(endtimeEls.length).toEqual(0);
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders the correct number of date time components", () => {
-        const component = render(mockProps);
-        const datetimeEl = component.shadowRoot.querySelectorAll(
-            "dx-formatted-date-time"
-        );
-        expect(datetimeEl.length).toEqual(5);
-        return expect(component).toBeAccessible();
-    });
-
-    it("fires events", () => {
-        const element = render({
-            ...mockProps,
-            imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-            featured: true
-        });
-
-        const imagelink: HTMLElement = element.shadowRoot.querySelector(
-            ".image-link"
-        );
-        const containerDiv: HTMLElement = element.shadowRoot.querySelector(
-            "div"
-        );
-
-        expect(containerDiv.classList).toContain("dx-card-base_featured");
-
-        imagelink.dispatchEvent(new CustomEvent("mouseenter"));
-
-        return Promise.resolve()
-            .then(() => {
-                expect(containerDiv.classList).toContain(
-                    "dx-card-base_link-hovered"
-                );
-                imagelink.dispatchEvent(new CustomEvent("mouseleave"));
-            })
-            .then(() => {
-                expect(containerDiv.classList).not.toContain(
-                    "dx-card-base_link-hovered"
-                );
-            });
-    });
-
-    it("renders the short description", () => {
-        const component = render(mockProps);
-        const shortDescEl = component.shadowRoot.querySelector(
-            ".dx-text-body-2"
-        );
-        expect(shortDescEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders a badge when type is set", () => {
-        const component = render({
-            ...mockProps,
-            type: "Webinar"
-        });
-        const badgeEl = component.shadowRoot.querySelector("dx-type-badge");
-        expect(badgeEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-
-    it("renders a subtitle when location is set", () => {
-        const component = render({
-            ...mockProps,
-            location: "YOUTUBE LIVE"
-        });
-        const subtitleEl = component.shadowRoot.querySelector(".subtitle");
-        expect(subtitleEl).not.toBeNull();
-        return expect(component).toBeAccessible();
-    });
-});

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

@@ -1,10 +0,0 @@
-const startDatetime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-const endDatetime = new Date(0, 0, 1, 12, 0, 0).toISOString();
-
-export default {
-    title: "Virtual Event: Salesforce Life for Financial Services",
-    startDatetime: startDatetime,
-    endDatetime: endDatetime,
-    href: "www.salesforce.com",
-    shortDescription: "Virtual Event: Salesforce Life for Financial Services"
-};

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

@@ -1,152 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-event",
-    component: "dx-card-event"
-};
-
-const startDatetime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-const endDatetime = new Date(0, 0, 1, 12, 0, 0).toISOString();
-
-const createStyles = () => html`
-    <style>
-        dx-card-event {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-            margin-bottom: 48px;
-        }
-
-        #horiz {
-            width: unset;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-event
-        href="www.google.com"
-        location="San Francisco"
-        start-datetime="${startDatetime}"
-        end-datetime="${endDatetime}"
-        title="Virtual Event: Salesforce Life for Financial Services"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
-        type="Webinar"
-    ></dx-card-event>
-
-    <dx-card-event
-        href="www.google.com"
-        location="San Francisco"
-        start-datetime="${startDatetime}"
-        end-datetime="${endDatetime}"
-        id="horiz"
-        layout="horizontal"
-        title="Virtual Event: Salesforce Life for Financial Services"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
-    ></dx-card-event>
-
-    <dx-card-event
-        href="www.google.com"
-        location="San Francisco"
-        start-datetime="${startDatetime}"
-        title="Virtual Event: Salesforce Life for Financial Services"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        featured="true"
-        short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
-    ></dx-card-event>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        </dx-card-small>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        </dx-card-small>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        </dx-card-small>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        </dx-card-small>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        <dx-card-event
-            href="www.google.com"
-            end-datetime="${endDatetime}"
-            location="San Francisco"
-            start-datetime="${startDatetime}"
-            title="Virtual Event: Salesforce Life for Financial Services"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-        ></dx-card-event>
-        <dx-card-callout
-            background-color="indigo-vibrant-30"
-            href="/build-stuff"
-            title="Find an upcoming event"
-            label="Calendar"
-        ></dx-card-callout>
-    </dx-grid>
-`;