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

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

@@ -1,134 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-grid",
-    component: "dx-grid"
-};
-
-const createStyles = () => html`
-    <style>
-        h2 {
-            font-weight: bold;
-            font-size: 24px;
-            margin: 10px 0;
-        }
-        .placeholder {
-            background-color: #ababab;
-            border-radius: 8px;
-            height: 200px;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <h2>One Column</h2>
-
-    <dx-grid columns="one">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns</h2>
-
-    <dx-grid columns="two">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Left)</h2>
-
-    <dx-grid columns="two-slim-left">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Two Columns (Slim Right)</h2>
-
-    <dx-grid columns="two-slim-right">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Three Columns</h2>
-
-    <dx-grid columns="three">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Four Columns</h2>
-
-    <dx-grid columns="four">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (6 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (8 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (5 cards / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (7 cards / 4 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-        <div class="placeholder"></div>
-    </dx-grid>
-
-    <h2>Dynamic (1 card / 3 columns)</h2>
-
-    <dx-grid columns="dynamic">
-        <div class="placeholder"></div>
-    </dx-grid>
-`;

package/src/modules/dx/grid/grid.ts

@@ -1,72 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { GridVariant, LightningSlotElement } from "typings/custom";
-
-const DEFAULT_COLUMNS = "three";
-
-export default class Grid extends LightningElement {
-    @api
-    get columns() {
-        if (this._columns.includes("dynamic") && this._itemCount) {
-            return this.dynamicColumns;
-        }
-        return this._columns || DEFAULT_COLUMNS;
-    }
-    set columns(value: GridVariant) {
-        this._columns = value;
-    }
-
-    _columns!: GridVariant;
-    _itemCount: number | null = null;
-
-    private get className(): string {
-        return cx("container", `col-${this.columns}`);
-    }
-
-    private isMoreIdyllicColumnNum = (a: number, b: number): boolean => {
-        if (!this._itemCount) {
-            return false;
-        }
-        const remA = this._itemCount % a;
-        const remB = this._itemCount % b;
-        const relRemA = a - remA;
-        const relRemB = b - remB;
-        if (remA === 0 && remB === 0) {
-            return b > a;
-        }
-        if (remA === 0) {
-            return false;
-        }
-        if (remB === 0) {
-            return true;
-        }
-        return relRemB < relRemA;
-    };
-
-    private get dynamicColumns(): GridVariant {
-        if (!this._itemCount) {
-            return DEFAULT_COLUMNS;
-        }
-
-        const possibleColumns = [4, 3];
-
-        let ideal = possibleColumns[0];
-        for (let i = 1; i < possibleColumns.length; i++) {
-            if (this.isMoreIdyllicColumnNum(ideal, possibleColumns[i])) {
-                ideal = possibleColumns[i];
-            }
-        }
-
-        // @ts-ignore (no clue why "two" isn't being seen as a GridVariant type)
-        return (
-            {
-                4: "four",
-                3: "three"
-            }[ideal] || DEFAULT_COLUMNS
-        );
-    }
-
-    onSlotChange(e: Event) {
-        this._itemCount = (e.target as LightningSlotElement).assignedElements().length;
-    }
-}

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

@@ -1,82 +0,0 @@
-import GroupBio from "dx/groupBio";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-
-const TAG = "dx-group-bio";
-const render = createRenderComponent(TAG, GroupBio);
-
-describe(TAG, () => {
-    it("renders with passed in props", () => {
-        const element = render(mockProps);
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img.getAttribute("src")).toEqual(mockProps.imgSrc);
-        expect(img.getAttribute("alt")).toEqual(mockProps.imgAlt);
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name.textContent).toEqual(mockProps.name);
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position.textContent).toEqual(mockProps.position);
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors.textContent).toContain(
-            mockProps.descriptor1 +
-                mockProps.descriptor2 +
-                mockProps.descriptor3
-        );
-
-        const profileLink = element.shadowRoot.querySelector("dx-button");
-        expect(profileLink).not.toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render <img> when imgSrc is falsy", () => {
-        const element = render({
-            ...mockProps,
-            imgSrc: ""
-        });
-
-        const img = element.shadowRoot.querySelector("img");
-        expect(img).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render name when name is falsy", () => {
-        const element = render({
-            ...mockProps,
-            name: ""
-        });
-
-        const name = element.shadowRoot.querySelector(".name");
-        expect(name).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render position when position is falsy", () => {
-        const element = render({
-            ...mockProps,
-            position: ""
-        });
-
-        const position = element.shadowRoot.querySelector(".position");
-        expect(position).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render descriptors when variant is condensed", () => {
-        const element = render({
-            ...mockProps,
-            variant: "condensed"
-        });
-
-        const descriptors = element.shadowRoot.querySelector(".descriptors");
-        expect(descriptors).toBeNull();
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,15 +0,0 @@
-export default {
-    imgSrc: "https://placekitten.com/300/300",
-    imgAlt: "an adorable kitten",
-    imgSize: "large",
-    variant: "default",
-    name: "Mr. Mistoffelees",
-    position: "Chief Yarn Inspector",
-    descriptor1: "Lorem ipsum",
-    descriptor2: "Dolor sit",
-    descriptor3: "Amet",
-    profileHref: "https://salesforce.com",
-    profileText: "https://salesforce.com",
-    profileTarget: "_blank",
-    profileRel: "noopener"
-};

