@salesforcedevs/dx-components 0.26.1-alpha0.2 → 0.26.1-alpha0.6

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

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

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

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

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

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

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

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

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

@@ -1,164 +0,0 @@
-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>
-`;