From cc791e5b98919961c0fd25d4cb8477b56dc969e2 Mon Sep 17 00:00:00 2001
From: piitaya <paul.bottein@gmail.com>
Date: Sun, 6 Feb 2022 12:58:01 +0100
Subject: [PATCH] improve documentation

---
 .hass_dev/views/title-view.yaml           |  2 +-
 README.md                                 | 16 +++++++++++++---
 src/cards/title-card/title-card-editor.ts |  4 ++--
 src/cards/title-card/title-card.ts        |  1 +
 src/translations/en.json                  |  4 ++++
 src/translations/fr.json                  |  4 ++++
 6 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/.hass_dev/views/title-view.yaml b/.hass_dev/views/title-view.yaml
index 9e75250ff..e78d8982a 100644
--- a/.hass_dev/views/title-view.yaml
+++ b/.hass_dev/views/title-view.yaml
@@ -1,5 +1,5 @@
 title: Title
-icon: mdi:card-text
+icon: mdi:format-title
 cards:
   - type: vertical-stack
     cards:
diff --git a/README.md b/README.md
index 9f59279fa..175c562fe 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,7 @@ Mushroom mission is to propose easy to use components to build your [Home Assist
 -   🌈 Based on Material UI colors
 -   🌓 Light and dark theme support
 -   🎨 Optional theme customization
--   🌎 Internationalization 
+-   🌎 Internationalization
 
 The goal of Mushroom is not to provide custom card for deep customization. You can use the excellent [UI Lovelace Minimalist][ui-lovelace-minimalist] and [Button card][button-card] plugins for this.
 
@@ -74,6 +74,7 @@ Different cards are available for differents entities :
 -   🙋 [Person card](docs/cards/person.md)
 -   🛠 [Template card](docs/cards/template.md)
 -   🔔 [Chips card](docs/cards/chips.md)
+-   ✏️ [Title card](docs/cards/title.md)
 
 Some cards are on the todo list :
 
@@ -91,8 +92,18 @@ Mushroom:
     # HA variables
     ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
     ha-card-border-radius: 12px
-    # Mushroom custom variables
+    # Mushroom layout
     mush-spacing: 12px
+    # Mushroom title styles
+    mush-title-padding: 12px
+    mush-title-spacing: 12px
+    mush-title-font-size: 24px
+    mush-title-font-size: normal
+    mush-title-line-height: 1.2
+    mush-subtitle-font-size: 16px
+    mush-subtitle-font-weight: normal
+    mush-subtitle-line-height: 1.2
+    # Mushroom colors
     mush-rgb-red: 244, 67, 54
     mush-rgb-pink: 233, 30, 99
     mush-rgb-purple: 156, 39, 176
@@ -183,4 +194,3 @@ The design is inspired by [7ahang’s work][7ahang] on Behance and [Ui Lovelace
 [button-card]: https://github.com/custom-cards/button-card
 [7ahang]: https://www.behance.net/gallery/88433905/Redesign-Smart-Home
 [release-url]: https://github.com/piitaya/lovelace-mushroom/releases
-
diff --git a/src/cards/title-card/title-card-editor.ts b/src/cards/title-card/title-card-editor.ts
index e0862515b..e39833a0c 100644
--- a/src/cards/title-card/title-card-editor.ts
+++ b/src/cards/title-card/title-card-editor.ts
@@ -34,7 +34,7 @@ export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
             <div class="card-config">
                 <paper-textarea
                     .label="${customLocalize(
-                        "editor.card.generic.title"
+                        "editor.card.title.title"
                     )} (${this.hass.localize(
                         "ui.panel.lovelace.editor.card.config.optional"
                     )})"
@@ -48,7 +48,7 @@ export class TitleCardEditor extends LitElement implements LovelaceCardEditor {
                 ></paper-textarea>
                 <paper-textarea
                     .label="${customLocalize(
-                        "editor.card.generic.subtitle"
+                        "editor.card.title.subtitle"
                     )} (${this.hass.localize(
                         "ui.panel.lovelace.editor.card.config.optional"
                     )})"
diff --git a/src/cards/title-card/title-card.ts b/src/cards/title-card/title-card.ts
index 77fcb40e5..a5337ac6c 100644
--- a/src/cards/title-card/title-card.ts
+++ b/src/cards/title-card/title-card.ts
@@ -48,6 +48,7 @@ export class TitleCard extends LitElement implements LovelaceCard {
     ): Promise<TitleCardConfig> {
         return {
             type: `custom:${TITLE_CARD_NAME}`,
+            title: "Hello, {{ user }} !",
         };
     }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index a59ca7296..1dd4b059d 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -44,6 +44,10 @@
             "template": {
                 "primary": "Primary information",
                 "secondary": "Secondary information"
+            },
+            "title": {
+                "title": "Title",
+                "subtitle": "Subtitle"
             }
         },
         "chip": {
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 522ba9606..2a400db56 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -44,6 +44,10 @@
             "template": {
                 "primary": "Information principale",
                 "secondary": "Information secondaire"
+            },
+            "title": {
+                "title": "Titre",
+                "subtitle": "Sous-titre"
             }
         },
         "chip": {