package/src/modules/dx/groupBio/groupBio.css

@@ -1,49 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.avatar {
-    border-radius: 9999px;
-    margin-bottom: var(--dx-g-spacing-md);
-}
-
-.name {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.avatar.size-small {
-    width: 50px;
-}
-
-.avatar.size-medium {
-    width: 100px;
-}
-
-.avatar.size-large {
-    width: 200px;
-}
-
-.body {
-    text-align: center;
-}
-
-.position {
-    color: var(--dx-g-blue-vibrant-50);
-}
-
-.position.condensed {
-    color: inherit;
-}
-
-.descriptors {
-    margin-top: var(--dx-g-spacing-sm);
-}
-
-.descriptors > *:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-xs);
-}

package/src/modules/dx/groupBio/groupBio.html

@@ -1,29 +0,0 @@
-<template>
-    <div class="container">
-        <div if:true={imgSrc}>
-            <img class={imgClass} src={imgSrc} alt={imgAlt} />
-        </div>
-        <div class="body">
-            <p if:true={name} class={nameClass}>{name}</p>
-            <p if:true={position} class={positionClass}>{position}</p>
-            <div
-                if:false={isCondensedVariant}
-                class="descriptors dx-text-body-2"
-            >
-                <p if:true={descriptor1}>{descriptor1}</p>
-                <p if:true={descriptor2}>{descriptor2}</p>
-                <p if:true={descriptor3}>{descriptor3}</p>
-                <p if:true={profileHref}>
-                    <dx-button
-                        href={profileHref}
-                        target={profileTarget}
-                        rel={profileRel}
-                        variant="inline-inherit"
-                    >
-                        {profileText}
-                    </dx-button>
-                </p>
-            </div>
-        </div>
-    </div>
-</template>

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

@@ -1,66 +0,0 @@
-import { html } from "lit-html";
-
-export default {
-    title: "dx/dx-group-bio",
-    component: "dx-group-bio",
-    argTypes: {
-        imgSize: {
-            control: {
-                type: "select",
-                options: ["small", "medium", "large"]
-            }
-        },
-        variant: {
-            control: {
-                type: "select",
-                options: ["default", "condensed"]
-            }
-        }
-    }
-};
-
-const createStyles = () => html`
-    <style>
-        #root {
-            float: left;
-        }
-    </style>
-`;
-
-export const Base = () => html`
-    ${createStyles()}
-    <dx-group-bio
-        img-src="https://placekitten.com/300/300"
-        img-alt="an adorable kitten"
-        img-size="large"
-        variant="default"
-        name="mr. mistoffelees"
-        position="chief yarn inspector"
-        descriptor1="lorem ipsum"
-        descriptor2="dolor sit"
-        descriptor3="amet"
-        profile-href="https://salesforce.com"
-        profile-text="https://salesforce.com"
-        profile-target="_blank"
-        profile-rel="noopener"
-    ></dx-group-bio>
-`;
-
-export const Condensed = () => html`
-    ${createStyles()}
-    <dx-group-bio
-        img-src="https://placekitten.com/300/300"
-        img-alt="an adorable kitten"
-        img-size="large"
-        variant="condensed"
-        name="mr. mistoffelees"
-        position="chief yarn inspector"
-        descriptor1="lorem ipsum"
-        descriptor2="dolor sit"
-        descriptor3="amet"
-        profile-href="https://salesforce.com"
-        profile-text="https://salesforce.com"
-        profile-target="_blank"
-        profile-rel="noopener"
-    ></dx-group-bio>
-`;

package/src/modules/dx/groupBio/groupBio.ts

