@salesforcedevs/mrkt-components 0.38.0 → 0.41.0

package/lwc.config.json

@@ -11,6 +11,9 @@
         "mrkt/socials",
         "mrkt/twoColSection",
         "mrkt/twoColListSection",
-        "mrkt/rectangularHeading"
+        "mrkt/twoColPanelSection",
+        "mrkt/rectangularHeading",
+        "mrkt/videoPlayerSection",
+        "mrkt/tdxSection"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/mrkt-components",
-    "version": "0.38.0",
+    "version": "0.41.0",
     "description": "Marketing Lightning web components for DSC",
     "license": "MIT",
     "engines": {
@@ -15,5 +15,5 @@
     "devDependencies": {
         "@types/classnames": "^2.2.10"
     },
-    "gitHead": "8aa0d5f09d65166284bdb76e598fb69031b76049"
+    "gitHead": "363477b8997dcd990c2d668b03ee0142334d7815"
 }

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

@@ -0,0 +1,9 @@
+<svg width="314" height="356" viewBox="0 0 314 356" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="161" cy="202.22" r="153" fill="#014486"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.9508 22.7202L64.4328 26.2202C64.3248 26.4711 64.0938 26.6674 63.8008 26.7596L59.6998 28.0551C58.7667 28.3504 58.7667 29.4753 59.6998 29.7697L63.8008 31.0644C64.0938 31.1574 64.3248 31.3546 64.4328 31.6046L65.9508 35.1055C66.2958 35.9 67.6148 35.9 67.9598 35.1055L69.4768 31.6046C69.5858 31.3546 69.8168 31.1574 70.1098 31.0644L74.2108 29.7697C75.1428 29.4753 75.1428 28.3504 74.2108 28.0551L70.1098 26.7596C69.8168 26.6674 69.5858 26.4711 69.4768 26.2202L67.9598 22.7202C67.6148 21.924 66.2958 21.924 65.9508 22.7202Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.1539 3.88145C30.1539 5.8128 28.3209 7.37717 26.0579 7.37717C23.7959 7.37717 21.9629 5.8128 21.9629 3.88145C21.9629 1.95096 23.7959 0.385742 26.0579 0.385742C28.3209 0.385742 30.1539 1.95096 30.1539 3.88145Z" fill="white"/>
+<path d="M70.002 132.19V116.855" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M78.983 124.525H61" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.25 44.7393H32" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 44.7393H6" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

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

@@ -0,0 +1,16 @@
+<svg width="174" height="113" viewBox="0 0 174 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M81.7071 11.2227H73.3301C67.8071 11.2227 63.3301 15.7007 63.3301 21.2227C63.3301 26.7457 67.8071 31.2227 73.3301 31.2227H79.3951" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M124.974 31.2227H126.698C132.221 31.2227 136.698 26.7457 136.698 21.2227C136.698 15.7007 132.221 11.2227 126.698 11.2227H112.589" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M116.393 36.3964C118.097 33.3164 121.379 31.2314 125.148 31.2314" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M68.9183 86.8024C67.3373 89.1504 64.7853 90.7894 61.8373 91.1494H56.3213C50.7983 91.1494 46.3213 95.6264 46.3213 101.149C46.3213 106.672 50.7983 111.149 56.3213 111.149H109.569C115.091 111.149 119.569 106.672 119.569 101.149C119.569 95.6264 115.091 91.1494 109.569 91.1494H99.2823C94.3373 90.5454 90.5043 86.3404 90.5043 81.2314C90.5043 75.7104 94.9793 71.2344 100.5 71.2324H162.367C167.89 71.2324 172.367 66.7544 172.367 61.2324C172.367 55.7094 167.89 51.2324 162.367 51.2324H125.141C121.266 51.2294 117.906 49.0234 116.248 45.7994C115.544 44.4294 115.147 42.8774 115.147 41.2324" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M85.083 31.2314C90.606 31.2314 95.083 35.7084 95.083 41.2314C95.083 46.7524 90.609 51.2284 85.089 51.2314H11C5.478 51.2314 1 55.7084 1 61.2314C1 66.7534 5.478 71.2314 11 71.2314H60.62C66.141 71.2334 70.615 75.7104 70.615 81.2314" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M142.809 78.8788L141.664 81.9718C141.582 82.1928 141.408 82.3678 141.187 82.4498L138.094 83.5938C137.391 83.8548 137.391 84.8488 138.094 85.1088L141.187 86.2538C141.408 86.3358 141.582 86.5098 141.664 86.7308L142.809 89.8238C143.069 90.5268 144.064 90.5268 144.324 89.8238L145.469 86.7308C145.55 86.5098 145.725 86.3358 145.946 86.2538L149.039 85.1088C149.742 84.8488 149.742 83.8548 149.039 83.5938L145.946 82.4498C145.725 82.3678 145.55 82.1928 145.469 81.9718L144.324 78.8788C144.064 78.1758 143.069 78.1758 142.809 78.8788Z" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.843 11.2197C107.843 16.7417 103.366 21.2197 97.8428 21.2197C92.3198 21.2197 87.8428 16.7417 87.8428 11.2197C87.8428 5.69673 92.3198 1.21973 97.8428 1.21973C103.366 1.21973 107.843 5.69673 107.843 11.2197Z" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M125.194 40.9707H110.552" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M134.661 40.9707H132.444" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M59.5791 81.3203H75.2761" stroke="#0176D3" stroke-width="2" stroke-linecap="round"/>
+<path d="M80.7764 81.3203C80.7764 81.5962 80.5522 81.8203 80.2764 81.8203C80.0005 81.8203 79.7764 81.5962 79.7764 81.3203C79.7764 81.0445 80.0005 80.8203 80.2764 80.8203C80.5522 80.8203 80.7764 81.0445 80.7764 81.3203Z" stroke="#0176D3"/>
+<path d="M30.8359 101.054C30.8359 101.881 30.1637 102.554 29.3359 102.554C28.5075 102.554 27.8359 101.882 27.8359 101.054C27.8359 100.225 28.5072 99.5537 29.3359 99.5537C30.1639 99.5537 30.8359 100.225 30.8359 101.054Z" stroke="#0176D3" stroke-width="2"/>
+<path d="M54.2441 44.9867V37.0107" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M58.2311 41L50.248 41.0005" stroke="#0176D3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/svg/mrkt-two-col-panel-section-graphic-3.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="#014486"/>
+</svg>

