@salesforcedevs/dx-components 1.3.142 → 1.3.144

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.142",
+    "version": "1.3.144",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "2d361bb1d2275ab3a1f84e3f73603b8c5d4fa6dc"
+    "gitHead": "3a8cebc9c14abbfde89c1716d950d9fa275ecbce"
 }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.css

@@ -374,6 +374,19 @@ a.image-container > img {
     display: block;
 }
 
+/* BUTTONS */
+
+.buttons {
+    display: flex;
+    padding-top: var(--item-spacing);
+    padding-bottom: var(--item-spacing);
+}
+
+dx-button {
+    display: inline-block;
+    padding-right: var(--dx-g-spacing-lg);
+}
+
 /* AUTHORS */
 
 .authors {
@@ -495,6 +508,14 @@ dx-image-and-label {
         line-height: var(--dx-g-spacing-lg);
     }
 
+    .buttons {
+        flex-direction: column;
+    }
+
+    dx-button {
+        padding-bottom: var(--dx-g-spacing-sm);
+    }
+
     .authors {
         padding-top: 0;
     }

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -50,6 +50,27 @@
                     </template>
                 </div>
                 <span class="body dx-text-body-1">{body}</span>
+                <div class="buttons" if:true={hasButtons}>
+                    <dx-button
+                        if:true={ctaPrimaryLabel}
+                        href={ctaPrimaryHref}
+                        icon-symbol={ctaPrimarySymbol}
+                        target={ctaPrimaryTarget}
+                        size="large"
+                    >
+                        {ctaPrimaryLabel}
+                    </dx-button>
+                    <dx-button
+                        if:true={ctaSecondaryLabel}
+                        href={ctaSecondaryHref}
+                        variant="secondary"
+                        icon-symbol={ctaSecondarySymbol}
+                        target={ctaSecondaryTarget}
+                        size="large"
+                    >
+                        {ctaSecondaryLabel}
+                    </dx-button>
+                </div>
                 <div class="slot-container">
                     <slot onslotchange={onSlotChange}></slot>
                 </div>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -11,6 +11,14 @@ export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
     @api labelAsPrimaryHeading: boolean = false;
     @api body!: string;
+    @api ctaPrimaryLabel?: string;
+    @api ctaPrimaryHref?: string;
+    @api ctaPrimarySymbol?: string;
+    @api ctaPrimaryTarget?: string;
+    @api ctaSecondaryLabel?: string;
+    @api ctaSecondaryHref?: string;
+    @api ctaSecondarySymbol?: string;
+    @api ctaSecondaryTarget?: string;
     @api imgSrc?: string;
     @api imgAlt?: string = "Featured content image";
     @api imgPlacement?: "inline" | "below" = "inline";
@@ -69,6 +77,10 @@ export default class FeaturedContentHeader extends LightningElement {
         );
     }
 
+    private get hasButtons() {
+        return this.ctaPrimaryLabel && this.ctaSecondaryLabel;
+    }
+
     private get style() {
         return cx(
             this.backgroundImg &&

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -4,6 +4,8 @@
 .container {
     display: flex;
     flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     padding: 0 var(--dx-g-page-padding-horizontal);
 }
 
@@ -35,8 +37,8 @@
 }
 
 .features-list {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     margin-top: var(--dx-g-spacing-lg);
     gap: var(--dx-g-spacing-md);
 }
@@ -44,10 +46,8 @@
 .feature-item {
     display: flex;
     align-items: center;
-    text-align: left;
     gap: var(--dx-g-spacing-smd);
-    flex-basis: calc(50% - var(--dx-g-spacing-smd));
-    flex-grow: 1;
+    white-space: nowrap;
 }
 
 .feature-item span {
@@ -62,10 +62,6 @@ dx-button {
     margin-top: var(--dx-g-spacing-smd);
 }
 
-img {
-    object-fit: contain;
-}
-
 img.mobile {
     display: none;
 }
@@ -112,6 +108,6 @@ img.mobile {
 
 @media screen and (max-width: 640px) {
     .features-list {
-        flex-direction: column;
+        grid-template-columns: 1fr;
     }
 }