From 5774d913afa2b2183ee4bf20cd54101e0a7b1d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Tue, 16 Oct 2018 16:50:41 +0200
Subject: [PATCH] Lovelace: Add a label entity row (#1779)

* Add a label entity row

* Style fixes

* Allow blank label text

* Rename to section
---
 gallery/src/demos/demo-hui-entities-card.js   | 10 ++--
 .../lovelace/common/create-row-element.js     |  8 ++-
 .../lovelace/special-rows/hui-section-row.js  | 53 +++++++++++++++++++
 3 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 src/panels/lovelace/special-rows/hui-section-row.js

diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js
index bee6f72b50..ebf5e19361 100644
--- a/gallery/src/demos/demo-hui-entities-card.js
+++ b/gallery/src/demos/demo-hui-entities-card.js
@@ -149,10 +149,6 @@ const CONFIGS = [
     config: `
 - type: entities
   entities:
-    - type: weblink
-      url: http://google.com/
-      icon: mdi:google
-      name: Google
     - type: call-service
       icon: mdi:power
       name: Bed light
@@ -160,6 +156,12 @@ const CONFIGS = [
       service: light.toggle
       service_data:
         entity_id: light.bed_light
+    - type: section
+      label: Links
+    - type: weblink
+      url: http://google.com/
+      icon: mdi:google
+      name: Google
     - type: divider
     - type: divider
       style:
diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js
index db4beacdae..eaff2bdce1 100644
--- a/src/panels/lovelace/common/create-row-element.js
+++ b/src/panels/lovelace/common/create-row-element.js
@@ -16,12 +16,18 @@ import "../entity-rows/hui-toggle-entity-row.js";
 
 import "../special-rows/hui-call-service-row.js";
 import "../special-rows/hui-divider-row.js";
+import "../special-rows/hui-section-row.js";
 import "../special-rows/hui-weblink-row.js";
 
 import createErrorCardConfig from "./create-error-card-config.js";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
-const SPECIAL_TYPES = new Set(["call-service", "divider", "weblink"]);
+const SPECIAL_TYPES = new Set([
+  "call-service",
+  "divider",
+  "section",
+  "weblink",
+]);
 const DOMAIN_TO_ELEMENT_TYPE = {
   automation: "toggle",
   climate: "climate",
diff --git a/src/panels/lovelace/special-rows/hui-section-row.js b/src/panels/lovelace/special-rows/hui-section-row.js
new file mode 100644
index 0000000000..97f1690fad
--- /dev/null
+++ b/src/panels/lovelace/special-rows/hui-section-row.js
@@ -0,0 +1,53 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+
+import "../../../components/ha-icon.js";
+
+class HuiSectionRow extends PolymerElement {
+  static get template() {
+    return html`
+      ${this.styleTemplate}
+      <div class=divider></div>
+      <template is="dom-if" if="[[_config.label]]">
+        <div class=label>
+          [[_config.label]]
+        </div>
+      </template>
+    `;
+  }
+
+  static get styleTemplate() {
+    return html`
+      <style>
+        .label {
+          color: var(--primary-color);
+          margin-left: 8px;
+          margin-bottom: 16px;
+          margin-top: 16px;
+        }
+        .divider {
+          height: 1px;
+          background-color: var(--secondary-text-color);
+          opacity: 0.25;
+          margin-left: -16px;
+          margin-right: -16px;
+          margin-top: 8px;
+        }
+      </style>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _config: Object,
+    };
+  }
+
+  setConfig(config) {
+    if (!config) {
+      throw new Error("Error in card configuration.");
+    }
+    this._config = config;
+  }
+}
+customElements.define("hui-section-row", HuiSectionRow);