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

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

@@ -1,127 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-content",
-    component: "dx-card-content"
-};
-
-const createStyles = () => html`
-    <style>
-        .label {
-            color: grey;
-        }
-
-        dx-card-content {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            max-width: 500px;
-            min-width: 240px;
-        }
-
-        #horiz {
-            max-width: 800px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <span class="label">With image</span>
-
-    <dx-card-content
-        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"
-        subtitle="Subtitle"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">With Author link</span>
-
-    <dx-card-content
-        author-label="Mr. Mistoffelees"
-        author-img-src="https://placekitten.com/300/300"
-        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
-        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"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">With Author only</span>
-
-    <dx-card-content
-        author-label="Mr. Mistoffelees"
-        author-img-src="https://placekitten.com/300/300"
-        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"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Without image</span>
-
-    <dx-card-content
-        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/"
-        label="Documentation"
-        title="Einstein Platform Services Developer Guide"
-    >
-        <span slot="datetime">Feb 9th 2020</span>
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Minimum content</span>
-
-    <dx-card-content
-        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/"
-        title="Einstein Platform Services Developer Guide"
-    >
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Really large body</span>
-    <dx-card-content
-        body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat urna eu velit congue scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vulputate nulla non mauris tempor, at molestie ex efficitur. Nunc egestas posuere luctus. Nam ligula sapien, mattis pretium dapibus et, convallis a enim. Aliquam et sem volutpat, dignissim sapien non, faucibus nunc. Integer vitae enim et lectus volutpat scelerisque. Vestibulum elementum sapien at semper ornare. Suspendisse potenti. Donec tincidunt euismod porttitor."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="Lorem Ipsum"
-    >
-    </dx-card-content>
-
-    <br />
-    <br />
-    <span class="label">Horizontal Layout</span>
-    <dx-card-content
-        id="horiz"
-        body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat urna eu velit congue scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vulputate nulla non mauris tempor, at molestie ex efficitur. Nunc egestas posuere luctus. Nam ligula sapien, mattis pretium dapibus et, convallis a enim. Aliquam et sem volutpat, dignissim sapien non, faucibus nunc. Integer vitae enim et lectus volutpat scelerisque. Vestibulum elementum sapien at semper ornare. Suspendisse potenti. Donec tincidunt euismod porttitor."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="Lorem Ipsum"
-        layout="horizontal"
-    >
-    </dx-card-content>
-`;

package/src/modules/dx/cardContent/cardContent.ts

@@ -1,68 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils-internal/slot";
-import { toDxColor } from "utils-internal/css";
-
-export default class CardContent extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc?: string | null = null;
-    @api authorLabel?: string | null = null;
-    @api backgroundColor?: string | null = null;
-    @api body?: string | null = null;
-    @api featured?: boolean = false;
-    @api href!: string;
-    @api imgAlt?: string = "";
-    @api imgSrc?: string | null = null;
-    @api label: string = "";
-    @api layout: "vertical" | "horizontal" = "vertical";
-    @api subtitle?: string | null = null;
-    @api target?: string | null = null;
-    @api title!: string;
-
-    private isDatetimeEmpty: boolean = true;
-    private isLinkHovered: boolean = false;
-
-    private get hasAuthor() {
-        return this.authorImgSrc && this.authorLabel;
-    }
-
-    private get backgroundStyle(): string {
-        return this.backgroundColor
-            ? `background: ${toDxColor(this.backgroundColor)}`
-            : "";
-    }
-
-    private get imgLinkAriaLabel() {
-        return `Read More About ${this.title}`;
-    }
-
-    private get className(): string {
-        return cx(
-            "card-content",
-            "dx-card-base",
-            "dx-card-base_borderless",
-            `dx-card-base_layout-${this.layout}`,
-            this.featured && "dx-card-base_featured",
-            this.isDatetimeEmpty && "hide-datetime",
-            this.isLinkHovered && "dx-card-base_link-hovered",
-            this.hasImage && "has-image"
-        );
-    }
-
-    private get hasImage() {
-        return this.imgSrc || this.backgroundColor;
-    }
-
-    private setLinkHovered() {
-        this.isLinkHovered = true;
-    }
-
-    private setLinkInactive() {
-        this.isLinkHovered = false;
-    }
-
-    private onDatetimeSlotChange(e: LightningSlotElement): void {
-        this.isDatetimeEmpty = isSlotEmpty(e);
-    }
-}

package/src/modules/dx/cardDemo/cardDemo.css

@@ -1 +0,0 @@
-@import "helpers/card";

package/src/modules/dx/cardDemo/cardDemo.html

@@ -1,12 +0,0 @@
-<template>
-    <dx-card-content
-        body={body}
-        featured={featured}
-        href={href}
-        img-alt={imgAlt}
-        img-src={imgSrc}
-        label="Demo"
-        target={target}
-        title={title}
-    ></dx-card-content>
-</template>

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

