@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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,73 +0,0 @@
-import GroupText from "dx/groupText";
-import { createRenderComponent } from "utils/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"
-    })
-};

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

@@ -1,81 +0,0 @@
-import { html } from "lit-html";
-import mockProps from "./__tests__/mockProps";
-import featureListMockProps from "../featuresList/__tests__/mockProps";
-import { renderStyle } from "../../utils/storybook/storybook";
-
-export default {
-    title: "dx/dx-group-text",
-    component: "dx-group-text"
-};
-
-const featureOptions = JSON.stringify(featureListMockProps.options);
-
-export const Base = () => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        label="Featured API"
-        title="Create powerful ecommerce experiences"
-        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."
-    ></dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        label="Featured API"
-        title="Create powerful ecommerce experiences"
-        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."
-        size="medium"
-    ></dx-group-text>
-`;
-
-export const BasePlusSubtitle = (args: any) => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        title="Create powerful ecommerce experiences"
-        owner="REST API"
-        dateTime="${args.dateTime}"
-        date-text="Last updated on"
-        attribution-link="${args.attributionLink}"
-    ></dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        title="Create powerful ecommerce experiences"
-        owner="REST API"
-        dateTime="${args.dateTime}"
-        date-text="Last updated on"
-        attribution-link="${args.attributionLink}"
-        size="medium"
-    ></dx-group-text>
-`;
-
-export const Slotted = (args: any) => html`
-    ${renderStyle("dx-group-text")}
-    <span>Large</span>
-    <dx-group-text
-        label="Featured API"
-        title="${args.title}"
-        primary-link="${args.primaryLink}"
-        secondary-link="${args.secondaryLink}"
-        tertiary-link="${args.tertiaryLink}"
-    >
-        <dx-features-list options="${featureOptions}"></dx-features-list>
-    </dx-group-text>
-
-    <span>Medium</span>
-    <dx-group-text
-        label="Featured API"
-        title="${args.title}"
-        primary-link="${args.primaryLink}"
-        secondary-link="${args.secondaryLink}"
-        tertiary-link="${args.tertiaryLink}"
-        size="medium"
-    >
-        <dx-features-list options="${featureOptions}"></dx-features-list>
-    </dx-group-text>
-`;
-
-BasePlusSubtitle.args = mockProps;
-Slotted.args = mockProps;
-Slotted.story = { parameters: { docs: { disable: true } } };

package/src/modules/dx/headTags/headTags.html

@@ -1,3 +0,0 @@
-<template>
-    <slot></slot>
-</template>

package/src/modules/dx/headTags/headTags.ts

@@ -1,39 +0,0 @@
-import { LightningElement } from "lwc";
-
-const syncElementAttributes = (elementA: Element, elementB: Element) => {
-    if (elementB.textContent) {
-        elementA.textContent = elementB.textContent;
-    }
-    const names = elementB.getAttributeNames();
-    names.forEach((name: string) => {
-        const val = elementB.getAttribute(name);
-        if (val) {
-            elementA.setAttribute(name, val);
-        }
-    });
-};
-
-export default class HeadTags extends LightningElement {
-    connectedCallback() {
-        const innerElements = this.querySelectorAll("*");
-        if (innerElements) {
-            Array.from(innerElements).forEach((innerElement) => {
-                const elementName = innerElement.getAttribute("name");
-                let existingElement = null;
-                if (elementName) {
-                    existingElement = document.head.querySelector(
-                        `meta[name="${elementName}"]`
-                    );
-                }
-                if (innerElement.tagName === "TITLE") {
-                    existingElement = document.head.querySelector("title");
-                }
-                if (existingElement) {
-                    syncElementAttributes(existingElement, innerElement);
-                    return;
-                }
-                document.head.appendChild(innerElement);
-            });
-        }
-    }
-}

package/src/modules/dx/header/__benchmarks__/header.benchmark.js

@@ -1,45 +0,0 @@
-// import Header from "dx/header";
-// import { createElement } from "lwc";
-
-// const navItems = [
-//     {
-//         id: "home",
-//         label: "Home",
-//         link: {
-//             href: "/developers",
-//             target: null
-//         }
-//     },
-//     {
-//         id: "documentation",
-//         label: "Documentation",
-//         link: {
-//             href: "/docs",
-//             target: null
-//         }
-//     },
-//     {
-//         id: "notes",
-//         label: "Notes",
-//         link: {
-//             href: "/notes",
-//             target: null
-//         }
-//     }
-// ];
-
-describe("dx-header", () => {
-    benchmark("creates and renders", () => {
-        let element;
-        run(() => {
-            // element = createElement("dx-header", {
-            //     is: Header
-            // });
-            // Object.assign(element, { navItems });
-            // document.body.appendChild(element);
-        });
-        after(() => {
-            return element && element.parentElement.removeChild(element);
-        });
-    });
-});