@salesforcedevs/dx-components 1.3.151-canary.0 → 1.3.152

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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",
@@ -91,7 +89,6 @@
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
-        "dxBaseElements/lightningElementWithState",
         "dxBaseElements/matchMediaElement",
         "dxConstants/brands",
         "dxConstants/colors",
@@ -113,7 +110,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.151-canary.0",
+    "version": "1.3.152",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,6 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    }
+    },
+    "gitHead": "c5a985566863a4a94e243299855702fab466a66c"
 }

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

@@ -10,7 +10,6 @@ import {
 } from "typings/custom";
 
 export default class Button extends LightningElement {
-    private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -22,7 +21,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;
 
@@ -63,19 +61,6 @@ 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) {
         const slot = e.target;
         this.isSlotEmpty = slot.assignedElements().length !== 0;

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

@@ -5,12 +5,12 @@ 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,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;
-        this.setAttribute("required", value); // reflect to HTML
-    }
-
     private showValidity = false;
 
     private get valid(): boolean {
@@ -58,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/faq/faq.html

@@ -23,13 +23,9 @@
                             color="blue-vibrant-20"
                         ></dx-icon-badge>
                     </summary>
-                    <p class="faq-body dx-text-body-2">
-                        <dx-formatted-rich-text
-                            value={it.value.body}
-                        ></dx-formatted-rich-text>
-                    </p>
+                    <p class="faq-body dx-text-body-2">{it.value.body}</p>
+                    <dx-hr no-padding="true"></dx-hr>
                 </details>
-                <dx-hr key={it.value.title} no-padding="true"></dx-hr>
             </template>
         </div>
     </div>

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

@@ -4,7 +4,6 @@ import { track } from "dxUtils/analytics";
 import { toJson } from "dxUtils/normalizers";
 
 export default class FeaturesListHeader extends LightningElement {
-    private _displayTitle: string | null = null;
     @api title!: string;
     @api subtitle?: string;
     @api ctaLabel!: string;
@@ -26,17 +25,6 @@ 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 &&

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

@@ -30,8 +30,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";
@@ -47,24 +48,6 @@ export default class Input extends LightningElement {
         this._value = 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;
-        this.setAttribute("required", value); // reflect to HTML
-    }
-
     @api
     get errorMessage() {
         return this._errorMessage;
@@ -82,7 +65,7 @@ export default class Input extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        if (this.isRequiredButEmpty) {
+        if (this.isRequiredAndFilled) {
             this._errorMessage = this.missingErrorMessage;
             return false;
         }
@@ -98,25 +81,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 _name?: string;
-    private _required: boolean = false;
     private _loading: boolean = false;
     private isMac: boolean = false;
 
@@ -139,7 +107,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)
         );
@@ -183,7 +151,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/popover/popover.ts

@@ -254,9 +254,9 @@ export default class Popover extends LightningElement {
         const elements = slot.assignedElements();
         const slotted = elements.length === 0 ? null : elements[0];
         // allows dropdown/select to compose popover
-        const slotElement = (
-            slotted?.tagName === "SLOT" ? slotted.firstChild : slotted
-        ) as HTMLElement | null;
+        const slotElement = (slotted?.tagName === "SLOT"
+            ? slotted.firstChild
+            : slotted) as HTMLElement | null;
         const isWorkToDo =
             slotElement &&
             (!this.control || !slotElement.isSameNode(this.control));

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,7 +6,6 @@
     --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 {
@@ -56,7 +55,6 @@
     flex-shrink: 0;
     height: fit-content;
     align-self: flex-end;
-    transform: var(--dx-c-section-banner-image-transform);
 }
 
 .graphic {

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

@@ -10,6 +10,7 @@ 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;
 
@@ -50,22 +51,11 @@ 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 = "";
 

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

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

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

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