@@ -1,115 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-demo",
-    component: "dx-card-demo"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-demo {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-demo
-        body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-        href="https://developer.salesforce.com/"
-        img-alt="Scenic view of a mountain."
-        img-src="https://i.imgur.com/FUsyxR5.jpg"
-        title="E-Bikes"
-    >
-    </dx-card-demo>
-
-    <br />
-    <br />
-
-    <dx-card-demo
-        body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-        href="https://developer.salesforce.com/"
-        title="E-Bikes"
-    >
-    </dx-card-demo>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-demo
-            body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="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, integrating with Salesfoce Communities, and learn stuff. 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, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <dx-card-demo
-            body="Sample retail application. Explore this application, integrating with Salesfoce Communities, and learn stuff."
-            href="https://developer.salesforce.com/"
-            img-alt="Scenic view of a mountain."
-            img-src="https://i.imgur.com/FUsyxR5.jpg"
-            title="E-Bikes"
-        >
-        </dx-card-demo>
-        <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/cardDemo/cardDemo.ts

@@ -1,11 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class CardDemo extends LightningElement {
-    @api body!: string;
-    @api featured?: boolean = false;
-    @api href!: string;
-    @api imgAlt?: string;
-    @api imgSrc?: string | null;
-    @api target?: string | null = null;
-    @api title!: string;
-}

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

@@ -1,48 +0,0 @@
-import Card from "dx/cardDocs";
-import { createRenderComponent } from "utils-internal/tests";
-import { stopPropagationOnSlotted } from "utils-internal/slot";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card";
-const render = createRenderComponent(TAG, Card);
-
-jest.mock("utils-internal/slot", () => {
-    return {
-        stopPropagationOnSlotted: jest.fn()
-    };
-});
-
-describe(TAG, () => {
-    it("renders the image, label, title, body", () => {
-        const element = render(mockProps);
-
-        const els = [
-            ".image",
-            ".dx-text-label-3",
-            "dx-card-title",
-            ".dx-text-body-2"
-        ].map((query) => element.shadowRoot.querySelector(query));
-        expect(els).not.toContain(null);
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render the image when it doesn't need to", () => {
-        const element = render({
-            title: mockProps.title,
-            body: mockProps.body
-        });
-        const els = [".image"].map((query) =>
-            element.shadowRoot.querySelector(query)
-        );
-        els.forEach((el) => expect(el).toBeNull());
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders slot and calls stopPropagation", () => {
-        const element = render(mockProps);
-        const slot: HTMLSlotElement = element.shadowRoot.querySelector("slot");
-        slot.dispatchEvent(new Event("slotchange"));
-        expect(stopPropagationOnSlotted).toBeCalledTimes(1);
-    });
-});

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

@@ -1,9 +0,0 @@
-export default {
-    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/",
-    imgAlt: "Scenic view of a mountain.",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    label: "Documentation",
-    title: "Example Name"
-};

package/src/modules/dx/cardDocs/cardDocs.css

@@ -1,50 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
-
-:host {
-    --dx-c-heading-max-lines: 4;
-    --dx-c-card-grid-max-width: 60px;
-}
-
-.card {
-    display: flex;
-    flex-direction: column;
-}
-
-.image {
-    width: 100%;
-    height: 160px;
-}
-
-/* text section */
-
-.card_section-text {
-    grid-area: text;
-    flex-grow: 1;
-}
-
-.dx-text-heading-6 dx-button {
-    margin-left: var(--dx-g-spacing-xs);
-}
-
-.dx-text-heading-4 {
-    position: relative;
-    -webkit-line-clamp: var(--dx-c-heading-max-lines);
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    overflow: hidden;
-}
-
-.dx-text-heading-4 dx-icon {
-    display: inline-block;
-    transform: translateY(-3px);
-}
-
-/* mobile responsiveness */
-
-@media screen and (max-width: 1024px) {
-    .has-image:not(.show-mobile-image) .image {
-        display: none;
-    }
-}

package/src/modules/dx/cardDocs/cardDocs.html

@@ -1,20 +0,0 @@
-<template>
-    <a href={href} class={className} target={target}>
-        <img
-            if:true={imgSrc}
-            alt={imgAlt}
-            src={imgSrc}
-            class="image dx-card-base_image"
-        />
-        <div
-            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
-        >
-            <span class="dx-text-label-3">{label}</span>
-            <dx-card-title title={title} target={target}></dx-card-title>
-            <span class="dx-text-body-2">{body}</span>
-        </div>
-        <div class="dx-card-base_section-vertical dx-card-base_ctas">
-            <slot onslotchange={onSlotChange}></slot>
-        </div>
-    </a>
-</template>