@salesforcedevs/dx-components 1.3.148 → 1.3.150-canary.0

package/lwc.config.json

@@ -4,6 +4,7 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
+        "dx/alert",
         "dx/audio",
         "dx/banner",
         "dx/brandThemeProvider",
@@ -22,6 +23,7 @@
         "dx/cardNews",
         "dx/cardPodcastEpisode",
         "dx/cardSmall",
+        "dx/cardStep",
         "dx/cardTrailheadModule",
         "dx/cardTrial",
         "dx/cardTrialExpanded",
@@ -49,6 +51,7 @@
         "dx/headerSearch",
         "dx/helmet",
         "dx/hr",
+        "dx/htmlRenderer",
         "dx/icon",
         "dx/iconBadge",
         "dx/imageAndLabel",
@@ -89,6 +92,7 @@
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
+        "dxBaseElements/lightningElementWithState",
         "dxBaseElements/matchMediaElement",
         "dxConstants/brands",
         "dxConstants/colors",
@@ -110,6 +114,7 @@
         "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.148",
+    "version": "1.3.150-canary.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -39,6 +39,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    },
-    "gitHead": "45e05ff97064929d80f2a5212c78b9c714144dec"
+    }
 }

package/src/modules/dx/alert/alert.css

@@ -0,0 +1,108 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-alert-top: 0;
+    --dx-c-alert-container-align-items: flex-start;
+    --dx-c-alert-vertical-padding: var(--dx-g-spacing-md);
+    --dx-c-alert-success-color: var(--dx-g-green-vibrant-95);
+    --dx-c-alert-warning-color: rgb(254, 243, 217);
+    --dx-c-alert-danger-color: var(--dx-g-red-vibrant-95);
+    --dx-c-alert-success-accent-color: var(--dx-g-green-vibrant-80);
+    --dx-c-alert-warning-accent-color: var(--dx-g-yellow-vibrant-80);
+    --dx-c-alert-danger-accent-color: var(--dx-g-red-vibrant-50);
+}
+
+.alert-icon {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+.alert-base {
+    padding: var(--dx-c-alert-vertical-padding);
+}
+
+.alert-container {
+    display: flex;
+    flex-direction: column;
+    align-items: var(--dx-c-alert-container-align-items);
+    padding-left: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--dx-g-global-header-padding-horizontal);
+    width: 100%;
+    border: none;
+}
+
+.alert-container.alert-type-success {
+    background-color: var(--dx-c-alert-success-color);
+    border-color: var(--dx-c-alert-success-accent-color);
+}
+
+.alert-container.alert-type-warning {
+    background-color: var(--dx-c-alert-warning-color);
+    border-color: var(--dx-c-alert-warning-accent-color);
+}
+
+.alert-container.alert-type-danger {
+    background-color: var(--dx-c-alert-danger-color);
+    border-color: var(--dx-c-alert-danger-accent-color);
+}
+
+.alert-container.alert-variant-accented {
+    border-style: solid;
+    border-width: 0;
+    border-left-width: 4px;
+}
+
+.alert-title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+}
+
+.alert-title {
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-button {
+    margin-left: auto;
+}
+
+/*
+    NOTE: Here we are assuming that indicator height won't go beyond 1000px.
+
+    It's one of the suggested way to achieve the expand/collapse animation
+    Ref: https://stackoverflow.com/a/41164095
+
+    Otherwise we need to change the height when user clicks on button
+    Ref: https://stackoverflow.com/a/11837673
+*/
+
+.alert-body {
+    display: block;
+    max-height: 1000px;
+    overflow: hidden;
+    padding-top: var(--dx-g-spacing-smd);
+    transition: max-height 0.25s ease, padding 0.25s ease;
+}
+
+.alert-body-hidden {
+    max-height: 0;
+    padding-top: 0;
+    transition: max-height 0.1s ease-out, padding 0.25s ease-out;
+}
+
+.alert-body a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.dismissible-icon {
+    margin-left: auto;
+    cursor: pointer;
+}
+
+/* Small Devices */
+@media screen and (max-width: 480px) {
+    .alert-container {
+        padding: var(--dx-c-alert-vertical-padding);
+    }
+}

package/src/modules/dx/alert/alert.html

@@ -0,0 +1,36 @@
+<template>
+    <div class={className} part="container">
+        <div class="alert-title-container">
+            <dx-icon
+                class="alert-icon"
+                symbol={iconName}
+                sprite={iconSprite}
+                size="large"
+                color={iconColor}
+            ></dx-icon>
+            <p class="alert-title dx-text-body-3">{alertTitle}</p>
+            <dx-button
+                if:true={hideable}
+                variant="inline"
+                onclick={onShowHide}
+                aria-label={hideBodyText}
+            >
+                {hideBodyText}
+            </dx-button>
+            <dx-icon
+                class="dismissible-icon"
+                onclick={onDismiss}
+                if:true={dismissible}
+                symbol="close"
+                size="large"
+                color="status-icon-color"
+            ></dx-icon>
+        </div>
+        <!--
+            NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+            option instead of slots because the html markup will come as a
+            property to the component from a configuration
+        -->
+        <span lwc:dom="manual" class={bodyClassName}></span>
+    </div>
+</template>

package/src/modules/dx/alert/alert.ts

@@ -0,0 +1,137 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+import { AlertInfo } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+
+export default class Alert extends LightningElement {
+    _alertInfo: AlertInfo | null = null;
+    _dismissible = false;
+    _iconName = "";
+    _iconSprite = "";
+    _iconColor = "";
+    @api control: "none" | "hideable" | "dismissible" = "none";
+    @api type: "success" | "warning" | "danger" = "warning";
+    @api variant: "base" | "accented" = "base";
+
+    @api
+    get alertInfo(): AlertInfo | null {
+        return this._alertInfo;
+    }
+    set alertInfo(value) {
+        this._alertInfo = toJson(value);
+    }
+
+    @api
+    get iconColor(): string {
+        return this._iconColor || this.variant === "base"
+            ? "gray-10"
+            : this.accentedIconColor;
+    }
+    set iconColor(value) {
+        if (value) {
+            this._iconColor = value;
+        }
+    }
+
+    @api
+    get iconName(): string {
+        return this._iconName || this.type === "success"
+            ? "check-circle"
+            : "warning";
+    }
+    set iconName(value) {
+        if (value) {
+            this._iconName = value;
+        }
+    }
+
+    @api
+    get iconSprite(): string {
+        return this._iconSprite || this.type === "success"
+            ? "general"
+            : "utility";
+    }
+    set iconSprite(value) {
+        if (value) {
+            this._iconSprite = value;
+        }
+    }
+
+    get accentedIconColor() {
+        const baseColor =
+            this.type === "danger"
+                ? "red"
+                : this.type === "warning"
+                ? "yellow"
+                : "green";
+        return `${baseColor}-vibrant-50`;
+    }
+
+    get dismissible(): boolean {
+        return this.control === "dismissible";
+    }
+
+    get hideable(): boolean {
+        return this.control === "hideable";
+    }
+
+    get alertTitle() {
+        return this.alertInfo?.title;
+    }
+
+    get hideBodyText() {
+        return this.isBodyHidden ? "Show" : "Hide";
+    }
+
+    get alertType() {
+        return this.type || "warning";
+    }
+
+    get alertVariant() {
+        return this.variant || "base";
+    }
+
+    get className() {
+        return cx(
+            "alert-base",
+            "alert-container",
+            `alert-variant-${this.alertVariant}`,
+            `alert-type-${this.alertType}`
+        );
+    }
+
+    get bodyClassName() {
+        return cx(
+            "alert-body",
+            "dx-text-body-3",
+            this.isBodyHidden && "alert-body-hidden"
+        );
+    }
+
+    isBodyHidden = false;
+
+    renderedCallback() {
+        const phaseBodyContainer = this.template.querySelector(".alert-body");
+        if (phaseBodyContainer && this.alertInfo) {
+            // eslint-disable-next-line @lwc/lwc/no-inner-html
+            phaseBodyContainer.innerHTML = this.alertInfo.body;
+        }
+    }
+
+    onShowHide() {
+        this.isBodyHidden = !this.isBodyHidden;
+    }
+
+    onDismiss() {
+        this.dispatchEvent(
+            new CustomEvent("dismissphase", {
+                detail: {
+                    alertInfo: this.alertInfo
+                },
+                composed: true,
+                bubbles: true
+            })
+        );
+    }
+}

package/src/modules/dx/button/button.css

@@ -132,16 +132,26 @@
     border-color: var(--dx-c-button-primary-color-hover);
 }
 
