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

package/src/modules/dx/cardTrial/cardTrial.html

@@ -0,0 +1,207 @@
+<template>
+    <dx-modal
+        if:true={hasTwoButtons}
+        open={_modalOpen}
+        onclosemodal={closeModal}
+    >
+        <dx-card-trial-expanded
+            badge-background-color={badgeBackgroundColor}
+            badge-sprite={badgeSprite}
+            badge-symbol={badgeSymbol}
+            body={body}
+            button-cta={buttonOneCta}
+            button-href={buttonOneHref}
+            button-icon={buttonOneIcon}
+            button-icon-size={buttonOneIconSize}
+            details={details}
+            href={href}
+            label={label}
+            col-two-title={modalTitle}
+            col-two-details={modalDetails}
+            target={target}
+            terms={terms}
+            header={header}
+            type-badge-value={modalTypeBadgeValue}
+            type-badge-dark={modalTypeBadgeDark}
+            onclickclose={closeModal}
+        ></dx-card-trial-expanded>
+    </dx-modal>
+    <div class="recommended-container" if:true={recommended}>
+        <span class="recommended-label">Recommended</span>
+    </div>
+    <div
+        class={className}
+        href={href}
+        target={target}
+        onclick={handleClick}
+        lwc:if={isPrimary}
+    >
+        <template if:true={topText}>
+            <span class="top-text dx-text-body-4">{topText}</span>
+            <dx-hr spacing="md"></dx-hr>
+        </template>
+        <div class="badge-container" lwc:if={badgeSymbol}>
+            <dx-icon-badge
+                class="badge-main"
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+            <dx-type-badge
+                if:true={typeBadgeValue}
+                value={typeBadgeValue}
+                color={typeBadgeColor}
+                size={typeBadgeSize}
+                dark={typeBadgeDark}
+                variant={typeBadgeVariant}
+            ></dx-type-badge>
+        </div>
+        <dx-card-title
+            href={href}
+            target={target}
+            header={header}
+        ></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-hr lwc:if={hasButtons} spacing="lg"></dx-hr>
+        <dx-button
+            if:true={hasOneButton}
+            class="button-one"
+            size="large"
+            href={buttonOneHref}
+            variant="primary"
+            target={buttonOneTarget}
+            font="sans"
+            icon-symbol={buttonOneIcon}
+            icon-size={buttonOneIconSize}
+        >
+            {buttonOneCta}
+        </dx-button>
+        <div if:true={hasTwoButtons} class="button-container">
+            <dx-button
+                class="button-one"
+                size="large"
+                href={buttonOneHref}
+                variant="primary"
+                font="sans"
+                target={buttonOneTarget}
+                icon-symbol={buttonOneIcon}
+                icon-size={buttonOneIconSize}
+            >
+                {buttonOneCta}
+            </dx-button>
+            <dx-button
+                class="button-two"
+                size="large"
+                onclick={openModal}
+                variant="secondary"
+                font="sans"
+                icon-symbol={buttonTwoIcon}
+                icon-size={buttonTwoIconSize}
+            >
+                {buttonTwoCta}
+            </dx-button>
+        </div>
+        <ul class={detailsClassName} if:true={hasDetails}>
+            <template for:each={details} for:item="detail">
+                <li class="detail" key={detail}>
+                    <dx-icon-badge
+                        background-color={badgeBackgroundColor}
+                        symbol="check"
+                    ></dx-icon-badge>
+                    <span class="detail-text dx-text-body-4">{detail}</span>
+                </li>
+            </template>
+        </ul>
+        <img if:true={imgSrc} src={imgSrc} alt="" />
+    </div>
+    <div
+        id="secondary"
+        class={className}
+        href={href}
+        target={target}
+        onclick={handleClick}
+        lwc:if={isSecondary}
+    >
+        <div class="badge-container" lwc:if={badgeSymbol}>
+            <dx-icon-badge
+                class="badge-main"
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+            <dx-type-badge
+                if:true={typeBadgeValue}
+                value={typeBadgeValue}
+                color={typeBadgeColor}
+                size={typeBadgeSize}
+                dark={typeBadgeDark}
+                variant={typeBadgeVariant}
+            ></dx-type-badge>
+        </div>
+        <dx-card-title
+            href={href}
+            target={target}
+            header={header}
+        ></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>
+        <template if:true={topText}>
+            <dx-hr spacing="md"></dx-hr>
+            <p class="top-text dx-text-body-4">{topText}</p>
+        </template>
+        <ul class={detailsClassName} if:true={hasDetails}>
+            <template for:each={details} for:item="detail">
+                <li class="detail" key={detail}>
+                    <dx-icon-badge
+                        background-color={badgeBackgroundColor}
+                        symbol="check"
+                    ></dx-icon-badge>
+                    <span class="detail-text dx-text-body-4">{detail}</span>
+                </li>
+            </template>
+        </ul>
+        <dx-hr lwc:if={hasButtons} spacing="lg"></dx-hr>
+        <dx-button
+            if:true={hasOneButton}
+            class="button-one"
+            size="large"
+            href={buttonOneHref}
+            variant="primary"
+            target={buttonOneTarget}
+            font="sans"
+            icon-symbol={buttonOneIcon}
+            icon-size={buttonOneIconSize}
+        >
+            {buttonOneCta}
+        </dx-button>
+        <div if:true={hasTwoButtons} class="button-container">
+            <dx-button
+                class="button-one"
+                size="large"
+                href={buttonOneHref}
+                variant="primary"
+                font="sans"
+                target={buttonOneTarget}
+                icon-symbol={buttonOneIcon}
+                icon-size={buttonOneIconSize}
+            >
+                {buttonOneCta}
+            </dx-button>
+            <dx-button
+                class="button-two"
+                size="large"
+                onclick={openModal}
+                variant="secondary"
+                font="sans"
+                icon-symbol={buttonTwoIcon}
+                icon-size={buttonTwoIconSize}
+            >
+                {buttonTwoCta}
+            </dx-button>
+        </div>
+        <img if:true={imgSrc} src={imgSrc} alt="" />
+    </div>
+</template>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -0,0 +1,147 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
+import { TrialCardVariant } from "typings/custom";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol?: string;
+    @api body!: string;
+    @api buttonOneCta?: string;
+    @api buttonOneHref?: string;
+    @api buttonOneIcon?: string;
+    @api buttonOneIconSize?: string = "large";
+    @api buttonTwoCta?: string;
+    @api buttonTwoHref?: string;
+    @api buttonTwoIcon?: string;
+    @api buttonTwoIconSize?: string = "large";
+    @api hideCardDetails?: boolean = false;
+    @api href!: string;
+    @api imgSrc?: string;
+    @api label!: string;
+    @api recommended?: boolean = false;
+    @api target?: string;
+    @api terms!: string;
+    @api header!: string;
+    @api topText?: string;
+    @api modalTitle?: string;
+
+    @api twoColTitle?: string;
+    @api twoColTarget?: string;
+    @api twoColHref!: string;
+    @api typeBadgeValue?: string;
+    @api typeBadgeVariant?: string;
+    @api typeBadgeColor?: string;
+    @api typeBadgeSize?: string = "default";
+    @api typeBadgeDark?: boolean = false;
+    @api modalTypeBadgeValue?: string;
+    @api modalTypeBadgeDark?: boolean;
+    @api variant: TrialCardVariant = "primary";
+
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    @api
+    get modalDetails() {
+        return this._modalDetails;
+    }
+    set modalDetails(value) {
+        this._modalDetails = toJson(value);
+    }
+
+    get hasDetails() {
+        return this.details?.length > 0 && !this.hideCardDetails;
+    }
+
+    get hasOneButton() {
+        return !!(this.buttonOneCta && !this.buttonTwoCta);
+    }
+
+    get hasTwoButtons() {
+        return !!(this.buttonOneCta && this.buttonTwoCta);
+    }
+
+    get hasButtons() {
+        return !!(this.buttonOneCta || this.buttonTwoCta);
+    }
+
+    get buttonOneTarget() {
+        return this.isExternalURL(this.buttonOneHref) ? "_blank" : null;
+    }
+
+    get isPrimary() {
+        return this.variant === "primary";
+    }
+
+    get isSecondary() {
+        return this.variant === "secondary";
+    }
+
+    private _details!: string[];
+    private _modalDetails!: [{ title: string; subtitle: string }];
+    private _modalOpen = false;
+
+    private get className() {
+        return cx(
+            "card-trial",
+            "dx-card-base",
+            "dx-card-base_section-vertical",
+            this.imgSrc && "has-image",
+            this.recommended && "recommended-border"
+        );
+    }
+
+    private get detailsClassName() {
+        return cx("details", this.hasButtons && "details_top-margin");
+    }
+
+    private openModal() {
+        this._modalOpen = true;
+    }
+
+    private closeModal() {
+        this._modalOpen = false;
+    }
+
+    private handleClick(e: PointerEvent) {
+        // card is clickable only if it doesn't contain buttons (for accessibility reasons)
+        if (!this.hasButtons) {
+            window.location.assign(this.href);
+            if (this.href.includes("signup")) {
+                this.handleSignUpClick(e);
+            }
+        }
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        const payload = {
+            click_text: this.label,
+            element_title: "dx-button",
+            element_type: "card",
+            click_url: `${window.location.origin}${this.href}`,
+            content_category: "cta"
+        };
+        track(e.currentTarget!, "custEv_signupStart", payload);
+        track(e.currentTarget!, "custEv_linkClick", payload);
+    }
+
+    private isExternalURL(url: string | undefined): boolean {
+        if (!url) {
+            return false;
+        }
+
+        try {
+            const value = new URL(url);
+            return value.host !== window.location.host;
+        } catch (e) {
+            return false;
+        }
+    }
+}

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.css

