@salesforcedevs/dx-components 1.3.179 → 1.3.180-alpha

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

@@ -1,137 +0,0 @@
-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/cardStep/cardStep.css

@@ -1,128 +0,0 @@
-@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

@@ -1,31 +0,0 @@
-<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

@@ -1,55 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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"
-    }
-];

package/src/modules/dxBaseElements/lightningElementWithState/lightningElementWithState.ts

@@ -1,93 +0,0 @@
-import { LightningElement, track } from "lwc";
-
-/**
- * This is a helper class for when you want your LWC component to have state
- * that is automatically tracked _along with_ its previous state, in a React-
- * like fashion, so that you can compare current state with previous state
- * after a render (like React's `commponentDidUpdate`). One benefit of doing
- * things this way is that you can put all of your reactions to state changes
- * in one place, in `renderedCallback`, rather than having them in various
- * places throughout the component.
- *
- * The API consists in `this.prevState`, `this.state`, and `this.setState`.
- *
- * Usage:
- *
- * ```
- * type MyState = {
- *     isFetchingContent: boolean;
- * };
- *
- * class MyFetchingComponent extends LightningElementWithState<MyState> {
- *     constructor() {
- *         // `this.state` can only be initialized once
- *         this.state = {
- *             isFetchingContent: false
- *         };
- *     }
- *
- *     // Queued for execution whenever a `setState` call completes
- *     renderedCallback() {
- *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
- *             // Do something knowing that we just finished fetching.
- *             notifyFetchSuccessful();
- *         }
- *     }
- *
- *     fetchSomething() {
- *         this.setState({
- *             isFetchingContent: true
- *         });
- *
- *         fetch(whatever).then(() => {
- *             this.setState({
- *                 isFetching: false
- *             }
- *         });
- *     }
- * }
- * ```
- */
-export abstract class LightningElementWithState<
-    T extends { [key: string]: unknown }
-> extends LightningElement {
-    private _prevState = {} as T;
-    @track private _state = {} as T;
-
-    private _didInitializeState = false;
-
-    protected get prevState(): T {
-        return Object.freeze({
-            ...this._prevState
-        });
-    }
-
-    protected get state(): T {
-        return Object.freeze({
-            ...this._state
-        });
-    }
-
-    protected set state(initialState: T) {
-        if (!this._didInitializeState) {
-            this._state = {
-                ...initialState
-            };
-            this._didInitializeState = true;
-        } else {
-            throw new Error(
-                "To mutate state after initialization, use `this.setState`."
-            );
-        }
-    }
-
-    protected setState = (state: Partial<T>): void => {
-        this._prevState = {
-            ...this._state
-        };
-        this._state = {
-            ...this._state,
-            ...state
-        };
-    };
-}

package/src/modules/dxUtils/list/list.ts

@@ -1,11 +0,0 @@
-import { v4 as createUuid } from "uuid";
-
-export const getListWithUuids = <T extends object>(
-    list: T[],
-    idKey?: string
-) => {
-    return list.map((listItem) => ({
-        ...listItem,
-        [idKey || "id"]: createUuid()
-    }));
-};