@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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}
+            {header}
         </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;
@@ -36,8 +36,10 @@
                 if:true={primaryLink}
                 href={primaryLink.href}
                 target={primaryLink.target}
+                icon-symbol={primaryLink.iconSymbol}
                 variant="primary"
                 size="large"
+                onclick={trackClick}
             >
                 {primaryLink.label}
             </dx-button>
@@ -45,8 +47,10 @@
                 if:true={secondaryLink}
                 href={secondaryLink.href}
                 target={secondaryLink.target}
+                icon-symbol={secondaryLink.iconSymbol}
                 variant="secondary"
                 size="large"
+                onclick={trackClick}
             >
                 {secondaryLink.label}
             </dx-button>
@@ -57,6 +61,7 @@
                 variant="tertiary"
                 size="large"
                 icon-symbol="chevronright"
+                onclick={trackClick}
             >
                 {tertiaryLink.label}
             </dx-button>

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

@@ -1,8 +1,9 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 type OptionalLink = Link | null;
 
@@ -10,17 +11,12 @@ 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 {
-    @api title!: string;
+    @api header!: string;
     @api body?: string;
     @api owner?: string;
     @api dateTime?: string;
@@ -75,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);
     }
@@ -90,4 +82,19 @@ export default class GroupText extends LightningElement {
     private onSlotChange(e: LightningSlotElement): void {
         this.isSlotEmpty = isSlotEmpty(e);
     }
+
+    private trackClick(event: any) {
+        track(event.target!, "custEv_ctaButtonClick", {
+            click_text: event.currentTarget.innerText,
+            item_title: event.currentTarget.innerText,
+            click_url: `${
+                event.currentTarget.href.includes("http")
+                    ? event.currentTarget.href
+                    : window.location.origin + event.currentTarget.href
+            }`,
+            element_type: "button",
+            element_title: this.header,
+            content_category: "cta"
+        });
+    }
 }

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);
@@ -27,7 +27,7 @@
     padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
         var(--dx-g-spacing-sm);
     background: var(--dx-c-color-background);
-    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
+    box-shadow: 0 20px 28px 0 rgb(0 20 45 / 8%);
     transform: translateY(0);
     border-top: 1px solid transparent;
     transition: var(--dx-g-transition-transform-2x),
