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

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.323-alpha.0",
+    "version": "1.3.324",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -45,5 +45,6 @@
     },
     "volta": {
         "node": "16.19.1"
-    }
+    },
+    "gitHead": "f005d7f0cbb1ce8f67f11d7267cfeb893d2c031a"
 }

package/src/modules/dx/agenda/agenda.html

@@ -1,6 +1,6 @@
 <template>
     <div class="container">
-        <h2 class="detail-list-title dx-text-display-4">{title}</h2>
+        <h2 class="detail-list-title dx-text-display-4">{header}</h2>
         <div class="detail-list-content-container">
             <ul class="detail-list-content" part="content">
                 <template for:each={items} for:item="item">

package/src/modules/dx/agenda/agenda.ts

@@ -10,7 +10,7 @@ export interface AgendaItem {
 }
 
 export default class Agenda extends LightningElement {
-    @api title: string = "Agenda";
+    @api header: string = "Agenda";
     @api flourish?: string;
     @api flourishAlt?: string;
 

package/src/modules/dx/breadcrumbs/breadcrumbs.html

@@ -1,7 +1,7 @@
 <template>
     <nav class={className} role="navigation" aria-label={ariaLabel}>
         <template if:true={logo}>
-            <dx-logo href={baseHref} label={title}></dx-logo>
+            <dx-logo href={baseHref} label={header}></dx-logo>
             <span if:false={breadcrumbsEmpty}>/</span>
         </template>
         <dx-dropdown

package/src/modules/dx/breadcrumbs/breadcrumbs.ts

@@ -21,7 +21,7 @@ export default class Breadcrumbs extends LightningElement {
     @api baseHref: string = "/";
     @api navItems: OptionWithNested[] = [];
     @api pathname: string = window.location.pathname;
-    @api title: string = "Salesforce";
+    @api header: string = "Salesforce";
     @api logo: boolean = false;
     @api truncate = false;
     @api hideCurrentLocation = false;
@@ -85,16 +85,14 @@ export default class Breadcrumbs extends LightningElement {
         breadcrumbs: Breadcrumb[]
     ): NormalizedBreadcrumb[] {
         const { length } = breadcrumbs;
-        return breadcrumbs.map(
-            (breadcrumb, i): NormalizedBreadcrumb => {
-                const last = i === length - 1;
-                return {
-                    ...breadcrumb,
-                    asLink: this.hideCurrentLocation || !last,
-                    last
-                };
-            }
-        );
+        return breadcrumbs.map((breadcrumb, i): NormalizedBreadcrumb => {
+            const last = i === length - 1;
+            return {
+                ...breadcrumb,
+                asLink: this.hideCurrentLocation || !last,
+                last
+            };
+        });
     }
 
     private get breadcrumbDropdownOptions() {

package/src/modules/dx/cardBlogPost/cardBlogPost.html

@@ -9,7 +9,7 @@
         img-src={imgSrc}
         label={label}
         target={target}
-        title={title}
+        header={header}
         content-type="blogs"
     >
         <dx-formatted-date-time

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -11,7 +11,7 @@ export default class CardBlogPost extends LightningElement {
     @api imgSrc?: string | null;
     @api label?: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api authors?: Array<any> | null = null;
     @api origin?: string = "wordpress";
     @api clickEvent?: () => void;
@@ -28,9 +28,9 @@ export default class CardBlogPost extends LightningElement {
         }
 
         const payload = {
-            click_text: this.title,
+            click_text: this.header,
             click_url: `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "card",
             content_category: "link",
             recommendation_type: this.origin
@@ -38,7 +38,7 @@ export default class CardBlogPost extends LightningElement {
         track(event.target!, "custEv_blogCardClick", {
             ...payload,
             blog_author: this.authors,
-            blog_title: this.title
+            blog_title: this.header
         });
         track(event.target!, "custEv_linkClick", payload);
     }

package/src/modules/dx/cardCallout/cardCallout.html

@@ -6,7 +6,7 @@
         style={style}
         onclick={sendGtm}
     >
-        <h3 class="dx-text-display-4">{title}</h3>
+        <h3 class="dx-text-display-4">{header}</h3>
         <span class="dx-text-button-light">
             {label}
             <dx-icon symbol="forward"></dx-icon>

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -11,7 +11,7 @@ export default class CardCallout extends LightningElement {
     @api href!: string;
     @api label: string = "";
     @api target?: string;
-    @api title!: string;
+    @api header!: string;
 
     private get style(): string {
         const background = `background-color: ${toDxColor(
@@ -31,9 +31,9 @@ export default class CardCallout extends LightningElement {
 
     private sendGtm(e: PointerEvent) {
         track(e.currentTarget!, "custEv_ctaLinkClick", {
-            click_text: this.title,
+            click_text: this.header,
             click_url: `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "link",
             content_category: "cta"
         });

package/src/modules/dx/cardClickthrough/cardClickthrough.html

@@ -12,7 +12,7 @@
                     {label}
                 </span>
                 <dx-card-title
-                    title={title}
+                    header={header}
                     target={target}
                     onclick={handleLinkClick}
                 ></dx-card-title>

package/src/modules/dx/cardClickthrough/cardClickthrough.ts

@@ -40,7 +40,7 @@ export default class CardClickthrough<
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api target?: string | null = null;
     @api showMobileImg?: boolean = false;
 
@@ -127,8 +127,8 @@ export default class CardClickthrough<
             return;
         }
         const payloadCardInfo = {
-            click_text: this.title,
-            element_title: this.title,
+            click_text: this.header,
+            element_title: this.header,
             click_url: this.href,
             element_type: "link",
             content_category: "cta"

package/src/modules/dx/cardContent/cardContent.html

@@ -34,7 +34,7 @@
                 onclick={handleClick}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span
                 class="subtitle dx-text-label-1-dark"

package/src/modules/dx/cardContent/cardContent.ts

@@ -17,7 +17,7 @@ export default class CardContent extends LightningElement {
     @api layout: "vertical" | "horizontal" = "vertical";
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api hrefClick: any = null;
     @api contentType: string | null = null;
     @api
@@ -56,7 +56,7 @@ export default class CardContent extends LightningElement {
     }
 
     private get imgLinkAriaLabel() {
-        return `Read More About ${this.title}`;
+        return `Read More About ${this.header}`;
     }
 
     private get className(): string {

package/src/modules/dx/cardDemo/cardDemo.html

@@ -7,6 +7,6 @@
         img-src={imgSrc}
         label="Demo"
         target={target}
-        title={title}
+        header={header}
     ></dx-card-content>
 </template>

package/src/modules/dx/cardDemo/cardDemo.ts

@@ -7,5 +7,5 @@ export default class CardDemo extends LightningElement {
     @api imgAlt?: string;
     @api imgSrc?: string | null;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 }

package/src/modules/dx/cardDocs/cardDocs.html

@@ -11,11 +11,17 @@
         >
             <span class="dx-text-label-3" part="label">{label}</span>
             <dx-card-title
-                title={title}
+                header={header}
                 target={target}
                 onclick={handleLinkClick}
             ></dx-card-title>
-            <span lwc:if={body} class="dx-text-body-2" onclick={handleTextClick}>{body}</span>
+            <span
+                lwc:if={body}
+                class="dx-text-body-2"
+                onclick={handleTextClick}
+            >
+                {body}
+            </span>
         </div>
         <div class="dx-card-base_section-vertical dx-card-base_ctas">
             <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -10,7 +10,7 @@ export default class CardDocs extends LightningElement {
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label!: string;
-    @api title!: string;
+    @api header!: string;
     @api target?: string | null = null;
     @api showMobileImg?: boolean = false;
 
@@ -37,13 +37,13 @@ export default class CardDocs extends LightningElement {
             slotElement?.addEventListener("click", (event: Event) => {
                 track(event.currentTarget!, "custEv_cardClick", {
                     ...payloadInnerButton,
-                    element_title: this.title,
+                    element_title: this.header,
                     click_text: slotElement.innerText,
                     click_url: `${window.location.origin}${slotElement.href}`
                 });
                 track(event.currentTarget!, "custEv_linkClick", {
                     ...payloadInnerButton,
-                    element_title: this.title,
+                    element_title: this.header,
                     click_text: slotElement.innerText,
                     click_url: `${window.location.origin}${slotElement.href}`
                 });
@@ -54,8 +54,8 @@ export default class CardDocs extends LightningElement {
 
     private handleLinkClick(event: PointerEvent) {
         const payloadCardInfo = {
-            click_text: this.title,
-            element_title: this.title,
+            click_text: this.header,
+            element_title: this.header,
             click_url: `${window.location.origin}${this.href}`,
             element_type: "link",
             content_category: "cta"
@@ -67,7 +67,7 @@ export default class CardDocs extends LightningElement {
     private handleTextClick(event: PointerEvent) {
         const payloadCardTextInfo = {
             click_text: this.body,
-            element_title: this.title,
+            element_title: this.header,
             click_url: `${window.location.origin}${this.href}`,
             element_type: "tile",
             content_category: "cta"

package/src/modules/dx/cardEvent/cardEvent.html

@@ -42,7 +42,7 @@
                     onmouseenter={setLinkHovered}
                     onmouseleave={setLinkInactive}
                     target={target}
-                    title={title}
+                    header={header}
                 ></dx-card-title>
                 <div class="subtitle-container" if:true={showSubtitle}>
                     <span class="subtitle dx-text-label-1-dark" part="subtitle">

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -11,7 +11,7 @@ export default class CardEvent extends LightningElement {
     @api location?: string | null = null;
     @api startDatetime!: string;
     @api target: string = "_blank";
-    @api title!: string;
+    @api header!: string;
     @api shortDescription?: string;
     @api type?: string;
 

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -2,10 +2,10 @@
     <div class={containerClass}>
         <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
         <dx-card-title
-            if:true={title}
+            if:true={header}
             href={href}
             target={target}
-            title={title}
+            header={header}
         ></dx-card-title>
         <div class="card-extra-info dx-text-label-1-dark">
             <div class="authors" if:true={renderAuthor}>

package/src/modules/dx/cardGrid/cardGrid.html

@@ -8,7 +8,7 @@
                 img-alt={card.imgAlt}
                 img-src={card.imgSrc}
                 label={card.label}
-                title={card.title}
+                header={card.title}
                 target={card.target}
                 show-mobile-img={card.showMobileImg}
                 widget-config={card.widgetConfig}

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -29,7 +29,7 @@
                     img-alt={card.imgAlt}
                     img-src={card.imgSrc}
                     label={card.label}
-                    title={card.title}
+                    header={card.title}
                     target={card.target}
                     show-mobile-img={card.showMobileImg}
                 >
@@ -60,7 +60,7 @@
         </div>
     </div>
     <dx-empty-state
-        title="Beep boop. That did not compute."
+        header="Beep boop. That did not compute."
         subtitle={emptyStateSubtitle}
         if:true={showEmptyState}
     ></dx-empty-state>

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -1,7 +1,7 @@
 <template>
     <div class="card-container">
         <a class="dx-text-truncate" href={href} target={target}>
-            <h4>{title}</h4>
+            <h4>{header}</h4>
         </a>
         <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
     </div>

package/src/modules/dx/cardNews/cardNews.html

@@ -9,7 +9,7 @@
     >
         <div class={textContainerClassName}>
             <h3 class="dx-text-display-4">
-                <dx-formatted-rich-text value={title}></dx-formatted-rich-text>
+                <dx-formatted-rich-text value={header}></dx-formatted-rich-text>
             </h3>
             <p>{body}</p>
             <div class="cta">

package/src/modules/dx/cardNews/cardNews.ts

@@ -13,7 +13,7 @@ import { track } from "dxUtils/analytics";
 
 export default class CardNews extends LightningElement {
     @api backgroundColor: string = "indigo-vibrant-40";
-    @api title!: string;
+    @api header!: string;
     @api body!: string;
     @api buttonText?: string = "";
     @api buttonType!: CardNewsButtonType;
@@ -70,7 +70,7 @@ export default class CardNews extends LightningElement {
             click_url: this.href.includes("http")
                 ? this.href
                 : `${window.location.origin}${this.href}`,
-            element_title: this.title,
+            element_title: this.header,
             element_type: "link",
             content_category: "cta"
         };

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -23,7 +23,7 @@
                 target={target}
                 onmouseenter={setLinkHovered}
                 onmouseleave={setLinkInactive}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="datetime dx-text-label-1-dark">
                 <dx-relative-date-time

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -8,7 +8,7 @@ export default class CardPodcastEpisode extends LightningElement {
     @api href!: string;
     @api length!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isLinkHovered: boolean = false;
 

package/src/modules/dx/cardSmall/cardSmall.html

@@ -13,7 +13,7 @@
             <dx-card-title
                 href={href}
                 target={target}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
@@ -32,7 +32,7 @@
             ></dx-icon-badge>
         </div>
         <div class="dx-card-base_section-horizontal dx-card-base_column">
-            <dx-card-title target={target} title={title}></dx-card-title>
+            <dx-card-title target={target} header={header}></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
                 <slot onslotchange={onSlotChange}></slot>

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -18,7 +18,7 @@ export default class CardSmall extends LightningElement {
     @api borderless?: boolean = false;
     @api href!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isSlotEmpty: boolean = false;
 

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -3,7 +3,7 @@ import { LightningElement, api } from "lwc";
 export default class CardTitle extends LightningElement {
     @api href!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private get isExternal() {
         return this.target === "_blank";
@@ -11,8 +11,8 @@ export default class CardTitle extends LightningElement {
 
     private get titleToWrap() {
         return this.isExternal
-            ? this.title.substring(0, this.title.lastIndexOf(" "))
-            : this.title;
+            ? this.header.substring(0, this.header.lastIndexOf(" "))
+            : this.header;
     }
 
     private get needsSpace() {
@@ -21,7 +21,7 @@ export default class CardTitle extends LightningElement {
 
     private get titleNoWrap() {
         return this.isExternal
-            ? this.title.substring(this.title.lastIndexOf(" ") + 1)
+            ? this.header.substring(this.header.lastIndexOf(" ") + 1)
             : null;
     }
 }

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.html

@@ -7,7 +7,7 @@
         label={label}
         subtitle={subtitle}
         target={target}
-        title={title}
+        header={header}
     >
         <img
             class="badge"

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.ts

@@ -10,7 +10,7 @@ export default class CardTrailheadModule extends LightningElement {
     @api length!: string;
     @api points!: string | number;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
     @api label?: string = "Trailhead";
 
     get subtitle() {

package/src/modules/dx/cardTrial/cardTrial.html

@@ -20,7 +20,7 @@
             col-two-details={modalDetails}
             target={target}
             terms={terms}
-            title={title}
+            header={header}
             type-badge-value={modalTypeBadgeValue}
             type-badge-dark={modalTypeBadgeDark}
             onclickclose={closeModal}
@@ -53,7 +53,7 @@
         <dx-card-title
             href={href}
             target={target}
-            title={title}
+            header={header}
         ></dx-card-title>
         <span class="label dx-text-body-3">{label}</span>
         <p class="body dx-text-body-2 static-font">{body}</p>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -23,7 +23,7 @@ export default class CardTrial extends LightningElement {
     @api recommended?: boolean = false;
     @api target?: string;
     @api terms!: string;
-    @api title!: string;
+    @api header!: string;
     @api topText?: string;
     @api modalTitle?: string;
 

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.html

@@ -29,7 +29,7 @@
                     class="title-main"
                     href={href}
                     target={target}
-                    title={title}
+                    header={header}
                 ></dx-card-title>
                 <span class="label dx-text-body-3">{label}</span>
                 <p class="body dx-text-body-2 static-font">{body}</p>
@@ -64,7 +64,7 @@
             <div class="col-two">
                 <dx-card-title
                     class="title-secondary"
-                    title={colTwoTitle}
+                    header={colTwoTitle}
                 ></dx-card-title>
                 <template for:each={colTwoDetails} for:item="colTwoItem">
                     <div key={colTwoItem.title}>

package/src/modules/dx/cardTrialExpanded/cardTrialExpanded.ts

@@ -16,7 +16,7 @@ export default class CardTrial extends LightningElement {
     @api label!: string;
     @api target?: string;
     @api terms!: string;
-    @api title!: string;
+    @api header!: string;
     @api typeBadgeValue?: string;
     @api typeBadgeDark?: boolean = false;
 
@@ -72,7 +72,7 @@ export default class CardTrial extends LightningElement {
         if (this.href.includes("signup")) {
             const payload = {
                 click_text: this.buttonCta,
-                element_title: this.title,
+                element_title: this.header,
                 element_type: "card",
                 click_url: `${window.location.origin}${this.href}`,
                 content_category: "cta"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.html

@@ -7,7 +7,7 @@
         img-src={imgSrc}
         layout={layout}
         target={target}
-        title={title}
+        header={header}
     >
         <dx-icon-badge
             class="dx-play-button"

package/src/modules/dx/cardVideoPreview/cardVideoPreview.ts

@@ -9,5 +9,5 @@ export default class CardVideoPreview extends LightningElement {
     @api imgSrc?: string | null;
     @api target?: string | null = null;
     @api layout: "vertical" | "horizontal" = "vertical";
-    @api title!: string;
+    @api header!: string;
 }

package/src/modules/dx/codeBlock/codeBlock.html

@@ -4,7 +4,7 @@
             <div class="toolbar">
                 <div class="toolbar-item">
                     <div class="dx-text-display-8 dx-code-block-heading">
-                        { title }
+                        { header }
                     </div>
                 </div>
                 <template if:true={showLanguageDropdown}>

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

@@ -46,7 +46,7 @@ const LOCAL_STORAGE_KEY = "dx-codeblock-theme";
 
 export default class CodeBlock extends LightningElement {
     @api defaultTheme: CodeBlockTheme = LIGHT;
-    @api title: string = "title";
+    @api header: string = "title";
     @api sourceLink: string = "";
     @api language: string = "";
     // if it is true, it renders code as is coming instead of wrapping it into html/xml comments tags.

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -17,7 +17,7 @@
                     img-alt={recommendation.yoast_head_json.title}
                     img-src={recommendation.featured_image}
                     key={recommendation.id}
-                    title={recommendation.yoast_head_json.title}
+                    header={recommendation.yoast_head_json.title}
                     origin="coveo"
                     click-event={recommendation.clickEvent}
                 ></dx-card-blog-post>

package/src/modules/dx/embeddedVideo/embeddedVideo.html

@@ -22,7 +22,7 @@
                 title="Embedded post"
             ></iframe>
         </template>
-        <h2 class="dx-text-display-6">{title}</h2>
+        <h2 class="dx-text-display-6">{header}</h2>
         <p class="dx-text-body-2">{body}</p>
         <div lwc:if={hasSocial}>
             <dx-hr no-padding="true" spacing="smd"></dx-hr>