@salesforcedevs/mrkt-components 0.62.0 → 0.68.0

package/src/modules/mrkt/noCodeSection/noCodeSection.css

@@ -0,0 +1,80 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+    --padding-top: var(--dx-g-spacing-4xl);
+    --margin-top: 80px;
+}
+
+.container {
+    background-color: var(--dx-g-indigo-vibrant-20);
+    display: flex;
+    justify-content: space-between;
+    padding-top: var(--padding-top);
+    padding-left: var(--dx-g-page-padding-horizontal);
+    margin-top: var(--margin-top);
+}
+
+.content {
+    align-self: flex-end;
+    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);
+}
+
+.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: 0;
+}
+
+@media (min-width: 1440px) {
+    .container {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .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/mrkt/noCodeSection/noCodeSection.html

@@ -0,0 +1,14 @@
+<template>
+    <div class="container">
+        <img
+            class="graphic"
+            src="/assets/svg/mrkt-no-code-section-graphic.svg"
+            alt=""
+        />
+        <div class="content">
+            <h3 class="content-title dx-text-heading-3">{title}</h3>
+            <p class="content-body">{body}</p>
+        </div>
+        <img class="image" src={imgSrc} alt={imgAlt} />
+    </div>
+</template>

package/src/modules/mrkt/noCodeSection/noCodeSection.ts

@@ -0,0 +1,8 @@
+import { api, LightningElement } from "lwc";
+
+export default class NoCodeSection extends LightningElement {
+    @api title!: string;
+    @api body!: string;
+    @api imgSrc!: string;
+    @api imgAlt!: string;
+}

package/src/modules/mrkt/sectionHeader/sectionHeader.css

@@ -40,25 +40,39 @@
     );
 }
 
-.img-container {
+.header-img-container {
+    width: 100%;
+    margin-bottom: calc(-1 * var(--dx-g-spacing-xl));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+.header-img {
+    width: 100%;
+    min-width: var(--dx-g-breakpoint-sm);
+}
+
+.page-margin-img-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
 }
 
-.section-header:not(.overlap-images) .img-container {
+.section-header:not(.overlap-images) .page-margin-img-container {
     margin-bottom: var(--image-inset);
 }
 
-.section-header.overlap-images .img-container {
+.section-header.overlap-images .page-margin-img-container {
     position: absolute;
     bottom: calc(100% - var(--image-bottom));
     left: 0;
     z-index: 0;
 }
 
-img {
+.page-margin-img-container img {
     aspect-ratio: var(--image-aspect-ratio);
     width: 350px;
     max-width: 50%;
@@ -102,17 +116,31 @@ dx-icon-badge {
     --dx-c-icon-badge-background-color: white;
 }
 
+@media (min-width: 1500px) {
+    .header-img {
+        padding: 0 var(--dx-g-page-padding-horizontal);
+    }
+}
+
 @media (max-width: 768px) {
     :host {
         --image-width: 50vw;
     }
 
+    .header-img-container {
+        margin-bottom: 0;
+    }
+
     .section-header .title {
         font-size: var(--dx-g-text-2xl);
         letter-spacing: -0.4px;
         line-height: 40px;
     }
 
+    .section-header.has-subtitle .title {
+        margin-bottom: var(--dx-g-spacing-mlg);
+    }
+
     .section-header .subtitle {
         font-size: var(--dx-g-text-lg);
         letter-spacing: -0.1px;
@@ -120,6 +148,12 @@ dx-icon-badge {
     }
 }
 
+@media (max-width: 640px) {
+    .header-img {
+        width: var(--dx-g-breakpoint-sm);
+    }
+}
+
 @media (max-width: 360px) {
     :host {
         --overlap-padding-top: var(--mrkt-c-section-header-padding-top);

package/src/modules/mrkt/sectionHeader/sectionHeader.html

@@ -1,6 +1,9 @@
 <template>
     <div class={className}>
-        <div class="img-container" if:true={hasImages}>
+        <div class="header-img-container" if:true={imgSrc}>
+            <img class="header-img" src={imgSrc} alt="" />
+        </div>
+        <div class="page-margin-img-container" if:true={hasPageMarginGraphics}>
             <img src={imgSrcLeft} alt="" />
             <img src={imgSrcRight} alt="" />
         </div>

package/src/modules/mrkt/sectionHeader/sectionHeader.ts

@@ -4,6 +4,7 @@ import cx from "classnames";
 export default class SectionHeader extends LightningElement {
     @api dark?: boolean;
     @api iconSymbol?: string;
+    @api imgSrc?: string;
     @api imgSrcLeft?: string;
     @api imgSrcRight?: string;
     @api overlapImages?: boolean = false;
@@ -11,7 +12,7 @@ export default class SectionHeader extends LightningElement {
     @api subtitle?: string;
     @api title?: string;
 
-    private get hasImages(): boolean {
+    private get hasPageMarginGraphics(): boolean {
         return !!this.imgSrcLeft && !!this.imgSrcRight;
     }