update components

dashboard-ui/bower_components/iron-demo-helpers/demo-snippet.html

@@ -0,0 +1,132 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../prism-element/prism-highlighter.html">
+<link rel="import" href="../marked-element/marked-element.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-styles/shadow.html">
+
+
+<!--
+`demo-snippet` is a helper element that displays the source of a code snippet and
+its rendered demo. It can be used for both native elements and
+Polymer elements.
+
+    Example of a native element demo
+
+        <demo-snippet>
+          <template>
+            <input type="date">
+          </template>
+        </demo-snippet>
+
+    Example of a Polymer <paper-checkbox> demo
+
+        <demo-snippet>
+          <template>
+            <paper-checkbox>Checkbox</paper-checkbox>
+            <paper-checkbox checked>Checkbox</paper-checkbox>
+          </template>
+        </demo-snippet>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--demo-snippet` | Mixin applied to the entire element | `{}`
+`--demo-snippet-demo` | Mixin applied to just the demo section | `{}`
+`--demo-snippet-code` | Mixin applied to just the code section | `{}`
+
+@element demo-snippet
+@demo demo/index.html
+-->
+
+<dom-module id="demo-snippet">
+  <template>
+    <style>
+      :host {
+        display: block;
+        @apply(--shadow-elevation-2dp);
+        @apply(--demo-snippet);
+      }
+
+      .demo {
+        border-bottom: 1px solid #e5e5e5;
+        background-color: white;
+        margin: 0;
+        padding: 20px;
+        @apply(--demo-snippet-demo);
+      }
+
+      .code {
+        padding: 0 20px;
+        margin: 0;
+        background-color: #fafafa;
+        font-size: 13px;
+        overflow: auto;
+        @apply(--demo-snippet-code);
+      }
+
+      .code > pre {
+        margin: 0;
+        padding: 0 0 10px 0;
+      }
+    </style>
+
+    <prism-highlighter></prism-highlighter>
+
+    <div class="demo">
+      <content id="content"></content>
+    </div>
+
+    <marked-element markdown=[[_markdown]] id="marked">
+      <div class="markdown-html code"></div>
+    </marked-element>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'demo-snippet',
+
+      properties: {
+        _markdown: {
+          type: String,
+          value: ''
+        }
+      },
+
+      attached: function() {
+        var template = Polymer.dom(this).queryDistributedElements('template')[0];
+
+        // If there's no template, render empty code.
+        if (!template) {
+          this._markdown = '```\n```';
+          return;
+        }
+
+        // TODO(noms): When marked-element/issues/23 lands, this will become
+        // a public method and will need to be updated.
+        var snippet = this.$.marked._unindent(template.innerHTML);
+
+        // Boolean properties are displayed as checked="", so remove the ="" bit.
+        snippet = snippet.replace(/=""/g, '');
+
+        this._markdown = '```\n' + snippet + '\n' + '```';
+
+        // Stamp the template.
+        Polymer.dom(this).appendChild(document.importNode(template.content, true));
+      }
+    });
+  </script>
+
+</dom-module>