Add introduction card

src/cards/ha-introduction-card.html

@@ -0,0 +1,47 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='../components/ha-card.html'>
+
+<dom-module id='ha-introduction-card'>
+  <style>
+    :host {
+      font-size: 14px;
+    }
+    a {
+      color: var(--dark-primary-color);
+    }
+    ul {
+      margin: 8px;
+      padding-left: 16px;
+    }
+    li {
+      margin-bottom: 8px;
+    }
+    .content {
+      padding: 0 16px 16px;
+    }
+  </style>
+  <template>
+    <ha-card header="Welcome to Home Assistant!">
+      <div class='content'>
+        Here are some resources to get started.
+        <ul>
+          <li><a href='https://home-assistant.io/getting-started/configuration.html' target='_blank'>
+            Configuring Home Assistant
+          </a></li>
+          <li><a href='https://home-assistant.io/components/' target='_blank'>
+            Available components
+          </a></li>
+          <li><a href='https://gitter.im/balloob/home-assistant' target='_blank'>
+            Chat room
+          </a></li>
+        </ul>
+        <template is='dom-if' if='[[showHideInstruction]]'>
+          To remove this card, edit your config in
+          <code>configuration.yaml</code> and disable the
+          <code>introduction</code> component.
+        </template>
+      </div>
+    </ha-card>
+  </template>
+</dom-module>

src/cards/ha-introduction-card.js

@@ -0,0 +1,14 @@
+import Polymer from '../polymer';
+
+require('../components/ha-card');
+
+export default new Polymer({
+  is: 'ha-introduction-card',
+
+  properties: {
+    showHideInstruction: {
+      type: Boolean,
+      value: true,
+    },
+  },
+});

src/components/ha-zone-cards.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="../cards/ha-badges-card.html">
 <link rel="import" href="../cards/ha-domain-card.html">
+<link rel="import" href="../cards/ha-introduction-card.html">
 
 <dom-module id="ha-zone-cards">
   <style>
@@ -10,6 +11,10 @@
       padding-right: 8px;
     }
 
+    .no-badges {
+      height: 8px;
+    }
+
     .badges {
       margin-top: 16px;
       margin-left: 8px;
@@ -25,13 +30,21 @@
 
   <template>
     <div class='main'>
-      <template is='dom-if' if='domains.badges'>
+      <template is='dom-if' if='[[cards._badges]]'>
         <div class='badges'>
           <ha-badges-card states='[[cards._badges]]'></ha-badges-card>
         </div>
       </template>
+      <template is='dom-if' if='[[!cards._badges]]'>
+        <div class='no-badges'> </div>
+      </template>
       <div class='horizontal layout'>
         <div class='column flex-1'>
+          <template is='dom-if' if='[[showIntroduction]]'>
+            <div class='zone-card'>
+              <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states)]]'></ha-introduction-card>
+            </div>
+          </template>
           <template is='dom-repeat' items='[[cards._columns.0]]'>
             <div class='zone-card'>
               <ha-domain-card domain='[[item]]'

src/components/ha-zone-cards.js

@@ -3,6 +3,7 @@ import { util } from '../util/home-assistant-js-instance';
 
 require('../cards/ha-badges-card');
 require('../cards/ha-domain-card');
+require('../cards/ha-introduction-card');
 
 const PRIORITY = {
   a: -1,
@@ -30,6 +31,11 @@ export default new Polymer({
   is: 'ha-zone-cards',
 
   properties: {
+    showIntroduction: {
+      type: Boolean,
+      value: false,
+    },
+
     columns: {
       type: Number,
       value: 2,
@@ -94,6 +100,10 @@ export default new Polymer({
     return cards;
   },
 
+  computeShowHideInstruction(states) {
+    return states.size > 0 && !__DEMO__;
+  },
+
   computeStatesOfCard(cards, card) {
     return cards[card];
   },

src/layouts/partial-zone.html

@@ -51,7 +51,9 @@
           <ha-voice-command-progress></ha-voice-command-progress>
         </div>
 
-        <ha-zone-cards states='[[states]]' columns='[[columns]]'></ha-zone-cards>
+        <ha-zone-cards
+          show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
+          states='[[states]]' columns='[[columns]]'></ha-zone-cards>
       </div>
     </paper-header-panel>
   </template>

src/layouts/partial-zone.js

@@ -59,6 +59,11 @@ export default new Polymer({
       ],
     },
 
+    introductionLoaded: {
+      type: Boolean,
+      bindNuclear: configGetters.isComponentLoaded('introduction'),
+    },
+
     states: {
       type: Object,
       bindNuclear: entityGetters.visibleEntityMap,
@@ -124,6 +129,10 @@ export default new Polymer({
     }
   },
 
+  computeShowIntroduction(introductionLoaded, states) {
+    return introductionLoaded || states.size === 0;
+  },
+
   toggleMenu() {
     this.fire('open-menu');
   },

src/more-infos/more-info-sun.html

@@ -5,7 +5,7 @@
 <dom-module id="more-info-sun">
   <template>
     <template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
-      <div class='data-entry layout justified horizontal' id='rising'>
+      <div class='data-entry layout justified horizontal'>
         <div class='key'>
           <span>[[itemCaption(item)]]</span>
           <relative-ha-datetime datetime-obj="[[itemDate(item)]]"></relative-ha-datetime>