@salesforcedevs/dx-components 1.3.242-alpha.1 → 1.3.242-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.242-alpha.1",
+    "version": "1.3.242-alpha.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -3,6 +3,7 @@
 
 :host {
     --dx-c-padding: 0 var(--dx-g-page-padding-horizontal);
+    --dx-c-container-justify-content: left;
 }
 
 dx-formatted-rich-text {
@@ -18,6 +19,7 @@ dx-formatted-rich-text {
     display: flex;
     flex-direction: row;
     padding: var(--dx-c-padding);
+    justify-content: var(--dx-c-container-justify-content);
     overflow: hidden;
 }
 
@@ -75,6 +77,29 @@ img.mobile {
     min-width: 1024px;
 }
 
+.multiple-image-container {
+    position: relative;
+    max-width: 646px;
+}
+
+.image-one {
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 418px;
+    height: 515px;
+}
+
+.image-two {
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 341px;
+    height: 339px;
+}
+
 .text-container > *:not(:last-child) {
     margin-bottom: var(--dx-g-spacing-smd);
 }
@@ -135,6 +160,10 @@ svg {
         display: block;
         margin-top: var(--dx-g-spacing-3xl);
     }
+
+    .multiple-image-container {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 768px) {

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

@@ -49,7 +49,11 @@
                 />
             </div>
         </div>
-        <div class="image-container">
+        <div lwc:if={multipleImages} class="multiple-image-container">
+            <img class="image-one" src={imgSrcOne} alt="" />
+            <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="" />
         </div>

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

@@ -15,14 +15,17 @@ export default class MainContentHeader extends LightningElement {
     @api ctaLabelSecondary?: string;
     @api ctaHref!: string;
     @api ctaHrefSecondary?: string;
-    @api imgSrc!: string;
-    @api imgSrcMobile!: string;
+    @api imgSrc?: string;
+    @api imgSrcMobile?: string;
     @api ctaTarget?: string | null = null;
     @api ctaTargetSecondary?: string | null = null;
     @api backgroundGradientColor?: string;
-    @api backgroundGradientDark: boolean = false;
     @api backgroundImage?: string;
-    @api hasSwoop: boolean = false;
+    @api backgroundGradientDark = false;
+    @api hasSwoop = false;
+    @api multipleImages = false;
+    @api imgSrcOne?: string;
+    @api imgSrcTwo?: string;
 
     private get style() {
         return cx(