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

package/src/modules/dx/breadcrumbs/breadcrumbs.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
@@ -79,7 +79,7 @@ dx-dropdown {
     }
 
     nav.state-long
-        .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+        .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
         display: none;
     }
 
@@ -101,7 +101,7 @@ dx-dropdown {
         display: initial;
     }
 
-    .breadcrumb-slash:not(:nth-last-child(1)):not(:nth-last-child(2)) {
+    .breadcrumb-slash:not(:nth-last-child(1), :nth-last-child(2)) {
         display: none;
     }
 

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

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Breadcrumb, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { Breadcrumb, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
 
 type LabelMap = { [href: string]: string };
 type NormalizedBreadcrumb = Breadcrumb & { last: boolean; asLink: boolean };
@@ -19,9 +19,9 @@ const toLabel = (val: string) => {
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Navigation Breadcrumbs";
     @api baseHref: string = "/";
-    @api navItems: Option[] = [];
+    @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;
@@ -42,19 +42,22 @@ export default class Breadcrumbs extends LightningElement {
     private _breadcrumbs!: Breadcrumb[];
 
     private get labelMap(): LabelMap {
-        const deepReducer = (options: Option[]) =>
-            options.reduce((acc: LabelMap, item: Option): LabelMap => {
-                if (item.options) {
-                    return { ...acc, ...deepReducer(item.options) };
-                }
-                if (!item.link) {
-                    return acc;
-                }
-                return {
-                    ...acc,
-                    [item.link.href]: item.label
-                };
-            }, {});
+        const deepReducer = (options: OptionWithNested[]) =>
+            options.reduce(
+                (acc: LabelMap, item: OptionWithNested): LabelMap => {
+                    if (item.options) {
+                        return { ...acc, ...deepReducer(item.options) };
+                    }
+                    if (!item.link) {
+                        return acc;
+                    }
+                    return {
+                        ...acc,
+                        [item.link.href]: item.label
+                    };
+                },
+                {}
+            );
         return this.navItems ? deepReducer(this.navItems) : {};
     }
 
@@ -82,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/button/button.css

@@ -1,36 +1,50 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     width: min-content;
     font-size: inherit;
 
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-background-color: transparent;
+    --dx-c-button-primary-color: var(--dx-g-button-primary-color);
+    --dx-c-button-secondary-color: var(--dx-g-button-secondary-color);
     --dx-c-button-primary-color-hover: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-90);
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-30);
+    --dx-c-button-secondary-color-hover: var(
+        --dx-g-button-secondary-color-hover
+    );
+    --dx-c-button-inline-color: var(--dx-g-button-inline-color);
+    --dx-c-button-inline-color-hover: var(--dx-g-button-inline-color-hover);
     --dx-c-button-justify-content: center;
     --dx-c-button-opacity: 1;
     --dx-c-button-font-size: var(--dx-g-text-sm);
+    --dx-c-button-font-weight: var(--dx-g-font-normal);
+    --dx-c-button-display: flex;
 }
 
 .button {
+    background-color: var(--dx-c-button-background-color);
     opacity: var(--dx-c-button-opacity);
     width: inherit;
-    display: flex;
+    display: var(--dx-c-button-display);
     align-items: center;
     justify-content: var(--dx-c-button-justify-content);
     user-select: none;
     white-space: nowrap;
     font-size: var(--dx-c-button-font-size);
     transition: var(--dx-g-transition-hue-1x);
-    padding: 0 var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
+    padding: var(--dx-c-button-vertical-spacing, 0)
+        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
     border-radius: var(--dx-g-spacing-xs);
+    font-weight: var(--dx-c-button-font-weight);
 }
 
 .button:focus {
     opacity: 1;
 }
 
+.button:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .button.variant_inline-inherit {
     font-size: inherit;
     text-transform: inherit;
@@ -40,28 +54,28 @@
 
 .button dx-icon {
     display: inline;
+    vertical-align: var(--dx-c-button-icon-vertical-align, unset);
+
+    --dx-c-icon-color: var(--dx-g-button-icon-color, currentcolor);
 }
 
 .button.variant_inline dx-icon,
-.button.variant_inline-inherit dx-icon {
+.button.variant_inline-inherit dx-icon,
+.button.variant_icon-only dx-icon {
     display: inline-block;
-    transform: translate(0, -2px);
 }
 
 .button > span {
     font-family: inherit;
     font-size: inherit;
+    font-weight: inherit;
+    vertical-align: var(--dx-c-button-span-vertical-align, unset);
 }
 
 .button:not(.variant_inline-inherit).font-display {
     font-family: var(--dx-g-font-display);
 }
 
-.button.font-display:not(.variant_inline):not(.variant_inline-inherit) > span {
-    /* offset accounts for display font's ghost padding */
-    margin-top: 5px;
-}
-
 .button.font-sans {
     font-family: var(--dx-g-font-sans);
 }
@@ -104,6 +118,15 @@
     width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
 }
 
+.button.size-hero {
+    font-size: var(--dx-g-text-lg);
+    height: 52px;
+}
+
+.button.size-hero.style-icon.slot-empty {
+    width: var(--dx-c-slot-empty-width, 52px);
+}
+
 /* primary */
 
 .button.variant_primary {
@@ -112,20 +135,32 @@
     border: 1px solid var(--dx-c-button-primary-color);
 }
 
-.button.variant_primary:hover {
+.button.variant_primary:hover,
+:host([aria-expanded="true"]) .button.variant_primary {
     background: var(--dx-c-button-primary-color-hover);
     border-color: var(--dx-c-button-primary-color-hover);
 }
 
-/* secondary */
+/* secondary / quaternary */
 
 .button.variant_secondary {
-    color: var(--dx-c-button-primary-color);
-    background: transparent;
-    border: 1px solid var(--dx-c-button-primary-color);
+    background: var(--dx-c-button-background-color);
 }
 
-.button.variant_secondary:hover {
+.button.variant_quaternary {
+    background: white;
+}
+
+.button.variant_secondary,
+.button.variant_quaternary {
+    color: var(--dx-c-button-secondary-color);
+    border: 1px solid var(--dx-c-button-secondary-color);
+}
+
+.button.variant_secondary:hover,
+.button.variant_quaternary:hover,
+:host([aria-expanded="true"]) .button.variant_secondary,
+:host([aria-expanded="true"]) .button.variant_quaternary {
     background: var(--dx-c-button-secondary-color-hover);
 }
 
@@ -134,11 +169,16 @@
 .button.variant_tertiary,
 .button.variant_inline,
 .button.variant_inline-inherit {
-    color: var(--dx-c-button-primary-color);
+    color: var(--dx-c-button-inline-color);
     border: 1px solid transparent;
 }
 
-.button.variant_tertiary:hover {
+.button.variant_inline.light-text {
+    color: white;
+}
+
+.button.variant_tertiary:hover,
+:host([aria-expanded="true"]) .button.variant_tertiary {
     background: var(--dx-c-button-secondary-color-hover);
     border-color: var(--dx-c-button-secondary-color-hover);
 }
@@ -153,7 +193,9 @@
 }
 
 .button.variant_inline:hover,
-.button.variant_inline-inherit:hover {
+.button.variant_inline-inherit:hover,
+:host([aria-expanded="true"])
+    :is(.button.variant_inline, .button.variant_inline-inherit) {
     color: var(--dx-c-button-inline-color-hover);
 }
 
@@ -161,14 +203,26 @@
     pointer-events: none;
 }
 
-/* custom */
-.button.variant_custom {
+/* custom and icon-only */
+.button.variant_icon-only {
+    padding: 0;
+    height: unset;
+    width: unset;
+}
+
+.button.variant_custom,
+.button.variant_icon-only,
+.button.variant_custom:hover.state-disabled,
+.button.variant_icon-only:hover.state-disabled {
     color: var(--dx-c-button-custom-color);
     background: var(--dx-c-button-custom-background);
     border: 1px solid var(--dx-c-button-custom-border);
 }
 
-.button.variant_custom:hover {
+.button.variant_custom:hover,
+.button.variant_icon-only:hover,
+:host([aria-expanded="true"]) .button.variant_custom,
+:host([aria-expanded="true"]) .button.variant_icon-only {
     color: var(--dx-c-button-custom-color-hover);
     background: var(--dx-c-button-custom-background-hover);
     border-color: var(--dx-c-button-custom-border-hover);

package/src/modules/dx/button/button.html

@@ -7,11 +7,12 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
             if:true={showIcon}
+            color={iconColor}
             sprite={iconSprite}
             size={iconSize}
             symbol={iconSymbol}
@@ -29,11 +30,12 @@
         aria-label={ariaLabel}
         part="container"
     >
-        <span if:false={loading}>
+        <span if:false={loading} part="content">
             <slot onslotchange={onSlotChange}></slot>
         </span>
         <dx-icon
             if:true={showIcon}
+            color={iconColor}
             sprite={iconSprite}
             size={iconSize}
             symbol={iconSymbol}

package/src/modules/dx/button/button.ts

@@ -1,24 +1,32 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
+    ButtonTextColor,
+    ButtonTarget,
     ButtonVariant,
+    ButtonSize,
     IconSprite,
     IconSize,
-    IconSymbol,
-    LightningSlotElement
+    IconSymbol
 } from "typings/custom";
 
 export default class Button extends LightningElement {
+    private _didSetFormAttribute = false;
     @api ariaLabel: string = "";
     @api disabled: boolean | null = null;
+    @api iconColor?: string;
     @api iconSize?: IconSize = "small";
     @api iconSprite?: IconSprite = "utility";
     @api iconSymbol?: IconSymbol;
     @api iconPosition?: "right" | "left" = "right";
     @api loading: boolean = false;
-    @api size: "large" | "small" = "small";
+    @api size: ButtonSize = "small";
     @api variant: ButtonVariant = "primary";
+    @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
+    @api form: string | undefined;
+    @api name?: string;
+    @api value?: any;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";
@@ -26,7 +34,7 @@ export default class Button extends LightningElement {
     // link props
     @api href: string | null = null;
     @api download: string | null = null;
-    @api target: "_self" | "_blank" | "_parent" | "_top" | null = null;
+    @api target: ButtonTarget = null;
     @api rel: string | null = null;
 
     @api focus() {
@@ -43,21 +51,40 @@ export default class Button extends LightningElement {
     }
 
     private get className(): string {
+        const isIconOnly = this.variant === "icon-only";
+        const iconPositionClassName = `icon-${this.iconPosition || "left"}`;
+        const inlineTextColorClassName = `${this.inlineTextColor}-text`;
         return cx(
             "button",
-            this.disabled && "state-disabled",
-            `variant_${this.variant}`,
-            this.loading && "state-loading",
-            `size-${this.size}`,
-            !!this.iconSymbol && "style-icon",
-            this.isSlotEmpty && "slot-empty",
             `font-${this.font}`,
-            this.iconPosition === "right" ? "icon-right" : "icon-left"
+            `size-${this.size}`,
+            `variant_${this.variant}`,
+            {
+                "slot-empty": !isIconOnly && !this.loading && this.isSlotEmpty,
+                "state-disabled": this.disabled,
+                "state-loading": this.loading,
+                "style-icon": !!this.iconSymbol,
+                [iconPositionClassName]: !isIconOnly,
+                [inlineTextColorClassName]: this.variant === "inline"
+            }
         );
     }
 
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
+    renderedCallback() {
+        if (
+            !this.href &&
+            typeof this.form !== "undefined" &&
+            !this._didSetFormAttribute
+        ) {
+            this._didSetFormAttribute = true;
+            this.template
+                .querySelector("button")
+                ?.setAttribute("form", this.form);
+        }
+    }
+
+    private onSlotChange(e: Event) {
+        const slot = e.target as HTMLSlotElement;
+        this.isSlotEmpty = slot.assignedNodes().length === 0;
     }
 }

package/src/modules/dx/buttonToggle/buttonToggle.css

@@ -0,0 +1,50 @@
+@import "dxHelpers/reset";
+
+button {
+    border: 2px solid var(--dx-g-gray-50);
+    border-radius: 4px;
+    color: var(--dx-g-gray-50);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-smd);
+}
+
+button:focus {
+    outline: 5px solid var(--dx-g-blue-vibrant-60);
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+button:hover {
+    border-color: var(--dx-g-blue-vibrant-20);
+}
+
+button:focus,
+button:hover {
+    background-color: var(--dx-g-blue-vibrant-95);
+    color: var(--dx-g-blue-vibrant-20);
+}
+
+button:disabled,
+button:disabled:hover {
+    background-color: var(--dx-g-gray-80);
+    border-color: var(--dx-g-gray-80);
+    color: white;
+    cursor: default;
+}
+
+button:focus:hover {
+    border-color: var(--dx-g-blue-vibrant-50);
+}
+
+.label-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.pressed {
+    background-color: var(--sds-g-gray-14);
+    border-color: var(--sds-g-gray-14);
+    color: white;
+}

package/src/modules/dx/buttonToggle/buttonToggle.html

@@ -0,0 +1,17 @@
+<template>
+    <button
+        aria-labelledby="label"
+        class={className}
+        onclick={handleMouseEvent}
+        onmouseenter={handleMouseEvent}
+        onmouseleave={handleMouseEvent}
+        onfocus={handleMouseEvent}
+        onblur={handleMouseEvent}
+        disabled={disabled}
+    >
+        <div class="label-container">
+            <span id="label">{label}</span>
+            <dx-icon sprite="utility" symbol={symbol} size="small"></dx-icon>
+        </div>
+    </button>
+</template>

package/src/modules/dx/buttonToggle/buttonToggle.ts

@@ -0,0 +1,75 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class ButtonToggle extends LightningElement {
+    @api label!: string;
+
+    @api
+    get value() {
+        return this._value;
+    }
+    set value(value: boolean) {
+        this._value = normalizeBoolean(value);
+    }
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value: boolean) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    private _value = false;
+    private _disabled = false;
+    private mouseHovering = false;
+    private hasFocus = false;
+
+    private get className(): string {
+        return cx(this.value && "pressed");
+    }
+
+    private get symbol() {
+        if (
+            (this.value && this.mouseHovering && !this.hasFocus) ||
+            (this.value && this.hasFocus)
+        ) {
+            return "close";
+        } else if (this.value) {
+            return "check";
+        }
+
+        return "add";
+    }
+
+    private handleMouseEvent(e: MouseEvent) {
+        switch (e.type) {
+            case "click":
+                this._value = !this._value;
+                this.dispatchEvent(
+                    new CustomEvent("toggle", {
+                        detail: {
+                            label: this.label,
+                            value: this.value
+                        }
+                    })
+                );
+                break;
+            case "mouseenter":
+                this.mouseHovering = true;
+                break;
+            case "mouseleave":
+                this.mouseHovering = false;
+                break;
+            case "focus":
+                this.hasFocus = true;
+                break;
+            case "blur":
+                this.hasFocus = false;
+                break;
+            default:
+                break;
+        }
+    }
+}

package/src/modules/dx/cardBlogPost/cardBlogPost.css

@@ -1,10 +1,10 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 dx-card-content {
     --dx-c-body-max-lines: 3;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     dx-card-content::part(body),
     dx-card-content::part(datetime) {
         display: none;

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

@@ -1,16 +1,17 @@
 <template>
     <dx-card-content
-        author-href={authorHref}
-        author-img-src={authorImgSrc}
-        author-label={authorLabel}
+        authors={authors}
         body={body}
         featured={featured}
         href={href}
+        href-click={onLinkClick}
         img-alt={imgAlt}
         img-src={imgSrc}
         label={label}
         target={target}
-        title={title}
+        header={header}
+        layout={layout}
+        content-type="blogs"
     >
         <dx-formatted-date-time
             if:true={_datetime}

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

@@ -1,9 +1,7 @@
 import { LightningElement, api } from "lwc";
+import { track } from "dxUtils/analytics";
 
 export default class CardBlogPost extends LightningElement {
-    @api authorHref?: string | null = null;
-    @api authorImgSrc!: string | null;
-    @api authorLabel!: string | null;
     @api body!: string;
     @api datetime!: string;
     @api dateTime?: string | null = null;
@@ -13,11 +11,36 @@ 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 layout: "vertical" | "horizontal" = "vertical";
+    @api clickEvent?: () => void;
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider
     private get _datetime() {
         return this.datetime || this.dateTime;
     }
+
+    private onLinkClick(event: Event) {
+        if (this.clickEvent) {
+            this.clickEvent();
+        }
+
+        const payload = {
+            click_text: this.header,
+            click_url: `${window.location.origin}${this.href}`,
+            element_title: this.header,
+            element_type: "card",
+            content_category: "link",
+            recommendation_type: this.origin
+        };
+        track(event.target!, "custEv_blogCardClick", {
+            ...payload,
+            blog_author: this.authors,
+            blog_title: this.header
+        });
+        track(event.target!, "custEv_linkClick", payload);
+    }
 }