@salesforcedevs/dx-components 1.3.178 → 1.3.179

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",
@@ -90,6 +92,7 @@
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
+        "dxBaseElements/lightningElementWithState",
         "dxBaseElements/matchMediaElement",
         "dxConstants/brands",
         "dxConstants/colors",
@@ -111,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.178",
+    "version": "1.3.179",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -41,5 +41,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "cd255eb4863c6854166cf8998af1d0cbb51c6d3f"
+    "gitHead": "ef5efd7169e688009ba79bd74e69c42adb277e09"
 }

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

@@ -50,6 +50,7 @@
 
 .button dx-icon {
     display: inline;
+    vertical-align: var(--dx-c-button-icon-vertical-align, unset);
 }
 
 .button.variant_inline dx-icon,
@@ -61,6 +62,7 @@
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
+    vertical-align: var(--dx-c-button-span-vertical-align, unset);
 }
 
 .button:not(.variant_inline-inherit).font-display {
@@ -195,7 +197,8 @@
 }
 
 /* custom */
-.button.variant_custom {
+.button.variant_custom,
+.button.variant_custom:hover.state-disabled {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
     border: 1px solid var(--dx-c-button-custom-border);

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

@@ -7,10 +7,12 @@ import {
     ButtonSize,
     IconSprite,
     IconSize,
-    IconSymbol
+    IconSymbol,
+    LightningSlotElement
 } from "typings/custom";
 
 export default class Button extends LightningElement {
+    private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
     @api iconSize?: IconSize = "small";
@@ -22,6 +24,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;
 
@@ -62,7 +65,20 @@ export default class Button extends LightningElement {
         );
     }
 
-    private onSlotChange(e: any) {
+    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,128 @@
+@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));
+}
+
+.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;
+    order: 1; /* all have same order by default, i.e., source code order */
+}
+
+.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;
+}
+
+@media screen and (max-width: 768px) {
+    .footer-container {
+        flex-wrap: wrap;
+    }
+
+    .footer-section:first-child {
+        flex: 1 1 35%;
+    }
+
+    .footer-section:last-child {
+        flex: 1 1 65%;
+    }
+
+    .footer-section:nth-child(2) {
+        flex: 2 1 100%;
+        order: 2; /* force the "step x of y" component to be last, and take a full row */
+        padding-top: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .card-title {
+        font-size: var(--dx-g-text-xl);
+        line-height: 32px;
+    }
+
+    .card-title-icon {
+        height: unset;
+        padding-right: unset;
+        padding-bottom: 10px;
+    }
+
+    .header-container {
+        padding: var(--dw-card-sequence-header-padding, var(--dx-g-spacing-xl));
+    }
+
+    .body-container {
+        padding-bottom: 0;
+    }
+
+    .footer-container {
+        padding-top: 0;
+    }
+
+    .footer-section:first-child,
+    .footer-section:nth-child(2),
+    .footer-section:last-child {
+        flex: 1 1 100%;
+        justify-content: center;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .footer-container {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}

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 CardStep 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/cardStep/mockProps.ts

@@ -0,0 +1,60 @@
+export const stepsData = [
+    {
+        bodyHtml:
+            '<p class="dx-text-display-7">Register for Journey to Salesforce and you\'ll be on your way to becoming a Salesforce Developer.</p><ul class="dx-text-display-8"><li>Step 1: Log in or sign up for a free Trailblazer.me account</li><li>Step 2: Confirm your program registration</li><li>Step 3: Begin your journey!</li></ul>',
+        primaryAction: {
+            iconSprite: "general",
+            iconSymbol: "arrow-right",
+            text: "Get Started",
+            variant: "primary"
+        },
+        showStepNumber: "true",
+        stepTitle: "Get started now."
+    },
+    {
+        bodyHtml:
+            '<p class="dx-text-display-7">You\'re almost done! Please review your information and agree to the Journey to Salesforce program terms and conditions.</p>',
+        formData: {
+            countriesWithReferralInput: ["IN"],
+            countriesWithRequiredJobRole: ["CA"],
+            formId: "j2s-form",
+            j2sTerms:
+                'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
+            notAvailableAlertInfo: {
+                title: "Not Available",
+                body:
+                    'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+            },
+            participatingCountryCodes: ["US", "CA", "IN"]
+        },
+        primaryAction: {
+            text: "Complete Registration"
+        },
+        secondaryActionHtml:
+            '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
+        showStepNumber: "true",
+        stepTitle: "Complete your registration."
+    },
+    {
+        bodyHtml:
+            '<div class="dx-text-display-8"><p>Welcome to Journey to Salesforce! Congratulations on taking this step in your journey towards becoming a Salesforce Developer. Through this program you\'ll gain the knowledge, experience, and skills to help you excel in the Salesforce ecosystem.</p><p>To get started, click the button below to join the Journey to Salesforce community, and make sure to check your email for links to bookmark!</p></div>',
+        headerData: {
+            backgroundColor: "green-vibrant-95",
+            iconSymbol: "check-circle",
+            iconSprite: "general",
+            iconColor: "green-vibrant-65",
+            textColor: "indigo-vibrant-20"
+        },
+        primaryAction: {
+            iconSprite: "utility",
+            iconSymbol: "new_window",
+            link: "https://salesforce-external.slack.com/archives/C05HJK4PGJV",
+            text: "Join Slack",
+            variant: "custom"
+        },
+        secondaryActionHtml:
+            '<span class="dx-text-display-7">Ready to jump in?</span>',
+        showStepNumber: "true",
+        stepTitle: "Your Registration is Confirmed"
+    }
+];