@salesforcedevs/dx-components 1.3.179 → 1.3.180-alpha

package/lwc.config.json

@@ -4,7 +4,6 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
-        "dx/alert",
         "dx/audio",
         "dx/banner",
         "dx/brandThemeProvider",
@@ -23,7 +22,6 @@
         "dx/cardNews",
         "dx/cardPodcastEpisode",
         "dx/cardSmall",
-        "dx/cardStep",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
         "dx/cardTrialExpanded",
@@ -88,11 +86,11 @@
         "dx/toast",
         "dx/toc",
         "dx/tooltip",
+        "dx/trafficLabeler",
         "dx/tree",
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
-        "dxBaseElements/lightningElementWithState",
         "dxBaseElements/matchMediaElement",
         "dxConstants/brands",
         "dxConstants/colors",
@@ -114,7 +112,6 @@
         "dxUtils/dates",
         "dxUtils/highlight",
         "dxUtils/language",
-        "dxUtils/list",
         "dxUtils/lwc",
         "dxUtils/normalizers",
         "dxUtils/queryCoordinator",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.179",
+    "version": "1.3.180-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,6 +40,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    },
-    "gitHead": "ef5efd7169e688009ba79bd74e69c42adb277e09"
+    }
 }

package/src/modules/dx/button/button.css

@@ -50,7 +50,6 @@
 
 .button dx-icon {
     display: inline;
-    vertical-align: var(--dx-c-button-icon-vertical-align, unset);
 }
 
 .button.variant_inline dx-icon,
@@ -62,7 +61,6 @@
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
-    vertical-align: var(--dx-c-button-span-vertical-align, unset);
 }
 
 .button:not(.variant_inline-inherit).font-display {
@@ -197,8 +195,7 @@
 }
 
 /* custom */
-.button.variant_custom,
-.button.variant_custom:hover.state-disabled {
+.button.variant_custom {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
     border: 1px solid var(--dx-c-button-custom-border);

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

@@ -7,12 +7,10 @@ import {
     ButtonSize,
     IconSprite,
     IconSize,
-    IconSymbol,
-    LightningSlotElement
+    IconSymbol
 } from "typings/custom";
 
 export default class Button extends LightningElement {
-    private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -24,7 +22,6 @@ export default class Button extends LightningElement {
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
-    @api form: string | undefined;
     @api name?: string;
     @api value?: any;
 
@@ -65,20 +62,7 @@ export default class Button extends LightningElement {
         );
     }
 
-    renderedCallback() {
-        if (
-            !this.href &&
-            typeof this.form !== "undefined" &&
-            !this._didSetFormAttribute
-        ) {
-            this._didSetFormAttribute = true;
-            this.template
-                .querySelector("button")
-                ?.setAttribute("form", this.form);
-        }
-    }
-
-    private onSlotChange(e: LightningSlotElement) {
+    private onSlotChange(e: any) {
         const slot = e.target;
         this.isSlotEmpty = slot.assignedElements().length !== 0;
     }

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

@@ -1,17 +1,16 @@
 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 {
@@ -21,24 +20,6 @@ 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 {
@@ -59,11 +40,6 @@ 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-2xl) 0 var(--dx-g-spacing-3xl) 0;
+    padding: var(--dx-g-spacing-4xl) 0;
     min-height: 460px;
     text-align: left;
     background-position: center;
@@ -62,11 +62,6 @@ 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,9 +2,7 @@
     <div class="container" style={style}>
         <div class={textStyle}>
             <h1 class="heading dx-text-display-2">
-                <dx-formatted-rich-text
-                    value={displayTitle}
-                ></dx-formatted-rich-text>
+                <dx-formatted-rich-text value={title}></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,10 +2,8 @@ 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;
@@ -27,21 +25,10 @@ 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: ${toDxColor(this.backgroundColor)};`
+                `background-color: var(--dx-g-${this.backgroundColor});`
         );
     }
 

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

@@ -87,10 +87,6 @@ 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,7 +22,6 @@
                 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 { reflectBooleanAttribute, setContainerInnerHtml } from "dxUtils/lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {
@@ -24,6 +24,7 @@ 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;
@@ -31,8 +32,9 @@ 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 readOnly: boolean = false;
+    @api required = false;
     @api role: string | null = null;
     @api shortcutKey: string | null = null;
     @api size: "small" | "large" | "override" = "small";
@@ -48,41 +50,6 @@ 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;
@@ -100,7 +67,7 @@ export default class Input extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        if (this.isRequiredButEmpty) {
+        if (this.isRequiredAndFilled) {
             this._errorMessage = this.missingErrorMessage;
             return false;
         }
@@ -116,26 +83,10 @@ 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;
 
@@ -158,7 +109,7 @@ export default class Input extends LightningElement {
     private get inputInvalid() {
         const typeValidator = typeValidatorMap[this.type];
         return (
-            this.isRequiredButEmpty &&
+            this.isRequiredAndFilled &&
             typeValidator &&
             !typeValidator.validator(this.value)
         );
@@ -202,7 +153,7 @@ export default class Input extends LightningElement {
         return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
     }
 
-    private get isRequiredButEmpty() {
+    private get isRequiredAndFilled() {
         return this.required && (!this.value || !this.value.trim());
     }
 

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

@@ -166,7 +166,6 @@ 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,14 +6,12 @@
     --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);
 }
@@ -48,23 +46,8 @@
     margin-top: var(--dx-g-spacing-md);
 }
 
-.quote-attribution {
+.foot-note {
     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 {
@@ -72,7 +55,6 @@
     flex-shrink: 0;
     height: fit-content;
     align-self: flex-end;
-    transform: var(--dx-c-section-banner-image-transform);
 }
 
 .graphic {
@@ -115,41 +97,3 @@
         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;
-    }
-}
-
-@media screen and (max-width: 320px) {
-    .image {
-        /* Force the image to take the full width and be centered. Image max size is 320px, hence the media query. */
-        align-self: center;
-        transform: translateX(calc(var(--dx-g-page-padding-horizontal) / -2));
-        width: calc(100% + var(--dx-g-page-padding-horizontal));
-    }
-}

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

@@ -14,24 +14,10 @@
                 <img if:true={hasQuote} src={quoteGraphicSrc} alt="" />
                 <div class={quoteContentStyle}>
                     <p class={contentBodyStyle}>{body}</p>
-                    <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 if:true={footNote} class="foot-note dx-text-display-7">
+                        <dx-formatted-rich-text
+                            value={footNote}
+                        ></dx-formatted-rich-text>
                     </p>
                 </div>
             </div>

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

@@ -1,76 +1,18 @@
 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");
     }
@@ -79,19 +21,6 @@ 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");
     }
@@ -103,26 +32,4 @@ 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
-        );
-    }
 }