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

package/src/modules/dx/button/button.css

@@ -0,0 +1,175 @@
+@import "helpers/reset";
+
+:host {
+    width: min-content;
+    font-size: inherit;
+
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-justify-content: center;
+    --dx-c-button-opacity: 1;
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+}
+
+.button {
+    opacity: var(--dx-c-button-opacity);
+    width: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: var(--dx-c-button-justify-content);
+    user-select: none;
+    white-space: nowrap;
+    font-size: var(--dx-c-button-font-size);
+    transition: var(--dx-g-transition-hue-1x);
+    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.button:focus {
+    opacity: 1;
+}
+
+.button.variant_inline-inherit {
+    font-size: inherit;
+    text-transform: inherit;
+    user-select: inherit;
+    white-space: normal;
+}
+
+.button dx-icon {
+    display: inline;
+}
+
+.button.variant_inline dx-icon,
+.button.variant_inline-inherit dx-icon {
+    display: inline-block;
+    transform: translate(0, -2px);
+}
+
+.button > span {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.button:not(.variant_inline-inherit).font-display {
+    font-family: var(--dx-g-font-display);
+}
+
+.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
+    /* offset accounts for display font's ghost padding */
+    margin-top: 5px;
+}
+
+.button.font-sans {
+    font-family: var(--dx-g-font-sans);
+}
+
+.button.icon-right:not(.slot-empty) > *:nth-child(2) {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.button.icon-left:not(.slot-empty) > *:nth-child(2) {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.button.style-icon.slot-empty {
+    padding: 0;
+}
+
+.icon-right {
+    flex-direction: row;
+}
+
+.icon-left {
+    flex-direction: row-reverse;
+}
+
+/* sizes */
+
+.button.size-large {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.button.size-large.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
+}
+
+.button.size-small {
+    height: var(--dx-g-spacing-xl);
+}
+
+.button.size-small.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
+}
+
+/* primary */
+
+.button.variant_primary {
+    color: white;
+    background: var(--dx-c-button-primary-color);
+    border: 1px solid var(--dx-c-button-primary-color);
+}
+
+.button.variant_primary:hover {
+    background: var(--dx-c-button-primary-color-hover);
+    border-color: var(--dx-c-button-primary-color-hover);
+}
+
+/* secondary */
+
+.button.variant_secondary {
+    color: var(--dx-c-button-primary-color);
+    background: transparent;
+    border: 1px solid var(--dx-c-button-primary-color);
+}
+
+.button.variant_secondary:hover {
+    background: var(--dx-c-button-secondary-color-hover);
+}
+
+/* text primary */
+
+.button.variant_tertiary,
+.button.variant_inline,
+.button.variant_inline-inherit {
+    color: var(--dx-c-button-primary-color);
+    border: 1px solid transparent;
+}
+
+.button.variant_tertiary:hover {
+    background: var(--dx-c-button-secondary-color-hover);
+    border-color: var(--dx-c-button-secondary-color-hover);
+}
+
+/* inline */
+.button.variant_inline,
+.button.variant_inline-inherit {
+    display: inline;
+    padding: 0;
+    height: unset; /* please leave this here, actually is having an effect */
+    width: unset; /* please leave this here, actually is having an effect */
+}
+
+.button.variant_inline:hover,
+.button.variant_inline-inherit:hover {
+    color: var(--dx-c-button-inline-color-hover);
+}
+
+.button.state-disabled {
+    pointer-events: none;
+}
+
+/* custom */
+.button.variant_custom {
+    color: var(--dx-c-button-custom-color);
+    background: var(--dx-c-button-custom-background);
+    border: 1px solid var(--dx-c-button-custom-border);
+}
+
+.button.variant_custom:hover {
+    color: var(--dx-c-button-custom-color-hover);
+    background: var(--dx-c-button-custom-background-hover);
+    border-color: var(--dx-c-button-custom-border-hover);
+}

package/src/modules/dx/button/button.html

@@ -0,0 +1,43 @@
+<template>
+    <button
+        if:false={href}
+        class={className}
+        disabled={disabled}
+        type={type}
+        aria-label={ariaLabel}
+        part="container"
+    >
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
+        </span>
+        <dx-icon
+            if:true={showIcon}
+            sprite={iconSprite}
+            size={iconSize}
+            symbol={iconSymbol}
+        ></dx-icon>
+        <span class="temp-loading-message" if:true={loading}>Loading...</span>
+    </button>
+    <a
+        if:true={href}
+        href={href}
+        target={target}
+        rel={rel}
+        class={className}
+        disabled={disabled}
+        download={download}
+        aria-label={ariaLabel}
+        part="container"
+    >
+        <span if:false={loading}>
+            <slot onslotchange={onSlotChange}></slot>
+        </span>
+        <dx-icon
+            if:true={showIcon}
+            sprite={iconSprite}
+            size={iconSize}
+            symbol={iconSymbol}
+        ></dx-icon>
+        <span class="temp-loading-message" if:true={loading}>Loading...</span>
+    </a>
+</template>

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

@@ -0,0 +1,150 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-button",
+    component: "dx-button"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        dx-button {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Inline = () => html ` ${createStyles()}
+
+    <dx-button variant="inline"> Inline Button </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        variant="inline"
+        icon-symbol="link"
+    >
+        Inline Link
+    </dx-button>`;
+
+// prettier-ignore
+export const Primary = () => html ` ${createStyles()}
+
+    <dx-button icon-symbol="magicwand"> Primary Button </dx-button>
+
+    <dx-button icon-symbol="chevronright"></dx-button>
+
+    <dx-button icon-symbol="magicwand" size="large">
+        Large Primary Button
+    </dx-button>
+
+    <dx-button icon-symbol="chevronright" size="large"></dx-button>
+
+    <dx-button icon-symbol="chevronright" icon-position="left">
+        Primary Button
+    </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        icon-symbol="link"
+    >
+        Primary Link
+    </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        icon-symbol="link"
+        size="large"
+    >
+        Large Primary Link
+    </dx-button>
+
+    <dx-button
+        href="/assets/svg/salesforce-logo.svg"
+        download="salesforce-logo"
+        icon-symbol="download"
+        size="large"
+    >
+        Download Link
+    </dx-button>
+`;
+
+// prettier-ignore
+export const Secondary = () => html ` ${createStyles()}
+    
+    <dx-button variant="secondary" icon-symbol="magicwand">
+        Secondary Button
+    </dx-button>
+
+    <dx-button variant="secondary" icon-symbol="chevronright"> </dx-button>
+
+    <dx-button
+        variant="secondary"
+        icon-symbol="magicwand"
+        size="large"
+    >
+        Large Secondary Button
+    </dx-button>
+
+    <dx-button
+        variant="secondary"
+        icon-symbol="chevronright"
+        size="large"
+    ></dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        variant="secondary"
+        icon-symbol="link"
+    >
+        Secondary Link
+    </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        variant="secondary"
+        icon-symbol="link"
+        size="large"
+    >
+        Large Secondary Link
+    </dx-button>
+`;
+
+// prettier-ignore
+export const Tertiary = () => html ` ${createStyles()}
+
+    <dx-button variant="tertiary" icon-symbol="chevronright">
+        Tertiary Button
+    </dx-button>
+
+    <dx-button
+        variant="tertiary"
+        icon-symbol="chevronright"
+        size="large"
+    >
+        Large Tertiary Button
+    </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        variant="tertiary"
+        icon-symbol="link"
+    >
+        Tertiary Link
+    </dx-button>
+
+    <dx-button
+        href="http://tweetflight.wearebrightly.com/"
+        target="_blank"
+        variant="tertiary"
+        icon-symbol="link"
+        size="large"
+    >
+        Large Tertiary Link
+    </dx-button>
+`;

package/src/modules/dx/button/button.ts

@@ -0,0 +1,63 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    ButtonVariant,
+    IconSprite,
+    IconSize,
+    IconSymbol,
+    LightningSlotElement
+} from "typings/custom";
+
+export default class Button extends LightningElement {
+    @api ariaLabel: string = "";
+    @api disabled: boolean | null = null;
+    @api iconSize?: IconSize = "small";
+    @api iconSprite?: IconSprite = "utility";
+    @api iconSymbol?: IconSymbol;
+    @api iconPosition?: "right" | "left" = "right";
+    @api loading: boolean = false;
+    @api size: "large" | "small" = "small";
+    @api variant: ButtonVariant = "primary";
+    @api font: "display" | "sans" = "display";
+
+    // button props
+    @api type: "submit" | "reset" | "button" = "button";
+
+    // link props
+    @api href: string | null = null;
+    @api download: string | null = null;
+    @api target: "_self" | "_blank" | "_parent" | "_top" | null = null;
+    @api rel: string | null = null;
+
+    @api focus() {
+        const button = this.template.querySelector(".button");
+        if (button) {
+            button.focus();
+        }
+    }
+
+    private isSlotEmpty: boolean = true;
+
+    private get showIcon(): boolean {
+        return !!this.iconSymbol && !this.loading;
+    }
+
+    private get className(): string {
+        return cx(
+            "button",
+            this.disabled && "state-disabled",
+            `variant_${this.variant}`,
+            this.loading && "state-loading",
+            `size-${this.size}`,
+            !!this.iconSymbol && "style-icon",
+            this.isSlotEmpty && "slot-empty",
+            `font-${this.font}`,
+            this.iconPosition === "right" ? "icon-right" : "icon-left"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        const slot = e.target;
+        this.isSlotEmpty = slot.assignedElements().length !== 0;
+    }
+}

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

@@ -0,0 +1,26 @@
+import CardBlogPost from "dx/cardBlogPost";
+import { createRenderComponent } from "utils-internal/tests";
+import mockProps from "./mockProps";
+
+const TAG = "dx-card-blog-post";
+const render = createRenderComponent(TAG, CardBlogPost);
+const date = new Date().toISOString();
+
+describe(TAG, () => {
+    it("renders without datetime", () => {
+        const element = render(mockProps);
+
+        const cardContent: HTMLElement =
+            element.shadowRoot.querySelector("dx-card-content");
+        expect(cardContent).not.toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("renders with Datetime", () => {
+        const element = render({ ...mockProps, datetime: date });
+        const formatedDate = element.shadowRoot.querySelector(
+            "dx-formatted-date-time"
+        );
+        expect(formatedDate.value).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,12 @@
+export default {
+    authorHref: "https://developer.salesforce.com/blogs/author/josh-birk",
+    authorImgSrc: "https://placekitten.com/300/300",
+    authorLabel: "Mr. Mistoffelees",
+    body:
+        "Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned.",
+    href: "https://developer.salesforce.com/",
+    imgAlt: "Scenic view of a mountain.",
+    imgSrc: "https://i.imgur.com/FUsyxR5.jpg",
+    label: "Blog Post",
+    title: "Performance Testing on the Lightning Platform"
+};

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -0,0 +1,13 @@
+@import "helpers/card";
+
+dx-card-content {
+    --dx-c-body-max-lines: 3;
+}
+
+@media screen and (max-width: 1024px) {
+    dx-card-content::part(body),
+    dx-card-content::part(datetime) {
+        display: none;
+        margin: 0;
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -0,0 +1,24 @@
+<template>
+    <dx-card-content
+        author-href={authorHref}
+        author-img-src={authorImgSrc}
+        author-label={authorLabel}
+        body={body}
+        featured={featured}
+        href={href}
+        img-alt={imgAlt}
+        img-src={imgSrc}
+        label={label}
+        target={target}
+        title={title}
+    >
+        <dx-formatted-date-time
+            if:true={_datetime}
+            slot="datetime"
+            day="2-digit"
+            month="long"
+            year="numeric"
+            value={_datetime}
+        ></dx-formatted-date-time>
+    </dx-card-content>
+</template>

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

@@ -0,0 +1,164 @@
+import { html } from "lit-html";
+
+export default {
+    title: "dx/dx-card-blog-post",
+    component: "dx-card-blog-post"
+};
+
+const date = new Date().toISOString();
+
+const createStyles = () => html`
+    <style>
+        dx-card-blog-post {
+            margin-top: 25px;
+            margin-bottom: 25px;
+            width: 400px;
+        }
+    </style>
+`;
+
+export const Base = () => html`
+    ${createStyles()}
+    <dx-card-blog-post
+        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+        author-img-src="https://placekitten.com/300/300"
+        author-label="Mr. Mistoffelees"
+        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+        datetime="${date}"
+        href="https://developer.salesforce.com/"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        label="Blog Post"
+        title="Performance Testing on the Lightning Platform"
+    >
+    </dx-card-blog-post>
+    <dx-card-blog-post
+        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+        author-img-src="https://placekitten.com/300/300"
+        author-label="Mr. Mistoffelees"
+        body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+        datetime="${date}"
+        href="https://developer.salesforce.com/"
+        title="Performance Testing on the Lightning Platform"
+    >
+    </dx-card-blog-post>
+    <dx-card-blog-post
+        author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+        author-img-src="https://placekitten.com/300/300"
+        author-label="Mr. Mistoffelees"
+        body="Every year the Ecma International Technical Committee 39 (TC39), which Salesforce is a member of, releases a new edition of ECMA-262, the ECMAScript Language Specification standards, which JavaScript is based on. The next edition is ES2021 (ES12), which is currently in draft and planned to be released in June."
+        href="https://developer.salesforce.com/"
+        img-alt="Scenic view of a mountain."
+        img-src="https://i.imgur.com/FUsyxR5.jpg"
+        title="Performance Testing on the Lightning Platform"
+    >
+    </dx-card-blog-post>
+`;
+
+// prettier-ignore
+export const Grid = () => html`
+    <dx-grid columns="three">
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="This is a totally random sentence to make this longer. Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-blog-post
+            author-href="https://developer.salesforce.com/blogs/author/josh-birk"
+            author-img-src="https://placekitten.com/300/300"
+            author-label="Mr. Mistoffelees"
+            body="Do you know how your customizations will perform when the crowds show up? Confidence is hard-earned."
+            datetime="${date}"
+            href="https://developer.salesforce.com/"
+            img-alt="Scenic view of a mountain."
+            img-src="https://i.imgur.com/FUsyxR5.jpg"
+            title="Performance Testing on the Lightning Platform"
+        >
+        </dx-card-blog-post>
+        <dx-card-callout
+            background-color="indigo-vibrant-30"
+            href="/build-stuff"
+            title="Find an upcoming event"
+            label="Calendar"
+        ></dx-card-callout>
+    </dx-grid>
+`;