@salesforcedevs/dx-components 1.2.18-canary.0 → 1.2.18-lightdom

package/lwc.config.json

@@ -69,7 +69,6 @@
         "dx/spinner",
         "dx/tabPanel",
         "dx/tabPanelList",
-        "dx/tbidAvatarButton",
         "dx/toc",
         "dx/tooltip",
         "dx/tree",
@@ -90,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.0",
+    "version": "1.2.18-lightdom",
     "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/banner/banner.css

@@ -1,35 +1,3 @@
-@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);
@@ -43,4 +11,4 @@
 .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,4 +1,4 @@
-<template>
+<template lwc:render-mode='light'>
     <div class="container">
         <div class="container_inner dx-text-body-4">
             <dx-icon symbol="announcement"></dx-icon>
@@ -7,7 +7,10 @@
                 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
+                class="info-container"
+                lwc:inner-html={content}
+            ></div>
         </div>
     </div>
 </template>

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

@@ -0,0 +1,28 @@
+.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;
+}

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

@@ -2,11 +2,13 @@ import { LightningElement, api } from "lwc";
 import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
+    static renderMode = 'light';
+
     @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");
+        const container = this.querySelector(".info-container");
         setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

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");
-        if (!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.css

@@ -1,6 +1,19 @@
 @import "dxHelpers/reset";
 
-:host {
+:host { /* TODO: remove this after it has been completely supplanted by .base-button */
+    width: min-content;
+    font-size: inherit;
+
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
+    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-justify-content: center;
+    --dx-c-button-opacity: 1;
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+}
+
+.base-button { /* TODO: remove this after it has been completely supplanted by .base-button */
     width: min-content;
     font-size: inherit;
 

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -1,4 +1,4 @@
-<template>
+<template lwc:render-mode='light'>
     <div class={className}>
         <div class="dx-card-base_section-horizontal">
             <a

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

@@ -1,7 +1,3 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
-
 .card-podcast-episode {
     display: flex;
     flex-direction: row;

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 
 export default class CardPodcastEpisode extends LightningElement {
+    static renderMode = 'light';
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;
@@ -21,6 +22,7 @@ export default class CardPodcastEpisode extends LightningElement {
     private get className() {
         return cx(
             "card-podcast-episode",
+            "base-card",
             "dx-card-base_borderless",
             this.isLinkHovered && "dx-card-base_link-hovered"
         );

package/src/modules/dx/cardTitle/cardTitle.css

@@ -1,7 +1,4 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
+dx-card-title {
     --dx-c-card-title-color: var(--dx-g-text-heading-color);
     --dx-c-card-title-font-size: var(--dx-g-text-xl);
     --dx-c-card-title-line-height: 28px;
@@ -9,20 +6,6 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-h3.dx-text-heading-4 {
-    color: var(--dx-c-card-title-color);
-    transition: var(--dx-g-transition-hue-1x);
-    font-size: var(--dx-c-card-title-font-size);
-    line-height: var(--dx-c-card-title-line-height);
-    letter-spacing: var(--dx-c-card-title-letter-spacing);
-    word-break: break-word;
-    hyphens: auto;
-}
-
-.nowrap {
-    white-space: nowrap;
-}
-
 dx-icon {
     --dx-c-icon-size: var(--dx-c-card-title-icon-size);
 
@@ -32,12 +15,7 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
-        font-size: 20px;
-        line-height: 24px;
-    }
-
     dx-icon {
         --dx-c-card-title-icon-size: 20px;
     }
-}
+}

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,16 +1,16 @@
-<template>
+<template lwc:render-mode='light'>
     <h3 class="dx-text-heading-4">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
-            <template if:true={needsSpace}>&#32;</template>
+            <template if:true={needsSpace} lwc:render-mode='light'>&#32;</template>
             <span class="nowrap" if:true={isExternal}>
                 {titleNoWrap}&nbsp;
                 <dx-icon symbol="new_window" size="override"></dx-icon>
             </span>
         </a>
-        <template if:false={href}>
+        <template if:false={href} lwc:render-mode='light'>
             {titleToWrap}
-            <template if:true={needsSpace}>&#32;</template>
+            <template if:true={needsSpace} lwc:render-mode='light'>&#32;</template>
             <span class="nowrap" if:true={isExternal}>
                 {titleNoWrap}&nbsp;
                 <dx-icon symbol="new_window" size="override"></dx-icon>

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

@@ -0,0 +1,25 @@
+h3.dx-text-heading-4 {
+    color: var(--dx-c-card-title-color);
+    transition: var(--dx-g-transition-hue-1x);
+    font-size: var(--dx-c-card-title-font-size);
+    line-height: var(--dx-c-card-title-line-height);
+    letter-spacing: var(--dx-c-card-title-letter-spacing);
+    word-break: break-word;
+    hyphens: auto;
+    font-family: var(--dx-g-font-display);
+}
+
+a {
+    font-family: var(--dx-g-font-display);
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-4 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+}

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 
 export default class CardTitle extends LightningElement {
+    static renderMode = 'light';
     @api href!: string;
     @api target?: string | null = null;
     @api title!: string;

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

@@ -1,4 +1,11 @@
-@import "dxHelpers/reset";
+
+dx-dropdown dx-button {
+    --dx-c-button-primary-color: var(--button-primary-color);
+    --dx-c-button-primary-color-hover: var(--button-primary-color-hover);
+    --border-color: var(--button-primary-color);
+
+    border-bottom: 1px dashed var(--border-color);
+}
 
 .menu-nested::part(content) {
     padding-top: var(--dx-g-spacing-sm);

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,9 @@
         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/header/header.css

@@ -1,99 +1,11 @@
 @import "dxHelpers/commonHeader";
+@import "dxHelpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/card";
 
-:host {
+dx-header { /* TODO: these variables definitely aren't getting picked up correctly */
+    z-index: var(--dx-g-z-index-500);
+    
     --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,9 +19,6 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
-                <div if:true={showTbidLogin} class="header-tbid-login">
-                    <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,92 @@
+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,10 +1,8 @@
 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
             ? (this.mobile && !this.isSearchOpen) || !this.mobile