@salesforcedevs/dx-components 1.2.19-lightdom → 1.2.20-lightdom-6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.2.19-lightdom",
+    "version": "1.2.20-lightdom-6",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -1,3 +1,35 @@
+@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);

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

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <div class="container">
         <div class="container_inner dx-text-body-4">
             <dx-icon symbol="announcement"></dx-icon>
@@ -7,7 +7,7 @@
                 option instead of slots because the html markup will come as a
                 property to the component from a configuration
             -->
-            <div class="info-container"></div>
+            <div lwc:dom="manual" class="info-container"></div>
         </div>
     </div>
 </template>

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

@@ -2,13 +2,11 @@ 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.querySelector(".info-container");
+        const container = this.template.querySelector(".info-container");
         setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

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) => `
-  body, header, dx-card-small {
+    body, header, dx-card-small {
     ${brandCssVars.reduce(
         (acc, v) => `
           ${acc}

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,9 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            {buttonText}
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}
@@ -29,8 +30,9 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
+        <span if:false={loading} class="button-content">
+            {buttonText}
+            <slot></slot>
         </span>
         <dx-icon
             if:true={showIcon}

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

@@ -1,9 +1,8 @@
-@import "dxHelpers/reset";
-
 :host {
     width: min-content;
     font-size: inherit;
 
+    --dx-c-button-background-color: transparent;
     --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);

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";
@@ -23,6 +24,7 @@ export default class Button extends LightningElement {
     @api font: "display" | "sans" = "display";
     @api name?: string;
     @api value?: any;
+    @api buttonText?: string;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";
@@ -34,13 +36,17 @@ 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;
+    _isSlotEmpty: boolean = true;
+
+    renderedCallback(): void {
+        this._isSlotEmpty = this.isSlotEmpty();
+    }
 
     private get showIcon(): boolean {
         return !!this.iconSymbol && !this.loading;
@@ -55,14 +61,16 @@ 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(".button-content")?.childElementCount &&
+            !this.querySelector(".button-content")?.textContent
+        );
     }
 }

package/src/modules/dx/cardCallout/cardCallout.css

@@ -1,17 +1,57 @@
-dx-card-callout dx-icon {
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.card-callout {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+/* in the callout card's case it needs to be subservient to the other items in the grid */
+.dx-card-base_override-width {
+    height: 100% !important;
+    min-height: unset !important;
+}
+
+/* title */
+
+.dx-text-heading-3 {
+    color: inherit;
+    margin-bottom: var(--dx-g-spacing-3xl);
+    overflow-wrap: hyphenate-word;
+    hyphens: overflow;
+}
+
+/* label */
+
+.dx-text-button-light {
+    color: inherit;
+    margin-top: auto;
+}
+
+/* callout arrow */
+
+dx-icon {
     display: inline;
     color: inherit;
     margin-left: var(--dx-g-spacing-sm);
 }
 
-dx-card-callout dx-icon svg {
+dx-icon::part(svg) {
     transition: var(--dx-g-transition-transform-2x);
 }
 
-.card-callout:hover dx-icon svg {
+.card-callout:hover dx-icon::part(svg) {
     transform: translate(var(--dx-g-spacing-xs));
 }
 
-.card-callout:active dx-icon svg {
+.card-callout:active dx-icon::part(svg) {
     transform: translate(var(--dx-g-spacing-2xs));
 }
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-3 {
+        margin-bottom: var(--dx-g-spacing-xl);
+    }
+}

package/src/modules/dx/cardCallout/cardCallout.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <a
         class={className}
         href={href}

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -6,8 +6,6 @@ import { track } from "dxUtils/analytics";
 export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
 
 export default class CardCallout extends LightningElement {
-    static renderMode = "light";
-
     @api backgroundColor: string = "indigo-vibrant-40";
     @api color: string = "white";
     @api href!: string;

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

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

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

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

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

@@ -2,7 +2,6 @@ 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;
@@ -22,7 +21,6 @@ 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,4 +1,7 @@
-dx-card-title {
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
     --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;
@@ -6,7 +9,21 @@ dx-card-title {
     --dx-c-card-title-icon-size: 22px;
 }
 
-dx-card-title dx-icon {
+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);
 
     display: inline-flex;
@@ -15,6 +32,11 @@ dx-card-title 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,10 +1,8 @@
-<template lwc:render-mode="light">
+<template>
     <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}>&#32;</template>
             <span class="nowrap" if:true={isExternal}>
                 {titleNoWrap}&nbsp;
                 <dx-icon symbol="new_window" size="override"></dx-icon>
@@ -12,9 +10,7 @@
         </a>
         <template if:false={href}>
             {titleToWrap}
-            <template if:true={needsSpace}>
-                &#32;
-            </template>
+            <template if:true={needsSpace}>&#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.ts

@@ -1,7 +1,6 @@
 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,12 +1,5 @@
-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) {
+.menu-nested::part(content),
+.menu-nested .popover.popover-content {
     padding-top: var(--dx-g-spacing-sm);
     width: 354px;
 }
@@ -17,7 +10,8 @@ dx-dropdown dx-button {
     flex-wrap: nowrap;
 }
 
-.menu-hidden::part(content) {
+.menu-hidden::part(content),
+.menu-hidden .popover.popover-content {
     display: none;
 }
 
@@ -30,7 +24,8 @@ dx-dropdown dx-button {
 }
 
 @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

@@ -15,6 +15,7 @@
         <div slot="control">
             <slot></slot>
         </div>
+
         <div
             class="menu_list"
             if:false={areOptionsEmpty}

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,12 +1 @@
 @import "dxHelpers/commonHeader";
-@import "dxHelpers/text";
-@import "dxHelpers/reset";
-@import "dxHelpers/card";
-
-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;
-}

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

@@ -1,3 +1,8 @@
+: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(

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,6 @@
-header-mobile-nav-menu {
+@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
@@ -14,3 +16,146 @@ header-mobile-nav-menu {
     );
     --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;
+    visibility: hidden;
+    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

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <nav
         aria-label="Navigation Menu"
         class={className}
@@ -6,10 +6,7 @@
         onscroll={onScroll}
     >
         <ul>
-            <template
-                for:each={navItems}
-                for:item="navItem"
-            >
+            <template for:each={navItems} for:item="navItem">
                 <li
                     class={navItem.liClassName}
                     key={navItem.id}
@@ -42,17 +39,12 @@
                         ></dx-icon>
                     </button>
                     <template if:true={navItem.options}>
-                        <template
-                            for:each={navItem.options}
-                            for:item="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 if:true={options.options}>
                                     <template
                                         for:each={options.options}
                                         for:item="navSubItem"