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

package/src/modules/dx/groupText/groupText.css

@@ -1,119 +0,0 @@
-@import "helpers/reset";
-@import "helpers/text";
-
-:host {
-    display: block;
-}
-
-.text-group {
-    display: flex;
-    flex-direction: column;
-
-    --dx-group-text-spacing-vertical-xl: var(--dx-g-spacing-2xl);
-    --dx-group-text-spacing-vertical-lg: var(--dx-g-spacing-lg);
-    --dx-group-text-spacing-vertical-sm: var(--dx-g-spacing-sm);
-}
-
-.hide-slot .slot-container {
-    display: none;
-}
-
-.text-group:not(.hide-slot) .slot-container {
-    margin-top: var(--dx-group-text-spacing-vertical-xl);
-}
-
-.label {
-    margin-bottom: var(--dx-group-text-spacing-vertical-lg);
-}
-
-/* subtitle */
-
-.subtitle {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-top: var(--dx-group-text-spacing-vertical-lg);
-}
-
-.subtitle > span {
-    position: relative;
-    white-space: nowrap;
-}
-
-.subtitle > *:not(:last-child) {
-    margin-right: var(--dx-g-spacing-lg);
-}
-
-.subtitle > *:not(:last-child)::after {
-    content: "";
-    position: absolute;
-    right: -12px;
-    top: calc(40% - 1px);
-    height: 2px;
-    width: 2px;
-    background: var(--dx-g-blue-vibrant-20);
-}
-
-/* body */
-
-.body {
-    margin-top: var(--dx-group-text-spacing-vertical-lg);
-}
-
-/* button group */
-
-.button-group {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    margin-top: var(--dx-group-text-spacing-vertical-xl);
-}
-
-.button-group > dx-button:not(:last-of-type) {
-    margin-right: var(--dx-g-spacing-sm);
-}
-
-/* breakpoints tablet */
-
-@media screen and (max-width: 1024px) {
-    .title.dx-text-heading-2 {
-        font-size: var(--dx-g-text-3xl);
-        line-height: var(--dx-g-spacing-2xl);
-    }
-
-    .subtitle.dx-text-heading-6 {
-        font-size: var(--dx-g-text-sm);
-    }
-
-    .body.dx-text-body-1 {
-        font-size: var(--dx-g-text-base);
-        line-height: var(--dx-g-spacing-lg);
-    }
-
-    .title.dx-text-heading-3 {
-        font-size: var(--dx-g-text-2xl);
-        line-height: var(--dx-g-spacing-xl);
-    }
-
-    .subtitle.dx-text-heading-7 {
-        font-size: var(--dx-g-text-xs);
-    }
-
-    .body.dx-text-body-2 {
-        font-size: var(--dx-g-text-sm);
-        line-height: var(--dx-g-spacing-lg);
-    }
-}
-
-/* breakpoints mobile */
-
-@media screen and (max-width: 768px) {
-    .button-group > dx-button {
-        width: 100%;
-    }
-
-    .button-group > dx-button:not(:last-of-type) {
-        margin-right: 0;
-        margin-bottom: var(--dx-g-spacing-sm);
-    }
-}

package/src/modules/dx/groupText/groupText.html

@@ -1,65 +0,0 @@
-<template>
-    <div class={className}>
-        <span if:true={label} class="label dx-text-heading-6">{label}</span>
-        <div class={titleClassname} role="heading" aria-level={titleAriaLevel}>
-            {title}
-        </div>
-        <span class={subtitleClassname} if:true={hasSubtitle}>
-            <span if:true={owner}>{owner}</span>
-            <span if:true={attributionLink}>
-                By&nbsp;
-                <dx-button
-                    href={attributionLink.href}
-                    target={attributionLink.target}
-                    size="large"
-                    variant="inline-inherit"
-                >
-                    {attributionLink.label}
-                </dx-button>
-            </span>
-            <span>
-                {dateText}
-                <dx-formatted-date-time
-                    value={dateTime}
-                    day="numeric"
-                    month="long"
-                    year="numeric"
-                ></dx-formatted-date-time>
-            </span>
-        </span>
-        <span class="body dx-text-body-1" if:true={body}>{body}</span>
-        <div class="slot-container">
-            <slot onslotchange={onSlotChange}></slot>
-        </div>
-        <div class="button-group" if:true={hasButtonGroup}>
-            <dx-button
-                if:true={primaryLink}
-                href={primaryLink.href}
-                target={primaryLink.target}
-                variant="primary"
-                size="large"
-            >
-                {primaryLink.label}
-            </dx-button>
-            <dx-button
-                if:true={secondaryLink}
-                href={secondaryLink.href}
-                target={secondaryLink.target}
-                variant="secondary"
-                size="large"
-            >
-                {secondaryLink.label}
-            </dx-button>
-            <dx-button
-                if:true={tertiaryLink}
-                href={tertiaryLink.href}
-                target={tertiaryLink.target}
-                variant="tertiary"
-                size="large"
-                icon-symbol="chevronright"
-            >
-                {tertiaryLink.label}
-            </dx-button>
-        </div>
-    </div>
-</template>

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-internal/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/groupText/groupText.ts

