@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

package/src/modules/dx/headerSearch/headerSearch.html

@@ -40,7 +40,6 @@
             <dx-dropdown
                 options={suggestions}
                 open={isDropdownOpen}
-                placement="bottom-end"
                 onrequestclose={onDropdownRequestClose}
                 offset="small"
                 full-width

package/src/modules/dx/hr/hr.css

@@ -13,7 +13,7 @@ h2 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
     color: var(--dx-g-blue-vibrant-20);
-    text-transform: uppercase;
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
@@ -22,7 +22,6 @@ p::before,
 h2::before,
 p::after,
 h2::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
     content: "";
     flex: 1 1;
     border-bottom: 2px solid var(--dx-g-gray-95);
@@ -42,7 +41,7 @@ h2::after {
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
+    text-transform: capitalize;
     padding: 0 var(--dx-c-hr-padding-horizontal);
 }
 
@@ -50,7 +49,6 @@ dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

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

@@ -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

@@ -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

@@ -17,7 +17,6 @@ img {
 }
 
 span {
-    margin-top: 3px;
     white-space: nowrap;
 }
 

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

@@ -133,6 +133,22 @@ 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);
 }
@@ -148,7 +164,7 @@ input::placeholder {
 }
 
 .error-message-box {
-    margin-top: var(--dx-g-spacing-2xs);
+    margin-top: var(--dx-g-spacing-xs);
     display: block;
 }
 

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

@@ -1,5 +1,5 @@
 <template>
-    <label if:true={label} for="input">
+    <label if:true={label} id="label" for="input" tabindex="-1">
         {label}
         <abbr if:true={required}>*</abbr>
     </label>
@@ -24,6 +24,7 @@
                 placeholder={placeholder}
                 type={type}
                 value={value}
+                aria-labelledby="label description"
             />
             <button
                 class="clear-button"
@@ -48,6 +49,9 @@
             {submitLabel}
         </dx-button>
     </div>
+    <div id="description" class={descriptionClassName} tabindex="-1">
+        {description}
+    </div>
     <div
         if:true={errorMessage}
         aria-live="assertive"

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

@@ -2,6 +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 { isValidEmail } from "./validators";
 
 type ValidatorMap = {
@@ -25,6 +26,7 @@ export default class Input extends LightningElement {
     @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;
@@ -118,6 +120,10 @@ 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",
@@ -160,6 +166,8 @@ export default class Input extends LightningElement {
         if (!this.input) {
             this.input = <HTMLInputElement>this.template.querySelector("input");
         }
+        const container = this.template.querySelector(".description");
+        setContainerInnerHtml(container, this.descriptionMarkup);
     }
 
     onClick() {

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

@@ -0,0 +1,59 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+article {
+    border: 1px solid var(--dx-g-gray-90);
+    border-radius: 0.3125rem;
+}
+
+header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-radius: 0.3125rem 0.3125rem 0 0;
+    background-color: var(--dx-g-gray-95);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-10);
+    padding: var(--dx-g-spacing-sm);
+}
+
+header span {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+}
+
+footer {
+    border-radius: 0 0 0.3125rem 0.3125rem;
+}
+
+.body {
+    margin: var(--dx-g-spacing-md);
+    overflow-x: auto;
+}
+
+.body img {
+    min-width: 650px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Breakpoints for mobile */
+
+@media screen and (max-width: 640px) {
+    header {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .controls,
+    .controls dx-dropdown,
+    .controls dx-button {
+        width: 100%;
+    }
+}

package/src/modules/dx/interactiveImage/interactiveImage.html

@@ -0,0 +1,32 @@
+<template>
+    <article>
+        <header>
+            <span>{title}</span>
+            <div class="controls">
+                <template if:true={isSingleDownload}>
+                    <dx-button
+                        icon-symbol="download"
+                        href={singleDownloadHref}
+                        download={singleDownloadFilename}
+                    >
+                        {downloadButtonLabel}
+                    </dx-button>
+                </template>
+                <template if:false={isSingleDownload}>
+                    <dx-dropdown
+                        options={urls}
+                        onchange={handleDownloadOptionChange}
+                        placement="bottom-end"
+                    >
+                        <dx-button variant="primary" icon-symbol="chevrondown">
+                            {downloadButtonLabel}
+                        </dx-button>
+                    </dx-dropdown>
+                </template>
+            </div>
+        </header>
+        <div class="body">
+            <img src={featuredSrc} alt={title} />
+        </div>
+    </article>
+</template>

package/src/modules/dx/interactiveImage/interactiveImage.ts

@@ -0,0 +1,71 @@
+import { LightningElement, api } from "lwc";
+
+// Extracts filename and extension from a file URL
+const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
+const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
+
+export default class InteractiveImage extends LightningElement {
+    @api title!: string;
+    @api featuredSrc!: string;
+
+    @api
+    set downloadUrls(values: any) {
+        // Normalize input values
+        let urls;
+        if (typeof values === "string") {
+            if (values.startsWith("[")) {
+                urls = JSON.parse(values);
+            } else {
+                urls = [values];
+            }
+        } else {
+            urls = values;
+        }
+        // Ensure that we have some URLs
+        if (!urls || urls.length === 0) {
+            throw new Error(
+                `No download url found for interactive image with title "${this.title}"`
+            );
+        }
+        // Prepare download options with labels
+        this.urls = urls.map((url: string) => {
+            return {
+                label: this.getDownloadLabelFromUrl(url),
+                id: url
+            };
+        });
+    }
+    get downloadUrls() {
+        return this.urls;
+    }
+
+    private urls: { label: string; id: string }[] = [];
+
+    private get isSingleDownload() {
+        return this.urls.length === 1;
+    }
+
+    private get singleDownloadHref() {
+        return this.urls[0].id;
+    }
+
+    private get singleDownloadFilename() {
+        const pathParts = this.urls[0].id.match(FILENAME_FROM_URL_REGEX);
+        return pathParts ? pathParts[0] : "";
+    }
+
+    private get downloadButtonLabel() {
+        return this.isSingleDownload ? this.urls[0].label : "Download as...";
+    }
+
+    private handleDownloadOptionChange(event: CustomEvent) {
+        window.open(event.detail, "_blank");
+    }
+
+    private getDownloadLabelFromUrl(url: string): string {
+        const urlParts = url.match(EXTENSION_FROM_URL_REGEX);
+        return urlParts
+            ? `Download as ${urlParts[1].toUpperCase()}`
+            : "Download";
+    }
+}

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

@@ -23,7 +23,6 @@ a:hover {
 }
 
 .logo-link > span {
-    margin-top: 3px;
     color: var(--dx-c-logo-label-color);
 }
 

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

@@ -3,6 +3,6 @@ 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 log";
+    @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 "";
+    }
+}

package/src/modules/dx/modal/modal.css

@@ -0,0 +1,40 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+}
+
+.modal-drawer_container {
+    display: none;
+}
+
+.modal-drawer_container.modal-drawer_active {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--dx-c-modal-drawer-z-index);
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}
+
+@media screen and (max-width: 768px) {
+    .modal-drawer_container.modal-drawer_active {
+        pointer-events: all;
+    }
+}