@@ -0,0 +1,159 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+.container {
+    max-width: 976px;
+    margin: 0 var(--dx-g-spacing-lg);
+    overflow: auto;
+    max-height: 100vh;
+}
+
+.content-container {
+    display: flex;
+    border-radius: var(--dx-g-spacing-md);
+    overflow: hidden;
+    pointer-events: all;
+}
+
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.badge-main {
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
+    --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);
+
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.title-main {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.button-cta {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+
+    margin-top: 15px;
+    width: 100%;
+}
+
+.button-container {
+    margin-bottom: var(--dx-g-spacing-smd);
+    position: sticky;
+    top: -1px;
+}
+
+.is-sticky {
+    background-color: var(--dx-g-gray-95);
+    border-bottom: 1px solid var(--dx-g-gray-80);
+    margin-bottom: 0;
+    padding: 10px 10px 10px 0;
+}
+
+.button-close {
+    --dx-c-button-background-color: white;
+
+    margin-left: auto;
+    pointer-events: all;
+}
+
+.label {
+    color: var(--dx-g-gray-30);
+    margin-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.terms {
+    margin-top: var(--dx-g-spacing-md);
+    font-weight: var(--dx-g-font-bold);
+}
+
+.label,
+.terms,
+dx-button {
+    display: block;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--dx-g-spacing-lg);
+}
+
+.detail {
+    display: flex;
+    flex-direction: row;
+}
+
+.detail:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.badge-detail {
+    --dx-c-icon-badge-icon-size: 10px;
+    --dx-c-icon-badge-size: 18px;
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-40);
+
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+.col-one {
+    background-color: white;
+    padding: var(--dx-g-spacing-mlg);
+    flex: 0 0 388px;
+}
+
+.col-two {
+    background-color: var(--dx-g-indigo-vibrant-15);
+    padding: var(--dx-g-spacing-2xl);
+    flex: 1;
+}
+
+.title-secondary {
+    --dx-c-card-title-color: white;
+}
+
+.col-two-detail-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.col-two-detail-subtitle,
+.bullet-list {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-normal);
+}
+
+.bullet-list {
+    list-style: inside;
+}
+
+.col-two-detail-title,
+.col-two-detail-subtitle,
+.bullet-list {
+    color: white;
+}
+
+.bullet-list .bullet {
+    padding-left: 1.3957em;
+    text-indent: -1.3957em;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        max-width: 550px;
+    }
+
+    .content-container {
+        flex-direction: column;
+    }
+}

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

