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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+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"
+    })
+};