@salesforcedevs/mrkt-components 0.79.1 → 1.0.0

package/lwc.config.json

@@ -6,7 +6,6 @@
     "expose": [
         "mrkt/ctaSection",
         "mrkt/fullImgSection",
-        "mrkt/noCodeSection",
         "mrkt/rectangularHeading",
         "mrkt/sectionHeader",
         "mrkt/socials",

package/package.json

@@ -1,19 +1,19 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.79.1",
+    "version": "1.0.0",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
-        "node": ">= 14.x"
+        "node": "18.x"
     },
     "publishConfig": {
         "access": "public"
     },
     "dependencies": {
-        "classnames": "^2.2.6"
+        "classnames": "2.5.1"
     },
     "devDependencies": {
-        "@types/classnames": "^2.2.10"
+        "@types/classnames": "2.3.1"
     },
-    "gitHead": "31fa5005b9be9a1e38f71f6ee6a8cd45f75eb40a"
+    "gitHead": "da61b1a4ea73c7d621be4b0be39c01afe8de7541"
 }

package/src/assets/svg/mrkt-two-col-panel-section-graphic-1-light.svg

@@ -0,0 +1,9 @@
+<svg width="314" height="306" viewBox="0 0 314 306" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="161" cy="153" r="153" fill="#CFE9FE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.9508 60.1695L64.4328 64.2705C64.3248 64.5645 64.0938 64.7945 63.8008 64.9025L59.6998 66.4205C58.7667 66.7665 58.7667 68.0845 59.6998 68.4295L63.8008 69.9465C64.0938 70.0555 64.3248 70.2865 64.4328 70.5795L65.9508 74.6815C66.2958 75.6125 67.6147 75.6125 67.9597 74.6815L69.4768 70.5795C69.5858 70.2865 69.8167 70.0555 70.1097 69.9465L74.2107 68.4295C75.1427 68.0845 75.1427 66.7665 74.2107 66.4205L70.1097 64.9025C69.8167 64.7945 69.5858 64.5645 69.4768 64.2705L67.9597 60.1695C67.6147 59.2365 66.2958 59.2365 65.9508 60.1695Z" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1539 38.096C30.1539 40.359 28.3209 42.192 26.0579 42.192C23.7959 42.192 21.9629 40.359 21.9629 38.096C21.9629 35.834 23.7959 34 26.0579 34C28.3209 34 30.1539 35.834 30.1539 38.096Z" fill="#3A49DA"/>
+<path d="M70.002 188.437V170.47" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.983 179.457H61" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.25 85.9697H32" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 85.9697H6" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/assets/svg/mrkt-two-col-panel-section-graphic-2-light.svg

@@ -0,0 +1,16 @@
+<svg width="174" height="112" viewBox="0 0 174 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.7071 11.0029H73.3301C67.8071 11.0029 63.3301 15.4809 63.3301 21.0029C63.3301 26.5259 67.8071 31.0029 73.3301 31.0029H79.3951" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M124.975 31.0029H126.699C132.222 31.0029 136.699 26.5259 136.699 21.0029C136.699 15.4809 132.222 11.0029 126.699 11.0029H112.59" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M116.393 36.1767C118.097 33.0967 121.379 31.0117 125.148 31.0117" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M68.9173 86.5827C67.3363 88.9307 64.7843 90.5697 61.8363 90.9297H56.3203C50.7973 90.9297 46.3203 95.4067 46.3203 100.93C46.3203 106.453 50.7973 110.93 56.3203 110.93H109.568C115.09 110.93 119.568 106.453 119.568 100.93C119.568 95.4067 115.09 90.9297 109.568 90.9297H99.2813C94.3363 90.3257 90.5033 86.1207 90.5033 81.0117C90.5033 75.4907 94.9783 71.0147 100.499 71.0127H162.366C167.889 71.0127 172.366 66.5347 172.366 61.0127C172.366 55.4897 167.889 51.0127 162.366 51.0127H125.14C121.265 51.0097 117.905 48.8037 116.247 45.5797C115.543 44.2097 115.146 42.6577 115.146 41.0127" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M85.083 31.0117C90.606 31.0117 95.083 35.4887 95.083 41.0117C95.083 46.5327 90.609 51.0087 85.089 51.0117H11C5.478 51.0117 1 55.4887 1 61.0117C1 66.5337 5.478 71.0117 11 71.0117H60.62C66.141 71.0137 70.615 75.4907 70.615 81.0117" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.809 78.6591L141.664 81.7521C141.582 81.9731 141.408 82.1481 141.187 82.2301L138.094 83.3741C137.391 83.6351 137.391 84.6291 138.094 84.8891L141.187 86.0341C141.408 86.1161 141.582 86.2901 141.664 86.5111L142.809 89.6041C143.069 90.3071 144.064 90.3071 144.324 89.6041L145.469 86.5111C145.55 86.2901 145.725 86.1161 145.946 86.0341L149.039 84.8891C149.742 84.6291 149.742 83.6351 149.039 83.3741L145.946 82.2301C145.725 82.1481 145.55 81.9731 145.469 81.7521L144.324 78.6591C144.064 77.9561 143.069 77.9561 142.809 78.6591Z" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.844 11C107.844 16.522 103.367 21 97.8438 21C92.3208 21 87.8438 16.522 87.8438 11C87.8438 5.477 92.3208 1 97.8438 1C103.367 1 107.844 5.477 107.844 11Z" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M125.193 40.751H110.551" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M134.662 40.751H132.445" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M59.5781 81.1006H75.2751" stroke="#3A49DA" stroke-width="2" stroke-linecap="round"/>
+<path d="M80.7773 81.1006C80.7773 81.3764 80.5532 81.6006 80.2773 81.6006C80.0015 81.6006 79.7773 81.3764 79.7773 81.1006C79.7773 80.8247 80.0015 80.6006 80.2773 80.6006C80.5532 80.6006 80.7773 80.8247 80.7773 81.1006Z" stroke="#3A49DA"/>
+<path d="M31.3359 100.834C31.3359 101.938 30.4398 102.834 29.3359 102.834C28.2312 102.834 27.3359 101.938 27.3359 100.834C27.3359 99.7291 28.2311 98.834 29.3359 98.834C30.4399 98.834 31.3359 99.7293 31.3359 100.834Z" stroke="#3A49DA"/>
+<path d="M54.2441 44.767V36.791" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.2311 40.7803L50.248 40.7808" stroke="#3A49DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/mrkt-two-col-panel-section-graphic-3-light.svg

