@salesforcedevs/dx-components 1.18.2 → 1.18.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.18.2",
+    "version": "1.18.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,5 @@
     "volta": {
         "node": "20.19.0"
     },
-    "gitHead": "d8f0ab7fca9e3fc74c111d58c30d469e000963fa"
+    "gitHead": "11c6e3dcc70682d872eff8fdbbb734d80dbed953"
 }

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -74,9 +74,17 @@ img.desktop {
 
 img.mobile {
     display: none;
+}
+
+img.mobile.top-img {
     min-width: 1024px;
 }
 
+img.mobile.center-img {
+    min-width: 0;
+    padding-bottom: 24px;
+}
+
 .multiple-image-container {
     position: relative;
     max-width: 646px;
@@ -118,6 +126,15 @@ svg {
     display: flex;
 }
 
+.center-img {
+    align-self: center;
+    min-width: 0 !important;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+    padding-right: 40px;
+}
+
 @media screen and (min-width: 1024px) {
     .text-container {
         text-align: left;
@@ -166,6 +183,17 @@ svg {
     }
 }
 
+@media screen and (max-width: 1024px) {
+    img.center-img {
+        padding-left: 20px;
+        padding-right: 20px;
+        width: calc(100% - 40px);
+        min-width: 0;
+        box-sizing: border-box;
+        max-width: 100%;
+    }
+}
+
 @media screen and (max-width: 768px) {
     .body,
     .subtitle {

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -54,8 +54,8 @@
             <img class="image-two" src={imgSrcTwo} alt="" />
         </div>
         <div lwc:else class="image-container">
-            <img class="desktop" src={imgSrc} alt="" />
-            <img class="mobile" src={imgSrcMobile} alt="" />
+            <img class={desktopImgClass} src={imgSrc} alt="" />
+            <img class={mobileImgClass} src={imgSrcMobile} alt="" />
         </div>
     </div>
     <template lwc:if={hasSwoop}>

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -20,20 +20,32 @@ export default class MainContentHeader extends LightningElement {
     @api ctaTarget?: string | null = null;
     @api ctaTargetSecondary?: string | null = null;
     @api backgroundGradientColor?: string;
+    @api backgroundGradientTarget?: string;
     @api backgroundImage?: string;
     @api backgroundGradientDark = false;
     @api hasSwoop = false;
     @api multipleImages = false;
     @api imgSrcOne?: string;
     @api imgSrcTwo?: string;
+    @api centerImg?: boolean;
+
+    public get desktopImgClass() {
+        return cx("desktop", this.centerImg ? "center-img" : "top-img");
+    }
+
+    public get mobileImgClass() {
+        return cx("mobile", this.centerImg ? "center-img" : "top-img");
+    }
 
     private get style() {
         return cx(
             this.backgroundGradientColor &&
-                !this.backgroundGradientDark &&
-                `background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
-            this.backgroundGradientDark &&
-                `background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`,
+                `background: linear-gradient(180deg, var(--dx-g-${
+                    this.backgroundGradientColor
+                }) 0%, var(--dx-g-${
+                    this.backgroundGradientTarget ||
+                    this.backgroundGradientColor
+                }) 100%);`,
             this.backgroundImage &&
                 `background: #260F8F url('${this.backgroundImage}') no-repeat bottom; background-size: cover;`
         );