@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-input-background-active: white;
@@ -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;
 }
 
@@ -100,8 +104,6 @@ label {
     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 {
@@ -122,6 +124,7 @@ input::placeholder {
 }
 
 .shortcut {
+    align-items: center;
     display: flex;
     flex-shrink: 0;
     flex-direction: row;
@@ -132,6 +135,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);
 }
@@ -143,11 +162,10 @@ input::placeholder {
 
 .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-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>
@@ -22,8 +22,10 @@
                 oninput={onInputChange}
                 onkeydown={onKeyDown}
                 placeholder={placeholder}
+                readonly={readOnly}
                 type={type}
                 value={value}
+                aria-labelledby="label description"
             />
             <button
                 class="clear-button"
@@ -48,6 +50,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

@@ -1,7 +1,8 @@
 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 { reflectBooleanAttribute, setContainerInnerHtml } from "dxUtils/lwc";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {
@@ -17,20 +18,21 @@ const typeValidatorMap: ValidatorMap = {
         errorMessage: "Enter valid email"
     }
 };
+
+// @ts-ignore Dark Magic (TM): we have custom getters on aria-keyshortcuts that cause problems for typescript
 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 readOnly: boolean = false;
     @api role: string | null = null;
     @api shortcutKey: string | null = null;
     @api size: "small" | "large" | "override" = "small";
@@ -46,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;
@@ -63,7 +100,7 @@ export default class Input extends LightningElement {
 
     @api
     reportValidity(): boolean {
-        if (this.isRequiredAndFilled) {
+        if (this.isRequiredButEmpty) {
             this._errorMessage = this.missingErrorMessage;
             return false;
         }
@@ -79,11 +116,28 @@ 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;
 
     private get showClearButton(): boolean {
         return this.clearable && !!this.value;
@@ -104,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)
         );
@@ -118,6 +172,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",
@@ -133,21 +191,26 @@ export default class Input extends LightningElement {
     }
 
     private get commandKey() {
-        return isMac() ? "command" : "control";
+        return this.isMac ? "command" : "control";
     }
 
     private get shortcutImgSrc() {
-        return `/assets/svg/${this.commandKey}.svg`;
+        return `https://a.sfdcstatic.com/developer-website/images/${this.commandKey}.svg`;
     }
 
     private get shortcutImgAlt() {
         return `${this.commandKey}-${this.shortcutKey} is the search shortcut`;
     }
 
-    private get isRequiredAndFilled() {
+    private get isRequiredButEmpty() {
         return this.required && (!this.value || !this.value.trim());
     }
 
+    constructor() {
+        super();
+        this.isMac = isMac();
+    }
+
     connectedCallback() {
         window.addEventListener("keydown", this.onWindowKeydown);
     }
@@ -160,6 +223,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() {
@@ -230,7 +295,8 @@ export default class Input extends LightningElement {
     }
 
     private onWindowKeydown = (e: KeyboardEvent) => {
-        if (this.shortcutKey && e.metaKey && e.key === this.shortcutKey) {
+        const shortcutPressed = this.isMac ? e.metaKey : e.ctrlKey;
+        if (this.shortcutKey && shortcutPressed && e.key === this.shortcutKey) {
             e.preventDefault();
             this.focus();
         }

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/interactiveImage/interactiveImage.html

@@ -1,7 +1,7 @@
 <template>
     <article>
         <header>
-            <span>{title}</span>
+            <span>{header}</span>
             <div class="controls">
                 <template if:true={isSingleDownload}>
                     <dx-button
@@ -26,7 +26,7 @@
             </div>
         </header>
         <div class="body">
-            <img src={featuredSrc} alt={title} />
+            <img src={featuredSrc} alt={header} />
         </div>
     </article>
 </template>

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

@@ -5,7 +5,7 @@ const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
 const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
 
 export default class InteractiveImage extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api featuredSrc!: string;
 
     @api
@@ -24,7 +24,7 @@ export default class InteractiveImage extends LightningElement {
         // 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}"`
+                `No download url found for interactive image with title "${this.header}"`
             );
         }
         // Prepare download options with labels

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

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
@@ -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.html

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

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

@@ -2,7 +2,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 log";
+    @api imgSrc: string =
+        "https://a.sfdcstatic.com/developer-website/images/salesforce-cloud.svg";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -0,0 +1,197 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-padding: 0 var(--dx-g-page-padding-horizontal);
+    --dx-c-container-justify-content: left;
+}
+
+dx-formatted-rich-text {
+    --dx-c-formatted-rich-text-inline-link-color: var(
+        --dx-g-cloud-blue-vibrant-95
+    );
+    --dx-c-formatted-rich-text-inline-link-color-hover: var(
+        --dx-g-blue-vibrant-70
+    );
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    padding: var(--dx-c-padding);
+    justify-content: var(--dx-c-container-justify-content);
+    overflow: hidden;
+}
+
+.container > * {
+    width: 50%;
+}
+
+.text-container {
+    --dx-g-text-body-color: var(--dx-g-text-heading-color);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-4xl) 0;
+    min-height: 460px;
+    text-align: left;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.button-container {
+    display: flex;
+    gap: var(--dx-g-spacing-md);
+}
+
+.secondary-button {
+    --dx-c-button-background-color: white;
+}
+
+.light-text > *:not(:last-child) {
+    color: white;
+}
+
+.image-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+    overflow: visible;
+}
+
+img {
+    width: 100%;
+}
+
+img.desktop {
+    min-width: 876px;
+    margin-left: var(--dx-g-spacing-lg);
+}
+
+img.mobile {
+    display: none;
+    min-width: 1024px;
+}
+
+.multiple-image-container {
+    position: relative;
+    max-width: 646px;
+}
+
+.image-one {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 418px;
+    height: 515px;
+}
+
+.image-two {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 341px;
+    height: 339px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+svg {
+    width: 100%;
+    position: relative;
+    bottom: 60px;
+}
+
+.foot-note-container {
+    display: flex;
+}
+
+@media screen and (min-width: 1024px) {
+    .text-container {
+        text-align: left;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .container > * {
+        width: 100%;
+    }
+
+    .text-container {
+        align-items: center;
+        padding-top: var(--dx-g-spacing-4xl);
+        padding-bottom: 0;
+        min-height: unset;
+    }
+
+    .button-container {
+        justify-content: center;
+    }
+
+    .text-container > * {
+        max-width: 700px;
+    }
+
+    .image-container {
+        justify-content: center;
+    }
+
+    img.desktop {
+        display: none;
+    }
+
+    img.mobile {
+        display: block;
+        margin-top: var(--dx-g-spacing-3xl);
+    }
+
+    .multiple-image-container {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .body,
+    .subtitle {
+        font-size: var(--dx-g-text-base);
+        line-height: var(--dx-g-text-xl);
+    }
+
+    .heading {
+        font-size: var(--dx-g-text-3xl);
+        line-height: var(--dx-g-text-4xl);
+    }
+}
+@media screen and (min-width: 479px) and (max-width: 1024px) {
+    .text-container {
+        text-align: center;
+    }
+}
+
+@media screen and (min-width: 479px) {
+    .foot-note-image {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 479px) {
+    .foot-note-image {
+        object-fit: contain;
+    }
+}

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -0,0 +1,75 @@
+<template>
+    <div class="container" style={style}>
+        <div class={textStyle}>
+            <h1 class="heading dx-text-display-2">{header}</h1>
+            <span class="body dx-text-body-1">{body}</span>
+            <span lwc:if={subtitle} class="subtitle dx-text-display-7">
+                {subtitle}
+            </span>
+            <div class="foot-note-container">
+                <div class="foot-note-text-button-container">
+                    <span
+                        lwc:if={footNote}
+                        class="dx-text-body-4"
+                        style={footNoteStyle}
+                    >
+                        <dx-formatted-rich-text
+                            value={footNote}
+                        ></dx-formatted-rich-text>
+                    </span>
+                    <div class="button-container">
+                        <dx-button
+                            onclick={onCtaClick}
+                            href={ctaHref}
+                            target={ctaTarget}
+                            size="large"
+                        >
+                            {ctaLabel}
+                        </dx-button>
+                        <dx-button
+                            class="secondary-button"
+                            lwc:if={ctaLabelSecondary}
+                            onclick={onCtaClickSecondary}
+                            href={ctaHrefSecondary}
+                            target={ctaTargetSecondary}
+                            size="large"
+                            variant="secondary"
+                        >
+                            {ctaLabelSecondary}
+                        </dx-button>
+                    </div>
+                </div>
+                <img
+                    lwc:if={footNoteImage}
+                    class="foot-note-image"
+                    src={footNoteImage}
+                    alt={footNoteImageAlt}
+                    width={footNoteImageWidth}
+                    height={footNoteImageHeight}
+                />
+            </div>
+        </div>
+        <div lwc:if={multipleImages} class="multiple-image-container">
+            <img class="image-one" src={imgSrcOne} alt="" />
+            <img class="image-two" src={imgSrcTwo} alt="" />
+        </div>
+        <div lwc:else class="image-container">
+            <img class="desktop" src={imgSrc} alt="" />
+            <img class="mobile" src={imgSrcMobile} alt="" />
+        </div>
+    </div>
+    <template lwc:if={hasSwoop}>
+        <svg
+            width="500"
+            height="80"
+            viewBox="0 -40 500 40"
+            preserveAspectRatio="none"
+        >
+            <path
+                xmlns="http://www.w3.org/2000/svg"
+                d="M 0 0 L 0 -40 C 120 0 400 0 500 -40 L 500 0 Z"
+                fill="#FFFFFF"
+            ></path>
+        </svg>
+    </template>
+</template>