@@ -0,0 +1,3 @@
+<svg width="142" height="142" viewBox="0 0 142 142" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="71" cy="71" r="71" fill="#CFE9FE"/>
+</svg>

package/src/modules/mrkt/ctaSection/ctaSection.css

@@ -39,12 +39,12 @@
     padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
-h2 {
-    padding-bottom: var(--dx-g-spacing-sm);
+dx-button {
+    margin-top: var(--dx-g-spacing-lg);
 }
 
 span {
-    padding-bottom: var(--dx-g-spacing-lg);
+    padding-top: var(--dx-g-spacing-sm);
 }
 
 h2,

package/src/modules/mrkt/ctaSection/ctaSection.html

@@ -1,11 +1,16 @@
 <template>
-    <div class={className}>
+    <div class={className} part="container">
         <div class="text-container">
-            <h2 class="dx-text-heading-5">{title}</h2>
+            <h2 class="dx-text-display-8">{header}</h2>
             <span if:true={subtitle} class="subtitle dx-text-body-2">
                 {subtitle}
             </span>
-            <dx-button href={buttonHref} onclick={handleCtaClick}>
+            <dx-button
+                href={buttonHref}
+                target={buttonTarget}
+                onclick={handleCtaClick}
+                size={buttonSize}
+            >
                 {buttonText}
             </dx-button>
         </div>

package/src/modules/mrkt/ctaSection/ctaSection.ts

@@ -1,23 +1,18 @@
 import { api, LightningElement } from "lwc";
 import cx from "classnames";
 import { track } from "dxUtils/analytics";
-
-export const ANALYTICS_EVENT_NAME = "custEv_ctaButtonClick";
-
-export const ANALYTICS_BASE_PAYLOAD = {
-    elementType: "button",
-    destinationType: "internal",
-    ctaClick: true
-};
+import { ButtonSize, ButtonTarget } from "typings/custom";
 
 export default class CTASection extends LightningElement {
     @api buttonHref!: string;
+    @api buttonTarget: ButtonTarget = null;
     @api buttonText!: string;
+    @api buttonSize: ButtonSize = "small";
     @api dark?: boolean;
     @api subtitle?: string;
     @api imgSrcLeft?: string;
     @api imgSrcRight?: string;
-    @api title!: string;
+    @api header!: string;
 
     private get hasImages(): boolean {
         return !!this.imgSrcLeft && !!this.imgSrcRight;
@@ -32,13 +27,12 @@ export default class CTASection extends LightningElement {
     }
 
     private handleCtaClick(e: PointerEvent) {
-        const payload = {
-            ...ANALYTICS_BASE_PAYLOAD,
-            itemTitle: this.title,
-            clickText: this.buttonText,
-            clickUrl: this.buttonHref
-        };
-
-        track(e.currentTarget!, ANALYTICS_EVENT_NAME, payload);
+        track(e.currentTarget!, "custEv_ctaButtonClick", {
+            click_text: this.buttonText,
+            click_url: this.buttonHref,
+            element_type: "button",
+            element_title: this.header,
+            content_category: "cta"
+        });
     }
 }

package/src/modules/mrkt/rectangularHeading/rectangularHeading.css

@@ -4,7 +4,7 @@
     --mrkt-c-rectangular-heading-background-color: var(
         --dx-g-indigo-vibrant-15
     );
-    --mrkt-c-rectangular-heading-background-color-faded: rgba(31, 9, 116, 0);
+    --mrkt-c-rectangular-heading-background-color-faded: rgb(31 9 116 / 0%);
 }
 
 .fade {

package/src/modules/mrkt/sectionHeader/sectionHeader.css

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --image-aspect-ratio: 1.43554006969;
+    --image-aspect-ratio: 1.4355;
     --image-width: 350px;
     --image-height: calc(var(--image-width) / var(--image-aspect-ratio));
     --image-overlap: 44px;
@@ -34,8 +34,8 @@
 .section-header.light-gradient {
     background: linear-gradient(
         180deg,
-        rgba(234, 245, 254) 42.08%,
-        rgba(234, 245, 254, 0) 100%
+        rgb(234 245 254) 42.08%,
+        rgb(234 245 254 / 0%) 100%
     );
 }
 

package/src/modules/mrkt/sectionHeader/sectionHeader.html

@@ -15,7 +15,7 @@
                 sprite={iconSprite}
                 background-size="large"
             ></dx-icon-badge>
-            <h2 if:true={title} class="title dx-text-heading-2b">{title}</h2>
+            <h2 if:true={header} class="title dx-text-display-3">{header}</h2>
             <span if:true={subtitle} class="subtitle dx-text-body-1">
                 {subtitle}
             </span>

package/src/modules/mrkt/sectionHeader/sectionHeader.ts

@@ -12,14 +12,14 @@ export default class SectionHeader extends LightningElement {
     @api overlapImages?: boolean = false;
     @api lightGradient?: boolean;
     @api subtitle?: string;
-    @api title?: string;
+    @api header!: string;
 
     private get hasPageMarginGraphics(): boolean {
         return !!this.imgSrcLeft && !!this.imgSrcRight;
     }
 
     private get hasIcon(): boolean {
-        return !!this.title && !!this.iconSymbol;
+        return !!this.header && !!this.iconSymbol;
     }
 
     private get className(): string {

package/src/modules/mrkt/socials/socials.html

@@ -1,6 +1,6 @@
 <template>
     <div class="socials">
-        <dx-hr text={title} spacing="none"></dx-hr>
+        <dx-hr text={header} spacing="none"></dx-hr>
         <div class="socials-container">
             <template for:each={items} for:item="item">
                 <a key={item.id} href={item.link.href}>

package/src/modules/mrkt/socials/socials.ts

@@ -3,7 +3,7 @@ import { toJson } from "dxUtils/normalizers";
 import type { OptionWithLink } from "typings/custom";
 
 export default class Socials extends LightningElement {
-    @api title: string = "Our Socials";
+    @api header: string = "Our Socials";
 
     @api
     get items() {

package/src/modules/mrkt/subNavBar/subNavBar.css

@@ -112,8 +112,7 @@ dx-button {
 }
 
 .subnav.is-sticky {
-    box-shadow: 0 0 2px rgba(24, 24, 24, 0.08),
-        0 2px 4px 1px rgba(24, 24, 24, 0.16);
+    box-shadow: 0 0 2px rgb(24 24 24 / 8%), 0 2px 4px 1px rgb(24 24 24 / 16%);
 }
 
 .subnav.is-sticky dx-button {

package/src/modules/mrkt/subNavBar/subNavBar.ts

@@ -15,7 +15,7 @@ export default class SubNavBar extends MatchMediaElement {
 
     @api
     get navItems() {
-        return this._navItems.map(this.normalizeItem);
+        return this._navItems.map(this.normalizeItem) as any[];
     }
     set navItems(value) {
         this._navItems = toJson(value);
@@ -80,7 +80,7 @@ export default class SubNavBar extends MatchMediaElement {
         ...item,
         className: cx(
             "nav-item",
-            "dx-text-heading-6",
+            "dx-text-display-8",
             this.activeHash === item?.link?.href && "active"
         )
     });

package/src/modules/mrkt/tdxSection/tdxSection.html

@@ -1,10 +1,10 @@
 <template>
     <div class="container">
         <div class="content">
-            <h3 class="content-title dx-text-heading-2b">{title}</h3>
-            <h4 class="dx-text-heading-4">{subtitle}</h4>
+            <h3 class="content-title dx-text-display-3">{header}</h3>
+            <h4 class="dx-text-display-6">{subtitle}</h4>
             <p class="content-body">{body}</p>
-            <p class="content-info dx-text-heading-6">{info}</p>
+            <p class="content-info dx-text-display-8">{info}</p>
             <dx-button href={buttonHref}>{buttonLabel}</dx-button>
         </div>
         <div class="image-container">

package/src/modules/mrkt/tdxSection/tdxSection.ts

@@ -1,7 +1,7 @@
 import { api, LightningElement } from "lwc";
 
 export default class TdxSection extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api subtitle!: string;
     @api body!: string;
     @api info!: string;

package/src/modules/mrkt/threeColListSection/threeColListSection.html

@@ -11,7 +11,7 @@
                             background-color={item.iconBackgroundColor}
                             background-size="large"
                         ></dx-icon-badge>
-                        <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                        <h3 class="title dx-text-display-7">{item.title}</h3>
                         <span class="subtitle dx-text-body-2">
                             {item.subtitle}
                         </span>

package/src/modules/mrkt/twoColListSection/twoColListSection.css

@@ -31,11 +31,9 @@
     width: 100%;
     max-width: 414px;
     display: grid;
-    grid-template-areas:
-        "icon title"
-        "icon subtitle";
-    grid-template-columns: min-content auto;
-    grid-template-rows: min-content;
+    grid-template:
+        "icon title" min-content
+        "icon subtitle" auto / min-content auto;
     grid-gap: var(--dx-g-spacing-xs) var(--dx-g-spacing-mlg);
 }
 

package/src/modules/mrkt/twoColListSection/twoColListSection.html

@@ -10,7 +10,7 @@
                         background-color={item.iconBackgroundColor}
                         background-size="large"
                     ></dx-icon-badge>
-                    <h3 class="title dx-text-heading-4b">{item.title}</h3>
+                    <h3 class="title dx-text-display-7">{item.title}</h3>
                     <span class="subtitle dx-text-body-2">{item.subtitle}</span>
                 </div>
             </template>

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.css

@@ -5,20 +5,19 @@
     --padding-vertical: 108px;
     --mrkt-c-two-col-list-section-padding-top: var(--padding-vertical);
     --mrkt-c-two-col-list-section-padding-bottom: var(--padding-vertical);
+    --mrkt-c-two-col-list-section-align-items: center;
 }
 
 .two-col-panel-section {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
-    background: var(--dx-g-indigo-vibrant-15);
+    align-items: var(--mrkt-c-two-col-list-section-align-items);
     width: 100%;
     padding: var(--mrkt-c-two-col-list-section-padding-top)
         var(--dx-g-page-padding-horizontal)
         var(--mrkt-c-two-col-list-section-padding-bottom)
         var(--dx-g-page-padding-horizontal);
-    overflow: hidden;
 }
 
 .text-container {
@@ -37,20 +36,41 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-dx-button {
+.cta-group {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--dx-g-spacing-md);
+}
+
+.main-cta {
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-xl);
+
     margin-top: var(--dx-g-spacing-sm);
 }
 
+.modal-cta {
+    --dx-c-button-font-size: var(--dx-g-text-sm);
+}
+
 .card-container {
     position: relative;
     width: 100%;
     max-width: 400px;
     margin: 0 auto;
+    z-index: 12;
 }
 
-.subtitle,
-.title,
-.body {
+.subtitle {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.dark .subtitle,
+.dark .title,
+.dark .body {
     color: white;
 }
 
@@ -60,8 +80,8 @@ img {
 
 .graphic-1 {
     width: 306px;
-    bottom: -32px;
-    left: -106px;
+    bottom: 100px;
+    left: -120px;
     z-index: 0;
 }
 
@@ -74,8 +94,8 @@ img {
 
 .graphic-3 {
     width: 142px;
-    right: -38px;
-    bottom: -38px;
+    right: -58px;
+    bottom: -73px;
     z-index: 0;
 }
 
@@ -84,6 +104,10 @@ img {
     width: 100%;
 }
 
+.dark {
+    background: var(--dx-g-indigo-vibrant-15);
+}
+
 @media (max-width: 1024px) {
     :host {
         --padding-vertical: var(--dx-g-spacing-3xl);
@@ -115,7 +139,12 @@ img {
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) {
+    .main-cta {
+        --dx-c-button-display: inline;
+        --dx-c-button-vertical-spacing: var(--dx-g-spacing-xs);
+    }
+
     .two-col-panel-section {
         display: flex;
         flex-direction: column;
@@ -134,3 +163,12 @@ img {
         display: none;
     }
 }
+
+@media (max-width: 600px) {
+    dx-button::part(container) {
+        white-space: normal;
+        display: block;
+        height: auto;
+        width: 280px;
+    }
+}

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.html

@@ -1,31 +1,95 @@
 <template>
-    <div class="two-col-panel-section">
+    <div class={className}>
+        <dx-modal
+            if:true={modalButtonText}
+            open={modalOpen}
+            onclosemodal={closeModal}
+        >
+            <dx-card-trial-expanded
+                badge-background-color={modalBadgeBackgroundColor}
+                badge-sprite={modalBadgeSprite}
+                badge-symbol={modalBadgeSymbol}
+                body={modalBody}
+                details={modalDetails}
+                href={modalHref}
+                label={modalLabel}
+                terms={modalTerms}
+                header={modalTitle}
+                col-two-title={modalTwoColTitle}
+                col-two-details={modalTwoColDetails}
+                button-cta={modalButtonCta}
+                button-href={modalButtonHref}
+                button-icon={modalButtonIcon}
+                button-icon-size={modalButtonIconSize}
+                onclickclose={closeModal}
+            ></dx-card-trial-expanded>
+        </dx-modal>
         <div class="text-container">
             <span class="subtitle dx-text-label-4">{subtitle}</span>
-            <h2 class="title dx-text-heading-3">{title}</h2>
+            <h2 class="title dx-text-display-4">{header}</h2>
             <p class="body dx-text-body-2">{body}</p>
-            <dx-button href={buttonHref}>{buttonText}</dx-button>
+            <div class="cta-group">
+                <dx-button
+                    class="main-cta"
+                    size="large"
+                    font="sans"
+                    href={buttonHref}
+                    onclick={handleSignUpClick}
+                >
+                    {buttonText}
+                </dx-button>
+                <dx-button
+                    if:true={modalButtonText}
+                    class="modal-cta"
+                    variant="inline"
+                    onclick={openModal}
+                >
+                    {modalButtonText}
+                </dx-button>
+            </div>
         </div>
         <div class="card-container">
             <img
+                if:false={light}
                 class="graphic-1"
                 src="/assets/svg/mrkt-two-col-panel-section-graphic-1.svg"
                 alt=""
             />
             <img
+                if:false={light}
                 class="graphic-2"
                 src="/assets/svg/mrkt-two-col-panel-section-graphic-2.svg"
                 alt=""
             />
             <img
+                if:false={light}
                 class="graphic-3"
                 src="/assets/svg/mrkt-two-col-panel-section-graphic-3.svg"
                 alt=""
             />
+            <img
+                if:true={light}
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1-light.svg"
+                alt=""
+            />
+            <img
+                if:true={light}
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2-light.svg"
+                alt=""
+            />
+            <img
+                if:true={light}
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3-light.svg"
+                alt=""
+            />
             <slot></slot>
         </div>
     </div>
     <img
+        if:false={light}
         class="graphic-swoop"
         src="/assets/svg/mrkt-two-col-panel-section-swoop.svg"
         alt=""

package/src/modules/mrkt/twoColPanelSection/twoColPanelSection.ts

@@ -1,9 +1,57 @@
 import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
 
 export default class TwoColPanelSection extends LightningElement {
     @api body!: string;
     @api buttonHref!: string;
     @api buttonText!: string;
+    @api modalButtonText?: string;
     @api subtitle!: string;
-    @api title!: string;
+    @api header!: string;
+    @api light?: boolean = false;
+
+    @api modalBadgeBackgroundColor?: string;
+    @api modalBadgeSprite?: string;
+    @api modalBadgeSymbol?: string;
+    @api modalTitle?: string;
+    @api modalBody?: string;
+    @api modalHref?: string;
+    @api modalDetails?: string;
+    @api modalLabel?: string;
+    @api modalTerms?: string;
+    @api modalTwoColTitle?: string;
+    @api modalTwoColDetails?: string;
+    @api modalButtonCta?: string;
+    @api modalButtonHref?: string;
+    @api modalButtonIcon?: string;
+    @api modalButtonIconSize?: string;
+
+    private modalOpen: boolean = false;
+
+    private get className(): string {
+        return cx("two-col-panel-section", !this.light && "dark");
+    }
+
+    private openModal() {
+        this.modalOpen = true;
+    }
+
+    private closeModal() {
+        this.modalOpen = false;
+    }
+
+    private handleSignUpClick(e: PointerEvent) {
+        if (this.buttonHref.includes("signup")) {
+            const payload = {
+                click_text: this.buttonText,
+                element_title: this.header,
+                element_type: "card",
+                click_url: `${window.location.origin}${this.buttonHref}`,
+                content_category: "cta"
+            };
+            track(e.currentTarget!, "custEv_signupStart", payload);
+            track(e.currentTarget!, "custEv_linkClick", payload);
+        }
+    }
 }

package/src/modules/mrkt/twoColSection/twoColSection.css

@@ -62,6 +62,6 @@ h2 {
 
     img {
         width: 100%;
-        margin: 0 auto 56px auto;
+        margin: 0 auto 56px;
     }
 }

package/src/modules/mrkt/twoColSection/twoColSection.html

@@ -2,7 +2,7 @@
     <div class={className}>
         <img src={imgSrc} alt={imgAlt} />
         <div class="text-container">
-            <h2 class="dx-text-heading-4">{title}</h2>
+            <h2 class="dx-text-display-6">{header}</h2>
             <span class="dx-text-body-2">{subtitle}</span>
         </div>
     </div>

package/src/modules/mrkt/twoColSection/twoColSection.ts

@@ -6,7 +6,7 @@ export default class TwoColSection extends LightningElement {
     @api subtitle!: string;
     @api imgAlt!: string;
     @api imgSrc!: string;
-    @api title!: string;
+    @api header!: string;
 
     private get className(): string {
         return cx("two-col-section", this.dark && "dark");

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.html

@@ -14,7 +14,7 @@
                 ></path>
             </svg>
         </div>
-        <h2 class="section-title">{title}</h2>
+        <h2 class="section-title">{header}</h2>
         <div class="video">
             <dx-vimeo-player video-id={videoId}></dx-vimeo-player>
         </div>

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class VideoPlayerSection extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api videoId!: number;
 }

package/src/assets/svg/mrkt-no-code-section-graphic.svg

@@ -1,23 +0,0 @@
-<svg width="241" height="114" viewBox="0 0 241 114" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M153.1 24.1641C153.098 20.1387 154.145 16.1822 156.138 12.6851C158.132 9.18802 161.003 6.27116 164.468 4.22242C167.933 2.17369 171.872 1.06388 175.897 1.00252C179.922 0.941168 183.894 1.93039 187.419 3.87256C190.945 5.81473 193.904 8.64271 196.003 12.0774C198.102 15.5121 199.27 19.4349 199.39 23.4585C199.51 27.4821 198.579 31.4675 196.689 35.0214C194.798 38.5754 192.014 41.5749 188.61 43.7241" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M192.52 7.8239C196.895 12.2007 199.353 18.1356 199.353 24.3239C199.353 30.5122 196.895 36.4471 192.52 40.8239C189.019 44.3242 184.271 46.2905 179.32 46.2905C174.37 46.2905 169.621 44.3242 166.12 40.8239C164.732 39.4381 163.63 37.7921 162.879 35.98C162.127 34.168 161.74 32.2256 161.74 30.2639C161.74 28.3022 162.127 26.3598 162.879 24.5477C163.63 22.7357 164.732 21.0897 166.12 19.7039C167.228 18.5933 168.545 17.7122 169.994 17.1111C171.443 16.5099 172.996 16.2005 174.565 16.2005C176.134 16.2005 177.688 16.5099 179.137 17.1111C180.586 17.7122 181.902 18.5933 183.01 19.7039C184.801 21.498 185.806 23.9292 185.806 26.4639C185.806 28.9986 184.801 31.4297 183.01 33.2239C181.576 34.6559 179.632 35.4602 177.605 35.4602C175.579 35.4602 173.635 34.6559 172.2 33.2239" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M213.8 34.6548C216.897 33.1407 220.365 32.551 223.788 32.9563C227.212 33.3616 230.446 34.7446 233.104 36.94C235.762 39.1354 237.731 42.0501 238.776 45.3354C239.82 48.6206 239.897 52.1373 238.995 55.4647C238.093 58.792 236.252 61.7891 233.691 64.0972C231.13 66.4054 227.959 67.9269 224.556 68.4797C221.153 69.0326 217.663 68.5933 214.504 67.2144C211.344 65.8355 208.649 63.5755 206.74 60.7048" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M199.61 23.9042C201.271 23.4055 203.026 23.302 204.734 23.6018C206.443 23.9017 208.057 24.5966 209.449 25.6312C210.841 26.6657 211.972 28.0113 212.752 29.5605C213.532 31.1098 213.939 32.8198 213.94 34.5542" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M234.12 63.6045C230.791 66.9326 226.277 68.8022 221.57 68.8022C216.863 68.8022 212.349 66.9326 209.02 63.6045C207.7 62.2858 206.653 60.7199 205.939 58.9963C205.225 57.2727 204.857 55.4253 204.857 53.5595C204.857 51.6938 205.225 49.8463 205.939 48.1228C206.653 46.3992 207.7 44.8333 209.02 43.5145C211.15 41.3858 214.039 40.19 217.05 40.19C220.062 40.19 222.95 41.3858 225.08 43.5145C226.784 45.2207 227.741 47.5334 227.741 49.9445C227.741 52.3557 226.784 54.6683 225.08 56.3745C223.717 57.7375 221.868 58.5032 219.94 58.5032C218.012 58.5032 216.163 57.7375 214.8 56.3745" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M206.43 60.3845C204.383 64.6431 201.24 68.2805 197.323 70.9237C193.406 73.567 188.857 75.1209 184.142 75.4262C179.427 75.7316 174.715 74.7773 170.49 72.6612C166.266 70.5452 162.68 67.3435 160.1 63.3845" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M159.75 63.3841C157.927 66.5262 155.281 69.1109 152.096 70.8593C148.912 72.6076 145.311 73.4534 141.681 73.3052C138.051 73.157 134.531 72.0205 131.499 70.0183C128.468 68.0162 126.041 65.2244 124.48 61.9441" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M156.56 67.385C154.695 69.2518 152.479 70.7327 150.041 71.743C147.603 72.7534 144.99 73.2734 142.35 73.2734C139.711 73.2734 137.098 72.7534 134.659 71.743C132.221 70.7327 130.006 69.2518 128.14 67.385C125.128 64.3698 123.436 60.2821 123.436 56.02C123.436 51.7579 125.128 47.6701 128.14 44.655C130.553 42.2447 133.825 40.8909 137.235 40.8909C140.646 40.8909 143.917 42.2447 146.33 44.655C147.287 45.6098 148.045 46.7438 148.563 47.9921C149.081 49.2404 149.347 50.5786 149.347 51.93C149.347 53.2814 149.081 54.6195 148.563 55.8679C148.045 57.1162 147.287 58.2502 146.33 59.205C144.786 60.7463 142.692 61.6119 140.51 61.6119C138.328 61.6119 136.235 60.7463 134.69 59.205" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M120.49 34.2739C121.777 31.3241 123.681 28.6847 126.075 26.5341C128.469 24.3835 131.297 22.7717 134.368 21.8077C137.438 20.8436 140.679 20.5497 143.873 20.9459C147.067 21.342 150.138 22.4189 152.88 24.1039" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M76.1702 53.7642L91.1102 53.7642C93.4971 53.7642 95.7863 52.8159 97.4742 51.1281C99.162 49.4403 100.11 47.1511 100.11 44.7642C100.11 42.3772 99.162 40.088 97.4742 38.4002C95.7863 36.7124 93.4971 35.7642 91.1102 35.7642L76.1902 35.7642C73.8032 35.7642 71.514 34.8159 69.8262 33.1281C68.1384 31.4403 67.1902 29.1511 67.1902 26.7642L67.1902 26.3842C67.1902 23.9972 68.1384 21.708 69.8262 20.0202C71.514 18.3324 73.8032 17.3842 76.1902 17.3842L122.19 17.3842" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.2403 53.7642L57.2603 53.7642" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M48.2601 90.314L64.9601 90.314C67.3824 90.3113 69.7047 89.3472 71.4166 87.6334C73.1285 85.9196 74.0901 83.5963 74.0901 81.174V81.174C74.0901 78.7525 73.1282 76.4303 71.416 74.7181C69.7038 73.0059 67.3815 72.044 64.9601 72.044L48.6101 72.044" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M75.2202 108.584L118.99 108.584C120.198 108.584 121.394 108.346 122.509 107.884C123.625 107.422 124.639 106.744 125.492 105.889C126.346 105.035 127.022 104.021 127.484 102.904C127.945 101.788 128.182 100.592 128.18 99.3845V99.3845C128.178 96.9479 127.208 94.612 125.486 92.8891C123.763 91.1662 121.427 90.1971 118.99 90.1945L104.34 90.1945C103.223 90.1958 102.117 89.9769 101.084 89.5503C100.052 89.1237 99.1137 88.4978 98.3233 87.7084C97.533 86.919 96.906 85.9815 96.4782 84.9496C96.0504 83.9177 95.8302 82.8115 95.8302 81.6945V81.6945C95.8302 79.4375 96.7268 77.2729 98.3227 75.677C99.9187 74.0811 102.083 73.1845 104.34 73.1845L142.46 73.1845" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M47.0003 90.3145C45.8 90.3145 44.6115 90.5509 43.5026 91.0102C42.3937 91.4695 41.3861 92.1428 40.5374 92.9915C39.6886 93.8402 39.0154 94.8478 38.556 95.9567C38.0967 97.0657 37.8603 98.2542 37.8603 99.4545C37.863 101.877 38.8271 104.199 40.5409 105.911C42.2547 107.623 44.578 108.584 47.0003 108.584L58.3103 108.584" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.14 53.7644C8.93976 53.7644 7.75124 54.0008 6.64232 54.4602C5.5334 54.9195 4.52582 55.5927 3.67709 56.4415C2.82837 57.2902 2.15511 58.2978 1.69579 59.4067C1.23646 60.5156 1.00005 61.7042 1.00005 62.9044C1.00005 65.3285 1.96301 67.6533 3.67709 69.3674C5.39118 71.0815 7.71597 72.0444 10.14 72.0444L24.55 72.0444" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M34.7202 69.7639L29.5402 74.7739" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M42.0002 69.7639L36.8203 74.7739" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M66.2803 57.7739L66.2803 50.2139" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M70.0603 53.9951L62.4903 53.9951" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M66.2803 112.385L66.2803 104.825" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M70.0603 108.604L62.4903 108.604" stroke="#1B96FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

package/src/modules/mrkt/noCodeSection/noCodeSection.css

@@ -1,82 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-
-:host {
-    --dx-g-text-heading-color: white;
-    --padding-top: var(--dx-g-spacing-4xl);
-    --margin-top: 80px;
-}
-
-.container {
-    position: relative;
-    background-color: var(--dx-g-indigo-vibrant-20);
-    display: flex;
-    justify-content: space-between;
-    padding-top: var(--padding-top);
-    padding-left: var(--dx-g-page-padding-horizontal);
-    margin-top: var(--margin-top);
-}
-
-.content {
-    align-self: flex-end;
-    margin: 0 var(--dx-g-spacing-3xl) var(--dx-g-spacing-5xl) 0;
-}
-
-.content-title {
-    white-space: pre-line;
-}
-
-.content-body {
-    color: white;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-base);
-    margin-top: var(--dx-g-spacing-smd);
-}
-
-.image {
-    width: 600px;
-    flex-shrink: 0;
-    height: fit-content;
-    align-self: flex-end;
-}
-
-.graphic {
-    width: 238px;
-    position: absolute;
-    left: var(--dx-g-page-padding-horizontal);
-    top: calc(-1 * var(--margin-top));
-}
-
-@media (min-width: 1600px) {
-    .container {
-        padding: var(--padding-top) var(--dx-g-page-padding-horizontal) 0;
-    }
-}
-
-@media screen and (max-width: 1024px) {
-    .container {
-        flex-direction: column;
-        margin-top: calc(var(--margin-top) + var(--dx-g-spacing-lg));
-    }
-
-    .content {
-        margin: 0
-            calc(var(--dx-g-spacing-6xl) - var(--dx-g-page-padding-horizontal))
-            var(--dx-g-spacing-3xl) 0;
-    }
-
-    .image {
-        width: 100%;
-        max-width: 790px;
-    }
-}
-
-@media screen and (max-width: 768px) {
-    .content-title {
-        font-size: var(--dx-g-text-2xl);
-    }
-
-    .content {
-        margin: 0 var(--dx-g-page-padding-horizontal) var(--dx-g-spacing-3xl) 0;
-    }
-}

package/src/modules/mrkt/noCodeSection/noCodeSection.html

@@ -1,14 +0,0 @@
-<template>
-    <div class="container">
-        <img
-            class="graphic"
-            src="/assets/svg/mrkt-no-code-section-graphic.svg"
-            alt=""
-        />
-        <div class="content">
-            <h3 class="content-title dx-text-heading-3">{title}</h3>
-            <p class="content-body">{body}</p>
-        </div>
-        <img class="image" src={imgSrc} alt={imgAlt} />
-    </div>
-</template>

package/src/modules/mrkt/noCodeSection/noCodeSection.ts

@@ -1,8 +0,0 @@
-import { api, LightningElement } from "lwc";
-
-export default class NoCodeSection extends LightningElement {
-    @api title!: string;
-    @api body!: string;
-    @api imgSrc!: string;
-    @api imgAlt!: string;
-}