@@ -1,93 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils-internal/slot";
-import { toJson } from "utils/normalizers";
-
-type OptionalLink = Link | null;
-
-const LARGE = "large";
-const MEDIUM = "medium";
-
-const titleClasses = {
-    [LARGE]: "dx-text-heading-2",
-    [MEDIUM]: "dx-text-heading-3"
-};
-
-const subtitleClasses = {
-    [LARGE]: "dx-text-heading-6",
-    [MEDIUM]: "dx-text-heading-7"
-};
-
-export default class GroupText extends LightningElement {
-    @api title!: string;
-    @api body?: string;
-    @api owner?: string;
-    @api dateTime?: string;
-    @api dateText?: string;
-    @api label?: string;
-    @api titleAriaLevel: "1" | "2" = "2";
-    @api size: "medium" | "large" = LARGE;
-
-    @api
-    set attributionLink(value: string | OptionalLink) {
-        this._attributionLink = toJson(value);
-    }
-    get attributionLink() {
-        return this._attributionLink;
-    }
-
-    @api
-    set primaryLink(value: string | OptionalLink) {
-        this._primaryLink = toJson(value);
-    }
-    get primaryLink() {
-        return this._primaryLink;
-    }
-
-    @api
-    set secondaryLink(value: string | OptionalLink) {
-        this._secondaryLink = toJson(value);
-    }
-    get secondaryLink() {
-        return this._secondaryLink;
-    }
-
-    @api
-    set tertiaryLink(value: string | OptionalLink) {
-        this._tertiaryLink = toJson(value);
-    }
-    get tertiaryLink() {
-        return this._tertiaryLink;
-    }
-
-    private _attributionLink!: OptionalLink;
-    private _primaryLink!: OptionalLink;
-    private _secondaryLink!: OptionalLink;
-    private _tertiaryLink!: OptionalLink;
-    private isSlotEmpty: boolean = true;
-
-    private get className() {
-        return cx("text-group", this.isSlotEmpty && "hide-slot");
-    }
-
-    private get titleClassname() {
-        return cx("title", titleClasses[this.size]);
-    }
-
-    private get subtitleClassname() {
-        return cx("subtitle", subtitleClasses[this.size]);
-    }
-
-    private get hasButtonGroup(): boolean {
-        return !!(this.primaryLink || this.secondaryLink || this.tertiaryLink);
-    }
-
-    private get hasSubtitle(): boolean {
-        return !!(this.owner || this.attributionLink || this.dateTime);
-    }
-
-    private onSlotChange(e: LightningSlotElement): void {
-        this.isSlotEmpty = isSlotEmpty(e);
-    }
-}

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);
-        });
-    });
-});

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