package/src/modules/mrkt/tdxSection/tdxSection.css

@@ -0,0 +1,160 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+}
+
+.container {
+    background-color: var(--dx-g-indigo-vibrant-20);
+    display: flex;
+    justify-content: center;
+    margin: 108px auto 0 auto;
+}
+
+.content {
+    padding-left: var(--dx-g-page-padding-horizontal);
+    width: 70%;
+}
+
+.content-subtitle,
+.content-info {
+    font-family: var(--dx-g-font-display);
+}
+
+.content-subtitle,
+.content-body,
+.content-info {
+    color: white;
+}
+
+.content-title {
+    margin-top: 54px;
+}
+
+.content-subtitle {
+    font-size: 32px;
+    letter-spacing: -0.4%;
+    line-height: 40px;
+    margin-top: 6px;
+}
+
+.content-body {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-lg);
+    letter-spacing: 0.12%;
+    line-height: 30px;
+    margin-top: var(--dx-g-spacing-smd);
+    max-width: 565px;
+}
+
+.content-info {
+    font-size: var(--dx-g-text-xl);
+    letter-spacing: 0.4%;
+    line-height: 32px;
+    margin-top: 30px;
+    margin-bottom: var(--dx-g-spacing-lg);
+}
+
+.image-container {
+    height: 430px;
+}
+
+img {
+    position: relative;
+    top: -80px;
+    right: 15px;
+}
+
+.content-button {
+    margin-bottom: 40px;
+}
+
+@media screen and (max-width: 900px) {
+    .container {
+        align-items: center;
+    }
+
+    .content {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+        width: auto;
+    }
+
+    .content-title {
+        font-size: var(--dx-g-text-3xl);
+        margin-top: 39px;
+    }
+
+    .content-subtitle {
+        font-size: var(--dx-g-text-lg);
+        line-height: 28px;
+    }
+
+    .content-body {
+        font-size: var(--dx-g-text-sm);
+        line-height: 20px;
+    }
+
+    .content-info {
+        font-size: var(--dx-g-text-base);
+        line-height: 24px;
+    }
+
+    .image-container {
+        height: unset;
+    }
+
+    img {
+        position: relative;
+        top: 15px;
+        right: 25px;
+    }
+
+    .content-button {
+        margin-bottom: 52px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .container {
+        flex-direction: column-reverse;
+        text-align: center;
+        margin-top: 170px;
+    }
+
+    .content {
+        margin-left: 0;
+    }
+
+    .content-title {
+        font-size: var(--dx-g-text-3xl);
+    }
+
+    .content-subtitle {
+        font-size: var(--dx-g-text-lg);
+        line-height: 28px;
+        margin-top: 0;
+    }
+
+    .content-info {
+        margin-top: var(--dx-g-spacing-lg);
+    }
+
+    .image-container {
+        height: 140px;
+    }
+
+    img {
+        position: relative;
+        top: -170px;
+        right: 0;
+        width: 381px;
+        height: 383px;
+    }
+
+    .content-button {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 63px;
+    }
+}

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

@@ -0,0 +1,16 @@
+<template>
+    <div class="container">
+        <div class="content">
+            <h3 class="content-title dx-text-heading-2b">{title}</h3>
+            <h4 class="content-subtitle">{subtitle}</h4>
+            <p class="content-body">{body}</p>
+            <p class="content-info">{info}</p>
+            <div class="content-button">
+                <dx-button>{buttonLabel}</dx-button>
+            </div>
+        </div>
+        <dix class="image-container">
+            <img src={imgSrc} alt={imgAlt} />
+        </dix>
+    </div>
+</template>

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

@@ -0,0 +1,11 @@
+import { api, LightningElement } from "lwc";
+
+export default class TdxSection extends LightningElement {
+    @api title!: string;
+    @api subtitle!: string;
+    @api body!: string;
+    @api info!: string;
+    @api buttonLabel!: string;
+    @api imgSrc!: string;
+    @api imgAlt!: string;
+}

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

@@ -0,0 +1,136 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --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);
+}
+
+.two-col-panel-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background: var(--dx-g-blue-vibrant-15, #03234d);
+    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 {
+    display: flex;
+    flex-direction: column;
+    padding-right: 80px;
+    width: 50%;
+    z-index: 1;
+}
+
+.text-container > * {
+    max-width: 500px;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+.subtitle,
+.title,
+.body {
+    color: white;
+}
+
+img {
+    position: absolute;
+}
+
+.graphic-1 {
+    width: 306px;
+    bottom: -32px;
+    left: -106px;
+    z-index: 0;
+}
+
+.graphic-2 {
+    width: 170px;
+    top: 15px;
+    left: calc(100% - 38px);
+    z-index: 1;
+}
+
+.graphic-3 {
+    width: 142px;
+    right: -38px;
+    bottom: -38px;
+    z-index: 0;
+}
+
+@media (max-width: 1024px) {
+    :host {
+        --padding-vertical: var(--dx-g-spacing-md);
+    }
+
+    .title {
+        font-size: var(--dx-g-text-2xl);
+    }
+
+    .body {
+        font-size: var(--dx-g-text-sm);
+        line-height: 20px;
+    }
+
+    .text-container {
+        max-width: 440px;
+        padding-right: var(--dx-g-spacing-lg);
+    }
+
+    .graphic-1 {
+        width: 220px;
+        left: -80px;
+        top: 30px;
+        z-index: 0;
+    }
+
+    .graphic-2,
+    .graphic-3 {
+        display: none;
+    }
+}
+
+@media (max-width: 768px) {
+    :host {
+        --padding-vertical: 72px;
+    }
+
+    .two-col-panel-section {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .text-container {
+        width: 100%;
+        text-align: center;
+        justify-content: center;
+        align-items: center;
+        padding-right: unset;
+        padding-bottom: 72px;
+    }
+
+    .graphic-1 {
+        display: none;
+    }
+}

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

@@ -0,0 +1,28 @@
+<template>
+    <div class="two-col-panel-section">
+        <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>
+        <div class="card-container">
+            <img
+                class="graphic-1"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-1.svg"
+                alt=""
+            />
+            <img
+                class="graphic-2"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-2.svg"
+                alt=""
+            />
+            <img
+                class="graphic-3"
+                src="/assets/svg/mrkt-two-col-panel-section-graphic-3.svg"
+                alt=""
+            />
+            <slot></slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,9 @@
+import { api, LightningElement } from "lwc";
+
+export default class TwoColPanelSection extends LightningElement {
+    @api body!: string;
+    @api buttonHref!: string;
+    @api buttonText!: string;
+    @api subtitle!: string;
+    @api title!: string;
+}

package/src/modules/mrkt/videoPlayerSection/videoPlayerSection.css

@@ -0,0 +1,73 @@
+@import "helpers/reset";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+}
+
+.swoop-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 50%;
+}
+
+.swoop-background {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+    width: 100%;
+    height: 100%;
+}
+
+.swoop {
+    width: 100%;
+}
+
+.section-title {
+    margin-top: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-xl);
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-4xl);
+    letter-spacing: -0.6px;
+    line-height: 56px;
+}
+
+.video {
+    box-shadow: var(--dx-g-box-shadow-md);
+    width: 70%;
+    border-radius: 16px;
+    overflow: hidden;
+}
+
+.section-title,
+.video {
+    z-index: 1;
+}
+
+@media screen and (max-width: 768px) {
+    .section-title {
+        margin-top: var(--dx-g-spacing-mlg);
+        margin-bottom: var(--dx-g-spacing-mlg);
+        font-size: var(--dx-g-text-3xl);
+    }
+
+    .video {
+        width: 90%;
+    }
+}
+
+@media screen and (max-width: 360px) {
+    .section-title {
+        font-size: 32px;
+    }
+
+    .swoop-container {
+        bottom: 0;
+    }
+
+    .swoop-background {
+        height: 120%;
+    }
+}

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

@@ -0,0 +1,22 @@
+<template>
+    <div class="container">
+        <div class="swoop-container">
+            <div class="swoop-background"></div>
+            <svg
+                class="swoop"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 1368 94"
+                fill="none"
+            >
+                <path
+                    d="M1368 0C1110 130 278 118 0 0H1368Z"
+                    fill="#EAF5FE"
+                ></path>
+            </svg>
+        </div>
+        <h2 class="section-title">{title}</h2>
+        <div class="video">
+            <dx-vimeo-player video-id={videoId}></dx-vimeo-player>
+        </div>
+    </div>
+</template>

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

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