@salesforcedevs/dx-components 1.3.323-alpha.0 → 1.3.324-alpha

package/src/modules/dx/emptyState/emptyState.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import { EmptyStateSize } from "typings/custom";
 
 export default class EmptyState extends LightningElement {
-    @api title: string = "";
+    @api header: string = "";
     @api subtitle?: string | null = null;
     @api body?: string | null = null;
     @api size?: EmptyStateSize = "large";

package/src/modules/dx/faq/faq.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <h2 class="faq-title dx-text-display-4">{title}</h2>
+        <h2 class="faq-title dx-text-display-4">{header}</h2>
         <div class="faq-content" part="content">
             <template iterator:it={options}>
                 <details key={it.value.title} open={it.first}>

package/src/modules/dx/faq/faq.ts

@@ -2,7 +2,7 @@ import { LightningElement, api } from "lwc";
 import { toJson } from "dxUtils/normalizers";
 
 export default class Faq extends LightningElement {
-    @api title!: string;
+    @api header!: string;
 
     @api
     get options() {

package/src/modules/dx/feature/feature.html

@@ -2,7 +2,7 @@
     <section class={sectionClass}>
         <div class="description">
             <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
-            <h3 class="dx-text-display-4">{title}</h3>
+            <h3 class="dx-text-display-4">{header}</h3>
             <div class="body dx-text-body-2">
                 <slot></slot>
             </div>
@@ -21,14 +21,14 @@
             <img
                 class="image-display"
                 src="https://a.sfdcstatic.com/developer-website/images/featured-demo-art-blank.svg"
-                alt={title}
+                alt={header}
             />
             <div class="image-container">
-                <img src={imageSrc} alt={title} />
+                <img src={imageSrc} alt={header} />
             </div>
         </div>
         <div if:false={isDisplay} class="image">
-            <img src={imageSrc} alt={title} />
+            <img src={imageSrc} alt={header} />
         </div>
     </section>
 </template>

package/src/modules/dx/feature/feature.ts

@@ -3,7 +3,7 @@ import { track } from "dxUtils/analytics";
 
 export default class Feature extends LightningElement {
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api imageSrc!: string;
     @api buttonHref: string | null = null;
     @api buttonLabel: string | null = null;
@@ -36,7 +36,7 @@ export default class Feature extends LightningElement {
     handleClick(event: Event) {
         const payload = {
             click_text: this.buttonLabel,
-            element_title: this.title,
+            element_title: this.header,
             click_url: this.buttonHref,
             element_type: "button",
             content_category: "cta"

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

@@ -18,9 +18,9 @@
                             onmouseenter={setLinkHovered}
                             onmouseleave={setLinkInactive}
                         >
-                            {title}
+                            {header}
                         </a>
-                        <template if:false={href}>{title}</template>
+                        <template if:false={href}>{header}</template>
                     </h1>
                 </template>
                 <template if:true={labelAsPrimaryHeading}>
@@ -33,9 +33,9 @@
                             onmouseenter={setLinkHovered}
                             onmouseleave={setLinkInactive}
                         >
-                            {title}
+                            {header}
                         </a>
-                        <template if:false={href}>{title}</template>
+                        <template if:false={href}>{header}</template>
                     </h2>
                 </template>
                 <div class="authors" if:true={authors}>
@@ -121,7 +121,7 @@
                         </mask>
                         <use
                             id="Combined-Shape"
-                            fill="#FFFFFF"
+                            fill={swoopUnderColor}
                             xlink:href="#path-1"
                         ></use>
                     </g>

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

@@ -24,7 +24,7 @@ export default class FeaturedContentHeader extends LightningElement {
     @api dark: boolean = false;
     @api href?: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api backgroundImg?: string;
     @api backgroundImgId:
         | "trees"
@@ -36,6 +36,7 @@ export default class FeaturedContentHeader extends LightningElement {
         | null = null;
     @api noSwoop: boolean = false;
     @api icon: string = "";
+    @api swoopUnderColor: string = "#FFFFFF";
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;
@@ -215,9 +216,9 @@ export default class FeaturedContentHeader extends LightningElement {
         }
 
         track(event.target!, trackEvent, {
-            media_name: this.title,
+            media_name: this.header,
             media_action: action,
-            media_episode: this.title.split(":")[0],
+            media_episode: this.header.split(":")[0],
             media_percentage_played: percentagePlayed,
             media_seconds_played: timePlayed,
             media_type: "podcast"

package/src/modules/dx/featuresList/featuresList.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <h2 if:true={title} class="dx-text-display-4">{title}</h2>
+        <h2 if:true={header} class="dx-text-display-4">{header}</h2>
         <ul>
             <template for:each={options} for:item="option">
                 <li key={option.id} class="option">

package/src/modules/dx/featuresList/featuresList.ts

@@ -7,7 +7,7 @@ import { toJson } from "dxUtils/normalizers";
  */
 
 export default class FeaturesList extends LightningElement {
-    @api title!: string;
+    @api header!: string;
 
     @api get options(): Array<FeatureItem> {
         return this._options;

package/src/modules/dx/featuresListHeader/featuresListHeader.ts

@@ -6,7 +6,7 @@ import { toDxColor } from "dxUtils/css";
 
 export default class FeaturesListHeader extends LightningElement {
     private _displayTitle: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api subtitle?: string;
     @api ctaLabel!: string;
     @api ctaLabelSecondary?: string;
@@ -46,7 +46,7 @@ export default class FeaturesListHeader extends LightningElement {
     get displayTitle() {
         return typeof this._displayTitle === "string"
             ? this._displayTitle
-            : this.title;
+            : this.header;
     }
     set displayTitle(value: string | null) {
         this._displayTitle = value;
@@ -69,12 +69,12 @@ export default class FeaturesListHeader extends LightningElement {
                 click_text: this.ctaLabel,
                 click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
-                element_title: this.title,
+                element_title: this.header,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
-                element_title: this.title,
+                element_title: this.header,
                 click_url: `${window.location.origin}${this.ctaHref}`,
                 element_type: "link",
                 content_category: "cta"
@@ -88,12 +88,12 @@ export default class FeaturesListHeader extends LightningElement {
                 click_text: this.ctaLabelSecondary,
                 click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
-                element_title: this.title,
+                element_title: this.header,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
-                element_title: this.title,
+                element_title: this.header,
                 click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "link",
                 content_category: "cta"

package/src/modules/dx/filterMenu/filterMenu.html

@@ -1,7 +1,7 @@
 <template>
     <form class="container">
         <span class="title-group-main title-group" onclick={dropdownToggle}>
-            <p class="filter-menu-title">{title}</p>
+            <p class="filter-menu-title">{header}</p>
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="28"

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -8,7 +8,7 @@ interface Option {
 }
 export default class FilterMenu extends LightningElement {
     @api name: string = "";
-    @api title: string = "Filter Menu";
+    @api header: string = "Filter Menu";
     @api variant: string = "base";
     @api filtersDatesLoading?: boolean;
 
@@ -80,9 +80,10 @@ export default class FilterMenu extends LightningElement {
 
     private setIntedeterminateStatus(checkbox: any, value: boolean) {
         if ("isYear" in checkbox.value && !checkbox.value.isYear) {
-            const yearCheckBox: any = checkbox.parentElement.parentElement.parentElement.querySelector(
-                ".checkbox-year"
-            );
+            const yearCheckBox: any =
+                checkbox.parentElement.parentElement.parentElement.querySelector(
+                    ".checkbox-year"
+                );
             yearCheckBox.indeterminate = value;
         }
     }

package/src/modules/dx/groupText/groupText.html

@@ -2,7 +2,7 @@
     <div class={className}>
         <span if:true={label} class="label dx-text-display-8">{label}</span>
         <div class={titleClassname} role="heading" aria-level={titleAriaLevel}>
-            {title}
+            {header}
         </div>
         <span class="subtitle dx-text-display-8" if:true={hasSubtitle}>
             <span if:true={owner}>{owner}</span>

package/src/modules/dx/groupText/groupText.ts

@@ -16,7 +16,7 @@ const titleClasses = {
 };
 
 export default class GroupText extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api body?: string;
     @api owner?: string;
     @api dateTime?: string;
@@ -93,7 +93,7 @@ export default class GroupText extends LightningElement {
                     : window.location.origin + event.currentTarget.href
             }`,
             element_type: "button",
-            element_title: this.title,
+            element_title: this.header,
             content_category: "cta"
         });
     }

package/src/modules/dx/helmet/helmet.html

@@ -13,7 +13,7 @@
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                 >
-                    <title>{title}</title>
+                    <title>{header}</title>
                     <g
                         id="Section-/-Nav-/-Footer-/-Architects"
                         transform="translate(-148.000000, -447.000000)"
@@ -25,7 +25,7 @@
                         ></path>
                     </g>
                 </svg>
-                <span class="home-link-title">{title}</span>
+                <span class="home-link-title">{header}</span>
             </a>
             <span>/</span>
             <span if:true={currentPropertyHref}>

package/src/modules/dx/helmet/helmet.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { HelmetVariant } from "typings/custom";
 
 export default class Helmet extends LightningElement {
-    @api title: string = "Salesforce";
+    @api header: string = "Salesforce";
     @api currentPropertyTitle: string = "Heroku";
     @api currentPropertyHref?: string;
     @api variant: HelmetVariant = "neutral";
@@ -14,7 +14,7 @@ export default class Helmet extends LightningElement {
     }
 
     private get titleAlt() {
-        return `Link to ${this.title}`;
+        return `Link to ${this.header}`;
     }
 
     private get currentPropertyAlt() {

package/src/modules/dx/interactiveImage/interactiveImage.html

@@ -1,7 +1,7 @@
 <template>
     <article>
         <header>
-            <span>{title}</span>
+            <span>{header}</span>
             <div class="controls">
                 <template if:true={isSingleDownload}>
                     <dx-button
@@ -26,7 +26,7 @@
             </div>
         </header>
         <div class="body">
-            <img src={featuredSrc} alt={title} />
+            <img src={featuredSrc} alt={header} />
         </div>
     </article>
 </template>

package/src/modules/dx/interactiveImage/interactiveImage.ts

@@ -5,7 +5,7 @@ const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
 const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
 
 export default class InteractiveImage extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api featuredSrc!: string;
 
     @api
@@ -24,7 +24,7 @@ export default class InteractiveImage extends LightningElement {
         // Ensure that we have some URLs
         if (!urls || urls.length === 0) {
             throw new Error(
-                `No download url found for interactive image with title "${this.title}"`
+                `No download url found for interactive image with title "${this.header}"`
             );
         }
         // Prepare download options with labels

package/src/modules/dx/mainContentHeader/mainContentHeader.html

@@ -1,7 +1,7 @@
 <template>
     <div class="container" style={style}>
         <div class={textStyle}>
-            <h1 class="heading dx-text-display-2">{title}</h1>
+            <h1 class="heading dx-text-display-2">{header}</h1>
             <span class="body dx-text-body-1">{body}</span>
             <span lwc:if={subtitle} class="subtitle dx-text-display-7">
                 {subtitle}

package/src/modules/dx/mainContentHeader/mainContentHeader.ts

@@ -3,7 +3,7 @@ import cx from "classnames";
 import { track } from "dxUtils/analytics";
 
 export default class MainContentHeader extends LightningElement {
-    @api title!: string;
+    @api header!: string;
     @api subtitle?: string;
     @api body!: string;
     @api footNote?: string;
@@ -58,12 +58,12 @@ export default class MainContentHeader extends LightningElement {
                     ? this.ctaHref
                     : `${window.location.origin}${this.ctaHref}`,
                 element_type: "button",
-                element_title: this.title,
+                element_title: this.header,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabel,
-                element_title: this.title,
+                element_title: this.header,
                 click_url: this.ctaHref.includes("http")
                     ? this.ctaHref
                     : `${window.location.origin}${this.ctaHref}`,
@@ -81,12 +81,12 @@ export default class MainContentHeader extends LightningElement {
                     ? this.ctaHrefSecondary
                     : `${window.location.origin}${this.ctaHrefSecondary}`,
                 element_type: "button",
-                element_title: this.title,
+                element_title: this.header,
                 content_category: "cta"
             });
             track(e.currentTarget!, "custEv_linkClick", {
                 click_text: this.ctaLabelSecondary,
-                element_title: this.title,
+                element_title: this.header,
                 click_url: this.ctaHrefSecondary!.includes("http")
                     ? this.ctaHrefSecondary
                     : `${window.location.origin}${this.ctaHrefSecondary}`,

package/src/modules/dx/searchResults/coveo.css

@@ -7944,7 +7944,7 @@ select.coveo-dropdown::-ms-expand {
 
 @font-face {
   font-family: "Lato";
-  src: url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10115/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  src: url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10113/0/fonts/lato.woff'), url('../fonts/lato.woff');
   font-weight: normal;
   font-style: normal;
 }

package/src/modules/dx/searchResults/searchResults.html

@@ -13,7 +13,7 @@
         <div if:true={hasQuery} class="dx-search-header">
             <div class="dx-search-header-container">
                 <p class="dx-search-header-title">
-                    <span class="dx-search-header-title-results">{title}</span>
+                    <span class="dx-search-header-title-results">{header}</span>
                     &nbsp;results for
                 </p>
                 <p class="dx-search-header-query">&ldquo;{query}&rdquo;</p>
@@ -50,7 +50,7 @@
                 </div>
                 <div class="dx-facet-column-footer">
                     <dx-button onclick={dismissFiltersOverlay}>
-                        View {title} results
+                        View {header} results
                     </dx-button>
                 </div>
             </div>

package/src/modules/dx/section/section.html

@@ -28,8 +28,8 @@
 
         <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}
+            <h2 class={headingClassName} lwc:if={header}>
+                {header}
                 <template lwc:if={ctaBtnInline}>
                     <dx-button
                         class="cta"

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

@@ -11,7 +11,7 @@ export default class Section extends LightningElement {
     @api subtitle?: string;
     @api subtitleLevel?: "1" | "2" | "3" | "4" = "1";
     @api textAlign: "center" | "left" = "left";
-    @api title!: string;
+    @api header!: string;
     @api ctaLabel?: string;
     @api ctaHref?: string;
     @api ctaBtnVariant?: string;
@@ -52,7 +52,7 @@ export default class Section extends LightningElement {
     }
 
     private get hasText(): boolean {
-        return !!(this.title || this.label || this.subtitle);
+        return !!(this.header || this.label || this.subtitle);
     }
 
     private get ctaNotInline(): boolean {
@@ -62,7 +62,7 @@ export default class Section extends LightningElement {
     private handleLabelClick(e: Event) {
         track(e.target!, "custEv_ctaLinkClick", {
             click_text: this.ctaLabel,
-            element_title: this.title,
+            element_title: this.header,
             click_url: this.ctaHref!.includes("http")
                 ? this.ctaHref
                 : `${window.location.origin}${this.ctaHref}`,

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -7,8 +7,8 @@
             alt=""
         />
         <div class="content">
-            <h3 if:true={title} class="content-title dx-text-display-4">
-                {title}
+            <h3 if:true={header} class="content-title dx-text-display-4">
+                {header}
             </h3>
             <div class="content-body-container">
                 <img if:true={hasQuote} src={quoteGraphicSrc} alt="" />

package/src/modules/dx/sectionBanner/sectionBanner.ts

@@ -25,7 +25,7 @@ export default class SectionBanner extends LightningElement {
             subtext?: string;
         };
     };
-    @api title!: string;
+    @api header!: string;
     @api body!: string;
     @api hideTopGraphic = false;
     @api backgroundColor = "indigo-vibrant-20";
@@ -93,7 +93,7 @@ export default class SectionBanner extends LightningElement {
     }
 
     get contentBodyStyle() {
-        return cx(this.title ? "content-body" : "dx-text-display-6");
+        return cx(this.header ? "content-body" : "dx-text-display-6");
     }
 
     get style() {

package/src/modules/dx/sidebar/sidebar.html

@@ -66,14 +66,14 @@
                     key={result.uniqueId}
                     selected={result.selected}
                     title-highlights={result.titleHighlights}
-                    title={result.title}
+                    header={result.title}
                     select={result.select}
                 ></dx-sidebar-search-result>
             </template>
             <dx-empty-state
                 variant="alt"
                 class="padding-horizontal"
-                title="No Results"
+                header="No Results"
                 body={emptyStateBody}
                 suggestions={emptyStateSuggestions}
                 size="small"

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -63,7 +63,7 @@
                 variant="alt"
                 class="padding-horizontal"
                 size="small"
-                title="No Results"
+                header="No Results"
                 body={emptyStateBody}
                 suggestions={emptyStateSuggestions}
                 lwc:else

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -54,12 +54,12 @@ export default class SidebarSearchResult extends LightningElement {
     @api descriptionHighlights!: CoveoHighlights;
     @api href!: string;
     @api selected!: boolean;
-    @api title!: string;
+    @api header!: string;
     @api titleHighlights!: CoveoHighlights;
     @api select!: Function;
 
     private get titleChunks() {
-        return toChunks(this.title, this.titleHighlights);
+        return toChunks(this.header, this.titleHighlights);
     }
 
     private get descriptionChunks() {

package/src/modules/dx/toc/toc.html

@@ -1,7 +1,7 @@
 <template>
     <div class="toc" role="navigation">
         <div class="toc toc_content">
-            <h2 class="dx-text-display-8 toc_title">{title}</h2>
+            <h2 class="dx-text-display-8 toc_title">{header}</h2>
             <template for:each={options} for:item="option">
                 <a
                     href={option.anchor}

package/src/modules/dx/toc/toc.ts

@@ -5,7 +5,7 @@ import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
 
 export default class Toc extends LightningElement {
-    @api title!: string;
+    @api header!: string;
 
     @api
     get value() {
@@ -54,7 +54,7 @@ export default class Toc extends LightningElement {
             click_text: text,
             clickAction: "click",
             click_url: `${window.location.href}${href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "link",
             content_category: "cta"
         });

package/src/modules/dxBaseElements/archiveCard/archiveCard.ts

@@ -6,7 +6,7 @@ const MOBILE_QUERY = "(max-width: 640px)";
 export abstract class ArchiveCard extends LightningElement {
     @api contentType!: ContentType;
     @api href!: string;
-    @api title!: string;
+    @api header!: string;
     @api target: LinkTarget = "_self";
 
     private matchMedia!: MediaQueryList;

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -41,7 +41,7 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api tbidApiBaseUrl: string | null = null;
     @api tbidBaseUrl: string | null = null;
-    @api title: string = "Salesforce";
+    @api header: string = "Salesforce";
     @api version?: string | null = null;
     @api bannerMarkup =
         '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
@@ -206,7 +206,7 @@ export abstract class HeaderBase extends LightningElement {
         const payload = {
             ...ANALYTICS_INFO,
             click_url: this.signupLink,
-            element_title: this.title
+            element_title: this.header
         };
 
         track(e.currentTarget!, "custEv_browseTrialsClick", payload);

package/src/modules/dxUtils/css/css.ts

@@ -41,7 +41,9 @@ export const colorToDxColors = (
 };
 
 export const toDxColor = (color: string) =>
-    ["white", "transparent"].includes(color) || BROWSER_COLOR_REGEXP.test(color)
+    ["white", "transparent"].includes(color) ||
+    color.includes("linear-gradient") ||
+    BROWSER_COLOR_REGEXP.test(color)
         ? color
         : `var(--dx-g-${color})`;