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

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -0,0 +1,85 @@
+<template>
+    <div class="container">
+        <div class="button-container">
+            <dx-button
+                class="button-close"
+                variant="secondary"
+                icon-symbol="close"
+                onclick={handleModalClose}
+            >
+                Close
+            </dx-button>
+        </div>
+        <div class="content-container">
+            <div class="col-one">
+                <dx-icon-badge
+                    class="badge-main"
+                    background-color={badgeBackgroundColor}
+                    symbol={badgeSymbol}
+                    sprite={badgeSprite}
+                ></dx-icon-badge>
+                <dx-card-title
+                    class="title-main"
+                    href={href}
+                    target={target}
+                    title={title}
+                ></dx-card-title>
+                <span class="label dx-text-body-3">{label}</span>
+                <p class="body dx-text-body-2 static-font">{body}</p>
+                <span class="terms dx-text-body-3 static-font">{terms}</span>
+                <dx-button
+                    class="button-cta"
+                    size="large"
+                    href={href}
+                    variant="primary"
+                    font="sans"
+                    icon-symbol={buttonIcon}
+                    icon-size={buttonIconSize}
+                >
+                    {buttonCta}
+                </dx-button>
+                <ul class="details">
+                    <template for:each={details} for:item="item">
+                        <li class="detail" key={item}>
+                            <dx-icon-badge
+                                class="badge-detail"
+                                background-color="indigo-vibrant-90"
+                                symbol="check"
+                            ></dx-icon-badge>
+                            <span class="detail-text dx-text-body-4">
+                                {item}
+                            </span>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+            <div class="col-two">
+                <dx-card-title
+                    class="title-secondary"
+                    title={colTwoTitle}
+                ></dx-card-title>
+                <template for:each={colTwoDetails} for:item="colTwoItem">
+                    <div key={colTwoItem.title}>
+                        <p class="col-two-detail-title">{colTwoItem.title}</p>
+                        <p
+                            if:true={colTwoItem.subtitle}
+                            class="col-two-detail-subtitle"
+                        >
+                            {colTwoItem.subtitle}
+                        </p>
+                        <ul if:true={colTwoItem.bullets} class="bullet-list">
+                            <template
+                                for:each={colTwoItem.bullets}
+                                for:item="bullet"
+                            >
+                                <li key={colTwoItem.bullet} class="bullet">
+                                    {bullet}
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -0,0 +1,67 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol!: string;
+    @api body!: string;
+    @api buttonCta?: string;
+    @api buttonHref?: string;
+    @api buttonIcon?: string;
+    @api buttonIconSize?: string = "large";
+    @api colTwoTitle!: string;
+    @api href!: string;
+    @api label!: string;
+    @api target?: string;
+    @api terms!: string;
+    @api title!: string;
+
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    @api
+    get colTwoDetails() {
+        return this._colTwoDetails;
+    }
+    set colTwoDetails(value) {
+        this._colTwoDetails = toJson(value);
+    }
+
+    private _details!: [{ title: string; subtitle: string }];
+    private _colTwoDetails!: string[];
+    private stickyCloseObserver!: IntersectionObserver;
+
+    renderedCallback(): void {
+        this.observeStickyClose();
+    }
+
+    disconnectedCallback(): void {
+        this.stickyCloseObserver.disconnect();
+    }
+
+    private observeStickyClose() {
+        const el = this.template.querySelector(".button-container");
+        if (el && !this.stickyCloseObserver) {
+            this.stickyCloseObserver = new IntersectionObserver(
+                ([e]) => {
+                    e.target.classList.toggle(
+                        "is-sticky",
+                        e.intersectionRatio < 1
+                    );
+                },
+                { threshold: [0.99] }
+            );
+            this.stickyCloseObserver.observe(el);
+        }
+    }
+
+    private handleModalClose() {
+        this.dispatchEvent(new CustomEvent("togglemodal"));
+    }
+}

