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

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

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

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

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

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

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

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

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

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

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