@salesforcedevs/dx-components 1.3.134 → 1.3.136

package/lwc.config.json

@@ -68,6 +68,7 @@
         "dx/scrollManager",
         "dx/searchResults",
         "dx/section",
+        "dx/sectionBanner",
         "dx/sectionSignup",
         "dx/sectionSmall",
         "dx/select",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.134",
+    "version": "1.3.136",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "b60c5fed152e5fe403577993093487128c5ea88b"
+    "gitHead": "c076bf146988d61bedc4710e6443a18d7e27b1ca"
 }

package/src/assets/svg/dx-section-banner-graphic-1.svg

@@ -0,0 +1,23 @@
+<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/dx/faq/faq.css

@@ -33,6 +33,7 @@ details:not(:first-of-type) {
 
 .container {
     max-width: 840px;
+    margin: 0 auto;
 }
 
 .faq-title {

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -12,7 +12,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
-    padding: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-4xl) 0;
+    padding: var(--dx-g-spacing-4xl) 0;
     min-height: 460px;
     text-align: left;
     background-position: center;

package/src/modules/dx/sectionBanner/sectionBanner.css

@@ -0,0 +1,99 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+    --padding-top: var(--dx-g-spacing-4xl);
+    --margin-top: 80px;
+    --dx-c-section-banner-content-align: flex-end;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding-top: var(--padding-top);
+    padding-left: var(--dx-g-page-padding-horizontal);
+}
+
+.top-margin {
+    margin-top: var(--margin-top);
+}
+
+.content {
+    align-self: var(--dx-c-section-banner-content-align);
+    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);
+}
+
+.content-body-container {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-md);
+}
+
+.quote-content {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.foot-note {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.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/dx/sectionBanner/sectionBanner.html

@@ -0,0 +1,27 @@
+<template>
+    <div class={containerStyle} style={style}>
+        <img
+            if:false={hideTopGraphic}
+            class="graphic"
+            src="/assets/svg/dx-section-banner-graphic-1.svg"
+            alt=""
+        />
+        <div class="content">
+            <h3 if:true={title} class="content-title dx-text-display-4">
+                {title}
+            </h3>
+            <div class="content-body-container">
+                <img if:true={hasQuote} src="/assets/svg/quotes.svg" alt="" />
+                <div class={quoteContentStyle}>
+                    <p class={contentBodyStyle}>{body}</p>
+                    <p if:true={footNote} class="foot-note dx-text-display-7">
+                        <dx-formatted-rich-text
+                            value={footNote}
+                        ></dx-formatted-rich-text>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <img class="image" src={imgSrc} alt={imgAlt} />
+    </div>
+</template>

package/src/modules/dx/sectionBanner/sectionBanner.ts

@@ -0,0 +1,34 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "dxUtils/css";
+
+export default class SectionBanner extends LightningElement {
+    @api title!: string;
+    @api body!: string;
+    @api footNote?: string;
+    @api imgSrc!: string;
+    @api imgAlt!: string;
+    @api hideTopGraphic = false;
+    @api backgroundColor = "indigo-vibrant-20";
+    @api hasQuote = false;
+
+    get containerStyle() {
+        return cx("container", !this.hideTopGraphic && "top-margin");
+    }
+
+    get quoteContentStyle() {
+        return cx(this.hasQuote && "quote-content");
+    }
+
+    get contentBodyStyle() {
+        return cx(this.title ? "content-body" : "dx-text-display-6");
+    }
+
+    get style() {
+        const backgroundColor = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+
+        return `${backgroundColor}`;
+    }
+}