@salesforcedevs/dx-components 1.2.18-canary.2 → 1.2.18-lightdom-4

package/lwc.config.json

@@ -1,8 +1,5 @@
 {
-    "modules": [
-        { "dir": "src/modules" },
-        { "npm": "@salesforcedevs/dw-components" }
-    ],
+    "modules": [{ "dir": "src/modules" }],
     "expose": [
         "dx/banner",
         "dx/brandThemeProvider",
@@ -72,7 +69,6 @@
         "dx/spinner",
         "dx/tabPanel",
         "dx/tabPanelList",
-        "dx/tbidAvatarButton",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",
@@ -93,7 +89,6 @@
         "dxHelpers/table",
         "dxHelpers/text",
         "dxUtils/analytics",
-        "dxUtils/async",
         "dxUtils/constants",
         "dxUtils/coveo",
         "dxUtils/dates",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.18-canary.2",
+    "version": "1.2.18-lightdom-4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -17,23 +17,15 @@
         "classnames": "^2.2.6",
         "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
-        "js-cookie": "^3.0.1",
-        "lodash.defaults": "^4.2.0",
         "lodash.get": "^4.4.2",
         "lodash.kebabcase": "^4.1.1",
-        "microtip": "0.2.2",
-        "salesforce-oauth2": "^0.2.0",
-        "uuid": "^9.0.0"
+        "microtip": "0.2.2"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
-        "@types/js-cookie": "^3.0.2",
-        "@types/lodash.defaults": "^4.2.7",
         "@types/lodash.get": "^4.4.6",
         "@types/lodash.kebabcase": "^4.1.7",
-        "@types/uuid": "^8.3.4",
-        "@types/vimeo__player": "^2.16.2",
-        "eventsourcemock": "^2.0.0"
+        "@types/vimeo__player": "^2.16.2"
     }
 }

package/src/modules/dx/brandThemeProvider/brandThemeProvider.html

@@ -1,3 +1,4 @@
-<template>
+<template lwc:render-mode="light">
     <slot></slot>
+    <div id="extra_brand_styles"></div>
 </template>

package/src/modules/dx/brandThemeProvider/brandThemeProvider.ts

@@ -3,7 +3,7 @@ import brandCssVars from "./brandCssVars";
 import { Brand } from "typings/custom";
 
 export const toCss = (brand: Brand | null) => `
-  :host {
+    body, header, dx-card-small {
     ${brandCssVars.reduce(
         (acc, v) => `
           ${acc}
@@ -15,6 +15,8 @@ export const toCss = (brand: Brand | null) => `
 `;
 
 export default class BrandThemeProvider extends LightningElement {
+    static renderMode = "light";
+
     @api brand: Brand | null = null;
 
     private get css() {
@@ -30,17 +32,18 @@ export default class BrandThemeProvider extends LightningElement {
     }
 
     setBrandVars() {
-        let style = this.template.querySelector("style");
+        let style = this.querySelector("style");
+
         if (!style) {
             style = document.createElement("style");
-            this.template.appendChild(style);
+            this.querySelector("#extra_brand_styles")?.appendChild(style);
         }
 
-        if (style.firstChild) {
+        if (style?.firstChild) {
             style.removeChild(style.firstChild);
         }
 
         const css = document.createTextNode(this.css);
-        style.appendChild(css);
+        style?.appendChild(css);
     }
 }

package/src/modules/dx/button/button.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode="light">
     <button
         if:false={href}
         class={className}
@@ -7,8 +7,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button_content">
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}
@@ -29,8 +29,8 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}

package/src/modules/dx/button/{button.css → button.scoped.css}

