@salesforcedevs/dx-components 1.3.141 → 1.3.143

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.141",
+    "version": "1.3.143",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "673f1d0f4e37c870b283ecc5ae8e7c361199ea01"
+    "gitHead": "f065b31a8ffe11c4b057974cf753fd6ae35c736a"
 }

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

@@ -109,3 +109,9 @@ img.mobile {
         line-height: var(--dx-g-text-4xl);
     }
 }
+
+@media screen and (max-width: 640px) {
+    .features-list {
+        flex-direction: column;
+    }
+}