package/src/modules/dx/cardVideoPreview/cardVideoPreview.css

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 .dx-play-button {
     position: absolute;
@@ -7,7 +7,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(datetime) {
         display: block;
     }

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -5,6 +5,7 @@
         href={href}
         img-alt={imgAlt}
         img-src={imgSrc}
+        layout={layout}
         target={target}
         title={title}
     >
@@ -15,6 +16,7 @@
             slot="image-badge"
         ></dx-icon-badge>
         <dx-formatted-date-time
+            if:true={datetime}
             slot="datetime"
             day="2-digit"
             month="long"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -2,11 +2,12 @@ import { LightningElement, api } from "lwc";
 
 export default class CardVideoPreview extends LightningElement {
     @api body?: string | null = null;
-    @api datetime!: string;
+    @api datetime?: string;
     @api featured?: boolean = false;
     @api href!: string;
     @api imgAlt?: string;
     @api imgSrc?: string | null;
     @api target?: string | null = null;
+    @api layout: "vertical" | "horizontal" = "vertical";
     @api title!: string;
 }

package/src/modules/dx/checkbox/checkbox.css

@@ -1,18 +1,26 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     display: block;
 }
 
-.checkbox-span,
+.container {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.checkbox-label,
 input {
     cursor: pointer;
 }
 
 label {
-    display: flex;
-    align-items: center;
+    display: var(--dx-c-checkbox-display, flex);
+    align-items: var(--dx-c-checkbox-align-label, flex-start);
 }
 
 input {
@@ -20,10 +28,21 @@ input {
     margin: 0;
 }
 
-label > .checkbox-span {
+.checkbox-label {
+    line-height: var(--dx-c-checkbox-text-line-height, 20px);
+    font-size: var(--dx-c-checkbox-font-size, --dx-g-text-base);
+    transform: translateY(-2px);
     padding-left: 12px;
-    line-height: 16px;
-    text-transform: var(--dx-c-checkbox-text-transform, capitalize);
+}
+
+.checkbox-label::first-letter {
+    text-transform: uppercase;
+}
+
+.checkbox-error {
+    opacity: 0;
+    margin-top: var(--dx-g-spacing-xs);
+    user-select: none;
 }
 
 input:disabled {
@@ -31,11 +50,16 @@ input:disabled {
     opacity: 0.9;
 }
 
-input:disabled + .checkbox-span {
+input:disabled + .checkbox-label {
     cursor: not-allowed;
     color: var(--sds-g-gray-9);
 }
 
+.container.show-error .checkbox-error {
+    opacity: 1;
+    user-select: auto;
+}
+
 /* adapted from https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ */
 @supports (-webkit-appearance: none) or (-moz-appearance: none) {
     input {
@@ -139,4 +163,10 @@ input:disabled + .checkbox-span {
     input:checked[type="radio"]::after {
         --opacity: 1;
     }
+
+    .container.show-error input {
+        --border-color-override: var(--error-color) !important;
+
+        box-shadow: 0 0 0 1px var(--error-color) !important;
+    }
 }

package/src/modules/dx/checkbox/checkbox.html

@@ -1,13 +1,26 @@
 <template>
-    <label>
-        <input
-            type={type}
-            disabled={disabled}
-            name={name}
-            value={value}
-            checked={checked}
-            onchange={onChange}
-        />
-        <span class="dx-text-body-2 checkbox-span">{label}</span>
-    </label>
+    <div class={className}>
+        <label>
+            <input
+                type={type}
+                disabled={disabled}
+                name={name}
+                value={value}
+                checked={checked}
+                onchange={onChange}
+                required={required}
+            />
+            <span class="dx-text-body-2 checkbox-label">
+                {label}
+                <slot></slot>
+            </span>
+        </label>
+        <span
+            aria-live="assertive"
+            class="dx-text-body-2 checkbox-error dx-text-form-error-message"
+            if:true={required}
+        >
+            {errorMessage}
+        </span>
+    </div>
 </template>

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

@@ -1,23 +1,56 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
 
 export default class Checkbox extends LightningElement {
-    @api checked: boolean = false;
     @api disabled: boolean = false;
-    @api label!: string;
+    @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;
-    @api type?: "checkbox" | "radio" = "checkbox";
+
+    private _checked: boolean = false;
+
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    private showValidity = false;
+
+    private get valid(): boolean {
+        return !!(!this.required || this.checked);
+    }
+
+    private get showError(): boolean {
+        return this.showValidity && !this.valid;
+    }
+
+    private get className() {
+        return cx("container", this.showError && "show-error");
+    }
+
+    @api
+    reportValidity(): boolean {
+        this.showValidity = true;
+        return this.valid;
+    }
 
     private onChange(e: InputEvent) {
+        this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {
                     originalEvent: e,
-                    checked: ((e.currentTarget as HTMLInputElement) || {})
-                        .checked,
+                    checked: this._checked,
                     value: this.value
                 }
             })
         );
+        this.showValidity = true;
     }
 }

package/src/modules/dx/checkboxGroup/checkboxGroup.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 fieldset {
     display: grid;

package/src/modules/dx/checkboxGroup/checkboxGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;

package/src/modules/dx/checkboxNative/checkboxNative.css

@@ -0,0 +1,21 @@
+:host {
+    --dx-c-filter-menu-font-weight: normal;
+}
+
+input,
+span {
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none;
+}
+
+span {
+    color: var(--sds-g-gray-11);
+    font-size: 13px;
+    font-weight: var(--dx-c-filter-menu-font-weight);
+    font-family: var(--dx-g-font-sans);
+    margin-left: 8px;
+}

package/src/modules/dx/checkboxNative/checkboxNative.html

@@ -0,0 +1,14 @@
+<template>
+    <label>
+        <input
+            name={name}
+            type="checkbox"
+            checked={checked}
+            onchange={onChange}
+        />
+        <span>
+            {label}
+            <slot></slot>
+        </span>
+    </label>
+</template>

package/src/modules/dx/checkboxNative/checkboxNative.ts

@@ -0,0 +1,39 @@
+import { LightningElement, api } from "lwc";
+
+export default class CheckboxNative extends LightningElement {
+    @api value!: string;
+    @api label?: string;
+
+    private _checked: boolean = false;
+    private _indeterminate: boolean = false;
+
+    @api
+    get checked(): boolean {
+        return this._checked;
+    }
+    set checked(value: boolean) {
+        this._checked = value;
+    }
+
+    @api
+    get indeterminate(): boolean {
+        return this._indeterminate;
+    }
+    set indeterminate(value: boolean) {
+        this.template.querySelector("input").indeterminate = value;
+        this._indeterminate = value;
+    }
+
+    private onChange(e: InputEvent) {
+        this._checked = ((e.currentTarget as HTMLInputElement) || {}).checked;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    originalEvent: e,
+                    checked: this._checked,
+                    value: this.value
+                }
+            })
+        );
+    }
+}

package/src/modules/dx/codeBlock/codeBlock.css

@@ -1,5 +1,5 @@
-@import "helpers/code";
-@import "helpers/text";
+@import "dxHelpers/code";
+@import "dxHelpers/text";
 @import "./darkTheme.css";
 @import "./lightTheme.css";
 

package/src/modules/dx/codeBlock/codeBlock.html

@@ -28,7 +28,10 @@
                 </template>
                 <template if:true={showCodeSourceBtn}>
                     <div class="toolbar-item">
-                        <dx-tooltip persist label="View Code Source">
+                        <dx-tooltip
+                            label="View Code Source"
+                            placement="top-left"
+                        >
                             <dx-button
                                 href={sourceLink}
                                 type="button"
@@ -44,7 +47,7 @@
                     <div class="divider"></div>
                 </template>
                 <div class="toolbar-item">
-                    <dx-tooltip label={updateThemeBtnText}>
+                    <dx-tooltip label={updateThemeBtnText} placement="top-left">
                         <dx-button
                             onclick={updateTheme}
                             type="button"
@@ -57,7 +60,7 @@
                 </div>
                 <div class="divider"></div>
                 <div class="toolbar-item">
-                    <dx-tooltip persist label={copyBtnText}>
+                    <dx-tooltip label={copyBtnText} placement="top-left">
                         <dx-button
                             onclick={copySource}
                             type="button"
@@ -70,7 +73,6 @@
                 </div>
             </div>
             <div class="code-block-content" lwc:dom="manual"></div>
-            <div class="copypg"></div>
         </div>
     </template>
     <template if:false={codeBlock}>No content provided</template>