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

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

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

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

@@ -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.css

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

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