@salesforcedevs/dx-components 1.3.178 → 1.3.180

package/src/modules/dx/checkbox/checkbox.ts

@@ -1,16 +1,17 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
+import { reflectBooleanAttribute } from "dxUtils/lwc";
 
 export default class Checkbox extends LightningElement {
     @api disabled: boolean = false;
     @api errorMessage?: string = "Please check this box if you want to proceed";
     @api label?: string;
-    @api name: string | null = null;
-    @api required: boolean = false;
     @api type: "checkbox" | "radio" = "checkbox";
     @api value!: string;
 
     private _checked: boolean = false;
+    private _required: boolean = false;
+    private _name: string | null = null;
 
     @api
     get checked(): boolean {
@@ -20,6 +21,24 @@ export default class Checkbox extends LightningElement {
         this._checked = value;
     }
 
+    @api
+    get name(): string | null {
+        return this._name;
+    }
+    set name(value: string | null) {
+        this._name = value;
+        this.setAttribute("name", value); // reflect to HTML
+    }
+
+    @api
+    get required(): boolean {
+        return this._required;
+    }
+    set required(value: boolean) {
+        this._required = value;
+        reflectBooleanAttribute(this, "required", value);
+    }
+
     private showValidity = false;
 
     private get valid(): boolean {
@@ -40,6 +59,11 @@ export default class Checkbox extends LightningElement {
         return this.valid;
     }
 
+    @api
+    checkValidity(): boolean {
+        return this.valid;
+    }
+
     private onChange(e: InputEvent) {
         this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
         this.dispatchEvent(

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -14,7 +14,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    padding: var(--dx-g-spacing-4xl) 0;
+    padding: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-3xl) 0;
     min-height: 460px;
     text-align: left;
     background-position: center;
@@ -62,6 +62,11 @@ dx-button {
     margin-top: var(--dx-g-spacing-smd);
 }
 
+img.desktop {
+    padding-left: 20px;
+    max-width: 50%; /* assumes desktop images are high-res */
+}
+
 img.mobile {
     display: none;
 }

package/src/modules/dx/featuresListHeader/featuresListHeader.html

@@ -2,7 +2,9 @@
     <div class="container" style={style}>
         <div class={textStyle}>
             <h1 class="heading dx-text-display-2">
-                <dx-formatted-rich-text value={title}></dx-formatted-rich-text>
+                <dx-formatted-rich-text
+                    value={displayTitle}
+                ></dx-formatted-rich-text>
             </h1>
             <span if:true={subtitle} class="dx-text-display-5">{subtitle}</span>
             <div class="features-list">

package/src/modules/dx/featuresListHeader/featuresListHeader.ts

@@ -2,8 +2,10 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
+import { toDxColor } from "dxUtils/css";
 
 export default class FeaturesListHeader extends LightningElement {
+    private _displayTitle: string | null = null;
     @api title!: string;
     @api subtitle?: string;
     @api ctaLabel!: string;
@@ -25,10 +27,21 @@ export default class FeaturesListHeader extends LightningElement {
         this._featuresList = toJson(value);
     }
 
+    // For use when displayed title will have embed HTML, i.e., is "rich text"
+    @api
+    get displayTitle() {
+        return typeof this._displayTitle === "string"
+            ? this._displayTitle
+            : this.title;
+    }
+    set displayTitle(value: string | null) {
+        this._displayTitle = value;
+    }
+
     private get style() {
         return cx(
             this.backgroundColor &&
-                `background-color: var(--dx-g-${this.backgroundColor});`
+                `background-color: ${toDxColor(this.backgroundColor)};`
         );
     }
 

package/src/modules/dx/input/input.css

@@ -87,6 +87,10 @@ input {
     text-overflow: ellipsis;
     transition: var(--dx-g-transition-hue-1x);
     outline: none;
+}
+
+/* Show the default system disabled background if disabled; otherwise show container background */
+input:not([disabled]) {
     background: none;
 }
 

package/src/modules/dx/input/input.html

@@ -22,6 +22,7 @@
                 oninput={onInputChange}
                 onkeydown={onKeyDown}
                 placeholder={placeholder}
+                readonly={readOnly}
                 type={type}
                 value={value}
                 aria-labelledby="label description"

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

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
 import { isMac } from "dxUtils/devices";
-import { setContainerInnerHtml } from "dxUtils/lwc";
+import { reflectBooleanAttribute, setContainerInnerHtml } from "dxUtils/lwc";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {
@@ -24,7 +24,6 @@ export default class Input extends LightningElement {
     @api ariaLabel!: string;
     @api autocomplete: string | null = null;
     @api clearable: boolean = false;
-    @api disabled: boolean = false;
     @api iconSize: IconSize = "medium";
     @api iconSymbol: IconSymbol | null = null;
     @api label?: string;
@@ -32,9 +31,8 @@ export default class Input extends LightningElement {
     @api loading: boolean = false;
     @api missingErrorMessage: string = "Complete this field";
     @api formatErrorMessage?: string;
-    @api name?: string;
     @api placeholder!: string;
-    @api required = false;
+    @api readOnly: boolean = false;
     @api role: string | null = null;
     @api shortcutKey: string | null = null;
     @api size: "small" | "large" | "override" = "small";
@@ -50,6 +48,41 @@ export default class Input extends LightningElement {
         this._value = value || "";
     }
 
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value: boolean) {
+        this._disabled = value;
+        reflectBooleanAttribute(
+            this as unknown as LightningElement,
+            "disabled",
+            value
+        );
+    }
+
+    @api
+    get name() {
+        return this._name;
+    }
+    set name(name: string | undefined) {
+        this._name = name;
+        this.setAttribute("name", name); // reflect to HTML
+    }
+
+    @api
+    get required(): boolean {
+        return this._required;
+    }
+    set required(value: boolean) {
+        this._required = value;
+        reflectBooleanAttribute(
+            this as unknown as LightningElement,
+            "required",
+            value
+        );
+    }
+
     @api
     get errorMessage() {
         return this._errorMessage;
@@ -67,7 +100,7 @@ export default class Input extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        if (this.isRequiredAndFilled) {
+        if (this.isRequiredButEmpty) {
             this._errorMessage = this.missingErrorMessage;
             return false;
         }
@@ -83,10 +116,26 @@ export default class Input extends LightningElement {
         return true;
     }
 
+    @api checkValidity(): boolean {
+        if (this.isRequiredButEmpty) {
+            return false;
+        }
+
+        const typeValidator = typeValidatorMap[this.type];
+        if (typeValidator && !typeValidator.validator(this.value)) {
+            return false;
+        }
+
+        return true;
+    }
+
     private _errorMessage: string = "";
     private focused: boolean = false;
     private input: HTMLInputElement | null = null;
     private _value: string | null = null;
+    private _disabled: boolean = false;
+    private _name?: string;
+    private _required: boolean = false;
     private _loading: boolean = false;
     private isMac: boolean = false;
 
@@ -109,7 +158,7 @@ export default class Input extends LightningElement {
     private get inputInvalid() {
         const typeValidator = typeValidatorMap[this.type];
         return (
-            this.isRequiredAndFilled &&
+            this.isRequiredButEmpty &&
             typeValidator &&
             !typeValidator.validator(this.value)
         );
@@ -153,7 +202,7 @@ export default class Input extends LightningElement {
         return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
     }
 
-    private get isRequiredAndFilled() {
+    private get isRequiredButEmpty() {
         return this.required && (!this.value || !this.value.trim());
     }
 

package/src/modules/dx/scrollManager/scrollManager.ts

@@ -166,6 +166,7 @@ export default class ScrollManager extends LightningElement {
     saveScroll = throttle(100, () => {
         window.history.replaceState(
             {
+                ...window.history.state,
                 scroll: {
                     value: document.body.scrollTop,
                     docSize: document.body.scrollHeight

package/src/modules/dx/sectionBanner/sectionBanner.css

@@ -6,12 +6,14 @@
     --padding-top: var(--dx-g-spacing-4xl);
     --margin-top: 80px;
     --dx-c-section-banner-content-align: flex-end;
+    --dx-c-section-banner-image-transform: none;
 }
 
 .container {
     position: relative;
     display: flex;
     justify-content: space-between;
+    overflow-x: hidden;
     padding-top: var(--padding-top);
     padding-left: var(--dx-g-page-padding-horizontal);
 }
@@ -46,8 +48,23 @@
     margin-top: var(--dx-g-spacing-md);
 }
 
-.foot-note {
+.quote-attribution {
     margin-top: var(--dx-g-spacing-md);
+    position: relative;
+}
+
+.quote-attribution-character {
+    display: inline-block;
+}
+
+.quote-attribution-text {
+    left: 24px;
+    position: absolute;
+}
+
+.quote-attribution-subtext {
+    left: 24px;
+    position: relative;
 }
 
 .image {
@@ -97,3 +114,32 @@
         margin: 0 var(--dx-g-page-padding-horizontal) var(--dx-g-spacing-3xl) 0;
     }
 }
+
+@media screen and (max-width: 480px) {
+    .content-body-container {
+        display: block;
+    }
+
+    .quote-content p {
+        font-size: var(--dx-g-text-lg);
+        line-height: 28px;
+    }
+
+    .quote-content p.quote-attribution {
+        font-size: var(--dx-g-text-md);
+        letter-spacing: unset;
+        line-height: 24px;
+    }
+
+    .quote-attribution-text {
+        left: 20px;
+        position: absolute;
+    }
+
+    .quote-attribution-subtext {
+        font-size: 12px;
+        left: 20px;
+        line-height: 20px;
+        position: relative;
+    }
+}

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -14,14 +14,28 @@
                 <img if:true={hasQuote} src={quoteGraphicSrc} alt="" />
                 <div class={quoteContentStyle}>
                     <p class={contentBodyStyle}>{body}</p>
-                    <p if:true={footNote} class="foot-note dx-text-display-7">
-                        <dx-formatted-rich-text
-                            value={footNote}
-                        ></dx-formatted-rich-text>
+                    <p
+                        if:true={quoteAttributionText}
+                        class={quoteAttributionStyle}
+                    >
+                        <span class="quote-attribution-character">&#8212;</span>
+                        <span class="quote-attribution-text">
+                            <dx-formatted-rich-text
+                                value={quoteAttributionText}
+                            ></dx-formatted-rich-text>
+                        </span>
+                        <span
+                            if:true={quoteAttributionSubtext}
+                            class={quoteAttributionSubtextStyle}
+                        >
+                            <dx-formatted-rich-text
+                                value={quoteAttributionSubtext}
+                            ></dx-formatted-rich-text>
+                        </span>
                     </p>
                 </div>
             </div>
         </div>
-        <img class="image" src={imgSrc} alt={imgAlt} />
+        <img class="image" src={imgSrc} alt={imgAlt} part="banner-image" />
     </div>
 </template>

package/src/modules/dx/sectionBanner/sectionBanner.ts

@@ -1,18 +1,76 @@
 import { api, LightningElement } from "lwc";
 import cx from "classnames";
+import debounce from "debounce";
+import { toJson } from "dxUtils/normalizers";
 import { toDxColor } from "dxUtils/css";
 
 export default class SectionBanner extends LightningElement {
+    private _images?: {
+        desktop: {
+            alt: string;
+            src: string;
+        };
+        mobile: {
+            alt: string;
+            src: string;
+        };
+    };
+    private _quoteAttribution?: {
+        desktop: {
+            text: string;
+            subtext?: string;
+        };
+        mobile: {
+            text: string;
+            subtext?: string;
+        };
+    };
     @api title!: string;
     @api body!: string;
-    @api footNote?: string;
-    @api imgSrc!: string;
-    @api imgAlt!: string;
     @api hideTopGraphic = false;
     @api backgroundColor = "indigo-vibrant-20";
     @api hasQuote = false;
     @api quoteGraphicSrc?: string;
 
+    private isMobile = false;
+    private mediaQueryList?: MediaQueryList;
+
+    @api
+    get images() {
+        return this._images;
+    }
+    set images(value) {
+        this._images = value && toJson(value);
+    }
+
+    @api
+    get quoteAttribution() {
+        return this._quoteAttribution;
+    }
+    set quoteAttribution(value) {
+        this._quoteAttribution = value && toJson(value);
+    }
+
+    get environment() {
+        return this.isMobile ? "mobile" : "desktop";
+    }
+
+    get imgSrc() {
+        return this.images?.[this.environment]?.src || "";
+    }
+
+    get imgAlt() {
+        return this.images?.[this.environment]?.alt || "";
+    }
+
+    get quoteAttributionText() {
+        return this.quoteAttribution?.[this.environment]?.text || "";
+    }
+
+    get quoteAttributionSubtext() {
+        return this.quoteAttribution?.[this.environment]?.subtext || "";
+    }
+
     get containerStyle() {
         return cx("container", !this.hideTopGraphic && "top-margin");
     }
@@ -21,6 +79,19 @@ export default class SectionBanner extends LightningElement {
         return cx(this.hasQuote && "quote-content");
     }
 
+    get quoteAttributionStyle() {
+        return cx("quote-attribution", {
+            "dx-text-display-7": !this.isMobile,
+            "dx-text-display-8": this.isMobile
+        });
+    }
+
+    get quoteAttributionSubtextStyle() {
+        return cx("quote-attribution-subtext", {
+            "is-mobile": this.isMobile
+        });
+    }
+
     get contentBodyStyle() {
         return cx(this.title ? "content-body" : "dx-text-display-6");
     }
@@ -32,4 +103,26 @@ export default class SectionBanner extends LightningElement {
 
         return `${backgroundColor}`;
     }
+
+    private handleMediaQueryChange = debounce((evt: MediaQueryListEvent) => {
+        this.isMobile = evt.matches;
+    }, 64);
+
+    connectedCallback() {
+        this.mediaQueryList = window.matchMedia(
+            "screen and (max-width: 480px)"
+        );
+        this.isMobile = this.mediaQueryList.matches;
+        this.mediaQueryList.addEventListener(
+            "change",
+            this.handleMediaQueryChange
+        );
+    }
+
+    disconnectedCallback() {
+        this.mediaQueryList?.removeEventListener(
+            "change",
+            this.handleMediaQueryChange
+        );
+    }
 }

package/src/modules/dx/select/select.ts

@@ -2,6 +2,7 @@ import cx from "classnames";
 import { LightningElement, api } from "lwc";
 import { SelectOption } from "typings/custom";
 import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+import { reflectBooleanAttribute } from "dxUtils/lwc";
 
 export const DEFAULT_MISSING_MESSAGE = "This field is required";
 
@@ -10,7 +11,6 @@ export default class Select extends LightningElement {
     @api autocomplete?: string;
     @api label?: string;
     @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
-    @api name?: string;
     @api placeholder?: string;
     @api size?: string;
 
@@ -39,6 +39,11 @@ export default class Select extends LightningElement {
 
     set required(value) {
         this._required = normalizeBoolean(value);
+        reflectBooleanAttribute(
+            this as unknown as LightningElement,
+            "required",
+            value
+        );
     }
 
     @api
@@ -51,11 +56,22 @@ export default class Select extends LightningElement {
         this.updateSelectValue();
     }
 
+    @api
+    get name() {
+        return this._name;
+    }
+
+    set name(name) {
+        this._name = name;
+        this.setAttribute("name", name); // reflect to HTML
+    }
+
     _disabled = false;
     _size = "";
     _required = false;
     _options: Array<SelectOption> = [];
     _value: string = "";
+    _name?: string;
     _selectElement: HTMLSelectElement | null = null;
     helpMessage?: string = "";
 
@@ -79,13 +95,16 @@ export default class Select extends LightningElement {
 
     get selectElement() {
         if (!this._selectElement) {
-            this._selectElement = this.template.querySelector<HTMLSelectElement>(
-                "select"
-            );
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
         }
         return this._selectElement;
     }
 
+    get isRequiredButEmpty() {
+        return this.required && !this.value;
+    }
+
     @api
     blur(): void {
         if (this.selectElement) {
@@ -102,13 +121,17 @@ export default class Select extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        const isInvalid = this._required && !this._value;
+        const isInvalid = this.isRequiredButEmpty;
         this.helpMessage = isInvalid
             ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
             : "";
         return !isInvalid;
     }
 
+    @api checkValidity(): boolean {
+        return !this.isRequiredButEmpty;
+    }
+
     handleBlur(): void {
         this.reportValidity();
         this.dispatchEvent(new CustomEvent("blur"));

package/src/modules/dx/stepSequence/stepSequence.css

@@ -9,10 +9,6 @@
     width: 100%;
 }
 
-.hidden {
-    visibility: hidden;
-}
-
 .no-animations ::slotted(*) {
     display: none;
 }

package/src/modules/dx/stepSequence/stepSequence.html

@@ -1,6 +1,7 @@
 <template>
-    <div class={containerClassName}>
+    <div class={containerClassName} role="region" aria-live="polite">
         <slot
+            class={slotClassName}
             onslotchange={handleSlotChange}
             onstepincrement={handleStepIncrement}
             onstepdecrement={handleStepDecrement}