@salesforcedevs/dx-components 1.3.199-wires-update1 → 1.3.199-wires-update2

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.199-wires-update1",
+    "version": "1.3.199-wires-update2",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "16.x"
+        "node": ">=16.x"
     },
     "publishConfig": {
         "access": "public"
@@ -40,5 +40,8 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
+    },
+    "volta": {
+        "node": "16.19.1"
     }
 }

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

@@ -26,9 +26,6 @@ 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;
 
@@ -83,8 +80,7 @@ export default class CodeBlock extends LightningElement {
         { label: "DataWeave", id: "dataweave" },
         { label: "AMPScript", id: "ampscript" },
         { label: "SSJS", id: "ssjs" },
-        { label: "GTL", id: "gtl" },
-        { label: "LWC", id: "lwc" }
+        { label: "GTL", id: "gtl" }
     ];
 
     connectedCallback() {
@@ -98,10 +94,9 @@ 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();
     }
 
@@ -248,8 +243,9 @@ 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,12 +96,6 @@
     );
 }
 
-.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"
-            lwc:if={topGraphic}
+            if:true={topGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"
@@ -26,38 +26,21 @@
             </g>
         </svg>
 
-        <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 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>
         <div part="content" class="content">
             <slot></slot>
@@ -65,7 +48,7 @@
 
         <svg
             class="background-graphic background-graphic-bottom"
-            lwc:if={bottomGraphic}
+            if:true={bottomGraphic}
             preserveAspectRatio="none"
             width="1438px"
             height="83px"

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

@@ -17,7 +17,6 @@ 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;
@@ -44,21 +43,13 @@ export default class Section extends LightningElement {
     }
 
     private get headingClassName() {
-        return cx(
-            "heading",
-            `dx-text-display-${this.headingLevel}`,
-            this.ctaBtnInline && "cta-inline"
-        );
+        return cx("heading", `dx-text-display-${this.headingLevel}`);
     }
 
     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,