@@ -1,5 +1,3 @@
-@import "dxHelpers/reset";
-
 :host {
     width: min-content;
     font-size: inherit;

package/src/modules/dx/button/button.ts

@@ -5,11 +5,12 @@ import {
     ButtonVariant,
     IconSprite,
     IconSize,
-    IconSymbol,
-    LightningSlotElement
+    IconSymbol
 } from "typings/custom";
 
 export default class Button extends LightningElement {
+    static renderMode = "light";
+
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -34,14 +35,12 @@ export default class Button extends LightningElement {
     @api rel: string | null = null;
 
     @api focus() {
-        const button = this.template.querySelector(".button");
+        const button = this.querySelector(".button");
         if (button) {
             button.focus();
         }
     }
 
-    private isSlotEmpty: boolean = true;
-
     private get showIcon(): boolean {
         return !!this.iconSymbol && !this.loading;
     }
@@ -55,14 +54,17 @@ export default class Button extends LightningElement {
             this.loading && "state-loading",
             `size-${this.size}`,
             !!this.iconSymbol && "style-icon",
-            this.isSlotEmpty && "slot-empty",
+            this.isSlotEmpty() && "slot-empty",
             `font-${this.font}`,
             this.iconPosition === "right" ? "icon-right" : "icon-left"
         );
     }
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
+    private isSlotEmpty() {
+        return (
+            this.querySelector('[name="button_content"]')?.childElementCount ===
+                0 &&
+            this.querySelector('[name="button_content"]')?.textContent === null
+        );
     }
 }

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

@@ -1,6 +1,5 @@
-@import "dxHelpers/reset";
-
-.menu-nested::part(content) {
+.menu-nested::part(content),
+.menu-nested .popover.popover-content {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -11,7 +10,8 @@
     flex-wrap: nowrap;
 }
 
-.menu-hidden::part(content) {
+.menu-hidden::part(content),
+.menu-hidden .popover.popover-content {
     display: none;
 }
 
@@ -24,7 +24,8 @@
 }
 
 @media screen and (min-width: 1000px) {
-    .menu-nested-2-col::part(content) {
+    .menu-nested-2-col::part(content),
+    .menu-nested-2-col .popover.popover-content {
         width: 592px;
     }
 

package/src/modules/dx/dropdown/dropdown.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode="light">
     <dx-popover
         aria-label={ariaLabel}
         class={className}
@@ -12,7 +12,10 @@
         small={small}
         width={width}
     >
-        <slot slot="control"></slot>
+        <div slot="control">
+            <slot></slot>
+        </div>
+
         <div
             class="menu_list"
             if:false={areOptionsEmpty}

package/src/modules/dx/dropdown/dropdown.ts

@@ -20,6 +20,8 @@ interface DropdownOption extends OptionWithNested {
 }
 
 export default class Dropdown extends LightningElement {
+    static renderMode = "light";
+
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
@@ -98,7 +100,7 @@ export default class Dropdown extends LightningElement {
     }
 
     private get optionsElements() {
-        return this.template.querySelectorAll("dx-dropdown-option");
+        return this.querySelectorAll("dx-dropdown-option");
     }
 
     private get areOptionsEmpty() {
@@ -187,7 +189,7 @@ export default class Dropdown extends LightningElement {
 
     renderedCallback() {
         if (!this.popoverEl) {
-            this.popoverEl = this.template.querySelector("dx-popover");
+            this.popoverEl = this.querySelector("dx-popover");
         }
     }
 }

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

@@ -6,9 +6,7 @@
 :host {
     width: 100%;
 
-    --dx-c-featured-content-header-background-color: var(
-        --dx-g-indigo-vibrant-90
-    );
+    /* --dx-c-featured-content-header-background-color */
     --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
@@ -42,7 +40,10 @@
     position: relative;
     padding: var(--dx-c-featured-content-header-padding-vertical)
         var(--dx-c-featured-content-header-padding-horizontal);
-    background-color: var(--dx-c-featured-content-header-background-color);
+    background-color: var(
+        --dx-c-featured-content-header-background-color,
+        --dx-g-indigo-vibrant-90
+    );
 }
 
 /* LAYOUTS */
@@ -380,10 +381,9 @@ dx-image-and-label {
 
 /* DARK VARIANT */
 .variant_dark {
-    background: linear-gradient(
-        -180deg,
-        rgb(40, 23, 153) 0%,
-        rgb(46, 43, 182) 100%
+    background: var(
+        --dx-c-featured-content-header-background-color,
+        linear-gradient(-180deg, rgb(40, 23, 153) 0%, rgb(46, 43, 182) 100%)
     );
 }
 

package/src/modules/dx/header/header.css

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

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode="light">
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
@@ -19,13 +19,6 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
-                <div
-                    if:true={showTbidLogin}
-                    class="header-tbid-login"
-                    onclick={closeMobileNavMenu}
-                >
-                    <dw-tbid-login-menu></dw-tbid-login-menu>
-                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Browse Trials"

package/src/modules/dx/header/header.scoped.css

@@ -0,0 +1,97 @@
+: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.ts

@@ -1,9 +1,7 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
-    private get showTbidLogin(): boolean {
-        return this.showSignup;
-    }
+    static renderMode = "light";
 
     private get showSignup(): boolean {
         return this.signupLink

package/src/modules/dx/icon/icon.scoped.css

@@ -0,0 +1,5 @@
+:host {
+    display: block;
+
+    --dx-c-icon-color: currentColor;
+}

package/src/modules/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce logo";
+    @api imgAlt: string = "Salesforce log";
     @api label!: string;
 }

package/src/modules/dx/popover/popover.html

@@ -1,7 +1,6 @@
-<template>
-    <slot name="control" onslotchange={onSlotChange}></slot>
+<template lwc:render-mode="light">
+    <slot name="control"></slot>
     <div class={containerClassName}>
-        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}

package/src/modules/dx/popover/{popover.css → popover.scoped.css}

@@ -1,5 +1,3 @@
-@import "dxHelpers/reset";
-
 :host {
     --popover-border-radius: var(
         --dx-c-popover-border-radius,
@@ -64,25 +62,3 @@
 .popover-small {
     width: 136px;
 }
-
-.popover-arrow {
-    position: absolute;
-
-    /* Weird spacing here to satisfy our linter */
-    background: linear-gradient(
-        315deg,
-        transparent 4px,
-        white 4px
-    ); /* make only top half of rotated square visible */
-
-    width: 8px;
-    height: 8px;
-    transform: rotate(45deg);
-    border: var(--popover-border);
-    border-bottom: transparent;
-    border-right: transparent;
-    box-shadow: var(--dx-g-box-shadow-lg);
-    transition: opacity 0.2s linear, transform 0.2s linear;
-    transition-delay: 0.02s;
-    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
-}