@salesforcedevs/dx-components 1.3.52-alpha → 1.3.54-alpha.0

package/lwc.config.json

@@ -4,7 +4,6 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
-        "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.52-alpha",
+    "version": "1.3.54-alpha.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -11,7 +11,7 @@
     },
     "dependencies": {
         "@coveo/headless": "^1.32.0",
-        "@floating-ui/dom": "^0.5.3",
+        "@floating-ui/dom": "^1.0.4",
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
@@ -23,6 +23,7 @@
         "lodash.kebabcase": "^4.1.1",
         "microtip": "0.2.2",
         "salesforce-oauth2": "^0.2.0",
+        "user": "0.0.0",
         "uuid": "^9.0.0"
     },
     "devDependencies": {

package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg

@@ -1,5 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol id="crm-analytics" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+        <path class="acls-1" d="M56 53h-4V9c0-1.1-.9-2-2-2H38c-1.1 0-2 .9-2 2v13H26c-1.1 0-2 .9-2 2v13H14c-1.1 0-2 .9-2 2v14H8c-1.1 0-2 .9-2 2s.9 2 2 2h48c1.1 0 2-.9 2-2s-.9-2-2-2z" fill="#032d60"/>
+        <path class="acls-1" fill="#032d60" d="M16 41h8v12h-8zM28 39V26h8v27h-8V39zM40 24V11h8v42h-8V24z"/>
+        <path class="acls-3" fill="#0d9dda" d="M16 41h8v12h-8z"/>
+        <path class="acls-2" fill="#fff" d="M36 26h-8v27h8V26z"/>
+        <path class="acls-3" fill="#0d9dda" d="M48 11h-8v42h8V11z"/>
+    </symbol>
     <symbol id="net-zero" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
         <path class="acls-1"
             d="M44.61 39H51a2 2 0 0 0 1.71-3l-19-31a2 2 0 0 0-3.42 0l-19 31A2 2 0 0 0 13 39h6.39L11.3 51.94a2 2 0 0 0-.05 2A2 2 0 0 0 13 55h17v3a2 2 0 0 0 4 0v-3h17a2 2 0 0 0 1.75-1 2 2 0 0 0 0-2zM34 51V37a2 2 0 0 0-4 0v14H16.61l8.09-12.94a2 2 0 0 0 .05-2A2 2 0 0 0 23 35h-6.43L32 9.83 47.43 35H41a2 2 0 0 0-1.75 1 2 2 0 0 0 0 2l8.14 13z"

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

@@ -36,26 +36,34 @@
     --swoop-height: var(--dx-c-featured-content-header-swoop-height);
     --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
+    --label-color: var(--dx-g-indigo-vibrant-40);
 
     position: relative;
-    padding: var(--dx-c-featured-content-header-padding-vertical)
-        var(--dx-c-featured-content-header-padding-horizontal);
     background: var(
         --dx-c-featured-content-header-background-color,
         var(--dx-g-indigo-vibrant-90)
     );
 }
 
+.container-layout {
+    padding: var(--dx-c-featured-content-header-padding-vertical)
+        var(--dx-c-featured-content-header-padding-horizontal);
+    background-image: var(--background-image);
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: contain;
+}
+
 /* LAYOUTS */
 
