@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

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.ts

@@ -0,0 +1,93 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement, Link } from "typings/custom";
+import { isSlotEmpty } from "utils/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/header.css

@@ -0,0 +1,109 @@
+@import "helpers/commonHeader";
+
+:host {
+    --dx-c-header-search-width: 316px;
+    --dx-g-text-xs: 14px;
+}
+
+dx-breadcrumbs {
+    width: calc(
+        100% - var(--dx-c-header-search-width) - var(--dx-g-spacing-md)
+    );
+}
+
+dx-header-mobile-nav-menu {
+    --dx-c-color-background: var(--dx-g-brand-current-color-background);
+    --dx-c-button-color-background-inactive: var(
+        --dx-g-brand-current-button-color-background-inactive
+    );
+    --dx-c-button-color-background-active: var(
+        --dx-g-brand-current-button-color-background-active
+    );
+    --dx-c-color: var(--dx-g-brand-current-color);
+    --dx-c-color-border: var(--dx-g-brand-current-color-border);
+    --dx-c-color-background-2: var(--dx-g-brand-current-color-background-2);
+    --dx-c-button-color-background-inactive-hover: var(
+        --dx-g-brand-current-button-color-background-inactive-hover
+    );
+    --dx-c-color-border-2: var(--dx-g-brand-current-color-border-2);
+}
+
+.header_l2_group-title {
+    margin-right: var(--dx-g-spacing-4xl);
+}
+
+.header_l2_group-nav_menu-ctas {
+    display: none;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    padding-right: var(--dx-g-spacing-sm);
+    height: 100%;
+}
+
+.header_l2_group-nav_menu-ctas::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: var(--dx-g-spacing-sm);
+    height: calc(100% - var(--dx-g-spacing-md));
+    width: 1px;
+    background: transparent;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+header.has-navscrollshadow .header_l2_group-nav_menu-ctas::after {
+    background: var(--dx-g-brand-current-color-border);
+}
+
+.header_l2_group-nav_menu-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-secondary-color-hover: var(
+        --dx-g-brand-current-button-color-background-inactive
+    );
+}
+
+@media (max-width: 1024px) {
+    .header_l2 {
+        flex-wrap: wrap;
+        height: unset;
+        padding: 0;
+    }
+
+    .header_l2_group-title {
+        margin-right: 0;
+        padding: 12px var(--dx-g-page-padding-horizontal);
+    }
+
+    .header_l2_group {
+        width: 100%;
+    }
+
+    .header_l2_group-nav {
+        height: var(--dx-g-spacing-3xl);
+        padding: 0;
+        padding-left: var(--dx-g-spacing-sm);
+    }
+
+    .header_l2_group-nav_overflow {
+        margin-right: var(--dx-g-spacing-sm);
+    }
+
+    .header_version-dropdown {
+        margin-left: auto;
+    }
+
+    .has-nav-items .header_l2_group-title {
+        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
+    }
+}
+
+@media (max-width: 768px) {
+    dx-breadcrumbs {
+        width: 70%;
+    }
+
+    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
+        display: flex;
+    }
+}

package/src/modules/dx/header/header.html

@@ -0,0 +1,129 @@
+<template>
+    <dx-brand-theme-provider brand={brand}>
+        <header class={className}>
+            <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={bannerMarkup}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
+            <div class="header_l1">
+                <dx-breadcrumbs
+                    title={title}
+                    breadcrumbs={breadcrumbs}
+                    logo
+                    nav-items={navItems}
+                    pathname={pathname}
+                    truncate
+                ></dx-breadcrumbs>
+                <div class="header-cta-container">
+                    <dx-header-search
+                        if:true={hasSearch}
+                        coveo-organization-id={coveoOrganizationId}
+                        coveo-public-access-token={coveoPublicAccessToken}
+                        coveo-search-pipeline={coveoSearchPipeline}
+                        coveo-search-hub={coveoSearchHub}
+                        mobile={mobile}
+                        onstatechange={handleStateChange}
+                    ></dx-header-search>
+                </div>
+                <div if:true={showSignup} class="header-login-signup">
+                    <dx-button
+                        aria-label="Sign Up For Salesforce Developer Edition"
+                        size="small"
+                        href={signupLink}
+                        onclick={handleSignUpClick}
+                    >
+                        Sign Up
+                    </dx-button>
+                </div>
+            </div>
+            <div class="header_l2">
+                <div class="header_l2_group header_l2_group-title">
+                    <a href="/" class="home-link">
+                        <dx-icon
+                            class="brand-icon"
+                            if:true={isValidBrand}
+                            sprite="salesforcebrand"
+                            symbol={brand}
+                            size="xlarge"
+                        ></dx-icon>
+                        <span class="dx-text-heading-4 subtitle">
+                            {subtitle}
+                        </span>
+                    </a>
+                    <dx-dropdown
+                        class="header_version-dropdown"
+                        if:true={versions}
+                        options={versions}
+                        value={version}
+                        onchange={onVersionChange}
+                        small
+                    >
+                        <dx-button
+                            aria-label="Select Version"
+                            class="header_version-selector"
+                            variant="tertiary"
+                            icon-symbol="chevrondown"
+                        >
+                            {versionLabel}
+                        </dx-button>
+                    </dx-dropdown>
+                </div>
+                <div
+                    class="header_l2_group header_l2_group-nav"
+                    if:true={hasNavItems}
+                >
+                    <div class="header_l2_group-nav_menu-ctas">
+                        <dx-button
+                            aria-label="Toggle Mobile Nav Menu"
+                            class="header_l2_group-nav_menu-button"
+                            icon-size="large"
+                            icon-symbol={mobileMenuIconSymbol}
+                            variant="tertiary"
+                            onclick={toggleMobileNavMenu}
+                        ></dx-button>
+                    </div>
+                    <div
+                        class="header_l2_group-nav_overflow"
+                        onscroll={onNavScroll}
+                    >
+                        <dx-header-nav
+                            nav-items={navItems}
+                            onrequestopennavmenu={onRequestOpenNavMenu}
+                            pathname={pathname}
+                            variant="small"
+                        ></dx-header-nav>
+                        <dx-button
+                            aria-label={bailLabel}
+                            if:true={hasBailLink}
+                            href={bailHref}
+                            variant="tertiary"
+                            icon-symbol="new_window"
+                        >
+                            {bailLabel}
+                        </dx-button>
+                    </div>
+                </div>
+            </div>
+            <dx-header-mobile-nav-menu
+                nav-items={navItems}
+                onchange={onMobileNavMenuChange}
+                open={showMobileNavMenu}
+                pathname={pathname}
+                value={mobileNavMenuValue}
+                onrequestclose={closeMobileNavMenu}
+                if:true={hasNavItems}
+            >
+                <dx-button
+                    aria-label={bailLabel}
+                    if:true={hasBailLink}
+                    href={bailHref}
+                    variant="tertiary"
+                    icon-symbol="new_window"
+                >
+                    {bailLabel}
+                </dx-button>
+            </dx-header-mobile-nav-menu>
+        </header>
+    </dx-brand-theme-provider>
+</template>

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

