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

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

@@ -1,166 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-small",
-    component: "dx-card-small"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-small {
-            margin-top: 25px;
-            margin-bottom: 25px;
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-        badge-symbol="bucket"
-    >
-        <dx-button
-            href="http://tweetflight.wearebrightly.com/"
-            target="_blank"
-            variant="inline"
-            icon-symbol="forward"
-        >
-            Visit AppExchange
-        </dx-button>
-    </dx-card-small>
-
-    <dx-card-small
-        borderless="${true}"
-        href="/test-href"
-        target="_blank"
-        title="Marketplaces"
-        body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-    >
-    </dx-card-small>
-`;
-
-// prettier-ignore
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <dx-card-small
-            href="/test-href"
-            target="_blank"
-            title="Marketplaces"
-            body="This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card. This is a pretty long card body. It could say just about anything regarding the content of this card."
-            badge-symbol="bucket"
-        >
-        </dx-card-small>
-        <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/cardSmall/cardSmall.ts

@@ -1,38 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import {
-    LightningSlotElement,
-    IconSprite,
-    IconSymbol,
-    IconBadgeShape
-} from "typings/custom";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils-internal/slot";
-
-export default class CardSmall extends LightningElement {
-    @api badgeBackgroundColor?: string = "indigo-vibrant-50";
-    @api badgeColor: string = "white";
-    @api badgeShape?: IconBadgeShape = "circle";
-    @api badgeSprite?: IconSprite = "utility";
-    @api badgeSymbol?: IconSymbol;
-    @api body?: string = "";
-    @api borderless?: boolean = false;
-    @api href!: string;
-    @api target?: string | null = null;
-    @api title!: string;
-
-    private isSlotEmpty: boolean = false;
-
-    private get className(): string {
-        return cx(
-            "card-small",
-            "dx-card-base",
-            this.badgeSymbol && "has-icon",
-            this.borderless && "dx-card-base_borderless"
-        );
-    }
-
-    private onSlotChange(e: LightningSlotElement): void {
-        this.isSlotEmpty = isSlotEmpty(e);
-        stopPropagationOnSlotted(e);
-    }
-}

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

@@ -1,46 +0,0 @@
-import CardTitle from "dx/cardTitle";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-card-title";
-const render = createRenderComponent(TAG, CardTitle);
-
-describe(TAG, () => {
-    it("renders the link and title", () => {
-        const title = "Title";
-        const element = render({ href: "/test", title });
-
-        const el = element.shadowRoot.querySelector("a");
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-
-        expect(el.textContent).toEqual(title);
-        expect(nowrap).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a the last word grouped with a new window icon when target is blank", () => {
-        const title = "Title with multiple words";
-        const element = render({ href: "/test", title, target: "_blank" });
-
-        const nowrap = element.shadowRoot.querySelector(".nowrap");
-        const newWindowIcon = element.shadowRoot.querySelector("dx-icon");
-
-        expect(nowrap.textContent).toContain("words");
-        expect(newWindowIcon).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders no link when no href", () => {
-        const title = "Title with multiple words";
-        const element = render({ title });
-
-        const el = element.shadowRoot.querySelector("h3");
-        const link = element.shadowRoot.querySelector("a");
-
-        expect(el.textContent).toEqual(title);
-        expect(link).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

package/src/modules/dx/cardTitle/cardTitle.css

@@ -1,41 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    --dx-c-card-title-color: var(--dx-g-text-heading-color);
-    --dx-c-card-title-font-size: var(--dx-g-text-xl);
-    --dx-c-card-title-line-height: 28px;
-    --dx-c-card-title-letter-spacing: -0.1px;
-    --dx-c-card-title-icon-size: 22px;
-}
-
-.dx-text-heading-4 {
-    color: var(--dx-c-card-title-color);
-    transition: var(--dx-g-transition-hue-1x);
-    font-size: var(--dx-c-card-title-font-size);
-    line-height: var(--dx-c-card-title-line-height);
-    letter-spacing: var(--dx-c-card-title-letter-spacing);
-}
-
-.nowrap {
-    white-space: nowrap;
-}
-
-dx-icon {
-    --dx-c-icon-size: var(--dx-c-card-title-icon-size);
-
-    display: inline-flex;
-    vertical-align: middle;
-    transform: translateY(-2px);
-}
-
-@media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
-        font-size: 20px;
-        line-height: 24px;
-    }
-
-    dx-icon {
-        --dx-c-card-title-icon-size: 20px;
-    }
-}

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,20 +0,0 @@
-<template>
-    <h3 class="dx-text-heading-4">
-        <a if:true={href} href={href} target={target}>
-            {titleToWrap}
-            <template if:true={needsSpace}>&#32;</template>
-            <span class="nowrap" if:true={isExternal}>
-                {titleNoWrap}&nbsp;
-                <dx-icon symbol="new_window" size="override"></dx-icon>
-            </span>
-        </a>
-        <template if:false={href}>
-            {titleToWrap}
-            <template if:true={needsSpace}>&#32;</template>
-            <span class="nowrap" if:true={isExternal}>
-                {titleNoWrap}&nbsp;
-                <dx-icon symbol="new_window" size="override"></dx-icon>
-            </span>
-        </template>
-    </h3>
-</template>

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -1,27 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class CardTitle extends LightningElement {
-    @api href!: string;
-    @api target?: string | null = null;
-    @api title!: string;
-
-    private get isExternal() {
-        return this.target === "_blank";
-    }
-
-    private get titleToWrap() {
-        return this.isExternal
-            ? this.title.substring(0, this.title.lastIndexOf(" "))
-            : this.title;
-    }
-
-    private get needsSpace() {
-        return this.titleToWrap.length > 0 && this.isExternal;
-    }
-
-    private get titleNoWrap() {
-        return this.isExternal
-            ? this.title.substring(this.title.lastIndexOf(" ") + 1)
-            : null;
-    }
-}

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

@@ -1,18 +0,0 @@
-import CardTrailheadModule from "dx/cardTrailheadModule";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-trailhead-module";
-const render = createRenderComponent(TAG, CardTrailheadModule);
-
-describe(TAG, () => {
-    it("renders", () => {
-        const element = render(mockProps);
-
-        const cardContent = element.shadowRoot.querySelector("dx-card-content");
-        expect(cardContent).not.toBeNull();
-
-        expect(cardContent.subtitle).toEqual("1000 Points");
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-export default {
-    badgeImgAlt: "Scenic view of a mountain.",
-    badgeImgSrc:
-        "https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png",
-    body:
-        "Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data.",
-    href: "https://developer.salesforce.com/",
-    length: "1 hr",
-    points: "1000",
-    title: "Lightning Platform API Basics With Extra Title"
-};

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -1,24 +0,0 @@
-@import "helpers/card";
-
-.badge {
-    --badge-size: var(--dx-g-spacing-5xl);
-    --badge-position: calc(50% - (var(--badge-size) / 2));
-
-    position: absolute;
-    top: var(--badge-position);
-    left: var(--badge-position);
-    height: var(--badge-size);
-    width: var(--badge-size);
-    z-index: 1;
-}
-
-@media screen and (max-width: 1024px) {
-    .badge {
-        --badge-size: 56px;
-    }
-
-    dx-card-content::part(body) {
-        display: none;
-        margin: 0 !important;
-    }
-}

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.html

@@ -1,20 +0,0 @@
-<template>
-    <dx-card-content
-        background-color={backgroundColor}
-        body={body}
-        featured={featured}
-        href={href}
-        label="Trailhead"
-        subtitle={subtitle}
-        target={target}
-        title={title}
-    >
-        <img
-            class="badge"
-            src={badgeImgSrc}
-            alt={badgeImgAlt}
-            slot="image-badge"
-        />
-        <span slot="datetime">{length}</span>
-    </dx-card-content>
-</template>

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

@@ -1,122 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-card-trailhead-module",
-    component: "dx-card-trailhead-module"
-};
-
-const createStyles = () => html`
-    <style>
-        dx-card-trailhead-module {
-            width: 400px;
-            max-width: 100%;
-            min-width: 240px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-
-    <dx-card-trailhead-module
-        badge-img-alt="Scenic view of a mountain."
-        badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-        body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-        href="https://developer.salesforce.com/"
-        length="1 hr"
-        points="1000"
-        title="Lightning Platform API Basics"
-    >
-    </dx-card-trailhead-module>
-`;
-
-export const Grid = () => html`
-    <dx-grid columns="three">
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data. Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics With Extra Title"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <dx-card-trailhead-module
-            badge-img-alt="Scenic view of a mountain."
-            badge-img-src="https://res.cloudinary.com/hy4kyit2a/f_auto,fl_lossy,q_70/learn/modules/service_lex/b677a8a9a27fbc8a41414576453eb16f_badge.png"
-            body="Get to know the Salesforce Lightning Platform APIs and learn to integrate your data."
-            href="https://developer.salesforce.com/"
-            length="1 hr"
-            points="1000"
-            title="Lightning Platform API Basics"
-        >
-        </dx-card-trailhead-module>
-        <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/cardTrailheadModule/cardTrailheadModule.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class CardTrailheadModule extends LightningElement {
-    @api backgroundColor?: string = "indigo-vibrant-90";
-    @api badgeImgAlt!: string;
-    @api badgeImgSrc!: string;
-    @api body!: string;
-    @api featured?: boolean = false;
-    @api href!: string;
-    @api length!: string;
-    @api points!: string | number;
-    @api target?: string | null = null;
-    @api title!: string;
-
-    get subtitle() {
-        return `${this.points} Points`;
-    }
-}

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

@@ -1,22 +0,0 @@
-import CardVideoPreview from "dx/cardVideoPreview";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-card-video-preview";
-const render = createRenderComponent(TAG, CardVideoPreview);
-
-describe(TAG, () => {
-    it("renders the content card, play button & date", () => {
-        const element = render(mockProps);
-
-        const els = [
-            "dx-card-content",
-            ".dx-play-button",
-            "dx-formatted-date-time"
-        ].map((query) => element.shadowRoot.querySelector(query));
-
-        expect(els).not.toContain(null);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,11 +0,0 @@
-const fourDaysAgo = new Date(Date.now() - 3.456e8).toISOString();
-
-export default {
-    datetime: fourDaysAgo,
-    title: "This is a cool video about driving up to estes park to go skiing",
-    body: "This is a cool video about driving up to estes park to go skiing",
-    href: "/test-href",
-    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
-    imgAlt: "Scenic view of a mountain",
-    target: "_blank"
-};

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -1,14 +0,0 @@
-@import "helpers/card";
-
-.dx-play-button {
-    position: absolute;
-    bottom: var(--dx-g-spacing-md);
-    left: var(--dx-g-spacing-md);
-    z-index: 1;
-}
-
-@media screen and (max-width: 1024px) {
-    dx-card-content::part(datetime) {
-        display: block;
-    }
-}

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -1,26 +0,0 @@
-<template>
-    <dx-card-content
-        body={body}
-        featured={featured}
-        href={href}
-        img-alt={imgAlt}
-        img-src={imgSrc}
-        layout={layout}
-        target={target}
-        title={title}
-    >
-        <dx-icon-badge
-            class="dx-play-button"
-            symbol="play"
-            background-color="white"
-            slot="image-badge"
-        ></dx-icon-badge>
-        <dx-formatted-date-time
-            slot="datetime"
-            day="2-digit"
-            month="long"
-            year="numeric"
-            value={datetime}
-        ></dx-formatted-date-time>
-    </dx-card-content>
-</template>