Allow different types of heading badges (#22109)

* Allow different type of heading item

* Update editor

* Migrate entities to items

* Rename support for string entity

* Refactor

* Rename to badges and add error state

* Update font weight

* Feedback

* Feedback

src/components/ha-heading-badge.ts

@@ -0,0 +1,58 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+
+type HeadingBadgeType = "text" | "button";
+
+@customElement("ha-heading-badge")
+export class HaBadge extends LitElement {
+  @property() public type: HeadingBadgeType = "text";
+
+  protected render() {
+    return html`
+      <div
+        class="heading-badge"
+        role=${ifDefined(this.type === "button" ? "button" : undefined)}
+        tabindex=${ifDefined(this.type === "button" ? "0" : undefined)}
+      >
+        <slot name="icon"></slot>
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        color: var(--secondary-text-color);
+      }
+      [role="button"] {
+        cursor: pointer;
+      }
+      .heading-badge {
+        display: flex;
+        flex-direction: row;
+        white-space: nowrap;
+        align-items: center;
+        gap: 3px;
+        font-family: Roboto;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+        letter-spacing: 0.1px;
+        --mdc-icon-size: 14px;
+      }
+      ::slotted([slot="icon"]) {
+        --ha-icon-display: block;
+        color: var(--icon-color, inherit);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-heading-badge": HaBadge;
+  }
+}

src/panels/lovelace/cards/hui-heading-card.ts

@@ -11,14 +11,25 @@ import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import "../heading-badges/hui-heading-badge";
 import type {
   LovelaceCard,
   LovelaceCardEditor,
   LovelaceLayoutOptions,
 } from "../types";
-import "./heading/hui-heading-entity";
 import type { HeadingCardConfig } from "./types";
 
+export const migrateHeadingCardConfig = (
+  config: HeadingCardConfig
+): HeadingCardConfig => {
+  const newConfig = { ...config };
+  if (newConfig.entities) {
+    newConfig.badges = [...(newConfig.badges || []), ...newConfig.entities];
+    delete newConfig.entities;
+  }
+  return newConfig;
+};
+
 @customElement("hui-heading-card")
 export class HuiHeadingCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -45,7 +56,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       tap_action: {
         action: "none",
       },
-      ...config,
+      ...migrateHeadingCardConfig(config),
     };
   }
 
@@ -73,6 +84,8 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
 
     const style = this._config.heading_style || "title";
 
+    const badges = this._config.badges;
+
     return html`
       <ha-card>
         <div class="container">
@@ -91,17 +104,17 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
               : nothing}
             ${actionable ? html`<ha-icon-next></ha-icon-next>` : nothing}
           </div>
-          ${this._config.entities?.length
+          ${badges?.length
             ? html`
-                <div class="entities">
-                  ${this._config.entities.map(
+                <div class="badges">
+                  ${badges.map(
                     (config) => html`
-                      <hui-heading-entity
+                      <hui-heading-badge
                         .config=${config}
                         .hass=${this.hass}
                         .preview=${this.preview}
                       >
-                      </hui-heading-entity>
+                      </hui-heading-badge>
                     `
                   )}
                 </div>
@@ -150,7 +163,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
       .container .content:not(:has(p)) {
         min-width: fit-content;
       }
-      .container .entities {
+      .container .badges {
         flex: 0 0;
       }
       .content {
@@ -186,7 +199,7 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard {
         font-weight: 500;
         line-height: 20px;
       }
-      .entities {
+      .badges {
         display: flex;
         flex-direction: row;
         align-items: center;