@salesforcedevs/dx-components 1.3.194-alpha.0 → 1.3.194-alpha3

package/lwc.config.json

@@ -47,6 +47,7 @@
         "dx/formattedRichText",
         "dx/grid",
         "dx/groupText",
+        "dx/header",
         "dx/headerMobileNavMenu",
         "dx/headerNav",
         "dx/headerSearch",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.194-alpha.0",
+    "version": "1.3.194-alpha3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -12,7 +12,7 @@
     "dependencies": {
         "@coveo/headless": "2.16.5",
         "@floating-ui/dom": "1.5.1",
-        "@sfdocs-internal/wires": "0.6.89",
+        "@sfdocs-internal/wires": "0.6.90-alpha6",
         "@types/throttle-debounce": "^5.0.0",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
@@ -40,5 +40,8 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
+    },
+    "volta": {
+        "node": "16.19.1"
     }
 }

package/src/modules/dx/alert/alert.css

@@ -6,7 +6,7 @@
     --dx-c-alert-container-align-items: flex-start;
     --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
     --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
-    --dx-c-alert-warning-color: rgb(254 243 217);
+    --dx-c-alert-warning-color: rgb(254, 243, 217);
     --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
     --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
     --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -79,7 +79,7 @@ dx-dropdown {
     }
 
     nav.state-long
-        .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
+        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
         display: none;
     }
 
@@ -101,7 +101,7 @@ dx-dropdown {
         display: initial;
     }
 
-    .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
+    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
         display: none;
     }
 

package/src/modules/dx/cardDocs/cardDocs.css

@@ -32,7 +32,7 @@
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
-    display: box;
+    display: -webkit-box;
     overflow: hidden;
 }
 

package/src/modules/dx/cardGridDocs/cardGridDocs.css

@@ -24,6 +24,7 @@ dx-input {
 
 .pagination-container {
     max-width: fit-content;
+    max-width: -moz-fit-content;
     margin: var(--dx-g-spacing-lg) auto;
 }
 

package/src/modules/dx/cardNews/cardNews.css

@@ -25,7 +25,7 @@
 }
 
 .dx-text-display-4 {
-    margin: 4px 0;
+    margin: 4px 0 4px 0;
     color: inherit;
 }
 
@@ -53,7 +53,7 @@ img {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
-    margin: 4px 0 10px;
+    margin: 4px 0 10px 0;
 }
 
 .dx-card-size-large p {
@@ -126,29 +126,29 @@ img {
 
     .dx-card-size-normal p {
         letter-spacing: 0.2px;
-        margin: 12px 0 0;
+        margin: 12px 0 0 0;
     }
 
     .dx-card-size-normal .cta {
-        margin: 14px 0 -2px;
+        margin: 14px 0 -2px 0;
     }
 
     .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;
-        margin: 10px 0 0;
+        margin: 10px 0 0 0;
     }
 
     .dx-card-size-large p {
         font-size: 20px;
         line-height: 32px;
-        margin: 10px 0 0;
+        margin: 10px 0 0 0;
         letter-spacing: 0.72px;
     }
 
     .dx-card-size-large .cta {
-        margin: 24px 0 0;
+        margin: 24px 0 0 0;
     }
 
     .dx-card-news-img-vertical-align-middle {

package/src/modules/dx/cardStep/mockProps.ts

@@ -21,8 +21,7 @@ export const stepsData = [
                 'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
             notAvailableAlertInfo: {
                 title: "Not Available",
-                body:
-                    'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+                body: 'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
             },
             participatingCountryCodes: ["US", "CA", "IN"]
         },

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css

@@ -144,8 +144,8 @@ dx-button {
 }
 
 .bullet-list .bullet {
-    padding-left: 1.3957em;
-    text-indent: -1.3957em;
+    padding-left: 1.39571429em;
+    text-indent: -1.39571429em;
 }
 
 @media screen and (max-width: 768px) {

package/src/modules/dx/checkbox/checkbox.css

@@ -75,7 +75,8 @@ input:disabled + .checkbox-label {
         --disabled-inner-color: var(--dx-g-gray-60);
         --size: var(--dx-g-spacing-md);
 
-        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         height: var(--size);
         width: var(--size);
         outline: none;

package/src/modules/dx/checkboxNative/checkboxNative.css

@@ -6,6 +6,9 @@ input,
 span {
     vertical-align: middle;
     cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
     user-select: none;
 }
 

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -94,9 +94,10 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
-            ? value.trim()
-            : match[1]
+        this._codeBlock = (
+            (match = preTagRegexp.exec(value.trim())) === null
+                ? value.trim()
+                : match[1]
         ).trim();
     }
 
@@ -243,9 +244,8 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null = this.template.querySelector(
-                ".code-block-content"
-            );
+            const snippetContainer: HTMLElement | null =
+                this.template.querySelector(".code-block-content");
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent

package/src/modules/dx/codeBlock/customLanguages.js

@@ -23,13 +23,15 @@ export const ampscript = {
         },
         boolean: /\b(true|false|null)\b/i,
         number: /\b(0(x|X)[0-9a-fA-F]+|([0-9]+(\.[0-9]+)?))\b/,
-        keyword: /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
+        keyword:
+            /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
         operator: /==|!=|>|<|>=|<=|=/,
         variable: {
             pattern: /@\w+|\[\w+\]/,
             greedy: true
         },
-        constant: /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
+        constant:
+            /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
         logical: /\b(and|or|not)\b/i
     }
 };

package/src/modules/dx/codeBlock/lightTheme.css

@@ -39,19 +39,19 @@
 }
 
 .dx-theme-light .token.tag {
-    color: rgb(75 36 219);
+    color: rgb(75, 36, 219);
 }
 
 .dx-theme-light .token.attr-name {
-    color: rgb(0 107 102);
+    color: rgb(0, 107, 102);
 }
 
 .dx-theme-light .token.attr-value {
-    color: rgb(204 0 96);
+    color: rgb(204, 0, 96);
 }
 
 .dx-theme-light .token.doctype {
-    color: rgb(0 114 215);
+    color: rgb(0, 114, 215);
 }
 
 .dx-theme-light .token.prolog,

