@salesforcedevs/dx-components 1.3.197 → 1.3.198

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.197",
+    "version": "1.3.198",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -41,5 +41,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "d43e7494e5566a25cc3301910b10337c69763c51"
+    "gitHead": "b3dd8e55be2d535c10e2ea0420c251d4ec975fdf"
 }

package/src/modules/dx/section/section.css

@@ -96,6 +96,12 @@
     );
 }
 
+.cta-inline {
+    display: flex;
+    justify-content: space-between;
+    max-width: unset;
+}
+
 /* sections with a swoop and center alignment should not left align as it encroaches on the graphic */
 .section.align-center.graphic-top .text {
     text-align: center;

package/src/modules/dx/section/section.html

@@ -2,7 +2,7 @@
     <div class={className} style={style} part="container">
         <svg
             class="background-graphic background-graphic-top"
-            if:true={topGraphic}
+            lwc:if={topGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"
@@ -26,21 +26,38 @@
             </g>
         </svg>
 
-        <div part="text" class="text" if:true={hasText}>
-            <span class="label dx-text-display-8" if:true={label}>{label}</span>
-            <h2 class={headingClassName} if:true={title}>{title}</h2>
-            <span class={subtitleClassName} if:true={subtitle}>{subtitle}</span>
-            <dx-button
-                class="cta"
-                if:true={ctaLabel}
-                href={ctaHref}
-                variant={ctaBtnVariant}
-                icon-symbol={ctaBtnSymbol}
-                target={ctaBtnTarget}
-                onclick={handleLabelClick}
-            >
-                {ctaLabel}
-            </dx-button>
+        <div part="text" class="text" lwc:if={hasText}>
+            <span class="label dx-text-display-8" lwc:if={label}>{label}</span>
+            <h2 class={headingClassName} lwc:if={title}>
+                {title}
+                <template lwc:if={ctaBtnInline}>
+                    <dx-button
+                        class="cta"
+                        lwc:if={ctaLabel}
+                        href={ctaHref}
+                        variant={ctaBtnVariant}
+                        icon-symbol={ctaBtnSymbol}
+                        target={ctaBtnTarget}
+                        onclick={handleLabelClick}
+                    >
+                        {ctaLabel}
+                    </dx-button>
+                </template>
+            </h2>
+            <span class={subtitleClassName} lwc:if={subtitle}>{subtitle}</span>
+            <template lwc:if={ctaNotInline}>
+                <dx-button
+                    class="cta"
+                    lwc:if={ctaLabel}
+                    href={ctaHref}
+                    variant={ctaBtnVariant}
+                    icon-symbol={ctaBtnSymbol}
+                    target={ctaBtnTarget}
+                    onclick={handleLabelClick}
+                >
+                    {ctaLabel}
+                </dx-button>
+            </template>
         </div>
         <div part="content" class="content">
             <slot></slot>
@@ -48,7 +65,7 @@
 
         <svg
             class="background-graphic background-graphic-bottom"
-            if:true={bottomGraphic}
+            lwc:if={bottomGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"

package/src/modules/dx/section/section.ts

@@ -17,6 +17,7 @@ export default class Section extends LightningElement {
     @api ctaBtnVariant?: string;
     @api ctaBtnSymbol?: string;
     @api ctaBtnTarget?: string = "_self";
+    @api ctaBtnInline?: boolean = false;
     @api topGraphic: boolean = false;
     @api graphicOverlap: boolean = false;
     @api bottomGraphic: boolean = false;
@@ -43,13 +44,21 @@ export default class Section extends LightningElement {
     }
 
     private get headingClassName() {
-        return cx("heading", `dx-text-display-${this.headingLevel}`);
+        return cx(
+            "heading",
+            `dx-text-display-${this.headingLevel}`,
+            this.ctaBtnInline && "cta-inline"
+        );
     }
 
     private get hasText(): boolean {
         return !!(this.title || this.label || this.subtitle);
     }
 
+    private get ctaNotInline(): boolean {
+        return !this.ctaBtnInline;
+    }
+
     private handleLabelClick(e: Event) {
         track(e.target!, "custEv_ctaLinkClick", {
             click_text: this.ctaLabel,