@salesforcedevs/mrkt-components 0.79.1 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.79.1",
+    "version": "1.2.16",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "31fa5005b9be9a1e38f71f6ee6a8cd45f75eb40a"
+    "gitHead": "bd151c2d46039c53ca0d9dd818e7f8dbab65e08c"
 }

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/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,10 +36,26 @@
     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%;
@@ -48,9 +63,13 @@ dx-button {
     margin: 0 auto;
 }
 
-.subtitle,
-.title,
-.body {
+.subtitle {
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+.dark .subtitle,
+.dark .title,
+.dark .body {
     color: white;
 }
 
@@ -60,8 +79,8 @@ img {
 
 .graphic-1 {
     width: 306px;
-    bottom: -32px;
-    left: -106px;
+    bottom: 100px;
+    left: -120px;
     z-index: 0;
 }
 
@@ -74,8 +93,8 @@ img {
 
 .graphic-3 {
     width: 142px;
-    right: -38px;
-    bottom: -38px;
+    right: -58px;
+    bottom: -73px;
     z-index: 0;
 }
 
@@ -84,6 +103,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 +138,18 @@ img {
     }
 }
 
+@media (max-width: 850px) {
+    .main-cta {
+        --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
+    }
+}
+
 @media (max-width: 768px) {
+    .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;

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

@@ -1,31 +1,94 @@
 <template>
-    <div class="two-col-panel-section">
+    <div class={className}>
+        <dx-modal
+            if:true={modalButtonText}
+            open={modalOpen}
+            ontogglemodal={toggleModal}
+        >
+            <dx-card-trial-expanded
+                badge-background-color={modalBadgeBackgroundColor}
+                badge-sprite={modalBadgeSprite}
+                badge-symbol={modalBadgeSymbol}
+                body={modalBody}
+                details={modalDetails}
+                href={modalHref}
+                label={modalLabel}
+                terms={modalTerms}
+                title={modalTitle}
+                col-two-title={modalTwoColTitle}
+                col-two-details={modalTwoColDetails}
+                button-cta={modalButtonCta}
+                button-href={modalButtonHref}
+                button-icon={modalButtonIcon}
+                button-icon-size={modalButtonIconSize}
+                ontogglemodal={toggleModal}
+            ></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>
             <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}
+                >
+                    {buttonText}
+                </dx-button>
+                <dx-button
+                    if:true={modalButtonText}
+                    class="modal-cta"
+                    variant="inline"
+                    onclick={toggleModal}
+                >
+                    {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,37 @@
 import { api, LightningElement } from "lwc";
+import cx from "classnames";
 
 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 light?: boolean = false;
+
+    @api modalBadgeBackgroundColor?: string;
+    @api modalBadgeSprite?: string;
+    @api modalBadgeSymbol?: string;
+    @api modalTitle?: string;
+    @api modalBody?: 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 toggleModal(): void {
+        this.modalOpen = !this.modalOpen;
+    }
 }