@@ -41,6 +41,7 @@
 
 .nav-menu.state-closed {
     opacity: 0;
+    visibility: hidden;
     transform: translateY(-16px);
     pointer-events: none;
 }

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { OptionWithNested } from "typings/custom";
+import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;
@@ -9,7 +9,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
     @api pathname: string | null = null;
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
     get navItems() {
@@ -24,7 +24,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         // then we use deepmapper to affect the actual root options (actual links)
         return deepmapOptions(
             navItems,
-            (app: Option, index: number, level: number) => {
+            (app: OptionWithNested, index: number, level: number) => {
                 const active = app.link
                     ? app.link.href === this.pathname
                     : false;
@@ -47,7 +47,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
         );
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
     private navElement: HTMLElement | null = null;
     private wasOpen: boolean = false;
     private showScrollShadow: boolean = false;

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "dxUtils/analytics";
 
 export default class HeaderMobileNavMenuOption extends LightningElement {
     @api href: string | null = null;
@@ -9,12 +9,20 @@ export default class HeaderMobileNavMenuOption extends LightningElement {
     @api menuLabel: string | null = null;
     @api itemLabel: string | null = null;
 
-    private sendGtm(e: PointerEvent) {
+    private sendGtm(e: any) {
         track(e.currentTarget, "custEv_topNavLinkClick", {
             navHeading: this.menuLabel || undefined,
             navSubHeading: this.itemLabel || undefined,
             clickText: this.href || undefined,
             pageLocation: window.location.pathname || undefined
         });
+
+        track(e.currentTarget!, "custEv_linkClick", {
+            click_text: this.itemLabel,
+            element_title: "dx-button",
+            click_url: this.href,
+            element_type: "link",
+            content_category: "cta"
+        });
     }
 }

package/src/modules/dx/headerNav/headerNav.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 a {
     text-decoration: none;
@@ -16,11 +16,19 @@ nav {
     position: relative;
 }
 
+.nav-list li:not(:last-child) {
+    margin-right: var(--dx-g-spacing-md);
+}
+
 .nav-list-item-nav-menu {
     display: none;
 }
 
 @media (max-width: 768px) {
+    .nav-list {
+        margin-top: 0;
+    }
+
     .nav-list-item-nav-menu {
         display: flex;
     }

package/src/modules/dx/headerNav/headerNav.html

@@ -14,6 +14,7 @@
                     <!-- DESKTOP "MORE CONTENT" NAV ITEM -->
                     <dx-dropdown
                         analytics-event="custEv_topNavLinkClick"
+                        analytics-payload={ANALYTICS_PAYLOAD}
                         if:true={navItem.options}
                         nav-item-label={navItem.label}
                         open-on-hover

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,18 +1,18 @@
 import { LightningElement, api } from "lwc";
-import { TabVariant, Option } from "typings/custom";
+import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
-    @api ariaLabel: string = "Navigation Bar";
+    @api ariaLabel: string = "Primary Navigation";
 
     @api
-    set navItems(_navItems: Option[]) {
+    set navItems(_navItems: OptionWithNested[]) {
         this._navItems = _navItems;
     }
 
     get navItems() {
         const activeItem = this._navItems
-            .filter((navItem: Option) => {
+            .filter((navItem: OptionWithNested) => {
                 if (!navItem.link || navItem.link.href === "/") {
                     return false;
                 }
@@ -31,7 +31,7 @@ export default class HeaderNav extends LightningElement {
                     (b.link?.href.length || 0) - (a.link?.href.length || 0)
             )[0];
 
-        const items = this._navItems.map((navItem: Option) =>
+        const items = this._navItems.map((navItem: OptionWithNested) =>
             navItem.link
                 ? {
                       ...navItem,
@@ -45,7 +45,11 @@ export default class HeaderNav extends LightningElement {
         return items;
     }
 
-    private _navItems: Option[] = [];
+    private _navItems: OptionWithNested[] = [];
+    private ANALYTICS_PAYLOAD = {
+        nav_level: "2",
+        nav_type: "global"
+    };
 
     private requestOpenNavMenu(e: PointerEvent) {
         const detail = (<HTMLButtonElement>e.currentTarget).getAttribute(

package/src/modules/dx/helmet/helmet.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 span {
     font-family: var(--dx-g-font-sans);
@@ -58,7 +58,7 @@ a:hover {
     --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
 }
 
-.helmet.variant_dark {
+.helmet.variant_intense {
     background-color: var(--dx-g-blue-vibrant-40);
 
     --dx-c-home-link-color: white;

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/hr/hr.css

@@ -1,18 +1,21 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
+    --dx-c-hr-color: var(--dx-g-gray-95);
+    --dx-c-font-color: var(--dx-g-hr-font-color);
+    --dx-c-stroke-width: 2px;
 }
 
 p,
 h2 {
     display: flex;
     flex-direction: row;
-    padding: 0 var(--dx-c-hr-padding-horizontal);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-sm);
-    color: var(--dx-g-blue-vibrant-20);
+    color: var(--dx-c-font-color);
+    text-transform: capitalize;
     letter-spacing: 0;
     line-height: 18px;
 }
@@ -21,10 +24,9 @@ p::before,
 h2::before,
 p::after,
 h2::after {
-    transform: translateY(-2px); /* offset for display font ghost padding */
     content: "";
     flex: 1 1;
-    border-bottom: 2px solid var(--dx-g-gray-95);
+    border-bottom: var(--dx-c-stroke-width) solid var(--dx-c-hr-color);
     margin: auto;
     margin-right: 0;
     margin-left: 0;
@@ -41,15 +43,13 @@ h2::after {
 dx-button {
     display: flex;
     width: 100%;
-    text-transform: uppercase;
-    padding: 0 var(--dx-c-hr-padding-horizontal);
+    text-transform: capitalize;
 }
 
 dx-button::before {
     content: "";
-    border-bottom: 2px solid var(--dx-g-gray-95);
+    border-bottom: var(--dx-c-stoke-width) solid var(--dx-c-hr-color);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dx/hr/hr.ts

@@ -7,6 +7,7 @@ export default class Hr extends LightningElement {
     @api href?: string | null;
     @api target: string | null = "_top";
     @api spacing: string | null = "2xl";
+    @api noPadding: boolean = false;
     @api variant: HrVariant | null = null;
 
     private get ariaRole() {
@@ -14,9 +15,14 @@ export default class Hr extends LightningElement {
     }
 
     private get style() {
-        return this.spacing
+        const spacing = this.spacing
             ? `margin: var(--dx-g-spacing-${this.spacing}) 0;`
             : "";
+        const padding = this.noPadding
+            ? ""
+            : "padding: 0 var(--dx-c-hr-padding-horizontal);";
+
+        return `${spacing}${padding}`;
     }
 
     private get isButtonVariant() {

package/src/modules/dx/icon/icon.css

@@ -1,9 +1,9 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;
 
-    --dx-c-icon-color: currentColor;
+    --dx-c-icon-color: currentcolor;
 }
 
 svg {

package/src/modules/dx/icon/icon.html

@@ -1,11 +1,22 @@
 <template>
-    <svg
-        aria-hidden="true"
-        style={style}
-        xmlns="http://www.w3.org/2000/svg"
-        if:true={symbol}
-        part="svg"
-    >
-        <use xlink:href={href}></use>
-    </svg>
+    <template if:true={symbol}>
+        <svg
+            if:true={hasAlt}
+            style={style}
+            xmlns="http://www.w3.org/2000/svg"
+            part="svg"
+            alt={alt}
+        >
+            <use xlink:href={href}></use>
+        </svg>
+        <svg
+            if:false={hasAlt}
+            style={style}
+            xmlns="http://www.w3.org/2000/svg"
+            part="svg"
+            aria-hidden="true"
+        >
+            <use xlink:href={href}></use>
+        </svg>
+    </template>
 </template>

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const fetches = new Map<string, Promise<any>>();
 
@@ -18,9 +18,14 @@ export default class Icon extends LightningElement {
     @api size: IconSize = "small";
     @api symbol!: IconSymbol;
     @api color?: string;
+    @api alt: string = "";
 
     private node: SVGSymbolElement | undefined;
 
+    private get hasAlt() {
+        return !!this.alt;
+    }
+
     private get style() {
         let stylestr = "";
         if (this.size !== "override" && this.size in sizeMap) {

package/src/modules/dx/iconBadge/iconBadge.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;
@@ -38,3 +38,15 @@ dx-icon {
 .shape-square {
     border-radius: var(--dx-g-spacing-sm);
 }
+
+.background-small {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+}
+
+.background-medium {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
+}
+
+.background-large {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
+}

package/src/modules/dx/iconBadge/iconBadge.html

@@ -1,10 +1,10 @@
 <template>
-    <div class={className} style={style}>
+    <div class={className} style={style} part="badge">
         <dx-icon
-            color={color}
             symbol={symbol}
             sprite={sprite}
-            size="override"
+            size={iconSize}
+            alt={alt}
         ></dx-icon>
     </div>
 </template>

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,12 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import {
+    IconSprite,
+    IconSymbol,
+    IconBadgeShape,
+    IconSize
+} from "typings/custom";
+import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
 
@@ -10,6 +15,9 @@ export default class IconBadge extends LightningElement {
     @api symbol!: IconSymbol;
     @api color?: string | null = null;
     @api backgroundColor?: string;
+    @api backgroundSize?: string;
+    @api iconSize?: IconSize = "override";
+    @api alt: string = "";
 
     _shape: IconBadgeShape = "circle";
     @api
@@ -30,13 +38,21 @@ export default class IconBadge extends LightningElement {
     }
 
     get className() {
-        return cx("icon-badge", `shape-${this.shape}`);
+        return cx(
+            "icon-badge",
+            `shape-${this.shape}`,
+            this.backgroundSize && `background-${this.backgroundSize}`
+        );
     }
 
     get style() {
-        return (
-            this.backgroundColor &&
-            `background-color: ${toDxColor(this.backgroundColor)}`
-        );
+        const color = this.color
+            ? `--dx-c-icon-badge-color: ${toDxColor(this.color)};`
+            : "";
+        const backgroundColor = this.backgroundColor
+            ? `background-color: ${toDxColor(this.backgroundColor)};`
+            : "";
+
+        return `${color}${backgroundColor}`;
     }
 }

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/button";
 
 :host {
     --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);
@@ -16,11 +16,6 @@ img {
     margin-right: var(--dx-g-spacing-sm);
 }
 
-span {
-    margin-top: 3px;
-    white-space: nowrap;
-}
-
 a img {
     transition: var(--dx-g-transition-filter-2x);
 }
@@ -51,4 +46,5 @@ img.size-large {
 
 .dx-text-label-1-dark {
     color: var(--dx-c-image-and-label-text-color);
+    text-align: left;
 }

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -1,10 +1,26 @@
 <template>
     <div if:false={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+            loading="lazy"
+        />
+
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </div>
     <a if:true={href} href={href} class="container">
-        <img class={imgClass} src={imgSrc} alt={imgAlt} part="image" />
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+            loading="lazy"
+        />
+
         <span class="dx-text-label-1-dark" part="label">{label}</span>
     </a>
 </template>