@@ -1,236 +0,0 @@
-import Button from "dx/button";
-import Dropdown from "dx/dropdown";
-import Header from "dx/header";
-import Icon from "dx/icon";
-import { createRenderComponent } from "utils-internal/tests";
-import { ANALYTICS_INFO } from "utils-internal/headerBase";
-import { track } from "dx/instrumentation";
-import {
-    mockPropsDevelopers,
-    mockPropsEmployees,
-    mockPropsNoNavigation
-} from "./mockProps";
-
-const TAG = "dx-header";
-const render = createRenderComponent(TAG, Header);
-
-jest.mock("dx/instrumentation");
-
-describe("dx-header", () => {
-    it("renders", () => {
-        const subtitle = "testsubtitle";
-        const element = render({ ...mockPropsDevelopers, subtitle });
-        const subtitleEl = element.shadowRoot.querySelector(".subtitle");
-        const buttons: Array<HTMLElement> =
-            element.shadowRoot.querySelectorAll("dx-button");
-        const dropdown = element.shadowRoot.querySelector("dx-dropdown");
-        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
-
-        expect(subtitleEl.textContent).toEqual(subtitle);
-        expect(headerEl).not.toBeNull();
-        expect(buttons).toHaveLength(2);
-        expect(dropdown).toBeNull();
-
-        const brandIcon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("doesn't render subnav when navitems is empty", () => {
-        const element = render(mockPropsNoNavigation);
-
-        const els = element.querySelectorAll(
-            "dx-header-mobile-nav-menu, .header_l2_group-nav"
-        );
-
-        expect(els).toHaveLength(0);
-    });
-
-    it("renders the brand icon when a brand has an icon associated", () => {
-        const element = render(mockPropsEmployees);
-
-        const brandIcon: Icon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).not.toBeNull();
-        expect(brandIcon.symbol).toBe(mockPropsEmployees.brand);
-    });
-
-    it("doesn't render brand icon when no brand is provided", () => {
-        const element = render({ ...mockPropsDevelopers, brand: undefined });
-
-        const brandIcon: Icon = element.shadowRoot.querySelector(".brand-icon");
-        expect(brandIcon).toBeNull();
-    });
-
-    it("receives breadcrumbs", () => {
-        const breadcrumbs = [
-            {
-                href: "/apis/salesforce",
-                label: "Apis",
-                last: true,
-                asLink: false
-            }
-        ];
-
-        const element = render({ ...mockPropsDevelopers, breadcrumbs });
-        const breadcrumb = element.shadowRoot.querySelector("dx-breadcrumbs");
-
-        expect(breadcrumb.breadcrumbs).toEqual(breadcrumbs);
-        expect(breadcrumb).not.toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("receives versions", () => {
-        const version = { id: "123", label: "Test" };
-        const element = render({
-            ...mockPropsDevelopers,
-            versions: JSON.stringify([version])
-        });
-        const dropdown: Dropdown =
-            element.shadowRoot.querySelector("dx-dropdown");
-        expect(dropdown).not.toBeNull();
-        expect(dropdown.options).toHaveLength(1);
-
-        const [option] = dropdown.options;
-        expect(option).toHaveProperty("id", version.id);
-        expect(option).toHaveProperty("label", version.label);
-
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers event on version change", () => {
-        const versionsListParameter = [{ id: "123", label: "Test" }];
-        const element = render({
-            ...mockPropsDevelopers,
-            versions: JSON.stringify(versionsListParameter)
-        });
-        const dropdown: HTMLElement = element.shadowRoot.querySelector(
-            ".header_version-dropdown"
-        );
-        const mockVersionChange = jest.fn();
-        element.addEventListener("versionchange", mockVersionChange);
-
-        dropdown.dispatchEvent(new CustomEvent("change", { detail: "123" }));
-        expect(mockVersionChange).toBeCalledTimes(1);
-        expect(mockVersionChange.mock.calls[0][0].detail).toEqual("123");
-        return expect(element).toBeAccessible();
-    });
-
-    it("triggers event onrequestopennav", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
-        const headerMobile = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-
-        headerEl.dispatchEvent(
-            new CustomEvent("requestopennavmenu", { detail: "123" })
-        );
-
-        return Promise.resolve().then(() => {
-            expect(headerMobile.value).toEqual("123");
-            expect(headerMobile.open).toEqual(true);
-        });
-    });
-
-    it("tests toggle button", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const button: HTMLElement = element.shadowRoot.querySelector(
-            ".header_l2_group-nav_menu-button"
-        );
-        const header = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-        const toggleStatus = header.open;
-
-        button.click();
-
-        return Promise.resolve().then(() =>
-            expect(header.open).toEqual(!toggleStatus)
-        );
-    });
-
-    it("tests mobile nav change", () => {
-        const element = render({
-            ...mockPropsDevelopers
-        });
-        const headerMobile = element.shadowRoot.querySelector(
-            "dx-header-mobile-nav-menu"
-        );
-
-        headerMobile.dispatchEvent(
-            new CustomEvent("change", { detail: "test" })
-        );
-        return Promise.resolve().then(() => {
-            expect(headerMobile.value).toEqual("test");
-        });
-    });
-
-    it("renders signup button and has bailLink", () => {
-        const element = render({
-            ...mockPropsDevelopers,
-            bailHref: "test",
-            bailLabel: "test",
-            signupLink: "/"
-        });
-        const buttons: Array<Button> =
-            element.shadowRoot.querySelectorAll("dx-button");
-
-        expect(buttons[0].href).toEqual("/");
-        expect(buttons[2].href).toEqual("test");
-        return expect(element).toBeAccessible();
-    });
-
-    it("won't render search if any coveo properties are missing", () => {
-        const element = render({
-            subtitle: mockPropsDevelopers.subtitle,
-            navItems: mockPropsDevelopers.navItems
-        });
-        const headerSearch =
-            element.shadowRoot.querySelector("dx-header-search");
-
-        expect(headerSearch).toBeNull();
-        return expect(element).toBeAccessible();
-    });
-
-    it("signup button track is being called", () => {
-        const element = render(mockPropsDevelopers);
-
-        const button: HTMLElement =
-            element.shadowRoot.querySelector("dx-button");
-
-        button.click();
-
-        expect(track).toBeCalledTimes(1);
-        expect(track).toBeCalledWith(button, "custEv_signupStart", {
-            ...ANALYTICS_INFO,
-            clickUrl: "/sign-up"
-        });
-    });
-
-    it("hides signup button when signupLink property is empty", () => {
-        const updatedMockPropsDevelopers = {
-            ...mockPropsDevelopers,
-            signupLink: ""
-        };
-        const element = render(updatedMockPropsDevelopers);
-        const signupButtonContainer: HTMLElement =
-            element.shadowRoot.querySelector(".header-login-signup");
-        expect(signupButtonContainer).toBeNull();
-    });
-
-    it("hides banner when banner markup is empty", () => {
-        const bannerMarkup = "";
-        const updatedMockPropsDevelopers = {
-            ...mockPropsDevelopers,
-            bannerMarkup
-        };
-        const element = render(updatedMockPropsDevelopers);
-        const bannerElement: HTMLElement =
-            element.shadowRoot.querySelector("dx-banner");
-        expect(bannerElement).toBeNull();
-    });
-});