@@ -1,41 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-export default class GroupBio extends LightningElement {
-    @api imgSrc: string = "";
-    @api imgAlt: string = "";
-    @api imgSize: "small" | "medium" | "large" = "large";
-    @api variant: "condensed" | "default" = "default";
-    @api name: string = "";
-    @api position: string = "";
-    @api descriptor1: string = "";
-    @api descriptor2: string = "";
-    @api descriptor3: string = "";
-    @api profileHref: string = "";
-    @api profileText: string = "";
-    @api profileTarget: string = "_blank";
-    @api profileRel: string = "noopener";
-
-    private get imgClass(): string {
-        return `avatar size-${this.imgSize}`;
-    }
-
-    private get nameClass(): string {
-        return `name ${
-            this.variant === "condensed"
-                ? "condensed dx-text-label-1"
-                : "dx-text-heading-4"
-        }`;
-    }
-
-    private get positionClass(): string {
-        return `position ${
-            this.variant === "condensed"
-                ? "condensed dx-text-body-3"
-                : "dx-text-heading-5"
-        }`;
-    }
-
-    private get isCondensedVariant(): boolean {
-        return this.variant === "condensed";
-    }
-}

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

@@ -1,69 +0,0 @@
-import GroupText from "dx/groupText";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-import Button from "dx/button";
-
-const TAG = "dx-group-text";
-const render = createRenderComponent(TAG, GroupText);
-
-describe(TAG, () => {
-    it("renders with no optional props", () => {
-        const element = render({
-            title: mockProps.title
-        });
-        const el: HTMLElement = element.shadowRoot.querySelector(".text-group");
-        expect(el).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders with all props", () => {
-        const element = render(mockProps);
-
-        const el: HTMLElement = element.shadowRoot.querySelector(".text-group");
-        const titleEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .title");
-        const titleAriaLevel = titleEl.getAttribute("aria-level");
-        const labelEl: HTMLElement = element.shadowRoot.querySelector(".label");
-        const subtitleEl: HTMLElement = element.shadowRoot.querySelector(
-            ".text-group span.subtitle"
-        );
-        const formattedDateTimeEl: HTMLElement =
-            element.shadowRoot.querySelector("dx-formatted-date-time");
-        const bodyEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .body");
-        const buttonGroupEl: HTMLElement = element.shadowRoot.querySelector(
-            ".text-group .button-group"
-        );
-        const buttonEls: Array<Button> = element.shadowRoot.querySelectorAll(
-            ".button-group dx-button"
-        );
-
-        expect(el).not.toBeNull();
-        expect(titleEl).not.toBeNull();
-        expect(titleEl.textContent).toEqual(element.title);
-        expect(titleAriaLevel).toEqual("2");
-        expect(labelEl).not.toBeNull();
-        expect(subtitleEl).not.toBeNull();
-        expect(formattedDateTimeEl).not.toBeNull();
-        expect(bodyEl).not.toBeNull();
-        expect(bodyEl.textContent).toEqual(element.body);
-        expect(buttonGroupEl).not.toBeNull();
-        expect(buttonEls).toHaveLength(3);
-        expect(buttonEls[0].variant).toEqual("primary");
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("renders title with specified aria-level", () => {
-        const ariaLevel = "1";
-        const element = render({ ...mockProps, titleAriaLevel: ariaLevel });
-
-        const titleEl: HTMLElement =
-            element.shadowRoot.querySelector(".text-group .title");
-        const titleAriaLevel = titleEl.getAttribute("aria-level");
-
-        expect(titleAriaLevel).toEqual(ariaLevel);
-
-        return expect(element).toBeAccessible();
-    });
-});

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

@@ -1,35 +0,0 @@
-const dateTime = new Date(0, 0, 1, 9, 0, 0).toISOString();
-
-export default {
-    label: "Featured API",
-    title: "Create powerful ecommerce experiences",
-    owner: "REST API",
-    attributionLink: JSON.stringify({
-        label: "Commerce Cloud",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    dateTime: dateTime,
-    dateText: "Last updated on",
-    body:
-        "Set up, create, and customize a sample app using the Commerce API. We give you the tools to build and embed commerce experiences across every customer touchpoint.",
-    primaryLink: JSON.stringify({
-        label: "Learn More about the Cloud API",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    secondaryLink: JSON.stringify({
-        label: "View API Reference",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    }),
-    tertiaryLink: JSON.stringify({
-        label: "Buy",
-        href:
-            "https://appexchange.salesforce.com/mktcollections/curated/c19response?d=cta-nav-external",
-        target: "_blank"
-    })
-};