package/src/modules/dx/dropdown/dropdown.css

@@ -7,7 +7,8 @@
 
 .menu_list {
     display: flex;
-    flex-flow: column nowrap;
+    flex-direction: column;
+    flex-wrap: nowrap;
 }
 
 .menu-hidden::part(content) {
@@ -28,7 +29,8 @@
     }
 
     .menu-nested-2-col .menu_list {
-        flex-flow: row wrap;
+        flex-direction: row;
+        flex-wrap: wrap;
     }
 
     .menu-nested-2-col .menu_option {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -1,7 +1,7 @@
 @import "dxHelpers/reset";
 
 .indented-shape {
-    --background: rgb(170 203 255);
+    --background: rgb(170, 203, 255);
     --wide: 2px;
 
     background-color: var(--background);
@@ -72,7 +72,7 @@
 }
 
 .option-indented .option_label {
-    display: box;
+    display: -webkit-box;
     max-width: 300px;
     overflow: hidden;
     -webkit-line-clamp: 1;

package/src/modules/dx/feature/feature.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgb(0 20 45 / 40%);
+    --dx-c-feature-img-box-shadow: 0 6px 30px 0 rgba(0, 20, 45, 0.4);
     --dx-c-feature-description-left-img-src: url("https://a.sfdcstatic.com/developer-website/images/feature-backdrop1.svg");
     --dx-c-feature-description-max-width: 31.75rem;
     --dx-c-feature-img-margin-left: auto;

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -322,7 +322,7 @@ img {
     left: 0;
     width: 100%;
     height: 100%;
-    border: 1px solid rgb(24 24 24 / 10%);
+    border: 1px solid rgba(24, 24, 24, 0.1);
     border-radius: var(--image-radius);
     object-fit: cover;
 }
@@ -405,11 +405,11 @@ dx-image-and-label {
 /* DARK VARIANT */
 
 .variant_dark {
-    --label-color: rgb(190 199 246);
+    --label-color: rgb(190, 199, 246);
 
     background: var(
         --dx-c-featured-content-header-background-color,
-        linear-gradient(-180deg, rgb(40 23 153) 0%, rgb(46 43 182) 100%)
+        linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
     );
 }
 

package/src/modules/dx/filterMenu/filterMenu.css

@@ -12,7 +12,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    border: 1px solid rgb(201 201 201);
+    border: 1px solid rgb(201, 201, 201);
     border-radius: 4px;
     padding: 15px 0;
     position: relative;
@@ -21,6 +21,7 @@
 }
 
 .caret-down {
+    -webkit-transform: rotate(180deg); /* Safari */
     transform: rotate(180deg);
 }
 
@@ -52,7 +53,7 @@
     font-size: 14px;
     font-family: var(--dx-g-font-sans);
     font-weight: bold;
-    color: rgb(24 24 24);
+    color: rgb(24, 24, 24);
 }
 
 .first-layer {
@@ -88,6 +89,9 @@ svg,
 .filter-menu-title {
     background: transparent;
     cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
     user-select: none;
 }
 

package/src/modules/dx/footer/footer.css

@@ -152,10 +152,9 @@ footer.signup-variant-no-signup {
 .content-container_middle {
     display: grid;
     grid-gap: var(--dx-g-spacing-xl);
-    grid-template:
-        "logo general" auto
-        "socials general" max-content
-        "locales general" max-content / auto max-content;
+    grid-template-columns: auto max-content;
+    grid-template-rows: max-content;
+    grid-template-areas: "logo general" "socials general" "locales general";
     background: var(--dx-g-cloud-blue-vibrant-95);
     padding-top: var(--dx-g-spacing-4xl);
     padding-bottom: var(--dx-g-spacing-3xl);

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,132 @@
+<template>
+    <dx-brand-theme-provider brand={brand}>
+        <header class={className}>
+            <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                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={showTbidLogin}
+                    class="header-tbid-login"
+                    onclick={closeMobileNavMenu}
+                >
+                    <dw-tbid-login-menu
+                        tbid-api-base-url={tbidApiBaseUrl}
+                        tbid-base-url={tbidBaseUrl}
+                    ></dw-tbid-login-menu>
+                </div>
+                <div if:true={showSignup} class="header-login-signup">
+                    <dx-button
+                        aria-label="Browse Trials"
+                        size="small"
+                        href={signupLink}
+                        onclick={handleSignUpClick}
+                    >
+                        Browse Trials
+                    </dx-button>
+                </div>
+            </div>
+            <div class="header_l2">
+                <div class="header_l2_group header_l2_group-title">
+                    <a href="/" class="home-link" if:true={isValidSubtitle}>
+                        <dx-icon
+                            class="brand-icon"
+                            if:true={isValidBrand}
+                            sprite="salesforcebrand"
+                            symbol={brand}
+                            size="xlarge"
+                        ></dx-icon>
+                        <span class="dx-text-display-6 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,21 @@
+import { HeaderBase } from "dxBaseElements/headerBase";
+
+export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
+    private get showSignup(): boolean {
+        return this.signupLink
+            ? (this.mobile && !this.isSearchOpen) || !this.mobile
+            : false;
+    }
+
+    protected mobileBreakpoint(): string {
+        return "768px";
+    }
+
+    get isValidSubtitle() {
+        return this.isValidBrand || this.subtitle;
+    }
+}