@salesforcedevs/dx-components 1.2.12 → 1.2.15-alpha.0

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

@@ -7,12 +7,33 @@ 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 typeBadgeColor?: string = "default";
+    @api typeBadgeSize?: string = "default";
+    @api typeBadgeType?: string = "content-type";
+
     @api
     get details() {
         return this._details;
@@ -21,14 +42,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/featuredContentHeader/featuredContentHeader.css

@@ -13,6 +13,7 @@
     --dx-c-featured-content-header-padding-horizontal: var(
         --dx-g-page-padding-horizontal
     );
+    --dx-c-featured-content-header-padding-vertical: var(--dx-g-spacing-6xl);
     --dx-c-featured-content-main-content-max-width: 840px;
     --dx-c-bottom-image-width: calc(
         100vw - var(--dx-g-page-padding-horizontal-lg) * 2
@@ -21,6 +22,8 @@
     --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
     --dx-c-featured-content-header-image-container-transform: scale(0.7)
         translateY(14px);
+    --dx-c-featured-content-header-swoop-display: block;
+    --dx-c-featured-content-header-swoop-height: 30%;
 }
 
 .container {
@@ -32,12 +35,12 @@
     /* actual spacing between bottom of graphic and rest of page content */
     --bottom-spacing: var(--dx-g-spacing-4xl);
     --item-spacing: var(--dx-g-spacing-xl);
-    --swoop-height: 30%;
+    --swoop-height: var(--dx-c-featured-content-header-swoop-height);
     --swoop-inset: calc(2.5 * var(--vertical-padding));
     --swoop-z-index: 11;
 
     position: relative;
-    padding: var(--vertical-padding)
+    padding: var(--dx-c-featured-content-header-padding-vertical)
         var(--dx-c-featured-content-header-padding-horizontal);
     background-color: var(--dx-c-featured-content-header-background-color);
 }
@@ -64,6 +67,7 @@
 /* SWOOP SILHOUETTE */
 
 .swoop-silhouette {
+    display: var(--dx-c-featured-content-header-swoop-display);
     position: absolute;
     bottom: -2px;
     left: -1px;
@@ -228,6 +232,60 @@
     }
 }
 
+.custom-bg-trial::after {
+    content: "";
+    background-image: url(/assets/svg/trial-left.svg),
+        url(/assets/svg/trial-right.svg);
+    background-position: var(--dx-g-page-padding-horizontal) 50px,
+        right 15px top;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+    .custom-bg-trial::after {
+        background-image: url(/assets/svg/trial-left.svg);
+        background-position: 48px 30px;
+        background-size: contain;
+    }
+}
+
+.custom-bg-big-moon::after {
+    content: "";
+    background-image: url(/assets/svg/big-moon.svg);
+    background-position: top right;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.blue-circle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    background-image: url(/assets/svg/blue-circle.svg);
+    top: 110px;
+    right: 230px;
+    left: unset;
+    width: 126px;
+    height: 126px;
+}
+
+@media screen and (max-width: 1230px) {
+    .custom-bg-big-moon::after,
+    .blue-circle {
+        display: none;
+    }
+}
+
 /* Z INDEX STUFF */
 
 .label,

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -106,4 +106,12 @@
             </svg>
         </template>
     </div>
+    <div class="blue-circle" if:true={hasIcon}>
+        <dx-icon
+            class="icon"
+            size="2xlarge"
+            symbol={icon}
+            sprite="salesforcebrand"
+        ></dx-icon>
+    </div>
 </template>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -17,8 +17,16 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api backgroundImg?:
+        | "trees"
+        | "codey"
+        | "blog"
+        | "moon"
+        | "trial"
+        | "big-moon"
+        | null = null;
     @api noSwoop: boolean = false;
+    @api icon: string = "";
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
@@ -66,6 +74,10 @@ export default class FeaturedContentHeader extends LightningElement {
         return this.backgroundImg !== null;
     }
 
+    private get hasIcon(): boolean {
+        return this.icon !== "" && this.backgroundImg === "big-moon";
+    }
+
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -41,6 +41,7 @@
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }

package/src/modules/dx/headerSearch/headerSearch.html

@@ -20,6 +20,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     size="override"
                     type="search"
@@ -51,6 +52,7 @@
                     onclear={onInputEscape}
                     onsubmit={onInputSubmit}
                     onfocus={openDropdown}
+                    onblur={onDropdownRequestClose}
                     placeholder="Search"
                     shortcut-key="k"
                     size="small"

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -69,6 +69,7 @@ export default class HeaderSearch extends LightningElement {
         switch (e.detail as PopoverRequestCloseType) {
             case "interact-outside":
             case "keypress-escape":
+            case "input-blur":
                 this.closeDropdown();
                 break;
             default:

package/src/modules/dx/input/input.ts

@@ -186,6 +186,8 @@ export default class Input extends LightningElement {
         if (this.validityOnBlur) {
             this.reportValidity();
         }
+
+        this.dispatchEvent(new CustomEvent("blur", { detail: "input-blur" }));
     }
 
     onInputChange(e: InputEvent) {

package/src/modules/dx/modal/modal.css

@@ -0,0 +1,40 @@
+:host {
+    --dx-c-modal-drawer-z-index: 5000;
+}
+
+.modal-drawer_container {
+    display: none;
+}
+
+.modal-drawer_container.modal-drawer_active {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--dx-c-modal-drawer-z-index);
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.modal-drawer_overlay {
+    background-color: #195594;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    opacity: 0.62;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: calc(var(--dx-c-modal-drawer-z-index) - 1);
+}
+
+@media screen and (max-width: 768px) {
+    .modal-drawer_container.modal-drawer_active {
+        pointer-events: all;
+    }
+}

package/src/modules/dx/modal/modal.html

@@ -0,0 +1,10 @@
+<template>
+    <div class={containerClass} tabindex="0" role="dialog">
+        <slot></slot>
+    </div>
+    <div
+        if:true={open}
+        class="modal-drawer_overlay"
+        onclick={handleToggleModal}
+    ></div>
+</template>

package/src/modules/dx/modal/modal.ts

@@ -0,0 +1,50 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class Modal extends LightningElement {
+    private _open = false;
+
+    @api get open() {
+        return this._open;
+    }
+
+    set open(value) {
+        this._open = normalizeBoolean(value);
+    }
+
+    get containerClass(): string {
+        return cx(
+            "modal-drawer_container",
+            this._open && "modal-drawer_active"
+        );
+    }
+
+    renderedCallback(): void {
+        if (this._open) {
+            this.focusFirstElement();
+        }
+    }
+
+    connectedCallback(): void {
+        this.template.addEventListener(
+            "keydown",
+            this.handleKeyDown.bind(this)
+        );
+    }
+
+    focusFirstElement(): void {
+        this.template.querySelector("div")!.focus();
+    }
+
+    handleKeyDown(event: KeyboardEvent): void {
+        if (event.key === "Escape") {
+            this.handleToggleModal();
+        }
+    }
+
+    handleToggleModal() {
+        this._open = !this._open;
+        this.dispatchEvent(new CustomEvent("togglemodal"));
+    }
+}