@salesforcedevs/dx-components 0.26.2 → 0.28.0

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

@@ -1,53 +0,0 @@
-import Hr from "dx/hr";
-import { createRenderComponent } from "utils-internal/tests";
-import {
-    separator as separatorProps,
-    heading as headingProps,
-    link as linkProps,
-    loadMore as loadMoreProps
-} from "./mockProps";
-
-const TAG = "dx-hr";
-const render = createRenderComponent(TAG, Hr);
-
-describe(TAG, () => {
-    it("renders as an <h2> when given text", () => {
-        const element = render(headingProps);
-        const h2 = element.shadowRoot.querySelector("h2");
-        expect(h2).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders a <p> separator when not given text", () => {
-        const element = render(separatorProps);
-        const p = element.shadowRoot.querySelector("p");
-        expect(p).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with a button and the given text when used with the link variant", () => {
-        const element = render(linkProps);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-        expect(dxButton).not.toBeNull();
-        expect(dxButton.href).toEqual(linkProps.href);
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with a button and when used with the load-more variant", () => {
-        const element = render(loadMoreProps);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-        expect(dxButton).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers a custom loadmore event when used with the load-more variant and the button gets clicked", () => {
-        const element = render(loadMoreProps);
-        const mockLoadMore = jest.fn();
-        element.addEventListener("loadmore", mockLoadMore);
-        const dxButton = element.shadowRoot.querySelector("dx-button");
-
-        dxButton.click();
-        expect(mockLoadMore).toHaveBeenCalled();
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,16 +0,0 @@
-export const heading = {
-    text: "Heading"
-};
-
-export const link = {
-    href: "https://salesforce.com",
-    text: "View more episodes",
-    variant: "link"
-};
-
-export const loadMore = {
-    text: "Load more stuff",
-    variant: "load-more"
-};
-
-export const separator = {};

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

@@ -1,50 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-hr",
-    component: "dx-hr"
-};
-
-const createStyles = () => html`
-    <style>
-        body {
-            padding: 12px 0 0 0 !important;
-        }
-        .title {
-            margin-left: 24px;
-        }
-    </style>
-`;
-
-const title = (value: string) => html`<span class="title">${value}</span>`;
-
-export const Separator = () => html`
-    ${createStyles()}
-
-    <dx-hr></dx-hr>
-`;
-
-export const Heading = () => html`
-    ${createStyles()} ${title("Heading Less Spacing")}
-    <dx-hr text="Heading" spacing="md"></dx-hr>
-
-    ${title("Heading No spacing")}
-    <dx-hr text="Heading" spacing="${null}"></dx-hr>
-
-    ${title("Heading Storybook Controlled")}
-    <dx-hr text="Heading"></dx-hr>
-`;
-
-export const Link = () => html`
-    ${createStyles()} ${title("Link")}
-    <dx-hr
-        variant="link"
-        href="https://salesforce.com"
-        text="Visit another page"
-    ></dx-hr>
-`;
-
-export const LoadMore = () => html`
-    ${createStyles()} ${title("Load More")}
-    <dx-hr variant="load-more" text="Load more content"></dx-hr>
-`;

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

@@ -1,54 +0,0 @@
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils-internal/tests";
-
-const TAG = "dx-icon";
-const render = createRenderComponent(TAG, Icon);
-
-describe(TAG, () => {
-    it("renders null when not given a symbol property", () => {
-        const element = render();
-        const svgEl = element.shadowRoot.querySelector("svg");
-        expect(svgEl).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an icon defaulted to size small", () => {
-        const element = render({ symbol: "search" });
-        const svgEl = element.shadowRoot.querySelector("svg");
-        expect(svgEl.getAttribute("style")).toContain(
-            "--dx-c-icon-size: var(--dx-g-icon-size-sm)"
-        );
-        const href = element.shadowRoot
-            .querySelector("use")
-            .getAttribute("xlink:href");
-        expect(href).toContain(
-            "/assets/icons/utility-sprite/svg/symbols.svg#search"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders an hot-orange-vibrant-30 medium icon", () => {
-        const element = render({
-            symbol: "search",
-            color: "hot-orange-vibrant-30"
-        });
-        const svgEl = element.shadowRoot.querySelector("svg");
-
-        expect(svgEl.getAttribute("style")).toContain(
-            "fill: var(--dx-g-hot-orange-vibrant-30);"
-        );
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders the use element with the correct xlink:href", () => {
-        const element = render({ symbol: "audio", sprite: "doctype" });
-
-        const useEl = element.shadowRoot.querySelector("use");
-        const href = useEl.getAttribute("xlink:href");
-        expect(href).toContain(
-            "/assets/icons/doctype-sprite/svg/symbols.svg#audio"
-        );
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,100 +0,0 @@
-import { html } from "lit-html";
-
-const SIZE_OPTIONS = [
-    "xsmall",
-    "small",
-    "medium",
-    "large",
-    "xlarge",
-    "2xlarge"
-];
-const BRAND_ICONS = [
-    "analytics",
-    "collaboration",
-    "commerce",
-    "employees",
-    "experience",
-    "heroku",
-    "industries",
-    "integration",
-    "learning",
-    "marketing",
-    "partners",
-    "platform",
-    "sales",
-    "service",
-    "success",
-    "slack"
-];
-
-export default {
-    title: "dx/dx-icon",
-    component: "dx-icon"
-};
-
-const createStyles = () => html`
-    <style>
-        span {
-            color: grey;
-        }
-
-        dx-icon {
-            margin-top: 8px;
-            margin-bottom: 32px;
-        }
-    </style>
-`;
-
-export const Sizes = () => html`
-    ${createStyles()}
-    <span>Size: xsmall</span>
-    <dx-icon size="xsmall" symbol="edit"></dx-icon>
-
-    <span>Size: small</span>
-    <dx-icon size="small" symbol="edit"></dx-icon>
-
-    <span>Size: medium</span>
-    <dx-icon size="medium" symbol="edit"></dx-icon>
-
-    <span>Size: large</span>
-    <dx-icon size="large" symbol="edit"></dx-icon>
-
-    <span>Size: xlarge</span>
-    <dx-icon size="xlarge" symbol="edit"></dx-icon>
-
-    <span>Size: 2xlarge</span>
-    <dx-icon size="2xlarge" symbol="edit"></dx-icon>
-`;
-
-export const SalesforceBrandIcons = ({
-    sprite,
-    symbol,
-    size
-}: {
-    sprite: string;
-    symbol: string;
-    size: string;
-}) => html`
-    <dx-icon sprite="${sprite}" symbol="${symbol}" size="${size}"></dx-icon>
-`;
-
-SalesforceBrandIcons.args = {
-    symbol: "learning",
-    sprite: "salesforcebrand",
-    size: "2xlarge"
-};
-
-SalesforceBrandIcons.argTypes = {
-    size: {
-        control: {
-            type: "select",
-            options: SIZE_OPTIONS
-        }
-    },
-    symbol: {
-        control: {
-            type: "select",
-            options: BRAND_ICONS
-        }
-    }
-};

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.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/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.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>
-`;