@salesforcedevs/dx-components 0.0.0

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

@@ -0,0 +1,111 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement, Link } from "typings/custom";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
+
+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"
+};
+
+const ANALYTICS_INFO = {
+    elementType: "button",
+    destinationType: "internal",
+    ctaClick: true
+};
+
+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);
+    }
+
+    private trackClick(event: Event) {
+        const payload = {
+            ...ANALYTICS_INFO,
+            clickText: event.currentTarget.innerText,
+            itemTitle: event.currentTarget.innerText,
+            clickUrl: event.currentTarget.href
+        };
+
+        track(event.target!, "custEv_ctaButtonClick", payload);
+    }
+}

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,99 @@
+@import "dxHelpers/commonHeader";
+
+:host {
+    --dx-c-header-search-width: 316px;
+    --dx-g-text-xs: 14px;
+}
+
+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) {
+    .header_l2_group-nav > .header_l2_group-nav_menu-ctas {
+        display: flex;
+    }
+}

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

@@ -0,0 +1,122 @@
+<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-logo label={title}></dx-logo>
+                <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,13 @@
+import { HeaderBase } from "dxBaseElements/headerBase";
+
+export default class Header extends HeaderBase {
+    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 "dxHelpers/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;
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html

@@ -0,0 +1,73 @@
+<template>
+    <nav
+        aria-label="Navigation Menu"
+        class={className}
+        role="navigation"
+        onscroll={onScroll}
+    >
+        <ul>
+            <template for:each={navItems} for:item="navItem">
+                <li
+                    class={navItem.liClassName}
+                    key={navItem.id}
+                    aria-expanded={navItem.open}
+                    data-id={navItem.id}
+                >
+                    <!-- NAV ITEM [WITHOUT OPTIONS] -->
+                    <a
+                        class={navItem.className}
+                        href={navItem.link.href}
+                        if:false={navItem.options}
+                        onclick={onClickLink}
+                    >
+                        <span>{navItem.label}</span>
+                    </a>
+
+                    <!-- NAV ITEM [WITH OPTIONS] -->
+                    <button
+                        aria-label="Toggle accordian open"
+                        class="nav-menu_item_cta nav-menu_item_cta-main"
+                        data-id={navItem.id}
+                        if:true={navItem.options}
+                        onclick={onChange}
+                    >
+                        <span>{navItem.label}</span>
+                        <dx-icon
+                            class="chevrondown"
+                            symbol="chevrondown"
+                            size="medium"
+                        ></dx-icon>
+                    </button>
+                    <template if:true={navItem.options}>
+                        <template for:each={navItem.options} for:item="options">
+                            <div
+                                class="nav-menu_item_cta-options"
+                                key={options.id}
+                            >
+                                <template if:true={options.options}>
+                                    <template
+                                        for:each={options.options}
+                                        for:item="navSubItem"
+                                    >
+                                        <dx-header-mobile-nav-menu-option
+                                            key={navSubItem.id}
+                                            href={navSubItem.link.href}
+                                            class-name={navSubItem.className}
+                                            icon-symbol={navSubItem.iconSymbol}
+                                            menu-label={navItem.label}
+                                            item-label={navSubItem.label}
+                                            onclick={onClickLink}
+                                            target={navSubItem.link.target}
+                                        ></dx-header-mobile-nav-menu-option>
+                                    </template>
+                                </template>
+                            </div>
+                        </template>
+                    </template>
+                </li>
+            </template>
+        </ul>
+        <slot></slot>
+    </nav>
+    <div class="backdrop" if:true={open} onclick={onClickBackground}></div>
+</template>