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

package/src/modules/dx/treeTile/treeTile.css

@@ -1,3 +1,6 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/commonTreeItem";
+
 :host {
     display: block;
 
@@ -20,46 +23,49 @@
     --tile-height: 20px;
 
     font-family: var(--dx-g-font-sans);
-    font-size: 13px;
+    font-size: 14px;
     line-height: var(--tile-height);
-    padding: 6px var(--dx-g-spacing-md);
-}
-
-.tile:not(.tile-selected):hover {
-    background-color: var(--dx-g-gray-90);
+    font-weight: var(--dx-g-font-normal);
 }
 
 .tile-root {
-    font-family: var(--dx-g-font-display);
+    font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-demi);
-    color: var(--dx-g-blue-vibrant-30);
+    font-weight: var(--dx-g-font-bold);
+    color: var(--dx-g-blue-vibrant-20);
     display: block;
 }
 
-.tile-selected {
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
-    border-radius: 0;
-}
-
-.truncate {
-    display: -webkit-box;
-    overflow: hidden;
-    word-break: break-word;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-
 .tile-icon {
     align-items: center;
     height: var(--tile-height);
+    padding: calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs))
+        calc(var(--dx-g-spacing-xs) + 2px)
+        calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs)) 0;
 }
 
 .tile-label {
     flex: 1;
 }
 
+.change-indicator {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    margin-left: 8px;
+    display: flex;
+    order: 3;
+}
+
+.change-indicator.changed {
+    background-color: darkorange;
+}
+
+.change-indicator.child-changed {
+    border: 3px solid darkorange;
+    background-color: transparent;
+}
+
 .tile-root .tile-expand-icon {
     margin-left: auto;
 }
@@ -70,124 +76,131 @@
 
 .tile-with-children .tile-expand-icon {
     order: 1;
-    padding-right: var(--dx-g-spacing-xs);
 }
 
 .indentation {
-    padding-left: var(--indentation);
+    padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
 }
 
 .tile-with-children .indentation {
     padding-left: calc(var(--indentation) - var(--base-indentation));
 }
 
+.tile-root-with-child .indentation {
+    padding-left: 0;
+}
+
+[aria-level="2"] {
+    --indentation: var(--dx-g-spacing-md);
+}
+
 [aria-level="3"] {
-    --indentation: var(--base-indentation);
+    --indentation: calc(2 * var(--base-indentation));
 }
 
 [aria-level="4"] {
-    --indentation: calc(2 * var(--base-indentation));
+    --indentation: calc(3 * var(--base-indentation));
 }
 
 [aria-level="5"] {
-    --indentation: calc(3 * var(--base-indentation));
+    --indentation: calc(4 * var(--base-indentation));
 }
 
 [aria-level="6"] {
-    --indentation: calc(4 * var(--base-indentation));
+    --indentation: calc(5 * var(--base-indentation));
 }
 
 [aria-level="7"] {
-    --indentation: calc(5 * var(--base-indentation));
+    --indentation: calc(6 * var(--base-indentation));
 }
 
 [aria-level="8"] {
-    --indentation: calc(6 * var(--base-indentation));
+    --indentation: calc(7 * var(--base-indentation));
 }
 
 [aria-level="9"] {
-    --indentation: calc(7 * var(--base-indentation));
+    --indentation: calc(8 * var(--base-indentation));
 }
 
 [aria-level="10"] {
-    --indentation: calc(8 * var(--base-indentation));
+    --indentation: calc(9 * var(--base-indentation));
 }
 
 [aria-level="11"] {
-    --indentation: calc(9 * var(--base-indentation));
+    --indentation: calc(10 * var(--base-indentation));
 }
 
 [aria-level="12"] {
-    --indentation: calc(10 * var(--base-indentation));
+    --indentation: calc(11 * var(--base-indentation));
 }
 
 [aria-level="13"] {
-    --indentation: calc(11 * var(--base-indentation));
+    --indentation: calc(12 * var(--base-indentation));
 }
 
 [aria-level="14"] {
-    --indentation: calc(12 * var(--base-indentation));
+    --indentation: calc(13 * var(--base-indentation));
 }
 
 [aria-level="15"] {
-    --indentation: calc(13 * var(--base-indentation));
+    --indentation: calc(14 * var(--base-indentation));
 }
 
 [aria-level="16"] {
-    --indentation: calc(14 * var(--base-indentation));
+    --indentation: calc(15 * var(--base-indentation));
 }
 
 [aria-level="17"] {
-    --indentation: calc(15 * var(--base-indentation));
+    --indentation: calc(16 * var(--base-indentation));
 }
 
 [aria-level="18"] {
-    --indentation: calc(16 * var(--base-indentation));
+    --indentation: calc(17 * var(--base-indentation));
 }
 
 [aria-level="19"] {
-    --indentation: calc(17 * var(--base-indentation));
+    --indentation: calc(18 * var(--base-indentation));
 }
 
 [aria-level="20"] {
-    --indentation: calc(18 * var(--base-indentation));
+    --indentation: calc(19 * var(--base-indentation));
 }
 
 [aria-level="21"] {
-    --indentation: calc(19 * var(--base-indentation));
+    --indentation: calc(20 * var(--base-indentation));
 }
 
 [aria-level="22"] {
-    --indentation: calc(20 * var(--base-indentation));
+    --indentation: calc(21 * var(--base-indentation));
 }
 