-/* secondary */
+/* secondary / quaternary */
 
 .button.variant_secondary {
-    color: var(--dx-c-button-primary-color);
     background: var(--dx-c-button-background-color);
+}
+
+.button.variant_quaternary {
+    background: white;
+}
+
+.button.variant_secondary,
+.button.variant_quaternary {
+    color: var(--dx-c-button-primary-color);
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
 .button.variant_secondary:hover,
-:host([aria-expanded="true"]) .button.variant_secondary {
+.button.variant_quaternary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary,
+:host([aria-expanded="true"]) .button.variant_quaternary {
     background: var(--dx-c-button-secondary-color-hover);
 }
 

package/src/modules/dx/button/button.ts

@@ -10,6 +10,7 @@ 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";
@@ -21,6 +22,7 @@ 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;
 
@@ -61,6 +63,19 @@ 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/cardStep/cardStep.css

@@ -0,0 +1,90 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.container {
+    margin: var(--dx-c-card-step-container-margin, 40px auto);
+    max-width: 90%;
+    width: var(--dx-c-card-step-container-width, 796px);
+}
+
+.header-container {
+    background-color: var(
+        --dx-c-card-step-header-background-color,
+        var(--dx-g-indigo-vibrant-20)
+    );
+    padding: var(--dw-card-sequence-header-padding, var(--dx-g-spacing-3xl));
+    text-align: center;
+}
+
+.header-container > * {
+    display: inline-block;
+}
+
+.card-title {
+    color: var(--dx-c-card-step-header-text-color, white);
+}
+
+.card-title-icon {
+    height: 40px;
+    padding-right: 16px;
+    vertical-align: top;
+}
+
+.body-container {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    padding: var(--dw-card-sequence-body-padding, var(--dx-g-spacing-xl));
+}
+
+.body-container ul {
+    list-style-type: none;
+}
+
+.body-container li {
+    line-height: var(--dx-g-text-2xl);
+}
+
+.body-container p:not(:last-child) {
+    padding-bottom: 20px;
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.form-row > * {
+    max-width: 95%;
+}
+
+.footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--dw-card-sequence-body-padding, var(--dx-g-spacing-xl));
+}
+
+.footer-section {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+}
+
+.footer-section:first-child {
+    justify-content: start;
+}
+
+.footer-section:last-child {
+    justify-content: end;
+}
+
+.footer-section:nth-child(2) {
+    flex: 0.7;
+    font-size: var(--dx-g-text-xs, 12px);
+    font-family: var(--dx-g-font-sans);
+    line-height: 18px;
+    text-align: center;
+}

package/src/modules/dx/cardStep/cardStep.html

@@ -0,0 +1,31 @@
+<template>
+    <div class="dx-card-base container">
+        <div if:true={stepTitle} class="header-container">
+            <dx-icon
+                if:true={hasDefinedIcon}
+                class="card-title-icon"
+                size="xlarge"
+                color={headerIconColor}
+                sprite={headerIconSprite}
+                symbol={headerIconSymbol}
+            ></dx-icon>
+            <h3 class="card-title dx-text-display-5">{stepTitle}</h3>
+        </div>
+        <div class="body-container">
+            <slot name="card-body"></slot>
+        </div>
+        <div class="footer-container" part="footer-container">
+            <div class="footer-section">
+                <slot name="secondary-action-section"></slot>
+            </div>
+            <div class="footer-section">
+                <span if:true={showStepNumber} class="step-id">
+                    {stepDetails}
+                </span>
+            </div>
+            <div class="footer-section">
+                <slot name="primary-action-section"></slot>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/cardStep/cardStep.ts

@@ -0,0 +1,55 @@
+import { api, LightningElement } from "lwc";
+import { toDxColor } from "dxUtils/css";
+
+export type HeaderData = {
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSymbol?: string;
+    iconSprite?: string;
+    textColor?: string;
+};
+
+export default class StepSequenceStep extends LightningElement {
+    @api headerIconColor = "";
+    @api headerIconSymbol = "";
+    @api headerIconSprite = "";
+    @api headerBackgroundColor = "indigo-vibrant-20";
+    @api headerTextColor = "white";
+    @api showStepNumber = false;
+    @api stepCount: number | undefined;
+    @api stepFormatString: string | undefined;
+    @api stepIndex: number | undefined;
+    @api stepTitle: string | undefined;
+
+    get stepDetails() {
+        if (
+            typeof this.stepIndex !== "number" ||
+            typeof this.stepCount !== "number"
+        ) {
+            return "";
+        }
+
+        const displayStepNumber = this.stepIndex + 1;
+
+        return this.stepFormatString
+            ? this.stepFormatString
+                  .replace("%d", displayStepNumber.toString())
+                  .replace("%d", this.stepCount.toString())
+            : `Step ${displayStepNumber} of ${this.stepCount}`;
+    }
+
+    get hasDefinedIcon() {
+        return Boolean(this.headerIconSymbol && this.headerIconSprite);
+    }
+
+    connectedCallback() {
+        this.template.host.style.setProperty(
+            "--dx-c-card-step-header-background-color",
+            toDxColor(this.headerBackgroundColor)
+        );
+        this.template.host.style.setProperty(
+            "--dx-c-card-step-header-text-color",
+            toDxColor(this.headerTextColor)
+        );
+    }
+}

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

@@ -6,11 +6,11 @@ export default class Checkbox extends LightningElement {
     @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;
 
     @api
     get checked(): boolean {
@@ -20,6 +20,15 @@ export default class Checkbox extends LightningElement {
         this._checked = value;
     }
 
+    @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 {
@@ -40,6 +49,11 @@ 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/featuredContentHeader/featuredContentHeader.html

@@ -63,7 +63,7 @@
                     <dx-button
                         if:true={ctaSecondaryLabel}
                         href={ctaSecondaryHref}
-                        variant="secondary"
+                        variant="quaternary"
                         icon-symbol={ctaSecondarySymbol}
                         target={ctaSecondaryTarget}
                         size="large"

package/src/modules/dx/htmlRenderer/htmlRenderer.html

@@ -0,0 +1,3 @@
+<template>
+    <span lwc:dom="manual"></span>
+</template>

package/src/modules/dx/htmlRenderer/htmlRenderer.ts

@@ -0,0 +1,10 @@
+import { api, LightningElement } from "lwc";
+
+// Renders provided innerHtml. Useful for manual DOM elements created inside of loops.
+export default class HtmlRenderer extends LightningElement {
+    @api innerHtml = "";
+
+    renderedCallback() {
+        this.template.querySelector("span")!.innerHTML = this.innerHtml;
+    }
+}