@salesforcedevs/dx-components 1.3.84 → 1.3.85

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.84",
+    "version": "1.3.85",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -40,5 +40,5 @@
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
     },
-    "gitHead": "09b7aafdaf3a75bf49ecf7691fb51378e6a9c332"
+    "gitHead": "6b738627c2fefd4e639f1def42cdc4d4a44c7171"
 }

package/src/modules/dx/cardCallout/cardCallout.css

@@ -16,7 +16,7 @@
 
 /* title */
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     color: inherit;
     margin-bottom: var(--dx-g-spacing-3xl);
     overflow-wrap: hyphenate-word;
@@ -51,7 +51,7 @@ dx-icon::part(svg) {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         margin-bottom: var(--dx-g-spacing-xl);
     }
 }

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

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

package/src/modules/dx/cardDocs/cardDocs.css

@@ -24,11 +24,11 @@
     flex-grow: 1;
 }
 
-.dx-text-heading-6 dx-button {
+.dx-text-display-8 dx-button {
     margin-left: var(--dx-g-spacing-xs);
 }
 
-.dx-text-heading-4 {
+.dx-text-display-6 {
     position: relative;
     -webkit-line-clamp: var(--dx-c-heading-max-lines);
     -webkit-box-orient: vertical;
@@ -36,7 +36,7 @@
     overflow: hidden;
 }
 
-.dx-text-heading-4 dx-icon {
+.dx-text-display-6 dx-icon {
     display: inline-block;
     transform: translateY(-3px);
 }

package/src/modules/dx/cardEvent/cardEvent.css

@@ -105,12 +105,7 @@ dx-formatted-date-time {
         display: none;
     }
 
-    .dx-text-heading-5 {
-        font-size: 18px;
-        line-height: 24px;
-    }
-
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 24px;
         line-height: 28px;
     }

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

@@ -20,12 +20,12 @@
                 if:true={featured}
             >
                 <dx-formatted-date-time
-                    class="dx-text-heading-5 month"
+                    class="dx-text-display-8 month"
                     value={startDatetime}
                     month="short"
                 ></dx-formatted-date-time>
                 <dx-formatted-date-time
-                    class="dx-text-heading-1 day"
+                    class="dx-text-display-1b day"
                     value={startDatetime}
                     day="2-digit"
                 ></dx-formatted-date-time>

package/src/modules/dx/cardNews/cardNews.css

@@ -24,7 +24,7 @@
     z-index: 1;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     margin: 4px 0 4px 0;
     color: inherit;
 }
@@ -44,7 +44,7 @@ img {
     margin: 0;
 }
 
-.dx-card-size-large .dx-text-heading-3 {
+.dx-card-size-large .dx-text-display-4 {
     font-size: 30px;
     letter-spacing: 0.3px;
     line-height: 40px;
@@ -81,7 +81,7 @@ img {
         box-shadow: var(--dx-g-box-shadow-sm);
     }
 
-    .dx-text-heading-3 {
+    .dx-text-display-4 {
         letter-spacing: 0.1px;
     }
 
@@ -114,7 +114,7 @@ img {
         max-width: 50%;
     }
 
-    .dx-card-size-normal .dx-text-heading-3 {
+    .dx-card-size-normal .dx-text-display-4 {
         font-size: var(--dx-g-text-xl);
         line-height: 28px;
     }
@@ -128,7 +128,7 @@ img {
         margin: 14px 0 -2px 0;
     }
 
-    .dx-card-size-large .dx-text-heading-3 {
+    .dx-card-size-large .dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: 40px;
         letter-spacing: 0.6px;

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

@@ -8,7 +8,7 @@
         part="container"
     >
         <div class={textContainerClassName}>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h3 class="dx-text-display-4">{title}</h3>
             <p>{body}</p>
             <div class="cta">
                 <dx-button if:true={hasLargeButton} size="large">

package/src/modules/dx/cardTitle/cardTitle.css

@@ -9,7 +9,7 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-h3.dx-text-heading-4 {
+h3.dx-text-display-6 {
     color: var(--dx-c-card-title-color);
     transition: var(--dx-g-transition-hue-1x);
     font-size: var(--dx-c-card-title-font-size);
@@ -32,7 +32,7 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 20px;
         line-height: 24px;
     }

package/src/modules/dx/cardTitle/cardTitle.html

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="dx-text-heading-4">
+    <h3 class="dx-text-display-6">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
             <template if:true={needsSpace}>&#32;</template>

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

@@ -3,7 +3,7 @@
         <div class={codeblocksClassname}>
             <div class="toolbar">
                 <div class="toolbar-item">
-                    <div class="dx-text-heading-7 dx-code-block-heading">
+                    <div class="dx-text-display-8 dx-code-block-heading">
                         { title }
                     </div>
                 </div>

package/src/modules/dx/emptyState/emptyState.html

@@ -2,7 +2,7 @@
     <div class={containerClassName} part="container">
         <img src={imageAssetPath} alt="Mountains" />
         <div class="text">
-            <h3 class="title dx-text-heading-3">{title}</h3>
+            <h3 class="title dx-text-display-4">{title}</h3>
             <p class="subtitle dx-text-body-2" if:true={subtitle}>{subtitle}</p>
         </div>
     </div>

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

@@ -1,8 +1,8 @@
 <template>
     <section class={sectionClass}>
         <div class="description">
-            <h2 if:true={hasLabel} class="dx-text-heading-7 label">{label}</h2>
-            <h3 class="dx-text-heading-3">{title}</h3>
+            <h2 if:true={hasLabel} class="dx-text-display-8 label">{label}</h2>
+            <h3 class="dx-text-display-4">{title}</h3>
             <div class="body dx-text-body-2">
                 <slot></slot>
             </div>

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

@@ -369,7 +369,7 @@ a.image-container > img {
     padding-bottom: var(--dx-g-spacing-lg);
 }
 
-.dx-text-heading-2 {
+.dx-text-display-2 {
     padding-bottom: var(--dx-g-spacing-sm);
     display: block;
 }
@@ -480,11 +480,11 @@ dx-image-and-label {
         margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
     }
 
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: var(--dx-g-text-xl);
     }
 
-    .dx-text-heading-2 {
+    .dx-text-display-2 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-2xl);
     }

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

@@ -2,14 +2,14 @@
     <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>
+                <h1 if:true={label} class="label dx-text-display-6">{label}</h1>
             </template>
             <template if:false={labelAsPrimaryHeading}>
-                <p if:true={label} class="label dx-text-heading-4">{label}</p>
+                <p if:true={label} class="label dx-text-display-6">{label}</p>
             </template>
             <div class="featured-content-main-content">
                 <template if:false={labelAsPrimaryHeading}>
-                    <h1 class="title dx-text-heading-2">
+                    <h1 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}
@@ -24,7 +24,7 @@
                     </h1>
                 </template>
                 <template if:true={labelAsPrimaryHeading}>
-                    <h2 class="title dx-text-heading-2">
+                    <h2 class="title dx-text-display-2">
                         <a
                             class="title-link"
                             if:true={href}

package/src/modules/dx/featuresList/featuresList.css

@@ -1,11 +1,11 @@
 @import "dxHelpers/reset";
 @import "dxHelpers/text";
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     display: inline-flex;
 }
 
-.dx-text-heading-3 {
+.dx-text-display-4 {
     padding-bottom: var(--dx-g-spacing-xl);
 }
 

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

@@ -1,10 +1,10 @@
 <template>
     <div class="container">
-        <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
+        <h2 if:true={title} class="dx-text-display-4">{title}</h2>
         <ul>
             <template for:each={options} for:item="option">
                 <li key={option.id} class="option">
-                    <div class="dx-text-heading-5">
+                    <div class="dx-text-display-8">
                         <dx-icon
                             class="icon"
                             size="small"

package/src/modules/dx/footer/footer.html

@@ -24,7 +24,7 @@
         >
             <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h2 class="dx-text-heading-3">
+                <h2 class="dx-text-display-4">
                     Get the latest
                     <br />
                     developer updates.

package/src/modules/dx/groupText/groupText.css

@@ -76,12 +76,12 @@
 /* breakpoints tablet */
 
 @media screen and (max-width: 1024px) {
-    .title.dx-text-heading-2 {
+    .title.dx-text-display-2 {
         font-size: var(--dx-g-text-3xl);
         line-height: var(--dx-g-spacing-2xl);
     }
 
-    .subtitle.dx-text-heading-6 {
+    .subtitle.dx-text-display-8 {
         font-size: var(--dx-g-text-sm);
     }
 
@@ -90,15 +90,11 @@
         line-height: var(--dx-g-spacing-lg);
     }
 
-    .title.dx-text-heading-3 {
+    .title.dx-text-display-4 {
         font-size: var(--dx-g-text-2xl);
         line-height: var(--dx-g-spacing-xl);
     }
 
-    .subtitle.dx-text-heading-7 {
-        font-size: var(--dx-g-text-xs);
-    }
-
     .body.dx-text-body-2 {
         font-size: var(--dx-g-text-sm);
         line-height: var(--dx-g-spacing-lg);

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

@@ -1,10 +1,10 @@
 <template>
     <div class={className}>
-        <span if:true={label} class="label dx-text-heading-6">{label}</span>
+        <span if:true={label} class="label dx-text-display-8">{label}</span>
         <div class={titleClassname} role="heading" aria-level={titleAriaLevel}>
             {title}
         </div>
-        <span class={subtitleClassname} if:true={hasSubtitle}>
+        <span class="subtitle dx-text-display-8" if:true={hasSubtitle}>
             <span if:true={owner}>{owner}</span>
             <span if:true={attributionLink}>
                 By&nbsp;

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

@@ -11,13 +11,8 @@ const LARGE = "large";
 const MEDIUM = "medium";
 
 const titleClasses = {
-    [LARGE]: "dx-text-heading-2",
-    [MEDIUM]: "dx-text-heading-3"
-};
-
-const subtitleClasses = {
-    [LARGE]: "dx-text-heading-6",
-    [MEDIUM]: "dx-text-heading-7"
+    [LARGE]: "dx-text-display-2",
+    [MEDIUM]: "dx-text-display-4"
 };
 
 export default class GroupText extends LightningElement {
@@ -76,10 +71,6 @@ export default class GroupText extends LightningElement {
         return cx("title", titleClasses[this.size]);
     }
 
-    private get subtitleClassname() {
-        return cx("subtitle", subtitleClasses[this.size]);
-    }
-
     private get hasButtonGroup(): boolean {
         return !!(this.primaryLink || this.secondaryLink || this.tertiaryLink);
     }

package/src/modules/dx/header/header.html

@@ -50,7 +50,7 @@
                             symbol={brand}
                             size="xlarge"
                         ></dx-icon>
-                        <span class="dx-text-heading-4 subtitle">
+                        <span class="dx-text-display-6 subtitle">
                             {subtitle}
                         </span>
                     </a>

package/src/modules/dx/logo/logo.html

@@ -1,6 +1,6 @@
 <template>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
-        <span class="dx-text-heading-7">{label}</span>
+        <span class="dx-text-display-8">{label}</span>
     </a>
 </template>

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

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

package/src/modules/dx/podcastHost/podcastHost.html

@@ -8,7 +8,7 @@
                 <h2>
                     <span class="dx-text-label-2">Hosted by</span>
                     <br />
-                    <span class="dx-text-heading-4">{fullName}</span>
+                    <span class="dx-text-display-6">{fullName}</span>
                 </h2>
             </div>
             <div class="host-bio">

package/src/modules/dx/section/section.css

@@ -61,7 +61,7 @@
     max-width: 800px;
 }
 
-.dx-text-heading-custom {
+.dx-text-display-custom {
     color: var(--dx-c-section-heading-font-color, --dx-g-text-heading-color);
     font-family: var(--dx-c-section-heading-font-family, --dx-g-font-display);
     font-size: var(--dx-c-section-heading-font-size, --dx-g-text-3xl);

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

@@ -27,7 +27,7 @@
         </svg>
 
         <div part="text" class="text" if:true={hasText}>
-            <span class="label dx-text-heading-6" if:true={label}>{label}</span>
+            <span class="label dx-text-display-8" if:true={label}>{label}</span>
             <h2 class={headingClassName} if:true={title}>{title}</h2>
             <span class="subtitle dx-text-body-1" if:true={subtitle}>
                 {subtitle}

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

@@ -37,7 +37,7 @@ export default class Section extends LightningElement {
     }
 
     private get headingClassName() {
-        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+        return cx("heading", `dx-text-display-${this.headingLevel}`);
     }
 
     private get hasText(): boolean {

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

@@ -29,7 +29,7 @@
         ></dx-button>
         <div class="sidebar-header padding-horizontal">
             <div class="header" if:false={mobile}>
-                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
             </div>
             <div class="search">
@@ -43,7 +43,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-heading-6"
+                class="results-heading dx-text-display-8"
                 if:true={showResultsHeading}
             >
                 Results

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

@@ -31,7 +31,7 @@
         <template if:true={expanded}>
             <div class="padding-horizontal">
                 <div class="header" if:false={mobile}>
-                    <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                    <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
                 </div>
                 <div class="search">

package/src/modules/dx/toc/toc.css

@@ -39,7 +39,7 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
-.dx-text-heading-5 {
+.dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }

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

@@ -58,7 +58,7 @@ export default class Toc extends LightningElement {
 
     private get titleClassName() {
         return cx(
-            "dx-text-heading-5 toc_title",
+            "dx-text-display-8 toc_title",
             !this.showContent && "state-hide-content"
         );
     }

package/src/modules/dxHelpers/card/card.css

@@ -246,16 +246,12 @@ a.dx-card-base:hover dx-card-title {
         line-height: 16px;
     }
 
-    .dx-text-heading-3:not(.static-font) {
+    .dx-text-display-4:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5:not(.static-font) {
-        font-size: 12px;
-    }
-
-    .dx-text-heading-6:not(.static-font) {
+    .dx-text-display-8:not(.static-font) {
         font-size: var(--dx-g-text-sm);
     }
 }

package/src/modules/dxHelpers/text/text.css

@@ -1,52 +1,68 @@
-.dx-text-heading-1 {
+/* WES Display 1 */
+.dx-text-display-1 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
-    font-size: 64px; /* not registered */
-    letter-spacing: -0.6px;
+    font-size: var(--dx-g-text-6xl);
+    letter-spacing: -1.4px;
+    line-height: 88px;
+}
+
+/* NO WES EQUIVALENT */
+.dx-text-display-1b {
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: 64px;
+    letter-spacing: -1.4px;
     line-height: 64px;
 }
 
-.dx-text-heading-2 {
+/* WES Display 2 */
+.dx-text-display-2 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-5xl);
     letter-spacing: -0.6px;
-    line-height: 60px;
+    line-height: 64px;
 }
 
-.dx-text-heading-2b {
+/* WES Display 3 */
+.dx-text-display-3 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-4xl);
-    letter-spacing: -0.6px;
+    letter-spacing: -0.5px;
     line-height: 56px;
 }
 
-.dx-text-heading-3 {
+/* WES Display 4 */
+.dx-text-display-4 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-3xl);
-    letter-spacing: -0.4px;
-    line-height: 40px;
+    letter-spacing: -0.3px;
+    line-height: 48px;
 }
 
-.dx-text-heading-3b {
+/* Display 5 */
+.dx-text-display-5 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-2xl);
-    letter-spacing: -0.4px;
+    letter-spacing: -0.1px;
     line-height: 40px;
 }
 
-.dx-text-heading-4 {
+/* Display 6 */
+.dx-text-display-6 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xl);
     letter-spacing: -0.1px;
-    line-height: 28px;
+    line-height: 32px;
 }
 
-.dx-text-heading-4b {
+/* Display 7 */
+.dx-text-display-7 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-lg);
@@ -54,45 +70,25 @@
     line-height: 28px;
 }
 
-.dx-text-heading-5 {
+/* Display 8 */
+.dx-text-display-8 {
     color: var(--dx-g-text-heading-color);
     font-family: var(--dx-g-font-display);
-    font-size: 18px; /* not registered */
+    font-size: var(--dx-g-text-base);
     letter-spacing: -0.1px;
     line-height: 24px;
 }
 
-.dx-text-heading-6 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-base);
-    letter-spacing: 0;
-    line-height: 20px;
-}
-
-.dx-text-heading-7 {
-    color: var(--dx-g-text-heading-color);
-    font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-sm);
-    letter-spacing: 0;
-    line-height: 18px;
-}
-
-.dx-text-heading-alt-1 {
-    color: var(--dx-g-text-label-color);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--slds-text-lg);
-    line-height: 25px;
-}
-
+/* Body 1 */
 .dx-text-body-1 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-lg);
     letter-spacing: 0;
-    line-height: 32px;
+    line-height: 30px;
 }
 
+/* Body 2 */
 .dx-text-body-2 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
@@ -101,6 +97,7 @@
     line-height: 24px;
 }
 
+/* Body 3 */
 .dx-text-body-3 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);
@@ -109,6 +106,7 @@
     line-height: 20px;
 }
 
+/* Body Caption */
 .dx-text-body-4 {
     color: var(--dx-g-text-body-color);
     font-family: var(--dx-g-font-sans);