From ce483fa8c3191421d568c4f122135ecde93b47e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9on=20Rodenburg?= <l.rodenburg@instanceof.nl>
Date: Sat, 18 Nov 2017 16:50:28 +0100
Subject: [PATCH] Fixes for string based stories

---
 addons/knobs/src/polymer/WrapStory.js                |  2 +-
 examples/polymer-cli/src/polymer-playground-app.html |  6 ++++--
 examples/polymer-cli/src/stories/index.js            | 11 ++++++++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/addons/knobs/src/polymer/WrapStory.js b/addons/knobs/src/polymer/WrapStory.js
index 09d095ad5ca..081d9a5ed22 100644
--- a/addons/knobs/src/polymer/WrapStory.js
+++ b/addons/knobs/src/polymer/WrapStory.js
@@ -41,7 +41,7 @@ class WrapStory extends HTMLElement {
   render(component) {
     let tag = component;
     if (typeof component === 'string') {
-      const tagName = /<([A-Za-z0-9-]+)>/.exec(component)[1];
+      const tagName = /^<([A-Za-z0-9-]+)/.exec(component)[1];
       tag = document.createElement(tagName);
     }
 
diff --git a/examples/polymer-cli/src/polymer-playground-app.html b/examples/polymer-cli/src/polymer-playground-app.html
index 8a2289f8e93..4e2493b320c 100644
--- a/examples/polymer-cli/src/polymer-playground-app.html
+++ b/examples/polymer-cli/src/polymer-playground-app.html
@@ -3,7 +3,8 @@
 
 <dom-module id="polymer-playground-app">
   <template>
-    <h2>Hello [[prop1]]!</h2>
+    <h2>[[title]]</h2>
+    <p>Hello [[prop1]]!</p>
     <playground-button></playground-button>
   </template>
   <script>
@@ -14,7 +15,8 @@
           prop1: {
             type: String,
             value: 'polymer-playground-app'
-          }
+          },
+          title: String,
         };
       }
     }
diff --git a/examples/polymer-cli/src/stories/index.js b/examples/polymer-cli/src/stories/index.js
index 25d8a31cb1f..94b9997a133 100644
--- a/examples/polymer-cli/src/stories/index.js
+++ b/examples/polymer-cli/src/stories/index.js
@@ -12,7 +12,16 @@ storiesOf('Welcome', module).add(
   () => '<storybook-welcome-to-polymer></storybook-welcome-to-polymer>'
 );
 
-storiesOf('App', module).add('full app', () => '<polymer-playground-app></polymer-playground-app>');
+storiesOf('App', module)
+  .addDecorator(withKnobs)
+  .add(
+    'full app',
+    () =>
+      `<polymer-playground-app title="${text(
+        'App title',
+        'This is an app'
+      )}"></polymer-playground-app>`
+  );
 
 storiesOf('Button', module)
   .addDecorator(withKnobs)