@salesforcedevs/dx-components 0.79.2-alpha.0 → 0.79.3

package/lwc.config.json

@@ -46,6 +46,7 @@
         "dx/imageAndLabel",
         "dx/input",
         "dx/logo",
+        "dx/metadataBadge",
         "dx/modalDrawer",
         "dx/pagination",
         "dx/podcastHost",
@@ -68,10 +69,12 @@
         "dx/tooltip",
         "dx/tree",
         "dx/typeBadge",
-        "dx/typeBadgeGroup",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
         "dxBaseElements/matchMediaElement",
+        "dxConstants/brands",
+        "dxConstants/colors",
+        "dxConstants/contentTypes",
         "dxHelpers/animations",
         "dxHelpers/button",
         "dxHelpers/card",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.79.2-alpha.0",
+    "version": "0.79.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,5 @@
         "@types/lodash.kebabcase": "^4.1.7",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "1968be492da3999898cb9229e05f6c00e1d70283"
+    "gitHead": "1ac28eaeb46528d77fbaabad4471b9e87e39d08e"
 }

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

@@ -12,6 +12,7 @@
                 card_section-text
             "
         >
+            <span class="dx-text-label-3">{label}</span>
             <dx-card-title title={title} target={target}></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
         </div>

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

@@ -44,8 +44,7 @@
                         {location}
                     </span>
                     <dx-type-badge
-                        color={brandType}
-                        type="content-type"
+                        color={typeBadgeColor}
                         value={type}
                         if:true={type}
                     ></dx-type-badge>

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

@@ -36,7 +36,7 @@ export default class CardEvent extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private get brandType() {
+    private get typeBadgeColor() {
         return this.type === "Webinar" ? "green" : "red";
     }
 }

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

@@ -1,11 +1,6 @@
 <template>
     <div class={containerClass}>
