@salesforcedevs/dx-components 0.25.5 → 0.26.1-alpha0.3

package/src/modules/dx/icon/icon.ts

@@ -1,85 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils-internal/css";
-
-const fetches = new Map<string, Promise<any>>();
-
-const sizeMap = {
-    xsmall: "xs",
-    small: "sm",
-    medium: "md",
-    large: "lg",
-    xlarge: "xl",
-    "2xlarge": "2xl"
-};
-
-export default class Icon extends LightningElement {
-    @api sprite: IconSprite = "utility";
-    @api size: IconSize = "small";
-    @api symbol!: IconSymbol;
-    @api color?: string;
-
-    private node: SVGSymbolElement | undefined;
-
-    private get style() {
-        let stylestr = "";
-        if (this.size !== "override" && this.size in sizeMap) {
-            stylestr = `--dx-c-icon-size: var(--dx-g-icon-size-${
-                sizeMap[this.size]
-            });`;
-        }
-        if (this.color) {
-            stylestr = `${stylestr} fill: ${toDxColor(this.color)};`;
-        }
-        return stylestr;
-    }
-
-    private get assetUrl() {
-        return `/assets/icons/${this.sprite}-sprite/svg/symbols.svg`;
-    }
-
-    private get href() {
-        return `${this.assetUrl}#${this.symbol}`;
-    }
-
-    private get symbolId() {
-        return `dx__${this.sprite}__${this.symbol}`;
-    }
-
-    private async appendNodes() {
-        if (this.node && this.node.id === this.symbolId) {
-            return;
-        }
-        await this.fetchSprite(this.sprite);
-        const svg = this.template.querySelector("svg")!;
-        // TODO: Validate a better way
-        // eslint-disable-next-line @lwc/lwc/no-document-query
-        const node = document
-            .getElementById(this.symbolId)!
-            .cloneNode(true) as SVGSymbolElement;
-        while (svg.firstChild) {
-            svg.removeChild(svg.firstChild);
-        }
-        for (const n of Array.from(node.childNodes)) {
-            svg.appendChild(n);
-        }
-        svg.setAttribute("viewBox", node.getAttribute("viewBox")!);
-    }
-
-    private async fetchSprite(sprite: IconSprite) {
-        if (fetches.has(sprite)) {
-            return fetches.get(sprite);
-        }
-        const promise = fetch(this.assetUrl)
-            .then((res) => res.text())
-            .then((svg) => svg.replace(/id="/g, `id="dx__${sprite}__`))
-            .then((svg) => {
-                const node = document.createElement("div");
-                // eslint-disable-next-line @lwc/lwc/no-inner-html
-                node.innerHTML = svg;
-                document.body.appendChild(node);
-            });
-        fetches.set(sprite, promise);
-        return promise;
-    }
-}

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

@@ -1,17 +0,0 @@
-import IconBadge from "dx/iconBadge";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-icon-badge";
-const render = createRenderComponent(TAG, IconBadge);
-
-describe(TAG, () => {
-    it("console an error and set shape to circle if value isn't a valid shape", () => {
-        const component = render();
-        console.error = jest.fn();
-        component.shape = "test";
-
-        expect(console.error).toHaveBeenCalled();
-        expect(component.shape).toEqual("circle");
-        return expect(component).toBeAccessible();
-    });
-});

package/src/modules/dx/iconBadge/iconBadge.css

@@ -1,40 +0,0 @@
-@import "helpers/reset";
-
-:host {
-    display: block;
-
-    --dx-c-icon-badge-background-color: var(--dx-g-indigo-vibrant-50);
-    --dx-c-icon-badge-box-shadow: none;
-    --dx-c-icon-badge-color: white;
-    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-lg);
-    --dx-c-icon-badge-icon-transform: none;
-    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
-    --dx-c-icon-badge-transition: none;
-}
-
-.icon-badge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--dx-c-icon-badge-size);
-    width: var(--dx-c-icon-badge-size);
-    flex-shrink: 0;
-    background-color: var(--dx-c-icon-badge-background-color);
-    box-shadow: var(--dx-c-icon-badge-box-shadow);
-    transition: var(--dx-c-icon-badge-transition);
-}
-
-dx-icon {
-    --dx-c-icon-size: var(--dx-c-icon-badge-icon-size);
-    --dx-c-icon-color: var(--dx-c-icon-badge-color);
-
-    transform: var(--dx-c-icon-badge-icon-transform);
-}
-
-.shape-circle {
-    border-radius: 50%;
-}
-
-.shape-square {
-    border-radius: var(--dx-g-spacing-sm);
-}

package/src/modules/dx/iconBadge/iconBadge.html

@@ -1,10 +0,0 @@
-<template>
-    <div class={className} style={style}>
-        <dx-icon
-            color={color}
-            symbol={symbol}
-            sprite={sprite}
-            size="override"
-        ></dx-icon>
-    </div>
-</template>

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

@@ -1,32 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-icon-badge",
-    component: "dx-icon-badge"
-};
-
-export const Base = () => html`
-    <dx-icon-badge symbol="contract"></dx-icon-badge>
-
-    <br />
-    <dx-icon-badge
-        background-color="indigo-vibrant-30"
-        shape="square"
-        symbol="contract"
-    ></dx-icon-badge>
-`;
-
-export const UsinghHooks = () => html`
-    <style>
-        .badge-with-hook {
-            --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
-            --dx-c-icon-badge-size: var(--dx-g-icon-size-xl);
-            --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-lg);
-        }
-    </style>
-    <dx-icon-badge
-        class="badge-with-hook"
-        shape="square"
-        symbol="contract"
-    ></dx-icon-badge>
-`;

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,42 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils-internal/css";
-
-const validShapes = ["square", "circle"];
-
-export default class IconBadge extends LightningElement {
-    @api sprite: IconSprite = "utility";
-    @api symbol!: IconSymbol;
-    @api color?: string | null = null;
-    @api backgroundColor?: string;
-
-    _shape: IconBadgeShape = "circle";
-    @api
-    get shape() {
-        return this._shape;
-    }
-    set shape(value) {
-        if (!validShapes.includes(value)) {
-            console.error(
-                `[dx-icon-badge] Invalid shape provided "${value}". Shape must be type of: ${validShapes.join(
-                    ", "
-                )}`
-            );
-            this._shape = "circle";
-            return;
-        }
-        this._shape = value;
-    }
-
-    get className() {
-        return cx("icon-badge", `shape-${this.shape}`);
-    }
-
-    get style() {
-        return (
-            this.backgroundColor &&
-            `background-color: ${toDxColor(this.backgroundColor)}`
-        );
-    }
-}

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

@@ -1,39 +0,0 @@
-import ImageAndLabel from "dx/imageAndLabel";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-image-and-label";
-const render = createRenderComponent(TAG, ImageAndLabel);
-
-describe(TAG, () => {
-    it("renders with passed in props", () => {
-        const element = render(mockProps);
-
-        const link = element.shadowRoot.querySelector("a");
-        expect(link.getAttribute("href")).toEqual(mockProps.href);
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img.getAttribute("src")).toEqual(mockProps.imgSrc);
-
-        const label = element.shadowRoot.querySelector("span");
-        expect(label.textContent).toEqual(mockProps.label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders inside a div instead of a link when no href is given", () => {
-        const element = render({
-            imgSrc: mockProps.imgSrc,
-            imgSize: mockProps.imgSize,
-            label: mockProps.label
-        });
-
-        const link = element.shadowRoot.querySelector("a");
-        expect(link).toBeNull();
-
-        const div = element.shadowRoot.querySelector("div");
-        expect(div.className).toContain("container");
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,6 +0,0 @@
-export default {
-    imgSrc: "https://placekitten.com/300/300",
-    imgSize: "small",
-    label: "Mr. Mistoffelees",
-    href: "https://developer.salesforce.com/blogs/author/josh-birk"
-};

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,54 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
-
-:host {
-    --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);
-}
-
-.container {
-    display: flex;
-    align-items: center;
-}
-
-img {
-    border-radius: 9999px;
-    margin-right: var(--dx-g-spacing-sm);
-}
-
-span {
-    margin-top: 3px;
-    white-space: nowrap;
-}
-
-a img {
-    transition: var(--dx-g-transition-filter-2x);
-}
-
-a span {
-    transition: var(--dx-g-transition-hue-1x);
-}
-
-a:hover img {
-    filter: brightness(90%);
-}
-
-a:hover span {
-    color: var(--dx-g-button-heading-color-hover);
-}
-
-img.size-small {
-    width: var(--dx-g-spacing-lg);
-}
-
-img.size-medium {
-    width: 42px;
-}
-
-img.size-large {
-    width: 52px;
-}
-
-.dx-text-label-1-dark {
-    color: var(--dx-c-image-and-label-text-color);
-}

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -1,22 +0,0 @@
-<template>
-    <div if:false={href} class="container">
-        <img
-            if:true={imgSrc}
-            class={imgClass}
-            src={imgSrc}
-            alt={imgAlt}
-            part="image"
-        />
-        <span class="dx-text-label-1-dark" part="label">{label}</span>
-    </div>
-    <a if:true={href} href={href} class="container">
-        <img
-            if:true={imgSrc}
-            class={imgClass}
-            src={imgSrc}
-            alt={imgAlt}
-            part="image"
-        />
-        <span class="dx-text-label-1-dark" part="label">{label}</span>
-    </a>
-</template>

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

@@ -1,48 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-image-and-label",
-    component: "dx-image-and-label",
-    argTypes: {
-        imgSize: {
-            control: {
-                type: "select",
-                options: ["small", "medium", "large"]
-            }
-        }
-    }
-};
-
-const createStyle = () => html`
-    <style>
-        dx-image-and-label {
-            --dx-c-image-and-label-text-color: red;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    <dx-image-and-label
-        img-src="https://placekitten.com/300/300"
-        img-size="small"
-        label="Mr. Mistoffelees"
-    ></dx-image-and-label>
-`;
-
-export const ColoredLabel = () => html`
-    ${createStyle()}
-    <dx-image-and-label
-        img-src="https://placekitten.com/300/300"
-        img-size="small"
-        label="Mr. Mistoffelees"
-    ></dx-image-and-label>
-`;
-
-export const Link = () => html`
-    <dx-image-and-label
-        href="https://developer.salesforce.com/blogs/author/josh-birk"
-        img-src="https://placekitten.com/300/300"
-        img-size="small"
-        label="Mr. Mistoffelees"
-    ></dx-image-and-label>
-`;

package/src/modules/dx/imageAndLabel/imageAndLabel.ts

@@ -1,16 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class ImageAndLabel extends LightningElement {
-    @api imgSrc!: string;
-    @api imgSize: "small" | "medium" | "large" = "small";
-    @api label!: string;
-    @api href?: string | null = null;
-
-    private get imgAlt() {
-        return `Avatar for ${this.label}`;
-    }
-
-    private get imgClass() {
-        return `size-${this.imgSize}`;
-    }
-}