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

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

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

@@ -0,0 +1,30 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
+import { stopPropagationOnSlotted } from "utils-internal/slot";
+
+export default class CardDocs extends LightningElement {
+    @api body!: string;
+    @api href!: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api label!: string;
+    @api title!: string;
+    @api target?: string | null = null;
+    @api showMobileImg?: boolean = false;
+
+    private isLinkHovered: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card",
+            "dx-card-base",
+            this.imgSrc && "has-image",
+            this.showMobileImg && "show-mobile-image"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        stopPropagationOnSlotted(e);
+    }
+}

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

@@ -0,0 +1,95 @@
+/* eslint-disable jest/no-mocks-import */
+import CardEvent from "dx/cardEvent";
+import { createRenderComponent } from "utils-internal/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

@@ -0,0 +1,10 @@
+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.css

@@ -0,0 +1,107 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.card-event {
+    display: flex;
+}
+
+.card-event:not(.dx-card-base_layout-horizontal) {
+    flex-direction: column;
+}
+
+.details {
+    align-self: flex-start;
+    display: flex;
+    flex-direction: row;
+    padding-top: var(--dx-g-spacing-small);
+    padding-bottom: var(--dx-g-spacing-small);
+}
+
+/* sections */
+.card-event_date-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: var(--dx-g-card-border);
+    padding-right: var(--dx-g-card-img-spacing);
+    margin-right: var(--dx-g-card-img-spacing);
+}
+
+.card-event_detail-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+}
+
+.card-event_date-section,
+.card-event_detail-section {
+    padding-top: var(--dx-g-spacing-xs);
+}
+
+.month {
+    text-transform: uppercase;
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.dx-card-base_featured .card-event_detail-section > *:not(:last-child) {
+    margin-bottom: var(--dx-g-card-item-spacing);
+}
+
+.card-event_detail-datetime-row {
+    display: flex;
+    align-items: center;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    flex-wrap: wrap;
+}
+
+.card-event_detail-datetime-spacing {
+    padding-right: var(--dx-g-spacing-xs);
+    padding-left: var(--dx-g-spacing-xs);
+}
+
+.subtitle-container {
+    display: flex;
+    align-items: center;
+}
+
+.subtitle-container > .subtitle {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.card-event:not(.dx-card-base_featured) .subtitle {
+    display: none;
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+dx-type-badge {
+    margin-top: var(--dx-g-spacing-sm);
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+@media (max-width: 1024px) {
+    .card-event:not(.dx-card-base_featured) .image-link {
+        display: none;
+    }
+
+    .dx-text-heading-5 {
+        font-size: 18px;
+        line-height: 24px;
+    }
+
+    .dx-text-heading-4 {
+        font-size: 24px;
+        line-height: 28px;
+    }
+
+    .dx-text-body-3 {
+        font-size: 14px;
+        line-height: 20px;
+    }
+}

package/src/modules/dx/cardEvent/cardEvent.html

@@ -0,0 +1,94 @@
+<template>
+    <div class={className}>
+        <a
+            if:true={imgSrc}
+            href={href}
+            onmouseenter={setLinkHovered}
+            onmouseleave={setLinkInactive}
+            target={target}
+            class="image-link dx-card-base_borderless-image_link"
+        >
+            <img
+                alt={imgAlt}
+                class="image dx-card-base_image dx-card-base_borderless-image"
+                src={imgSrc}
+            />
+        </a>
+        <div class="details">
+            <div class="card-event_date card-event_date-section">
+                <dx-formatted-date-time
+                    class="dx-text-heading-5 month"
+                    value={startDatetime}
+                    month="short"
+                ></dx-formatted-date-time>
+                <dx-formatted-date-time
+                    class="dx-text-heading-1 day"
+                    value={startDatetime}
+                    day="2-digit"
+                ></dx-formatted-date-time>
+            </div>
+            <div class="card-event_detail-section">
+                <dx-card-title
+                    href={href}
+                    onmouseenter={setLinkHovered}
+                    onmouseleave={setLinkInactive}
+                    target={target}
+                    title={title}
+                ></dx-card-title>
+                <div class="subtitle-container">
+                    <span
+                        class="subtitle dx-text-label-1-dark"
+                        if:true={location}
+                        part="subtitle"
+                    >
+                        {location}
+                    </span>
+                    <dx-type-badge
+                        color={brandType}
+                        type="content-type"
+                        value={type}
+                        if:true={type}
+                    ></dx-type-badge>
+                </div>
+                <span
+                    class="dx-text-body-2"
+                    if:true={shortDescription}
+                    part="description"
+                >
+                    {shortDescription}
+                </span>
+                <span class="card-event_detail-datetime-row">
+                    <dx-formatted-date-time
+                        class="dx-text-body-3"
+                        value={startDatetime}
+                        weekday="long"
+                        month="long"
+                        day="2-digit"
+                        year="numeric"
+                        time-zone-name="short"
+                    ></dx-formatted-date-time>
+                    <div class="card-event_detail-datetime-spacing">•</div>
+                    <dx-formatted-date-time
+                        class="dx-text-body-3"
+                        value={startDatetime}
+                        hour="numeric"
+                        minute="numeric"
+                    ></dx-formatted-date-time>
+                    <div
+                        if:true={endDatetime}
+                        class="card-event_detail-datetime-spacing end-date-time"
+                    >
+                        -
+                    </div>
+                    <dx-formatted-date-time
+                        if:true={endDatetime}
+                        class="dx-text-body-3 end-date-time"
+                        value={endDatetime}
+                        hour="numeric"
+                        minute="numeric"
+                    ></dx-formatted-date-time>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>