@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

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

@@ -1,21 +1,105 @@
 <template>
-    <a class={className} href={href} target={target}>
-        <dx-icon-badge
-            class="badge-main"
-            background-color={badgeBackgroundColor}
-            symbol={badgeSymbol}
-            sprite={badgeSprite}
-        ></dx-icon-badge>
-        <span class="label dx-text-label-3">{label}</span>
+    <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>
-        <p class="body dx-text-body-3 static-font">{body}</p>
+        <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 spacing="md"></dx-hr>
-        <ul class="details">
+        <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
@@ -27,5 +111,5 @@
             </template>
         </ul>
         <img if:true={imgSrc} src={imgSrc} alt="" />
-    </a>
+    </div>
 </template>

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

@@ -7,12 +7,34 @@ export default class CardTrial extends LightningElement {
     @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 label!: 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;
@@ -21,14 +43,60 @@ export default class CardTrial extends LightningElement {
         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.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;
+    }
+}

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

@@ -0,0 +1,85 @@
+<template>
+    <div class="container">
+        <div class="button-container">
+            <dx-button
+                class="button-close"
+                variant="secondary"
+                icon-symbol="close"
+                onclick={handleModalClose}
+            >
+                Close
+            </dx-button>
+        </div>
+        <div class="content-container">
+            <div class="col-one">
+                <dx-icon-badge
+                    class="badge-main"
+                    background-color={badgeBackgroundColor}
+                    symbol={badgeSymbol}
+                    sprite={badgeSprite}
+                ></dx-icon-badge>
+                <dx-card-title
+                    class="title-main"
+                    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-button
+                    class="button-cta"
+                    size="large"
+                    href={href}
+                    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"
+                    title={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={colTwoItem.bullet} class="bullet">
+                                    {bullet}
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,67 @@
+import { LightningElement, api } from "lwc";
+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 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 title!: string;
+
+    @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 handleModalClose() {
+        this.dispatchEvent(new CustomEvent("togglemodal"));
+    }
+}

package/src/modules/dx/checkbox/checkbox.css

@@ -35,6 +35,10 @@ input {
     padding-left: 12px;
 }
 
+.checkbox-label::first-letter {
+    text-transform: uppercase;
+}
+
 .checkbox-error {
     opacity: 0;
     margin-top: var(--dx-g-spacing-xs);

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -45,7 +45,11 @@ export default class CodeBlock extends LightningElement {
         { label: "PHP", id: "php" },
         { label: "JSON", id: "json" },
         { label: "Swift", id: "swift" },
-        { label: "Kotlin", id: "kotlin" }
+        { label: "Kotlin", id: "kotlin" },
+        { label: "Python", id: "python" },
+        { label: "Bash", id: "bash" },
+        { label: "SQL", id: "sql" },
+        { label: "YAML", id: "yaml" }
     ];
 
     connectedCallback() {

package/src/modules/dx/dropdown/dropdown.html

@@ -19,18 +19,21 @@
             role={role}
             slot="content"
         >
-            <template for:each={options} for:item="option">
+            <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
                     suppress-gtm-nav-headings={suppressGtmNavHeadings}
                     analytics-event={analyticsEvent}
+                    analytics-base-payload={analyticsBasePayload}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
                     key={option.id}
+                    index-position={index}
                     onfocus={onOptionFocus}
                     onselect={onOptionClick}
                     option={option}
                     nav-item-label={navItemLabel}
+                    variant={variant}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -43,6 +46,7 @@
                         <dx-dropdown-option
                             suppress-gtm-nav-headings={suppressGTMNavHeadings}
                             analytics-event={analyticsEvent}
+                            analytics-base-payload={analyticsBasePayload}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,4 +1,9 @@
-import { OptionWithNested, PopperPlacement } from "typings/custom";
+import {
+    AnalyticsPayload,
+    OptionWithNested,
+    PopperPlacement,
+    DropdownVariant
+} from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import get from "lodash.get";
@@ -18,8 +23,6 @@ export default class Dropdown extends LightningElement {
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
-    @api suppressGtmNavHeadings?: boolean = false;
-
     // props forwarded to popover:
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
@@ -32,9 +35,16 @@ export default class Dropdown extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
+    @api variant: DropdownVariant = "base";
 
     // props forwarded to dropdown option
     @api analyticsEvent: string | null = null;
+    @api analyticsBasePayload: AnalyticsPayload = {
+        elementType: "dropdown",
+        destinationType: "internal",
+        ctaClick: true
+    };
+    @api suppressGtmNavHeadings?: boolean = false;
 
     @api
     get options() {