-.img-placement_inline {
+.img-placement_inline .container-layout {
     display: grid;
     grid-template-areas: "label label" "main image";
     grid-template-columns: 50% auto;
     grid-gap: 0 80px;
 }
 
-.img-placement_below {
+.img-placement_below .container-layout {
     --swoop-inset: calc(80px + 38vw);
 
     margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
@@ -278,6 +286,7 @@
     left: unset;
     width: 126px;
     height: 126px;
+    z-index: 1;
 }
 
 @media screen and (max-width: 1230px) {
@@ -356,7 +365,7 @@ a.image-container > img {
 
 .label {
     grid-area: label;
-    color: var(--dx-g-indigo-vibrant-40);
+    color: var(--dx-c-featured-content-label-color, var(--label-color));
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
@@ -380,7 +389,10 @@ dx-image-and-label {
 }
 
 /* DARK VARIANT */
+
 .variant_dark {
+    --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%)
@@ -391,10 +403,6 @@ dx-image-and-label {
     --dx-c-image-and-label-text-color: white;
 }
 
-.variant_dark .label {
-    color: rgb(190, 199, 246);
-}
-
 .variant_dark .title,
 .variant_dark .body {
     color: white;
@@ -457,7 +465,7 @@ dx-image-and-label {
         --swoop-inset: 64px;
     }
 
-    .img-placement_inline {
+    .img-placement_inline .container-layout {
         display: grid;
         grid-template-areas: "label" "image" "main";
         grid-template-columns: 100%;

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -1,117 +1,119 @@
 <template>
-    <div class={classname} part="container">
-        <template if:true={labelAsPrimaryHeading}>
-            <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
-        </template>
-        <template if:false={labelAsPrimaryHeading}>
-            <p if:true={label} class="label dx-text-heading-4">{label}</p>
-        </template>
-        <div class="featured-content-main-content">
-            <template if:false={labelAsPrimaryHeading}>
-                <h1 class="title dx-text-heading-2">
-                    <a
-                        class="title-link"
-                        if:true={href}
-                        href={href}
-                        target={target}
-                        onmouseenter={setLinkHovered}
-                        onmouseleave={setLinkInactive}
-                    >
-                        {title}
-                    </a>
-                    <template if:false={href}>{title}</template>
-                </h1>
-            </template>
+    <div class={classname} part="container" style={style}>
+        <div class="container-layout">
             <template if:true={labelAsPrimaryHeading}>
-                <h2 class="title dx-text-heading-2">
-                    <a
-                        class="title-link"
-                        if:true={href}
-                        href={href}
-                        target={target}
-                        onmouseenter={setLinkHovered}
-                        onmouseleave={setLinkInactive}
-                    >
-                        {title}
-                    </a>
-                    <template if:false={href}>{title}</template>
-                </h2>
+                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
             </template>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
+            <template if:false={labelAsPrimaryHeading}>
+                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+            </template>
+            <div class="featured-content-main-content">
+                <template if:false={labelAsPrimaryHeading}>
+                    <h1 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h1>
+                </template>
+                <template if:true={labelAsPrimaryHeading}>
+                    <h2 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h2>
                 </template>
+                <div class="authors" if:true={authors}>
+                    <template for:each={authors} for:item="author">
+                        <dx-image-and-label
+                            key={author.key}
+                            img-src={author.imgSrc}
+                            img-size={author.imgSize}
+                            label={author.name}
+                            href={author.href}
+                        ></dx-image-and-label>
+                    </template>
+                </div>
+                <span class="body dx-text-body-1">{body}</span>
+                <div class="slot-container">
+                    <slot onslotchange={onSlotChange}></slot>
+                </div>
+                <div
+                    class={backgroundImageClass}
+                    if:true={hasBackgroundImage}
+                    lwc:dom="manual"
+                ></div>
             </div>
-            <span class="body dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
+            <div if:true={hasPlainImage} class="image-container">
+                <img src={imgSrc} alt={imgAlt} />
             </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
-        </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
-        </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <template if:false={noSwoop}>
-            <svg
-                class="swoop-silhouette"
-                width="1920px"
-                height="331px"
-                viewBox="0 0 1920 331"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                preserveAspectRatio="none"
+            <a
+                if:true={hasLinkedImage}
+                href={href}
+                target={target}
+                class="image-container"
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
             >
-                <defs>
-                    <path
-                        d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                        id="path-1"
-                    ></path>
-                </defs>
-                <g
-                    id="Documentation-landing-page"
-                    stroke="none"
-                    stroke-width="1"
-                    fill="none"
-                    fill-rule="evenodd"
+                <img src={imgSrc} alt={imgAlt} />
+            </a>
+            <template if:false={noSwoop}>
+                <svg
+                    class="swoop-silhouette"
+                    width="1920px"
+                    height="331px"
+                    viewBox="0 0 1920 331"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="none"
                 >
-                    <mask id="mask-2" fill="white">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <use
-                        id="Combined-Shape"
-                        fill="#FFFFFF"
-                        xlink:href="#path-1"
-                    ></use>
-                </g>
-            </svg>
-        </template>
-    </div>
-    <div class="blue-circle" if:true={hasIcon}>
-        <dx-icon
-            class="icon"
-            size="2xlarge"
-            symbol={icon}
-            sprite="salesforcebrand"
-        ></dx-icon>
+                    <defs>
+                        <path
+                            d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                            id="path-1"
+                        ></path>
+                    </defs>
+                    <g
+                        id="Documentation-landing-page"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                    >
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use
+                            id="Combined-Shape"
+                            fill="#FFFFFF"
+                            xlink:href="#path-1"
+                        ></use>
+                    </g>
+                </svg>
+            </template>
+        </div>
+        <div class="blue-circle" if:true={hasIcon}>
+            <dx-icon
+                class="icon"
+                size="2xlarge"
+                symbol={icon}
+                sprite="salesforcebrand"
+            ></dx-icon>
+        </div>
     </div>
 </template>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -17,7 +17,8 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?:
+    @api backgroundImg?: string;
+    @api backgroundImgId?:
         | "trees"
         | "codey"
         | "blog"
@@ -58,7 +59,14 @@ export default class FeaturedContentHeader extends LightningElement {
             this.dark && "variant_dark",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
-            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+            this.backgroundImgId && `custom-bg-${this.backgroundImgId}`
+        );
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundImg &&
+                `--background-image: url(${this.backgroundImg});`
         );
     }
 
@@ -71,17 +79,17 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get hasBackgroundImage() {
-        return this.backgroundImg !== null;
+        return this.backgroundImgId !== null;
     }
 
     private get hasIcon(): boolean {
-        return this.icon !== "" && this.backgroundImg === "big-moon";
+        return this.icon !== "" && this.backgroundImgId === "big-moon";
     }
 
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",
-            this.backgroundImg && `bg-${this.backgroundImg}`
+            this.backgroundImgId && `bg-${this.backgroundImgId}`
         );
     }
 
@@ -100,13 +108,13 @@ export default class FeaturedContentHeader extends LightningElement {
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImg && svgs[this.backgroundImg]) {
+        if (this.backgroundImgId && svgs[this.backgroundImgId]) {
             const bgSvg = this.template.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImg].desktop}
-                    ${svgs[this.backgroundImg].mobile}
+                    ${svgs[this.backgroundImgId].desktop}
+                    ${svgs[this.backgroundImgId].mobile}
                 `;
             }
         }

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

@@ -2,10 +2,6 @@
     <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">

package/src/modules/dx/headerSearch/headerSearch.html

@@ -20,7 +20,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -52,7 +51,6 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
-                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -69,7 +69,6 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/input/input.ts

@@ -186,8 +186,6 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
-
-        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/sidebar/sidebar.html

@@ -88,6 +88,7 @@
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}
+                onfocus={onItemsFocused}
                 onselecteditemrendered={onSelectedItemRendered}
             ></dx-tree>
         </div>

package/src/modules/dx/sidebar/sidebar.ts

@@ -255,4 +255,10 @@ export default class Sidebar extends SidebarBase {
             node.children.forEach((child) => this.assignValueToLabel(child));
         }
     }
+
+    private onItemsFocused(): void {
+        this.template
+            .querySelector("dx-sidebar-search")
+            ?.requestOpenDropdown(false);
+    }
 }

package/src/modules/dx/sidebarSearch/sidebarSearch.html

@@ -18,7 +18,6 @@
             value={value}
             onchange={onInputChange}
             onfocus={onInputFocus}
-            onblur={onDropdownRequestClose}
             onclear={onInputClear}
             shortcut-key="j"
             clearable

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -78,6 +78,11 @@ export default class SidebarSearch extends LightningElement {
         }
     }
 
+    @api
+    requestOpenDropdown(value: boolean) {
+        this.dropdownRequestedOpen = value;
+    }
+
     private _coveoAdvancedQueryConfig!: { [key: string]: any };
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
@@ -422,7 +427,6 @@ export default class SidebarSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
-            case "input-blur":
                 this.dropdownRequestedOpen = false;
                 break;
             default:

package/src/modules/dx/tbidAvatarButton/tbidAvatarButton.ts

@@ -49,7 +49,7 @@ export default class TbidAvatarButton extends LightningElement {
     @api tbidApiBaseUrl = "";
 
     @api login = (event: Event) => this.handleComponentLogin(event);
-    @api logout = () => this.handleComponentLogout();
+    @api logout = (event: Event) => this.handleComponentLogout(event);
 
     private userInfo: UserInfo = {};
     private isLoading = false;
@@ -242,7 +242,8 @@ export default class TbidAvatarButton extends LightningElement {
     private handleSsoLogout = this.handleLogout.bind(this, true);
 
     // This handles logout from _within_ this component ("Logout" click), rather than from SSO via the SFIDWidget.
-    private handleComponentLogout = () => {
+    private handleComponentLogout = (event: Event) => {
+        event?.preventDefault();
         this.handleLogout(false);
     };
 

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -149,8 +149,8 @@ export default class TypeBadge extends LightningElement {
     private get style(): string {
         if (this.dark) {
             return buildStyleColorVariables({
-                background: `--dx-g-${this.variantColorScope}-${this.variant}-color`,
-                color: `--dx-g-brand-default-color-background`
+                background: "--dx-g-purple-vibrant-40",
+                color: "--dx-g-brand-default-color-background"
             });
         }
         if (this.variantColorScope) {

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -41,8 +41,6 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
-    @api bannerMarkup =
-        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
 
     @api
     get navItems() {

package/src/modules/dxHelpers/table/table.css

@@ -96,11 +96,6 @@ td :is(.li, p, .p, dd) {
     font-size: var(--table-cell-text-base);
 }
 
-td :is(ul) {
-    font-size: var(--table-cell-text-base);
-    margin-left: 0;
-}
-
 td doc-content-callout :is(.li, p, .p, dd) {
     /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
     font-size: var(--dx-g-text-base);

package/src/modules/dx/banner/banner.css

@@ -1,46 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-.container {
-    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
-    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
-
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    min-height: 24px;
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    background: repeating-linear-gradient(
-        45deg,
-        var(--primary-color),
-        var(--primary-color) 20px,
-        var(--secondary-color) 20px,
-        var(--secondary-color) 40px
-    );
-}
-
-.container_inner {
-    height: 100%;
-    display: flex;
-    background: var(--primary-color);
-    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
-    color: white;
-    font-weight: bold;
-}
-
-.container a {
-    text-decoration: underline;
-    transition: var(--dx-g-transition-hue-1x);
-    margin-right: 4px;
-}
-
-.container a:hover {
-    opacity: 0.8;
-}
-
-.container dx-icon {
-    margin-right: var(--dx-g-spacing-sm);
-    margin-top: var(--dx-g-spacing-2xs);
-}

package/src/modules/dx/banner/banner.html

@@ -1,13 +0,0 @@
-<template>
-    <div class="container">
-        <div class="container_inner dx-text-body-4">
-            <dx-icon symbol="announcement"></dx-icon>
-            <!--
-                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
-                option instead of slots because the html markup will come as a
-                property to the component from a configuration
-            -->
-            <div lwc:dom="manual" class="info-container"></div>
-        </div>
-    </div>
-</template>

package/src/modules/dx/banner/banner.ts

@@ -1,12 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { setContainerInnerHtml } from "dxUtils/lwc";
-
-export default class Banner extends LightningElement {
-    @api bannerMarkup =
-        'Thank you for visiting the Salesforce Developers website! <span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">We value your feedback</a></span>';
-
-    renderedCallback() {
-        const container = this.template.querySelector(".info-container");
-        setContainerInnerHtml(container, this.bannerMarkup);
-    }
-}