@@ -0,0 +1,91 @@
+<template>
+    <div class="container">
+        <div class="button-container">
+            <dx-button
+                class="button-close"
+                variant="secondary"
+                icon-symbol="close"
+                onclick={onClickClose}
+            >
+                Close
+            </dx-button>
+        </div>
+        <div class="content-container" tabindex="0" onkeydown={handleKeyDown}>
+            <div class="col-one">
+                <div class="badge-container" lwc:if={badgeSymbol}>
+                    <dx-icon-badge
+                        class="badge-main"
+                        background-color={badgeBackgroundColor}
+                        symbol={badgeSymbol}
+                        sprite={badgeSprite}
+                    ></dx-icon-badge>
+                    <dx-type-badge
+                        if:true={typeBadgeValue}
+                        value={typeBadgeValue}
+                        dark={typeBadgeDark}
+                    ></dx-type-badge>
+                </div>
+                <dx-card-title
+                    class="title-main"
+                    href={href}
+                    target={target}
+                    header={header}
+                ></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}
+                    onclick={handleSignUpClick}
+                    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"
+                    header={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={bullet} class="bullet">{bullet}</li>
+                            </template>
+                        </ul>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,84 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
+
+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 header!: string;
+    @api typeBadgeValue?: string;
+    @api typeBadgeDark?: boolean = false;
+
+    @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 onClickClose() {
+        this.dispatchEvent(new CustomEvent("clickclose"));
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.href.includes("signup")) {
+            const payload = {
+                click_text: this.buttonCta,
+                element_title: this.header,
+                element_type: "card",
+                click_url: `${window.location.origin}${this.href}`,
+                content_category: "cta"
+            };
+            track(e.currentTarget!, "custEv_signupStart", payload);
+            track(e.currentTarget!, "custEv_linkClick", payload);
+        }
+    }
+}

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;
     }