@salesforcedevs/dx-components 1.3.242-alpha.0 → 1.3.242-alpha.2

package/package.json

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

package/src/modules/dx/grid/grid.css

@@ -1,7 +1,3 @@
-:host {
-    --dx-c-grid-justify-items: stretch;
-}
-
 .container {
     --one-third-width: calc((100% - 2 * var(--dx-g-page-grid-gap)) / 3);
 
@@ -9,7 +5,7 @@
     gap: var(--dx-g-page-grid-gap);
     grid-template-rows: repeat(auto-fill, 1fr);
     grid-template-columns: 1fr;
-    justify-items: var(--dx-c-grid-justify-items);
+    justify-items: stretch;
     align-items: stretch;
     position: relative;
 }

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

@@ -5,6 +5,15 @@
     --dx-c-padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
+dx-formatted-rich-text {
+    --dx-c-formatted-rich-text-inline-link-color: var(
+        --dx-g-cloud-blue-vibrant-95
+    );
+    --dx-c-formatted-rich-text-inline-link-color-hover: var(
+        --dx-g-blue-vibrant-70
+    );
+}
+
 .container {
     display: flex;
     flex-direction: row;
@@ -66,6 +75,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);
 }
@@ -80,6 +112,16 @@ svg {
     bottom: 60px;
 }
 
+.foot-note-container {
+    display: flex;
+}
+
+@media screen and (min-width: 1024px) {
+    .text-container {
+        text-align: left;
+    }
+}
+
 @media screen and (max-width: 1024px) {
     .container {
         flex-direction: column;
@@ -91,12 +133,15 @@ svg {
 
     .text-container {
         align-items: center;
-        text-align: center;
         padding-top: var(--dx-g-spacing-4xl);
         padding-bottom: 0;
         min-height: unset;
     }
 
+    .button-container {
+        justify-content: center;
+    }
+
     .text-container > * {
         max-width: 700px;
     }
@@ -113,6 +158,10 @@ svg {
         display: block;
         margin-top: var(--dx-g-spacing-3xl);
     }
+
+    .multiple-image-container {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 768px) {
@@ -127,3 +176,20 @@ svg {
         line-height: var(--dx-g-text-4xl);
     }
 }
+@media screen and (min-width: 479px) and (max-width: 1024px) {
+    .text-container {
+        text-align: center;
+    }
+}
+
+@media screen and (min-width: 479px) {
+    .foot-note-image {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 479px) {
+    .foot-note-image {
+        object-fit: contain;
+    }
+}

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

@@ -6,34 +6,54 @@
             <span lwc:if={subtitle} class="subtitle dx-text-display-7">
                 {subtitle}
             </span>
-            <span lwc:if={footNote} class="dx-text-body-4">
-                <dx-formatted-rich-text
-                    value={footNote}
-                ></dx-formatted-rich-text>
-            </span>
-            <div class="button-container">
-                <dx-button
-                    onclick={onCtaClick}
-                    href={ctaHref}
-                    target={ctaTarget}
-                    size="large"
-                >
-                    {ctaLabel}
-                </dx-button>
-                <dx-button
-                    class="secondary-button"
-                    lwc:if={ctaLabelSecondary}
-                    onclick={onCtaClickSecondary}
-                    href={ctaHrefSecondary}
-                    target={ctaTargetSecondary}
-                    size="large"
-                    variant="secondary"
-                >
-                    {ctaLabelSecondary}
-                </dx-button>
+            <div class="foot-note-container">
+                <div class="foot-note-text-button-container">
+                    <span
+                        lwc:if={footNote}
+                        class="dx-text-body-4"
+                        style={footNoteStyle}
+                    >
+                        <dx-formatted-rich-text
+                            value={footNote}
+                        ></dx-formatted-rich-text>
+                    </span>
+                    <div class="button-container">
+                        <dx-button
+                            onclick={onCtaClick}
+                            href={ctaHref}
+                            target={ctaTarget}
+                            size="large"
+                        >
+                            {ctaLabel}
+                        </dx-button>
+                        <dx-button
+                            class="secondary-button"
+                            lwc:if={ctaLabelSecondary}
+                            onclick={onCtaClickSecondary}
+                            href={ctaHrefSecondary}
+                            target={ctaTargetSecondary}
+                            size="large"
+                            variant="secondary"
+                        >
+                            {ctaLabelSecondary}
+                        </dx-button>
+                    </div>
+                </div>
+                <img
+                    lwc:if={footNoteImage}
+                    class="foot-note-image"
+                    src={footNoteImage}
+                    alt={footNoteImageAlt}
+                    width={footNoteImageWidth}
+                    height={footNoteImageHeight}
+                />
             </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

@@ -7,18 +7,25 @@ export default class MainContentHeader extends LightningElement {
     @api subtitle?: string;
     @api body!: string;
     @api footNote?: string;
+    @api footNoteImage?: string;
+    @api footNoteImageAlt?: string;
+    @api footNoteImageHeight?: string;
+    @api footNoteImageWidth?: string;
     @api ctaLabel!: string;
     @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(
@@ -39,6 +46,10 @@ export default class MainContentHeader extends LightningElement {
         );
     }
 
+    private get footNoteStyle() {
+        return cx(this.backgroundGradientDark && "color: white;");
+    }
+
     private onCtaClick(e: Event) {
         if (e.currentTarget) {
             track(e.currentTarget, "custEv_ctaButtonClick", {