@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,83 +1,119 @@
 <template>
-    <div class={classname} part="container">
-        <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
-        <div class="main-content">
+    <div class={classname} part="container" style={style}>
+        <div class="container-layout">
+            <template if:true={labelAsPrimaryHeading}>
+                <h1 if:true={label} class="label dx-text-heading-4">{label}</h1>
+            </template>
+            <template if:false={labelAsPrimaryHeading}>
+                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+            </template>
+            <div class="featured-content-main-content">
+                <template if:false={labelAsPrimaryHeading}>
+                    <h1 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h1>
+                </template>
+                <template if:true={labelAsPrimaryHeading}>
+                    <h2 class="title dx-text-heading-2">
+                        <a
+                            class="title-link"
+                            if:true={href}
+                            href={href}
+                            target={target}
+                            onmouseenter={setLinkHovered}
+                            onmouseleave={setLinkInactive}
+                        >
+                            {title}
+                        </a>
+                        <template if:false={href}>{title}</template>
+                    </h2>
+                </template>
+                <div class="authors" if:true={authors}>
+                    <template for:each={authors} for:item="author">
+                        <dx-image-and-label
+                            key={author.key}
+                            img-src={author.imgSrc}
+                            img-size={author.imgSize}
+                            label={author.name}
+                            href={author.href}
+                        ></dx-image-and-label>
+                    </template>
+                </div>
+                <span class="body dx-text-body-1">{body}</span>
+                <div class="slot-container">
+                    <slot onslotchange={onSlotChange}></slot>
+                </div>
+                <div
+                    class={backgroundImageClass}
+                    if:true={hasBackgroundImage}
+                    lwc:dom="manual"
+                ></div>
+            </div>
+            <div if:true={hasPlainImage} class="image-container">
+                <img src={imgSrc} alt={imgAlt} />
+            </div>
             <a
-                class="dx-text-heading-2 title-link"
-                if:true={href}
+                if:true={hasLinkedImage}
                 href={href}
                 target={target}
+                class="image-container"
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
             >
-                {title}
+                <img src={imgSrc} alt={imgAlt} />
             </a>
-            <span class="dx-text-heading-2" if:false={href}>{title}</span>
-            <div class="authors" if:true={authors}>
-                <template for:each={authors} for:item="author">
-                    <dx-image-and-label
-                        key={author.key}
-                        img-src={author.imgSrc}
-                        img-size={author.imgSize}
-                        label={author.name}
-                        href={author.href}
-                    ></dx-image-and-label>
-                </template>
-            </div>
-            <span class="dx-text-body-1">{body}</span>
-            <div class="slot-container">
-                <slot onslotchange={onSlotChange}></slot>
-            </div>
-            <div
-                class={backgroundImageClass}
-                if:true={hasBackgroundImage}
-                lwc:dom="manual"
-            ></div>
+            <template if:false={noSwoop}>
+                <svg
+                    class="swoop-silhouette"
+                    width="1920px"
+                    height="331px"
+                    viewBox="0 0 1920 331"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="none"
+                >
+                    <defs>
+                        <path
+                            d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                            id="path-1"
+                        ></path>
+                    </defs>
+                    <g
+                        id="Documentation-landing-page"
+                        stroke="none"
+                        stroke-width="1"
+                        fill="none"
+                        fill-rule="evenodd"
+                    >
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use
+                            id="Combined-Shape"
+                            fill="#FFFFFF"
+                            xlink:href="#path-1"
+                        ></use>
+                    </g>
+                </svg>
+            </template>
         </div>
-        <div if:true={hasPlainImage} class="image-container">
-            <img src={imgSrc} alt={imgAlt} />
+        <div class="blue-circle" if:true={hasIcon}>
+            <dx-icon
+                class="icon"
+                size="2xlarge"
+                symbol={icon}
+                sprite="salesforcebrand"
+            ></dx-icon>
         </div>