-dx-type-badge {
-    --dx-c-type-badge-text-width: 21px;
+dx-metadata-badge {
+    --dx-c-metadata-badge-text-width: 21px;
 }
 
-dx-type-badge.get {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-type-badge-background: var(--dx-g-blue-vibrant-90);
+dx-metadata-badge.get {
+    --dx-c-metadata-badge-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-metadata-badge-background: var(--dx-g-blue-vibrant-90);
 }
 
-dx-type-badge.put {
-    --dx-c-type-badge-color: var(--dx-g-yellow-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-yellow-vibrant-90);
+dx-metadata-badge.put {
+    --dx-c-metadata-badge-color: var(--dx-g-yellow-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-yellow-vibrant-90);
 }
 
-dx-type-badge.post {
-    --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+dx-metadata-badge.post {
+    --dx-c-metadata-badge-color: var(--dx-g-green-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-green-vibrant-90);
 }
 
-dx-type-badge.patch {
-    --dx-c-type-badge-color: var(--dx-g-teal-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-teal-vibrant-90);
+dx-metadata-badge.patch {
+    --dx-c-metadata-badge-color: var(--dx-g-teal-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-teal-vibrant-90);
 }
 
-dx-type-badge.delete {
-    --dx-c-type-badge-color: var(--dx-g-red-vibrant-40);
-    --dx-c-type-badge-background: var(--dx-g-hot-orange-vibrant-90);
+dx-metadata-badge.delete {
+    --dx-c-metadata-badge-color: var(--dx-g-red-vibrant-40);
+    --dx-c-metadata-badge-background: var(--dx-g-hot-orange-vibrant-90);
 }
 
 a {
@@ -197,10 +210,10 @@ a {
 
 a:link,
 a:visited {
-    color: var(--dx-g-gray-10);
+    color: var(--dx-g-blue-vibrant-20);
 }
 
 a:visited.tile-root,
 a:link.tile-root {
-    color: var(--dx-g-blue-vibrant-30);
+    color: var(--dx-g-blue-vibrant-20);
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -1,10 +1,7 @@
 <template>
-    <a href={href} class={tileClass}>
-        <div class="flex indentation" aria-level={tileAriaLevel}>
-            <span class="tile-label truncate" title={treeNode.label}>
-                {treeNode.label}
-            </span>
-            <div class="flex tile-expand-icon tile-icon" if:true={hasChildren}>
+    <a href={href} class={tileClass} target={target}>
+        <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
+            <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
                     size={iconSize}
@@ -13,12 +10,29 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <dx-type-badge
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
+                {treeNode.label}
+            </span>
+            <div
+                if:true={showChangedIndicator}
+                class="change-indicator changed"
+                title="This item has been changed"
+            ></div>
+            <div
+                if:true={showChildChangedIndicator}
+                class="change-indicator child-changed"
+                title="This item has changed children"
+            ></div>
+            <dx-metadata-badge
                 if:true={showMethod}
-                class={badgeClass}
-                size="xs"
+                class="flex tile-icon"
+                size="small"
                 value={methodText}
-            ></dx-type-badge>
+                color={metadataBadgeColor}
+            ></dx-metadata-badge>
         </div>
     </a>
 </template>

package/src/modules/dx/treeTile/treeTile.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { InternalTreeNode } from "typings/custom";
+import { Color, InternalTreeNode } from "typings/custom";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 const methodTextMap: {
     [key: string]: string;
@@ -12,6 +13,16 @@ const methodTextMap: {
     delete: "DELE"
 };
 
+const metadataBadgeColorMap: {
+    [key: string]: Color;
+} = {
+    get: "blue",
+    put: "yellow",
+    post: "green",
+    patch: "teal",
+    delete: "red"
+};
+
 export default class TreeTile extends LightningElement {
     @api isRoot = false;
     @api treeNode!: InternalTreeNode;
@@ -19,17 +30,22 @@ export default class TreeTile extends LightningElement {
     @api hasChildren = false;
     @api isSelected = false;
     @api href!: string;
+    @api showArrow = false;
+    @api target!: string;
 
     get tileAriaLevel() {
         return this.treeNode.level + 2;
     }
 
     private get iconSize() {
-        return this.isRoot ? "small" : "xsmall";
+        return "xsmall";
     }
 
-    private get badgeClass() {
-        return cx("flex", "tile-icon", this.treeNode.method);
+    private get metadataBadgeColor(): string | undefined {
+        if (this.treeNode.method) {
+            return metadataBadgeColorMap[this.treeNode.method];
+        }
+        return undefined;
     }
 
     private get showMethod() {
@@ -43,11 +59,20 @@ export default class TreeTile extends LightningElement {
         return "";
     }
 
+    private get showChangedIndicator() {
+        return normalizeBoolean(this.treeNode.isChanged);
+    }
+
+    private get showChildChangedIndicator() {
+        return normalizeBoolean(this.treeNode.isChildChanged);
+    }
+
     private get tileClass() {
-        return cx("tile", {
+        return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
-            "tile-selected": this.isSelected
+            "tile-root-with-child": this.isRoot && this.showArrow,
+            "sidebar-item-selected": this.isSelected
         });
     }
 

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,59 +1,2 @@
-@import "helpers/reset";
-
-:host {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-type-badge-background: var(--dx-g-cloud-blue-natural-90);
-    --dx-c-type-badge-text-width: unset;
-    --dx-c-type-badge-border-radius: var(--dx-g-spacing-xs);
-    --dx-c-type-badge-text-transform: uppercase;
-    --dx-c-type-badge-height: var(--dx-g-spacing-xl);
-}
-
-.typebadge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: min-content;
-    height: var(--dx-c-type-badge-height);
-    padding: 0 var(--dx-g-spacing-md);
-    border-radius: var(--dx-c-type-badge-border-radius);
-    background: var(--dx-c-type-badge-background);
-    color: var(--dx-c-type-badge-color);
-    text-transform: var(--dx-c-type-badge-text-transform);
-    font-size: var(--dx-g-text-xs);
-    font-family: var(--dx-g-font-display);
-    letter-spacing: 0.7px;
-    white-space: nowrap;
-}
-
-.typebadge div {
-    text-align: center;
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width);
-}
-
-.typebadge.size-small {
-    height: var(--dx-g-spacing-md);
-    padding: 0 var(--dx-g-spacing-sm);
-    font-size: 10px;
-    letter-spacing: 0.6px;
-}
-
-.typebadge.size-xs {
-    height: var(--dx-g-spacing-md);
-    padding: 0 var(--dx-g-spacing-xs);
-    font-size: 8px;
-    letter-spacing: 0.5px;
-}
-
-.typebadge.size-xs div {
-    transform: translateY(1px);
-}
-
-@media screen and (max-width: 768px) {
-    .typebadge:not(.size-small):not(.size-xs) {
-        height: var(--dx-g-spacing-lg);
-        padding: 0 var(--dx-g-spacing-sm);
-        font-size: var(--dx-g-text-2xs);
-    }
-}
+@import "dxHelpers/reset";
+@import "dxHelpers/typeBadge";

package/src/modules/dx/typeBadge/typeBadge.html

@@ -1,5 +1,11 @@
 <template>
     <div class={className} style={style}>
-        <div>{value}</div>
+        <dx-icon
+            if:true={iconSymbol}
+            symbol={iconSymbol}
+            sprite={iconSprite}
+            size="xsmall"
+        ></dx-icon>
+        <span>{value}</span>
     </div>
 </template>

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -1,20 +1,109 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { TypeBadgeSize } from "typings/custom";
-import { Brand } from "typings/custom";
+import {
+    Brand,
+    Color,
+    ContentType,
+    IconSprite,
+    IconData,
+    IconSymbol,
+    TypeBadgeSize
+} from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+import {
+    CONTENT_TYPE_LABELS,
+    CONTENT_TYPE_ICONS
+} from "dxConstants/contentTypes";
+import {
+    getContentTypeColorScope,
+    isContentType,
+    getContentTypeColorVariables
+} from "dxUtils/contentTypes";
 
 export default class TypeBadge extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
-    @api value: string = "";
-    @api brand?: Brand;
+    @api size: TypeBadgeSize = "default";
+    @api variant: Brand | ContentType = "default";
+    @api color?: Color;
+    @api dark?: false;
+
+    @api
+    get iconSymbol(): IconSymbol | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSymbol
+            : this._iconSymbol;
+    }
+    set iconSymbol(value: IconSymbol | undefined) {
+        if (value) {
+            this._iconSymbol = value;
+        }
+    }
+
+    @api
+    get iconSprite(): IconSprite | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSprite
+            : this._iconSprite;
+    }
+    set iconSprite(value: IconSprite | undefined) {
+        if (value) {
+            this._iconSprite = value;
+        }
+    }
+
+    @api
+    get value(): string {
+        return this._value || this.variantLabel || "";
+    }
+
+    set value(value) {
+        if (value) {
+            this._value = value;
+        }
+    }
+
+    private _value?: string;
+    private _iconSprite?: IconSprite;
+    private _iconSymbol?: IconSymbol;
+
+    private get variantIconData(): IconData | null {
+        if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
+            return CONTENT_TYPE_ICONS[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantLabel(): string | null {
+        if (this.isContentType) {
+            return CONTENT_TYPE_LABELS[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantColorScope(): string | null {
+        return getContentTypeColorScope(this.variant);
+    }
+
+    private get isContentType(): boolean {
+        return isContentType(this.variant);
+    }
 
     private get className(): string {
-        return cx("typebadge", `size-${this.size}`);
+        return cx("dx-badge", `size-${this.size}`);
     }
 
     private get style(): string {
-        if (this.brand) {
-            return `--dx-c-type-badge-color: var(--dx-g-brand-${this.brand}-color); --dx-c-type-badge-background: var(--dx-g-brand-${this.brand}-color-background);`;
+        if (this.dark) {
+            return buildStyleColorVariables({
+                background: "--dx-g-purple-vibrant-40",
+                color: "--dx-g-brand-default-color-background"
+            });
+        }
+        if (this.variantColorScope) {
+            return getContentTypeColorVariables(this.variant);
+        }
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            return buildStyleColorVariables(variables!);
         }
         return "";
     }

package/src/modules/dx/vimeoPlayer/vimeoPlayer.css

@@ -0,0 +1 @@
+@import "dxHelpers/reset";

package/src/modules/dx/vimeoPlayer/vimeoPlayer.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="video-container" lwc:dom="manual"></div>
+</template>

package/src/modules/dx/vimeoPlayer/vimeoPlayer.ts

@@ -0,0 +1,31 @@
+import { LightningElement, api } from "lwc";
+import Player from "@vimeo/player";
+import { Options, Player as PlayerType } from "vimeo__player";
+
+export default class VimeoPlayer extends LightningElement {
+    @api videoId!: number;
+    @api
+    get options() {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = JSON.parse(value);
+    }
+
+    private player!: PlayerType;
+    private _options: Options = {
+        responsive: true,
+        title: false
+    };
+
+    renderedCallback(): void {
+        const videoContainer = this.template.querySelector(
+            ".video-container"
+        ) as HTMLElement;
+
+        this.player = new Player(videoContainer, {
+            id: this.videoId,
+            ...this.options
+        });
+    }
+}

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

@@ -0,0 +1,31 @@
+import { LightningElement, api } from "lwc";
+import { LinkTarget, ContentType } from "typings/custom";
+
+const MOBILE_QUERY = "(max-width: 640px)";
+
+export abstract class ArchiveCard extends LightningElement {
+    @api contentType!: ContentType;
+    @api href!: string;
+    @api header!: string;
+    @api target: LinkTarget = "_self";
+
+    private matchMedia!: MediaQueryList;
+    protected mobile = false;
+
+    connectedCallback(): void {
+        this.matchMedia = window.matchMedia(MOBILE_QUERY);
+        this.onMediaChange(this.matchMedia);
+        this.matchMedia.addEventListener("change", this.onMediaChange);
+    }
+
+    disconnectedCallback(): void {
+        this.matchMedia.removeEventListener("change", this.onMediaChange);
+    }
+
+    private onMediaChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.mobile = e.matches);
+
+    protected get badgeSize(): string {
+        return (this.mobile && "small") || "default";
+    }
+}