-        <dx-type-badge
-            color={badgeColor}
-            type="content-type"
-            value={contentType}
-            size={badgeSize}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
         <dx-card-title
             if:true={title}
             href={href}

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -10,8 +10,8 @@ export default class ExpandedCard extends ArchiveCard {
     @api authorImgSrc?: string | null = null;
     @api length?: string;
 
-    private get isBlog() {
-        return this.contentType === "Blog";
+    private get isBlog(): boolean {
+        return this.contentType === "blog";
     }
 
     private get hasAuthor(): boolean {

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

@@ -3,11 +3,6 @@
         <a class="dx-text-truncate" href={href} target={target}>
             <h4>{title}</h4>
         </a>
-        <dx-type-badge
-            color={badgeColor}
-            size={badgeSize}
-            type="content-type"
-            value={contentType}
-        ></dx-type-badge>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
     </div>
 </template>

package/src/modules/dx/metadataBadge/metadataBadge.css

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

package/src/modules/dx/metadataBadge/metadataBadge.html

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style}>
+        <span>{value}</span>
+    </div>
+</template>

package/src/modules/dx/metadataBadge/metadataBadge.ts

@@ -0,0 +1,24 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { Color, TypeBadgeSize } from "typings/custom";
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+
+export default class MetadataBadge extends LightningElement {
+    @api size: TypeBadgeSize = "default";
+    @api color?: Color;
+    @api value!: string;
+
+    private get className(): string {
+        return cx("badge", `size-${this.size}`);
+    }
+
+    private get style(): string {
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            if (variables) {
+                return buildStyleColorVariables(variables);
+            }
+        }
+        return "";
+    }
+}

package/src/modules/dx/tooltip/microtip.css

@@ -1,5 +1,6 @@
 /* Code generated by scripts/postinstall.js DO NOT EDIT*/
 
+
 /* -------------------------------------------------------------------
   Microtip
 
@@ -15,251 +16,254 @@
   3. Position Modifiers
 --------------------------------------------------------------------*/
 
+
 /* ------------------------------------------------
   [1] Base Styles
 -------------------------------------------------*/
 
 [aria-label][role~="tooltip"] {
-    position: relative;
+  position: relative;
 }
 
 [aria-label][role~="tooltip"]::before,
 [aria-label][role~="tooltip"]::after {
-    transform: translate3d(0, 0, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    will-change: transform;
-    opacity: 0;
-    pointer-events: none;
-    transition: all var(--microtip-transition-duration, 0.18s)
-        var(--microtip-transition-easing, ease-in-out)
-        var(--microtip-transition-delay, 0s);
-    position: absolute;
-    box-sizing: border-box;
-    z-index: 10;
-    transform-origin: top;
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  pointer-events: none;
+  transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
+  position: absolute;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
 }
 
 [aria-label][role~="tooltip"]::before {
-    background-size: 100% auto !important;
-    content: "";
+  background-size: 100% auto !important;
+  content: "";
 }
 
 [aria-label][role~="tooltip"]::after {
-    background: rgba(17, 17, 17, 0.9);
-    border-radius: 4px;
-    color: #ffffff;
-    content: attr(aria-label);
-    font-size: var(--microtip-font-size, 13px);
-    font-weight: var(--microtip-font-weight, normal);
-    text-transform: var(--microtip-text-transform, none);
-    padding: 0.5em 1em;
-    white-space: nowrap;
-    box-sizing: content-box;
+  background: rgba(17, 17, 17, .9);
+  border-radius: 4px;
+  color: #ffffff;
+  content: attr(aria-label);
+  font-size: var(--microtip-font-size, 13px);
+  font-weight: var(--microtip-font-weight, normal);
+  text-transform: var(--microtip-text-transform, none);
+  padding: .5em 1em;
+  white-space: nowrap;
+  box-sizing: content-box;
 }
 
 [aria-label][role~="tooltip"]:hover::before,
 [aria-label][role~="tooltip"]:hover::after,
 [aria-label][role~="tooltip"]:focus::before,
 [aria-label][role~="tooltip"]:focus::after {
-    opacity: 1;
-    pointer-events: auto;
+  opacity: 1;
+  pointer-events: auto;
 }
 
+
+
 /* ------------------------------------------------
   [2] Position Modifiers
 -------------------------------------------------*/
 
 [role~="tooltip"][data-microtip-position|="top"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-        no-repeat;
-    height: 6px;
-    width: 18px;
-    margin-bottom: 5px;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-bottom: 5px;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    margin-bottom: 11px;
+  margin-bottom: 11px;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::before {
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position|="top"]:hover::before {
-    transform: translate3d(-50%, -5px, 0);
+  transform: translate3d(-50%, -5px, 0);
 }
 
 [role~="tooltip"][data-microtip-position|="top"]::after {
-    transform: translate3d(-50%, 0, 0);
-    bottom: 100%;
-    left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  bottom: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position="top"]:hover::after {
-    transform: translate3d(-50%, -5px, 0);
+  transform: translate3d(-50%, -5px, 0);
 }
 
 /* ------------------------------------------------
   [2.1] Top Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="top-left"]::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
-    bottom: 100%;
+  transform: translate3d(calc(-100% + 16px), 0, 0);
+  bottom: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="top-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), -5px, 0);
+  transform: translate3d(calc(-100% + 16px), -5px, 0);
 }
 
+
 /* ------------------------------------------------
   [2.2] Top Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="top-right"]::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
-    bottom: 100%;
+  transform: translate3d(calc(0% + -16px), 0, 0);
+  bottom: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="top-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), -5px, 0);
+  transform: translate3d(calc(0% + -16px), -5px, 0);
 }
 
+
 /* ------------------------------------------------
   [2.3] Bottom
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position|="bottom"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-        no-repeat;
-    height: 6px;
-    width: 18px;
-    margin-top: 5px;
-    margin-bottom: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::after {
-    margin-top: 11px;
+  margin-top: 11px;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::before {
-    transform: translate3d(-50%, -10px, 0);
-    bottom: auto;
-    left: 50%;
-    top: 100%;
+  transform: translate3d(-50%, -10px, 0);
+  bottom: auto;
+  left: 50%;
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]:hover::before {
-    transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
 }
 
 [role~="tooltip"][data-microtip-position|="bottom"]::after {
-    transform: translate3d(-50%, -10px, 0);
-    top: 100%;
-    left: 50%;
+  transform: translate3d(-50%, -10px, 0);
+  top: 100%;
+  left: 50%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom"]:hover::after {
-    transform: translate3d(-50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.4] Bottom Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="bottom-left"]::after {
-    transform: translate3d(calc(-100% + 16px), -10px, 0);
-    top: 100%;
+  transform: translate3d(calc(-100% + 16px), -10px, 0);
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
-    transform: translate3d(calc(-100% + 16px), 0, 0);
+  transform: translate3d(calc(-100% + 16px), 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.5] Bottom Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="bottom-right"]::after {
-    transform: translate3d(calc(0% + -16px), -10px, 0);
-    top: 100%;
+  transform: translate3d(calc(0% + -16px), -10px, 0);
+  top: 100%;
 }
 
 [role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
-    transform: translate3d(calc(0% + -16px), 0, 0);
+  transform: translate3d(calc(0% + -16px), 0, 0);
 }
 
+
 /* ------------------------------------------------
   [2.6] Left
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="left"]::before,
 [role~="tooltip"][data-microtip-position="left"]::after {
-    bottom: auto;
-    left: auto;
-    right: 100%;
-    top: 50%;
-    transform: translate3d(10px, -50%, 0);
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  transform: translate3d(10px, -50%, 0);
 }
 
 [role~="tooltip"][data-microtip-position="left"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-        no-repeat;
-    height: 18px;
-    width: 6px;
-    margin-right: 5px;
-    margin-bottom: 0;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
 }
 
 [role~="tooltip"][data-microtip-position="left"]::after {
-    margin-right: 11px;
+  margin-right: 11px;
 }
 
 [role~="tooltip"][data-microtip-position="left"]:hover::before,
 [role~="tooltip"][data-microtip-position="left"]:hover::after {
-    transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
 }
 
+
 /* ------------------------------------------------
   [2.7] Right
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-position="right"]::before,
 [role~="tooltip"][data-microtip-position="right"]::after {
-    bottom: auto;
-    left: 100%;
-    top: 50%;
-    transform: translate3d(-10px, -50%, 0);
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  transform: translate3d(-10px, -50%, 0);
 }
 
 [role~="tooltip"][data-microtip-position="right"]::before {
-    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E")
-        no-repeat;
-    height: 18px;
-    width: 6px;
-    margin-bottom: 0;
-    margin-left: 5px;
+  background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
 }
 
 [role~="tooltip"][data-microtip-position="right"]::after {
-    margin-left: 11px;
+  margin-left: 11px;
 }
 
 [role~="tooltip"][data-microtip-position="right"]:hover::before,
 [role~="tooltip"][data-microtip-position="right"]:hover::after {
-    transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
 }
 
 /* ------------------------------------------------
   [3] Size
 -------------------------------------------------*/
 [role~="tooltip"][data-microtip-size="small"]::after {
-    white-space: initial;
-    width: 80px;
+  white-space: initial;
+  width: 80px;
 }
 
 [role~="tooltip"][data-microtip-size="medium"]::after {
-    white-space: initial;
-    width: 150px;
+  white-space: initial;
+  width: 150px;
 }
 
 [role~="tooltip"][data-microtip-size="large"]::after {
-    white-space: initial;
-    width: 260px;
+  white-space: initial;
+  width: 260px;
 }

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

@@ -145,33 +145,33 @@
     --indentation: calc(20 * 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 {

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

@@ -16,12 +16,13 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
-            <dx-type-badge
+            <dx-metadata-badge
                 if:true={showMethod}
-                class={badgeClass}
+                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,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { InternalTreeNode } from "typings/custom";
+import { Color, InternalTreeNode } from "typings/custom";
 
 const methodTextMap: {
     [key: string]: string;
@@ -12,6 +12,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;
@@ -29,8 +39,11 @@ export default class TreeTile extends LightningElement {
         return this.isRoot ? "small" : "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() {

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

@@ -1,33 +1,6 @@
 @import "dxHelpers/reset";
 
-.typebadge {
-    align-items: center;
-    background: var(--dx-c-type-badge-background, var(--background));
-    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
-    color: var(--dx-c-type-badge-color, var(--color));
-    display: flex;
-    justify-content: center;
-    height: var(--dx-c-type-badge-height, var(--height));
-    text-align: center;
-    white-space: nowrap;
-    width: min-content;
-}
-
-.typebadge.typebadge_metadata {
-    --background: var(--dx-g-cloud-blue-natural-90);
-    --border-radius: var(--dx-g-spacing-xs);
-    --color: var(--dx-g-blue-vibrant-20);
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-family: var(--dx-g-font-display);
-    font-size: 10px;
-    letter-spacing: 0.6px;
-    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.typebadge.typebadge_content-type {
+.badge {
     --background: var(--sds-g-gray-3);
     --border-radius: var(--dx-g-spacing-smd);
     --color: var(--sds-g-gray-10);
@@ -35,40 +8,26 @@
     --horizontal-spacing: var(--dx-g-spacing-smd);
     --vertical-spacing: var(--dx-g-spacing-xs);
 
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
     font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-xs);
+    font-size: 10px;
     font-weight: var(--dx-g-font-bold);
     padding: var(--vertical-spacing) var(--horizontal-spacing);
 }
 
-.typebadge.typebadge_content-type.size-small {
+.badge.size-small {
     --height: var(--dx-g-spacing-mlg);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-size: 10px;
-}
-
-.typebadge.typebadge_metadata.size-small {
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-xs);
-
-    font-size: 8px;
-    letter-spacing: 0.5px;
-}
-
-.typebadge.typebadge_metadata span {
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width, unset);
-}
-
-.typebadge.typebadge_metadata.size-small span {
-    transform: translateY(1px);
 }
 
-@media screen and (max-width: 768px) {
-    .typebadge.typebadge_metadata:not(.size-small) {
-        height: var(--dx-g-spacing-lg);
-        padding: 0 var(--dx-g-spacing-sm);
-        font-size: var(--dx-g-text-2xs);
-    }
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
 }

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

@@ -1,5 +1,11 @@
 <template>
     <div class={className} style={style}>
+        <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,65 +1,161 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
-    TypeBadgeColor,
+    Brand,
     Color,
-    TypeBadgeSize,
-    BadgeType,
-    Brand
+    ContentType,
+    IconSprite,
+    IconSymbol,
+    TypeBadgeSize
 } from "typings/custom";
-import { colorToDxColors } from "dxUtils/css";
-
-const DEFAULT_TYPE = "typebadge_metadata";
-const VALID_BRANDS: Array<Brand> = [
-    "employees",
-    "marketing",
-    "partners",
-    "commerce",
-    "sales",
-    "success",
-    "integration",
-    "platform",
-    "industries",
-    "learning",
-    "service",
-    "analytics"
-];
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+import { BRANDS } from "dxConstants/brands";
+import { CONTENT_TYPES } from "dxConstants/contentTypes";
+
+const contentTypeLabels = {
+    documentation: "Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast"
+};
+
+type IconData = {
+    iconSymbol: IconSymbol;
+    iconSprite: IconSprite;
+};
+
+const contentTypeIcons: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    }
+};
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
-    @api value: string = "";
-    @api color?: TypeBadgeColor = "default";
-    @api type?: BadgeType = "metadata";
+    @api variant?: Brand | ContentType = "default";
+    @api color?: Color;
+
+    @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 contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantLabel(): string | null {
+        if (this.isContentType) {
+            return contentTypeLabels[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantColorScope(): string | null {
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
+    }
+
+    private get isContentType(): boolean {
+        return CONTENT_TYPES.includes(this.variant as ContentType);
+    }
+
+    private get isBrand(): boolean {
+        return BRANDS.includes(this.variant as ContentType);
+    }
 
     private get className(): string {
-        return cx(
-            "typebadge",
-            `size-${this.size}`,
-            (this.type && `typebadge_${this.type}`) || DEFAULT_TYPE
-        );
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
-        if (VALID_BRANDS.includes(this.color as Brand)) {
-            return this.buildStyleString({
-                background: `--dx-g-brand-${this.color}-color-background`,
-                color: `--dx-g-brand-${this.color}-color`
+        if (this.variantColorScope) {
+            return buildStyleColorVariables({
+                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
+                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
             });
         }
-        const variables = colorToDxColors(this.color as Color);
-        if (variables) {
-            return this.buildStyleString(variables);
+        if (this.color) {
+            const variables = colorToDxColors(this.color as Color);
+            return buildStyleColorVariables(variables);
         }
         return "";
     }
-
-    private buildStyleString({
-        background,
-        color
-    }: {
-        background: string;
-        color: string;
-    }): string {
-        return `--color: var(${color}); --background: var(${background})`;
-    }
 }

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

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
-import { LinkTarget, Color } from "typings/custom";
+import { LinkTarget, ContentType } from "typings/custom";
 
 const MOBILE_QUERY = "(max-width: 640px)";
 
 export abstract class ArchiveCard extends LightningElement {
-    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api contentType!: ContentType;
     @api href!: string;
     @api title!: string;
     @api target: LinkTarget = "_self";
@@ -12,10 +12,6 @@ export abstract class ArchiveCard extends LightningElement {
     private matchMedia!: MediaQueryList;
     protected mobile = false;
 
-    protected get badgeColor(): Color {
-        return this.contentType === "Blog" ? "teal" : "blue";
-    }
-
     connectedCallback(): void {
         this.matchMedia = window.matchMedia(MOBILE_QUERY);
         this.onMediaChange(this.matchMedia);

package/src/modules/dxConstants/brands/brands.ts

@@ -0,0 +1,14 @@
+export const BRANDS = [
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics"
+];

package/src/modules/dxConstants/colors/colors.ts

@@ -0,0 +1,14 @@
+export const COLORS = [
+    "hot-orange",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "cloud-blue",
+    "blue",
+    "indigo",
+    "purple",
+    "violet",
+    "pink",
+    "red"
+];

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -0,0 +1,10 @@
+export const CONTENT_TYPES = [
+    "documentation",
+    "trailhead",
+    "blog",
+    "forum",
+    "api",
+    "event",
+    "website",
+    "podcast"
+];

package/src/modules/dxUtils/css/css.ts

@@ -41,3 +41,13 @@ export const colorToDxColors = (
 
 export const toDxColor = (color: string) =>
     ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;
+
+export const buildStyleColorVariables = ({
+    background,
+    color
+}: {
+    background: string;
+    color: string;
+}): string => {
+    return `--color: var(${color}); --background: var(${background})`;
+};

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.css

@@ -1,12 +0,0 @@
-.badges-group {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.badges-group > dx-type-badge {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
-.badges-group > dx-type-badge:not(:last-child) {
-    margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.html

@@ -1,11 +0,0 @@
-<template>
-    <div class="badges-group">
-        <template for:each={badges} for:item="badge">
-            <dx-type-badge
-                key={badge}
-                size={size}
-                value={badge}
-            ></dx-type-badge>
-        </template>
-    </div>
-</template>

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -1,18 +0,0 @@
-import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "dxUtils/normalizers";
-import { TypeBadgeSize } from "typings/custom";
-
-export default class TypeBadgeGroup extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
-
-    @api
-    get badges() {
-        return this._badges;
-    }
-    set badges(value: string[] | string | null) {
-        this._badges = normalizeToArray(value);
-    }
-
-    // can be an array of strings or a comma delimited string
-    private _badges!: string | string[] | null;
-}