package/src/modules/dx/modal/modal.html

@@ -0,0 +1,10 @@
+<template>
+    <div class={containerClass} tabindex="0" role="dialog">
+        <slot></slot>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleToggleModal}
+    ></div>
+</template>

package/src/modules/dx/modal/modal.ts

@@ -0,0 +1,50 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class Modal extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    renderedCallback(): void {
+        if (this._open) {
+            this.focusFirstElement();
+        }
+    }
+
+    connectedCallback(): void {
+        this.template.addEventListener(
+            "keydown",
+            this.handleKeyDown.bind(this)
+        );
+    }
+
+    focusFirstElement(): void {
+        this.template.querySelector("div")!.focus();
+    }
+
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("togglemodal"));
+    }
+}

package/src/modules/dx/modalDrawer/modalDrawer.html

@@ -1,11 +1,11 @@
 <template>
     <div class={containerClass}>
         <slot></slot>
-        <dx-button onclick={handleCloseModal}>Done</dx-button>
+        <dx-button onclick={handleToggleModal}>Done</dx-button>
     </div>
     <div
         if:true={open}
         class="modal-drawer_overlay"
-        onclick={handleCloseModal}
+        onclick={handleToggleModal}
     ></div>
 </template>

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -20,7 +20,13 @@ export default class ModalDrawer extends LightningElement {
         );
     }
 
-    handleCloseModal() {
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
         this._open = !this._open;
         this.dispatchEvent(new CustomEvent("clickclose"));
     }

package/src/modules/dx/pagination/pagination.css

@@ -27,8 +27,7 @@
 }
 
 .dx-pagination-pages button {
-    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-md);
     border-radius: var(--dx-g-spacing-lg);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);

package/src/modules/dx/popover/popover.css

@@ -6,11 +6,14 @@
         var(--dx-g-spacing-sm)
     );
     --popover-border: var(--dx-c-popover-border, 1px solid var(--dx-g-gray-90));
+    --popover-padding: var(--dx-g-spacing-sm);
 }
 
 .popover-container {
-    position: fixed;
-    z-index: var(--dx-g-z-index-max);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
     visibility: hidden;
     pointer-events: none;
 }
@@ -23,7 +26,7 @@
     width: 168px;
     max-width: calc(100vw - var(--dx-g-spacing-lg));
     max-height: 65vh;
-    padding: var(--dx-g-spacing-sm);
+    padding: var(--popover-padding);
     overflow-y: auto;
     transition: opacity 0.2s linear, transform 0.2s linear;
     transition-delay: 0.02s;
@@ -61,3 +64,25 @@
 .popover-small {
     width: 136px;
 }
+
+.popover-arrow {
+    position: absolute;
+
+    /* Weird spacing here to satisfy our linter */
+    background: linear-gradient(
+        315deg,
+        transparent 4px,
+        white 4px
+    ); /* make only top half of rotated square visible */
+
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    border: var(--popover-border);
+    border-bottom: transparent;
+    border-right: transparent;
+    box-shadow: var(--dx-g-box-shadow-lg);
+    transition: opacity 0.2s linear, transform 0.2s linear;
+    transition-delay: 0.02s;
+    z-index: var(--dx-c-popover-z-index, var(--dx-g-z-index-max));
+}

package/src/modules/dx/popover/popover.html

@@ -1,6 +1,7 @@
 <template>
     <slot name="control" onslotchange={onSlotChange}></slot>
     <div class={containerClassName}>
+        <div class="popover-arrow" if:true={showArrow}></div>
         <div
             class={className}
             style={style}