-        <a
-            if:true={hasLinkedImage}
-            href={href}
-            target={target}
-            class="image-container"
-            onmouseenter={setLinkHovered}
-            onmouseleave={setLinkInactive}
-        >
-            <img src={imgSrc} alt={imgAlt} />
-        </a>
-        <svg
-            class="swoop-silhouette"
-            width="1920px"
-            height="331px"
-            viewBox="0 0 1920 331"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="none"
-        >
-            <defs>
-                <path
-                    d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                    id="path-1"
-                ></path>
-            </defs>
-            <g
-                id="Documentation-landing-page"
-                stroke="none"
-                stroke-width="1"
-                fill="none"
-                fill-rule="evenodd"
-            >
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use
-                    id="Combined-Shape"
-                    fill="#FFFFFF"
-                    xlink:href="#path-1"
-                ></use>
-            </g>
-        </svg>
     </div>
 </template>

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

@@ -1,13 +1,14 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
 import { ImageAndLabel } from "../imageAndLabel";
 import svgs from "./svgs";
 
 export default class FeaturedContentHeader extends LightningElement {
     @api label?: string | null = null;
+    @api labelAsPrimaryHeading: boolean = false;
     @api body!: string;
     @api imgSrc?: string;
     @api imgAlt?: string = "Featured content image";
@@ -16,28 +17,39 @@ export default class FeaturedContentHeader extends LightningElement {
     @api href?: string;
     @api target?: string | null = null;
     @api title!: string;
-    @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api backgroundImg?: string;
+    @api backgroundImgId?:
+        | "trees"
+        | "codey"
+        | "blog"
+        | "moon"
+        | "trial"
+        | "big-moon"
+        | null = null;
+    @api noSwoop: boolean = false;
+    @api icon: string = "";
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
     private isLinkHovered: boolean = false;
 
+    // ! Move this map away from the component and probably the filter too.
     @api
     get authors() {
-        if (this._authors) {
-            return this._authors!.map((author, index) => {
-                return {
-                    ...author,
-                    imgSrc: author.avatar_urls["24"],
-                    key: index
-                };
-            });
+        if (this._authors && this._authors.length) {
+            return this._authors!.map((author, index) => ({
+                ...author,
+                imgSrc: author.avatar_urls?.["24"] || author.imgSrc,
+                key: index
+            }));
         }
         return undefined;
     }
 
     set authors(value: any) {
-        this._authors = toJson(value);
+        this._authors = (toJson(value) as Array<any>)?.filter(
+            (author) => author.name
+        );
     }
 
     private get classname() {
@@ -47,7 +59,14 @@ export default class FeaturedContentHeader extends LightningElement {
             this.dark && "variant_dark",
             this.isLinkHovered && "link-hovered",
             !this.isSlotEmpty && "has-slotted",
-            this.backgroundImg && `custom-bg-${this.backgroundImg}`
+            this.backgroundImgId && `custom-bg-${this.backgroundImgId}`
+        );
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundImg &&
+                `--background-image: url(${this.backgroundImg});`
         );
     }
 
@@ -60,13 +79,17 @@ export default class FeaturedContentHeader extends LightningElement {
     }
 
     private get hasBackgroundImage() {
-        return this.backgroundImg !== null;
+        return this.backgroundImgId !== null;
+    }
+
+    private get hasIcon(): boolean {
+        return this.icon !== "" && this.backgroundImgId === "big-moon";
     }
 
     private get backgroundImageClass() {
         return cx(
             "bg-image-container",
-            this.backgroundImg && `bg-${this.backgroundImg}`
+            this.backgroundImgId && `bg-${this.backgroundImgId}`
         );
     }
 
@@ -85,13 +108,13 @@ export default class FeaturedContentHeader extends LightningElement {
     renderedCallback(): void {
         // Setting the svgs with innerHTML prevents their IDs from being rewritten
         // which is necessary to preserve the svg masking and other effects
-        if (this.backgroundImg && svgs[this.backgroundImg]) {
+        if (this.backgroundImgId && svgs[this.backgroundImgId]) {
             const bgSvg = this.template.querySelector(".bg-image-container");
             if (bgSvg) {
                 // eslint-disable-next-line @lwc/lwc/no-inner-html
                 bgSvg.innerHTML = `
-                    ${svgs[this.backgroundImg].desktop}
-                    ${svgs[this.backgroundImg].mobile}
+                    ${svgs[this.backgroundImgId].desktop}
+                    ${svgs[this.backgroundImgId].mobile}
                 `;
             }
         }