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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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