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

package/src/modules/dx/cardNews/cardNews.ts

@@ -1,13 +1,15 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 import {
+    ButtonTextColor,
     CardNewsButtonType,
     CardNewsImagePlacement,
     CardNewsImageVerticalAlignment,
     CardNewsSize,
     CardNewsTextContainerSize
 } from "typings/custom";
+import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor?: string = "indigo-vibrant-40";
@@ -15,6 +17,7 @@ export default class CardNews extends LightningElement {
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
     @api color?: string = "white";
+    @api buttonColor?: ButtonTextColor = "dark";
     @api dark?: boolean = false;
     @api size?: CardNewsSize = "normal";
     @api href!: string;
@@ -59,4 +62,16 @@ export default class CardNews extends LightningElement {
             this.textContainerWidth === "large" && `dx-card-news-img-small`
         );
     }
+
+    private trackClick(e: Event) {
+        const payload = {
+            clickText: this.buttonText,
+            itemTitle: this.title,
+            elementType: "link",
+            destinationType: "internal",
+            ctaClick: true,
+            clickUrl: this.href
+        };
+        track(e.currentTarget!, "custEv_ctaLinkClick", payload);
+    }
 }

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-podcast-episode {
     display: flex;

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -2,7 +2,7 @@
     <div class={className}>
         <div class="dx-card-base_section-horizontal">
             <a
-                aria-label="Go to article"
+                aria-label="Go To Article"
                 href={href}
                 target={target}
                 onmouseenter={setLinkHovered}

package/src/modules/dx/cardSmall/cardSmall.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --heading-offset: var(--dx-g-spacing-sm);
@@ -15,6 +15,10 @@
     flex-direction: row;
 }
 
+.dx-text-body-2 {
+    flex: 1;
+}
+
 /* mobile responsiveness */
 @media screen and (max-width: 1024px) {
     :host {

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -6,7 +6,7 @@ import {
     IconSymbol,
     IconBadgeShape
 } from "typings/custom";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
+import { isSlotEmpty, stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardSmall extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-50";

package/src/modules/dx/cardTitle/cardTitle.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-card-title-color: var(--dx-g-text-heading-color);
@@ -9,12 +9,14 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-.dx-text-heading-4 {
+h3.dx-text-heading-4 {
     color: var(--dx-c-card-title-color);
     transition: var(--dx-g-transition-hue-1x);
     font-size: var(--dx-c-card-title-font-size);
     line-height: var(--dx-c-card-title-line-height);
     letter-spacing: var(--dx-c-card-title-letter-spacing);
+    word-break: break-word;
+    hyphens: auto;
 }
 
 .nowrap {

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,18 +1,20 @@
 <template>
-    <a if:true={href} href={href} target={target} class="dx-text-heading-4">
-        {titleToWrap}
-        <span if:true={needsSpace}>&#32;</span>
-        <span class="nowrap" if:true={isExternal}>
-            {titleNoWrap}&nbsp;
-            <dx-icon symbol="new_window" size="override"></dx-icon>
-        </span>
-    </a>
-    <span if:false={href} class="dx-text-heading-4">
-        {titleToWrap}
-        <span if:true={needsSpace}>&#32;</span>
-        <span class="nowrap" if:true={isExternal}>
-            {titleNoWrap}&nbsp;
-            <dx-icon symbol="new_window" size="override"></dx-icon>
-        </span>
-    </span>
+    <h3 class="dx-text-heading-4">
+        <a if:true={href} href={href} target={target}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </a>
+        <template if:false={href}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </template>
+    </h3>
 </template>

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 .badge {
     --badge-size: var(--dx-g-spacing-5xl);
@@ -12,7 +12,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .badge {
         --badge-size: 56px;
     }

package/src/modules/dx/cardTrial/cardTrial.css

@@ -0,0 +1,130 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.card-trial {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-trial.has-image {
+    padding-bottom: 90px;
+}
+
+dx-icon-badge.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);
+}
+
+.label {
+    color: var(--dx-g-gray-30);
+    margin-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-card-title {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.body {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.terms {
+    margin-top: auto;
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-hr {
+    --dx-c-hr-padding-horizontal: 0;
+
+    width: 100%;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+}
+
+.details_top-margin {
+    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);
+}
+
+.detail dx-icon-badge {
+    --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);
+}
+
+img {
+    position: absolute;
+    bottom: 0;
+    right: var(--dx-g-spacing-mlg);
+}
+
+dx-button {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+}
+
+.recommended-container {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border-radius: var(--dx-g-card-border-radius) var(--dx-g-card-border-radius)
+        0 0;
+    height: var(--dx-g-spacing-3xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.recommended-label {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-weight: var(--dx-g-font-bold);
+    font-size: var(--dx-g-text-base);
+}
+
+div.card-trial.recommended-border {
+    border: 3px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 0 0 var(--dx-g-card-border-radius)
+        var(--dx-g-card-border-radius);
+}
+
+.recommended-border .top-text {
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.top-text {
+    color: var(--dx-g-gray-30);
+}
+
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.button-one,
+.button-two {
+    margin-top: 15px;
+    width: 100%;
+}

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

@@ -0,0 +1,115 @@
+<template>
+    <dx-modal
+        if:true={hasTwoButtons}
+        open={_modalOpen}
+        ontogglemodal={toggleModal}
+    >
+        <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}
+            title={title}
+            ontogglemodal={toggleModal}
+        ></dx-card-trial-expanded>
+    </dx-modal>
+    <div class="recommended-container" if:true={recommended}>
+        <span class="recommended-label">Recommended</span>
+    </div>
+    <div
+        class={className}
+        role={ariaRole}
+        href={href}
+        target={target}
+        onclick={handleClick}
+    >
+        <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">
+            <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}
+            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-hr if:false={hasButtons} spacing="lg"></dx-hr>
+        <dx-button
+            if:true={hasOneButton}
+            class="button-one"
+            size="large"
+            href={buttonOneHref}
+            variant="primary"
+            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"
+                icon-symbol={buttonOneIcon}
+                icon-size={buttonOneIconSize}
+            >
+                {buttonOneCta}
+            </dx-button>
+            <dx-button
+                class="button-two"
+                size="large"
+                onclick={toggleModal}
+                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>
+</template>

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

@@ -0,0 +1,102 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+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 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 title!: 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
+    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 ariaRole() {
+        return this.hasButtons ? "menu" : "link";
+    }
+
+    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 toggleModal() {
+        this._modalOpen = !this._modalOpen;
+    }
+
+    private handleClick() {
+        // card is clickable only if it doesn't contain buttons (for accessibility reasons)
+        if (!this.hasButtons) {
+            window.location.assign(this.href);
+        }
+    }
+}

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

@@ -0,0 +1,149 @@
+@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-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;
+}
+
+@media screen and (max-width: 768px) {
+    .container {
+        max-width: 550px;
+    }
+
+    .content-container {
+        flex-direction: column;
+    }
+}