@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/iconBadge/iconBadge.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;
@@ -38,3 +38,15 @@ dx-icon {
 .shape-square {
     border-radius: var(--dx-g-spacing-sm);
 }
+
+.background-small {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+}
+
+.background-medium {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
+}
+
+.background-large {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
+}

package/src/modules/dx/iconBadge/iconBadge.html

@@ -1,10 +1,5 @@
 <template>
-    <div class={className} style={style}>
-        <dx-icon
-            color={color}
-            symbol={symbol}
-            sprite={sprite}
-            size="override"
-        ></dx-icon>
+    <div class={className} style={style} part="badge">
+        <dx-icon symbol={symbol} sprite={sprite} size={iconSize}></dx-icon>
     </div>
 </template>

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
 
@@ -10,6 +10,8 @@ export default class IconBadge extends LightningElement {
     @api symbol!: IconSymbol;
     @api color?: string | null = null;
     @api backgroundColor?: string;
+    @api backgroundSize?: string;
+    @api iconSize?: string = "override";
 
     _shape: IconBadgeShape = "circle";
     @api
@@ -30,13 +32,21 @@ export default class IconBadge extends LightningElement {
     }
 
     get className() {
-        return cx("icon-badge", `shape-${this.shape}`);
+        return cx(
+            "icon-badge",
+            `shape-${this.shape}`,
+            this.backgroundSize && `background-${this.backgroundSize}`
+        );
     }
 
     get style() {
-        return (
-            this.backgroundColor &&
-            `background-color: ${toDxColor(this.backgroundColor)}`
-        );
+        const color = this.color
+            ? `--dx-c-icon-badge-color: ${toDxColor(this.color)};`
+            : "";
+        const backgroundColor = this.backgroundColor
+            ? `background-color: ${toDxColor(this.backgroundColor)};`
+            : "";
+
+        return `${color}${backgroundColor}`;
     }
 }

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/button";
 
 :host {
     --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);
@@ -17,7 +17,6 @@ img {
 }
 
 span {
-    margin-top: 3px;
     white-space: nowrap;
 }
 

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -1,10 +1,22 @@
 <template>
     <div if:false={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </div>
     <a if:true={href} href={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </a>
 </template>

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

@@ -1,9 +1,10 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-input-background-active: white;
     --dx-c-input-background: white;
-    --dx-c-input-border-active: 1px solid var(--dx-g-blue-vibrant-50);
+    --dx-c-input-border-active: 2px solid var(--dx-g-blue-vibrant-50);
     --dx-c-input-border-radius: var(--dx-g-spacing-xs);
     --dx-c-input-border: 1px solid var(--dx-g-gray-90);
     --dx-c-input-boxshadow-active: none;
@@ -20,6 +21,8 @@
 }
 
 .input-group {
+    --error-color: var(--dx-g-red-vibrant-50);
+
     height: var(--dx-c-input-height);
     width: var(--dx-c-input-width);
     max-width: inherit;
@@ -48,16 +51,19 @@
     flex-grow: 1;
 }
 
-.input-container.has-shortcut {
+.input-container.has-floating-item {
     padding-right: var(--dx-g-spacing-sm);
 }
 
 .input-container.state-focused {
     background: var(--dx-c-input-background-active);
-    border: var(--dx-c-input-border-active);
     box-shadow: var(--dx-c-input-boxshadow-active);
 }
 
+.input-container.state-focused:not(.has-error) {
+    border: var(--dx-c-input-border-active);
+}
+
 .input-container > dx-icon {
     color: var(--dx-c-input-icon-color);
     margin-left: var(--dx-g-spacing-sm);
@@ -84,6 +90,20 @@ input {
     background: none;
 }
 
+label {
+    color: var(--sds-g-gray-11);
+    display: inline-block;
+    font-size: var(--dx-g-text-xs);
+    hyphens: auto;
+    margin-bottom: var(--dx-g-spacing-2xs);
+    padding-right: var(--dx-g-spacing-sm);
+    padding-top: var(--dx-g-spacing-xs);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
 .input-group.size-small input {
     padding: 0 var(--dx-g-spacing-sm);
 }
@@ -102,6 +122,7 @@ input::placeholder {
 }
 
 .shortcut {
+    align-items: center;
     display: flex;
     flex-shrink: 0;
     flex-direction: row;
@@ -112,6 +133,49 @@ input::placeholder {
     text-transform: uppercase;
 }
 
+.description {
+    margin-top: var(--dx-g-spacing-xs);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    line-height: 18px;
+    color: var(--dx-g-gray-50);
+}
+
+.description.hide {
+    display: none;
+}
+
+.description a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
 .shortcut > img {
     margin-right: var(--dx-g-spacing-2xs);
 }
+
+.has-error {
+    background-clip: padding-box;
+    border: 2px solid var(--error-color);
+}
+
+.has-error.state-focused {
+    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+}
+
+.error-message-box {
+    margin-top: var(--dx-g-spacing-xs);
+    display: block;
+}
+
+.clear-button > dx-icon {
+    --dx-c-icon-color: var(--sds-g-gray-9);
+}
+
+.clear-button > dx-icon::part(svg) {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.clear-button:hover > dx-icon {
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
+}

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

@@ -1,4 +1,8 @@
 <template>
+    <label if:true={label} id="label" for="input" tabindex="-1">
+        {label}
+        <abbr if:true={required}>*</abbr>
+    </label>
     <div class={className}>
         <div class={inputContainerClassName} onclick={onClick} role={role}>
             <dx-icon
@@ -10,16 +14,27 @@
                 aria-label={ariaLabel}
                 aria-keyshortcuts={ariaKeyShortcuts}
                 autocomplete={autocomplete}
+                name={name}
                 disabled={inputDisabled}
+                id="input"
                 onblur={onInputBlur}
                 onfocus={onInputFocus}
                 oninput={onInputChange}
                 onkeydown={onKeyDown}
                 placeholder={placeholder}
                 type={type}
-                value={inputValue}
+                value={value}
+                aria-labelledby="label description"
             />
-            <div class="shortcut" if:true={shortcutKey}>
+            <button
+                class="clear-button"
+                aria-label="Clear"
+                if:true={showClearButton}
+                onclick={clear}
+            >
+                <dx-icon symbol="clear" size="medium"></dx-icon>
+            </button>
+            <div class="shortcut" if:true={showShortcutKey}>
                 <img src={shortcutImgSrc} alt={shortcutImgAlt} />
                 <span>{shortcutKey}</span>
             </div>
@@ -34,4 +49,14 @@
             {submitLabel}
         </dx-button>
     </div>
+    <div id="description" class={descriptionClassName} tabindex="-1">
+        {description}
+    </div>
+    <div
+        if:true={errorMessage}
+        aria-live="assertive"
+        class="error-message-box dx-text-form-error-message"
+    >
+        {errorMessage}
+    </div>
 </template>

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

@@ -1,44 +1,102 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils/devices";
+import { isMac } from "dxUtils/devices";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 import { isValidEmail } from "./validators";
 
-const validatorMap: { [key: string]: (value: string | null) => boolean } = {
-    email: isValidEmail
+type ValidatorMap = {
+    [key: string]: {
+        validator: (value: string | null) => boolean;
+        errorMessage: string;
+    };
+};
+
+const typeValidatorMap: ValidatorMap = {
+    email: {
+        validator: isValidEmail,
+        errorMessage: "Enter valid email"
+    }
 };
 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;
+    @api descriptionMarkup?: string;
     @api loading: boolean = false;
+    @api missingErrorMessage: string = "Complete this field";
+    @api formatErrorMessage?: string;
+    @api name?: string;
     @api placeholder!: string;
+    @api required = false;
     @api role: string | null = null;
     @api shortcutKey: string | null = null;
     @api size: "small" | "large" | "override" = "small";
     @api submitLabel?: string | null = null;
     @api type: string = "text";
-    @api value?: string | null = null;
+    @api validityOnBlur = false;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: string | null) {
+        this._value = value || "";
+    }
+
+    @api
+    get errorMessage() {
+        return this._errorMessage;
+    }
+
+    set errorMessage(value) {
+        this._errorMessage = value;
+    }
+
     @api focus() {
         if (this.input) {
             this.input.focus();
         }
     }
 
-    private controlled: boolean = false;
+    @api
+    reportValidity(): boolean {
+        if (this.isRequiredAndFilled) {
+            this._errorMessage = this.missingErrorMessage;
+            return false;
+        }
+
+        const typeValidator = typeValidatorMap[this.type];
+        if (typeValidator && !typeValidator.validator(this.value)) {
+            this._errorMessage =
+                this.formatErrorMessage || typeValidator.errorMessage;
+            return false;
+        }
+
+        this._errorMessage = "";
+        return true;
+    }
+
+    private _errorMessage: string = "";
     private focused: boolean = false;
     private input: HTMLInputElement | null = null;
     private _value: string | null = null;
     private _loading: boolean = false;
 
-    private get ariaKeyShortcuts() {
-        return this.shortcutKey ? `meta+${this.shortcutKey}` : null;
+    private get showClearButton(): boolean {
+        return this.clearable && !!this.value;
     }
 
-    private get inputValue() {
-        return this.controlled ? this.value : this._value;
+    private get showShortcutKey(): boolean {
+        return !this.showClearButton && !!this.shortcutKey;
+    }
+
+    private get ariaKeyShortcuts() {
+        return this.shortcutKey ? `meta+${this.shortcutKey}` : null;
     }
 
     private get inputLoading() {
@@ -46,8 +104,12 @@ export default class Input extends LightningElement {
     }
 
     private get inputInvalid() {
-        const validator = validatorMap[this.type];
-        return validator ? !validator(this._value) : false;
+        const typeValidator = typeValidatorMap[this.type];
+        return (
+            this.isRequiredAndFilled &&
+            typeValidator &&
+            !typeValidator.validator(this.value)
+        );
     }
 
     private get inputDisabled() {
@@ -58,11 +120,17 @@ export default class Input extends LightningElement {
         return cx("input-group", `size-${this.size}`);
     }
 
+    private get descriptionClassName() {
+        return cx("description", !this.descriptionMarkup && "hide");
+    }
+
     private get inputContainerClassName() {
         return cx(
             "input-container",
             this.focused && "state-focused",
-            this.shortcutKey && "has-shortcut"
+            (this.showClearButton || this.showShortcutKey) &&
+                "has-floating-item",
+            !!this.errorMessage && "has-error"
         );
     }
 
@@ -82,6 +150,10 @@ export default class Input extends LightningElement {
         return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
     }
 
+    private get isRequiredAndFilled() {
+        return this.required && (!this.value || !this.value.trim());
+    }
+
     connectedCallback() {
         window.addEventListener("keydown", this.onWindowKeydown);
     }
@@ -94,9 +166,8 @@ export default class Input extends LightningElement {
         if (!this.input) {
             this.input = <HTMLInputElement>this.template.querySelector("input");
         }
-        if (typeof this.value === "string" && !this.controlled) {
-            this.controlled = true;
-        }
+        const container = this.template.querySelector(".description");
+        setContainerInnerHtml(container, this.descriptionMarkup);
     }
 
     onClick() {
@@ -111,51 +182,56 @@ export default class Input extends LightningElement {
 
     onInputBlur() {
         this.focused = false;
+
+        if (this.validityOnBlur) {
+            this.reportValidity();
+        }
     }
 
     onInputChange(e: InputEvent) {
         if (!e || !e.target) {
             return;
         }
-        this._value = (<HTMLInputElement>e.target).value || "";
-        this.dispatchChange();
+        this.dispatchChange((<HTMLInputElement>e.target).value || "");
     }
 
     onButtonClick(e: Event) {
         if (!this.buttonDisabled) {
             e.stopPropagation();
         }
-        this.onSubmit();
+        this.submit();
     }
 
-    dispatchChange() {
-        this.dispatchEvent(new CustomEvent("change", { detail: this._value }));
+    dispatchChange(value: string) {
+        this._value = value;
+        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
     }
 
-    dispatchSubmit() {
-        this.dispatchEvent(new CustomEvent("submit", { detail: this._value }));
+    clear(e?: Event) {
+        if (e) {
+            e.stopPropagation();
+        }
+        this.dispatchChange("");
+        this.dispatchEvent(new CustomEvent("clear"));
+        if (this.input) {
+            this.input.blur();
+        }
     }
 
-    onSubmit = async () => {
+    submit = async () => {
         if (this.inputInvalid) {
             return;
         }
-        this.dispatchSubmit();
+        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
     };
 
     private onKeyDown(e: KeyboardEvent) {
         switch (e.key) {
             case "Escape":
-                this.dispatchEvent(new CustomEvent("escape"));
-                if (this.input) {
-                    this.input.blur();
-                    this._value = "";
-                    this.dispatchChange();
-                }
+                this.clear();
                 break;
             case "Enter":
-                this.onSubmit();
-                this.dispatchEvent(new CustomEvent("enter"));
+                this.submit();
                 break;
             default:
         }

package/src/modules/dx/interactiveImage/interactiveImage.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 article {
     border: 1px solid var(--dx-g-gray-90);

package/src/modules/dx/logo/logo.css

@@ -0,0 +1,32 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
+
+    flex-shrink: 0;
+}
+
+a {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+.logo-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.logo-link > span {
+    color: var(--dx-c-logo-label-color);
+}
+
+.logo-link > img {
+    margin-right: var(--dx-g-spacing-sm);
+    width: 28px;
+}

package/src/modules/dx/logo/logo.html

@@ -0,0 +1,6 @@
+<template>
+    <a href={href} class="logo-link">
+        <img src={imgSrc} alt={imgAlt} />
+        <span class="dx-text-heading-7">{label}</span>
+    </a>
+</template>

package/src/modules/dx/logo/logo.ts

@@ -0,0 +1,8 @@
+import { LightningElement, api } from "lwc";
+
+export default class Logo extends LightningElement {
+    @api href: string = "/";
+    @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
+    @api imgAlt: string = "Salesforce logo";
+    @api label!: string;
+}

package/src/modules/dx/metadataBadge/metadataBadge.css

@@ -0,0 +1,41 @@
+@import "dxHelpers/reset";
+
+.badge {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
+    color: var(--dx-c-metadata-badge-color, var(--color));
+    background: var(--dx-c-metadata-badge-background, var(--background));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    padding: 0 var(--horizontal-spacing);
+    border-radius: var(--border-radius);
+    font-family: var(--dx-g-font-display);
+    font-size: 10px;
+    text-align: center;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
+    font-size: 8px;
+    letter-spacing: 0.5px;
+}
+
+@media screen and (max-width: 768px) {
+    .badge:not(.size-small) {
+        height: var(--dx-g-spacing-lg);
+        padding: 0 var(--dx-g-spacing-sm);
+        font-size: var(--dx-g-text-2xs);
+    }
+}

package/src/modules/dx/metadataBadge/metadataBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/metadataBadge/metadataBadge.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Color, TypeBadgeSize } from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+
+export default class MetadataBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api color?: Color;
+    @api value!: string;
+
+    private get className(): string {
+        return cx("badge", `size-${this.size}`);
+    }
+
+    private get style(): string {
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            if (variables) {
+                return buildStyleColorVariables(variables);
+            }
+        }
+        return "";
+    }
+}