@salesforcedevs/dx-components 1.3.196 → 1.3.198

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.196",
+    "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": "3ca1796a050dd87c8083f73e41d8cb0cfb15328d"
+    "gitHead": "b3dd8e55be2d535c10e2ea0420c251d4ec975fdf"
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -26,6 +26,9 @@ prism.languages.gtl = prism.languages.extend(
     prism.languages.handlebars
 );
 
+// LWC
+prism.languages.lwc = prism.languages.extend("jsx");
+
 // Used for remove enclosing <pre> tag's (if occurs)
 const preTagRegexp: RegExp = /^<pre.*?>(.*)<\/pre>$/is;
 
@@ -80,7 +83,8 @@ export default class CodeBlock extends LightningElement {
         { label: "DataWeave", id: "dataweave" },
         { label: "AMPScript", id: "ampscript" },
         { label: "SSJS", id: "ssjs" },
-        { label: "GTL", id: "gtl" }
+        { label: "GTL", id: "gtl" },
+        { label: "LWC", id: "lwc" }
     ];
 
     connectedCallback() {
@@ -94,9 +98,10 @@ export default class CodeBlock extends LightningElement {
     set codeBlock(value: string) {
         this._codeBlockRendered = false;
         let match;
-        this._codeBlock = ((match = preTagRegexp.exec(value.trim())) === null
-            ? value.trim()
-            : match[1]
+        this._codeBlock = (
+            (match = preTagRegexp.exec(value.trim())) === null
+                ? value.trim()
+                : match[1]
         ).trim();
     }
 
@@ -243,9 +248,8 @@ export default class CodeBlock extends LightningElement {
         });
 
         try {
-            const snippetContainer: HTMLElement | null = this.template.querySelector(
-                ".code-block-content"
-            );
+            const snippetContainer: HTMLElement | null =
+                this.template.querySelector(".code-block-content");
             if (snippetContainer && snippetContainer.textContent) {
                 await navigator.clipboard.writeText(
                     snippetContainer.textContent

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,