@@ -0,0 +1,27 @@
+import { api } from "lwc";
+import { HeaderBase } from "base-elements/headerBase";
+import { toJson } from "utils/normalizers";
+import type { Option } from "typings/custom";
+
+export default class Header extends HeaderBase {
+    private _breadcrumbs!: Option[];
+
+    @api
+    get breadcrumbs() {
+        return this._breadcrumbs;
+    }
+
+    set breadcrumbs(value) {
+        this._breadcrumbs = toJson(value);
+    }
+
+    private get showSignup(): boolean {
+        return this.signupLink
+            ? (this.mobile && !this.isSearchOpen) || !this.mobile
+            : false;
+    }
+
+    protected mobileBreakpoint(): string {
+        return "768px";
+    }
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -0,0 +1,160 @@
+@import "helpers/reset";
+
+:host {
+    --dx-c-color-background: var(--dx-g-brand-default-color-background);
+    --dx-c-button-color-background-inactive: var(
+        --dx-g-brand-default-button-color-background-inactive
+    );
+    --dx-c-button-color-background-active: var(
+        --dx-g-brand-default-button-color-background-active
+    );
+    --dx-c-color: var(--dx-g-brand-default-color);
+    --dx-c-color-border: var(--dx-g-brand-default-color-border);
+    --dx-c-color-background-2: var(--dx-g-brand-default-color-background-2);
+    --dx-c-button-color-background-inactive-hover: var(
+        --dx-g-brand-default-button-color-background-inactive-hover
+    );
+    --dx-c-color-border-2: var(--dx-g-brand-default-color-border-2);
+}
+
+.nav-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 56vh;
+    overflow-y: auto;
+    padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-sm);
+    background: var(--dx-c-color-background);
+    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
+    transform: translateY(0);
+    border-top: 1px solid transparent;
+    transition: var(--dx-g-transition-transform-2x),
+        var(--dx-g-transition-hue-1x);
+    z-index: 1000;
+}
+
+.nav-menu.has-scrollshadow {
+    border-color: var(--dx-c-color-border-2);
+}
+
+.nav-menu.state-closed {
+    opacity: 0;
+    transform: translateY(-16px);
+    pointer-events: none;
+}
+
+.nav-menu ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-menu_item,
+.nav-menu_item_cta-main {
+    transition: var(--dx-g-transition-hue-1x);
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item_cta-main {
+    justify-content: space-between;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    line-height: 20px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.nav-menu ul > .nav-menu_item:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item.state-open {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item_cta-main:not(.state-active):hover {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
+    background: var(--dx-c-button-color-background-inactive-hover);
+}
+
+.nav-menu_item.state-open .chevrondown {
+    transform: rotateX(180deg);
+}
+
+.nav-menu_item_cta-options {
+    position: relative;
+    display: none;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item.state-open > .nav-menu_item_cta-options {
+    display: flex;
+}
+
+.nav-menu_item_cta {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.nav-menu_item_cta-main.state-active {
+    background: var(--dx-c-button-color-background-active);
+    color: var(--dx-c-color);
+}
+
+.nav-menu_item_cta-main > span {
+    transform: translateY(3px); /* ghost padding */
+}
+
+.nav-menu_item_cta-sub {
+    --dx-c-button-secondary-color-hover: var(
+        --dx-c-button-color-background-inactive-hover
+    );
+
+    font-size: var(--dx-g-text-sm);
+    width: 100%;
+}
+
+.nav-menu_item_cta-sub::part(container) {
+    justify-content: flex-start;
+}
+
+.nav-menu_item_cta-sub.state-active {
+    text-decoration: underline;
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
+    padding-top: var(--dx-g-spacing-xs);
+    margin-top: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--dx-g-spacing-md);
+    width: calc(100% - var(--dx-g-spacing-xl));
+    height: 1px;
+    background: var(--dx-c-color-border-2);
+}
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}