From afc895d57a051f63ac3a42b8ea9e9f7b3f70acb9 Mon Sep 17 00:00:00 2001
From: igor <davydkin.igor@gmail.com>
Date: Tue, 6 Feb 2018 10:33:08 +0200
Subject: [PATCH] Separate polymer examples

---
 examples/polymer-cli/.storybook/addons.js     |   1 +
 examples/polymer-cli/.storybook/config.js     |  11 +-
 examples/polymer-cli/package.json             |   1 +
 .../polymer-cli/src/playground-button.html    |  12 +-
 .../src/stories/addon-actions.stories.js      |  15 +++
 .../src/stories/addon-knobs.stories.js        |  56 ++++++++++
 .../src/stories/addon-notes.stories.js        |  23 ++++
 .../src/stories/advanced.stories.js           | 105 ------------------
 .../src/stories/custom-decorators.stories.js  |  14 +++
 .../src/stories/custom-rendering.stories.js   |  15 +++
 .../polymer-cli/src/stories/index.stories.js  |  25 +----
 11 files changed, 148 insertions(+), 130 deletions(-)
 create mode 100644 examples/polymer-cli/src/stories/addon-actions.stories.js
 create mode 100644 examples/polymer-cli/src/stories/addon-knobs.stories.js
 create mode 100644 examples/polymer-cli/src/stories/addon-notes.stories.js
 delete mode 100644 examples/polymer-cli/src/stories/advanced.stories.js
 create mode 100644 examples/polymer-cli/src/stories/custom-decorators.stories.js
 create mode 100644 examples/polymer-cli/src/stories/custom-rendering.stories.js

diff --git a/examples/polymer-cli/.storybook/addons.js b/examples/polymer-cli/.storybook/addons.js
index 1191fbebf30..40db0321909 100644
--- a/examples/polymer-cli/.storybook/addons.js
+++ b/examples/polymer-cli/.storybook/addons.js
@@ -2,3 +2,4 @@ import '@storybook/addon-actions/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-knobs/register';
 import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';
diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js
index 37ff6501478..ae9f20d8481 100644
--- a/examples/polymer-cli/.storybook/config.js
+++ b/examples/polymer-cli/.storybook/config.js
@@ -1,10 +1,15 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
 import { configure } from '@storybook/polymer';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
 
 function loadStories() {
   require('../src/stories/index.stories');
-  require('../src/stories/advanced.stories');
+
+  const req = require.context('../src/stories', true, /\.stories\.js$/);
+  req.keys().forEach((filename) => req(filename));
 }
 
 configure(loadStories, module);
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index c91e7010e13..a94adc2a3ca 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -11,6 +11,7 @@
     "@storybook/addon-actions": "^3.4.0-alpha.7",
     "@storybook/addon-knobs": "^3.4.0-alpha.7",
     "@storybook/addon-notes": "^3.4.0-alpha.7",
+    "@storybook/addon-options": "^3.4.0-alpha.7",
     "@storybook/addon-viewport": "^3.4.0-alpha.7",
     "@storybook/polymer": "^3.4.0-alpha.7",
     "@webcomponents/webcomponentsjs": "^1.1.0",
diff --git a/examples/polymer-cli/src/playground-button.html b/examples/polymer-cli/src/playground-button.html
index 272d6b2acc0..51a4b0ed5da 100644
--- a/examples/polymer-cli/src/playground-button.html
+++ b/examples/polymer-cli/src/playground-button.html
@@ -4,7 +4,15 @@
   <template>
     <style>
       .square {
-        border: 1px solid black;
+        border: 1px solid #3c763d;
+        background-color: #5cb85c;
+        padding: 10px;
+      }
+      .rounded {
+        border-radius: 5px;
+        border: 1px solid #1b6d85;
+        background-color: #5bc0de;
+        padding: 10px;
       }
     </style>
     <button on-click="handleTap"
@@ -41,7 +49,7 @@
       }
 
       _computeClass(isSquare) {
-        return isSquare && 'square';
+        return isSquare ? 'square' : 'rounded';
       }
     }
 
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
new file mode 100644
index 00000000000..a39f87544aa
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
+import { document } from 'global';
+
+storiesOf('Addon|Actions', module)
+  .add('Action only', () => {
+    const el = document.createElement('playground-button');
+    el.addEventListener('click', action('log1'));
+    return el;
+  })
+  .add('Action and method', () => {
+    const el = document.createElement('playground-button');
+    el.addEventListener('click', e => action('log2')(e.target));
+    return el;
+  });
diff --git a/examples/polymer-cli/src/stories/addon-knobs.stories.js b/examples/polymer-cli/src/stories/addon-knobs.stories.js
new file mode 100644
index 00000000000..3473a82b7fe
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-knobs.stories.js
@@ -0,0 +1,56 @@
+import { storiesOf } from '@storybook/polymer';
+import { action } from '@storybook/addon-actions';
+import { document } from 'global';
+
+import {
+  withKnobs,
+  text,
+  button,
+  number,
+  select,
+  date,
+  color,
+  array,
+  boolean,
+} from '@storybook/addon-knobs/polymer';
+
+storiesOf('Addon|Knobs', module)
+  .addDecorator(withKnobs)
+  .add('simple', () => {
+    const title = text('Button title', 'Hello');
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', title);
+    button('callback', () => el.setAttribute('title', 'testing'));
+    return el;
+  })
+  .add('complex', () => {
+    const name = text('Name', 'Jane');
+    const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
+    const fruits = { apples: 'Apple', bananas: 'Banana', cherries: 'Cherry' };
+    const fruit = select('Fruit', fruits, 'apple');
+    const price = number('Price', 2.25);
+    const colour = color('Border', 'deeppink');
+    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const nice = boolean('Nice', true);
+
+    const stockMessage = stock
+      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+    button('Arbitrary action', action('You clicked it!'));
+
+    return `
+          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
+            <h1>My name is ${name},</h1>
+            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+            <p>${stockMessage}</p>
+            <p>Also, I have:</p>
+            <ul>
+              ${items.map(item => `<li>${item}</li>`).join('')}
+            </ul>
+            <p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
+          </div>
+        `;
+  });
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
new file mode 100644
index 00000000000..cab392df79f
--- /dev/null
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -0,0 +1,23 @@
+import { storiesOf } from '@storybook/polymer';
+import { withNotes } from '@storybook/addon-notes';
+
+storiesOf('Addon|Notes', module)
+  .add(
+    'Simple note',
+    withNotes({ text: 'My notes on some bold text' })(
+      () =>
+        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>'
+    )
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojies</h2>
+
+      <em>It's not all that important to be honest, but..</em>
+
+      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+    `,
+    })(() => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>')
+  );
diff --git a/examples/polymer-cli/src/stories/advanced.stories.js b/examples/polymer-cli/src/stories/advanced.stories.js
deleted file mode 100644
index 509e4b512e0..00000000000
--- a/examples/polymer-cli/src/stories/advanced.stories.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { action } from '@storybook/addon-actions';
-import { withNotes } from '@storybook/addon-notes';
-import {
-  withKnobs,
-  text,
-  button,
-  number,
-  select,
-  date,
-  color,
-  array,
-  boolean,
-} from '@storybook/addon-knobs/polymer';
-import { document } from 'global';
-import '../polymer-playground-app.html';
-import '../playground-button.html';
-import '../separated-button/separated-button.html';
-import './storybook-welcome-to-polymer.html';
-
-storiesOf('Advanced/Decorator', module)
-  .addDecorator(story => {
-    const el = story();
-    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
-    return el;
-  })
-  .add('example decoration', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'An example title');
-    return el;
-  });
-
-storiesOf('Advanced/Addon Actions', module)
-  .add('Action only', () => {
-    const el = document.createElement('playground-button');
-    el.addEventListener('click', action('log1'));
-    return el;
-  })
-  .add('Action and method', () => {
-    const el = document.createElement('playground-button');
-    el.addEventListener('click', e => action('log2')(e.target));
-    return el;
-  });
-
-storiesOf('Advanced/Addon Notes', module)
-  .add(
-    'Simple note',
-    withNotes({ text: 'My notes on some bold text' })(
-      () =>
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>'
-    )
-  )
-  .add(
-    'Note with HTML',
-    withNotes({
-      text: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    })(() => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>')
-  );
-
-storiesOf('Advanced/Addon Knobs', module)
-  .addDecorator(withKnobs)
-  .add('simple', () => {
-    const title = text('Button title', 'Hello');
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', title);
-    button('callback', () => el.setAttribute('title', 'testing'));
-    return el;
-  })
-  .add('complex', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
-    const fruits = { apples: 'Apple', bananas: 'Banana', cherries: 'Cherry' };
-    const fruit = select('Fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
-
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    button('Arbitrary action', action('You clicked it!'));
-
-    return `
-          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
-            <h1>My name is ${name},</h1>
-            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-            <p>${stockMessage}</p>
-            <p>Also, I have:</p>
-            <ul>
-              ${items.map(item => `<li>${item}</li>`).join('')}
-            </ul>
-            <p>${nice ? 'Nice to meet you!' : 'Leave me alone!'}</p>
-          </div>
-        `;
-  });
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
new file mode 100644
index 00000000000..c2ef4cdf3dd
--- /dev/null
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -0,0 +1,14 @@
+import { storiesOf } from '@storybook/polymer';
+import { document } from 'global';
+
+storiesOf('Custom|Decorator', module)
+  .addDecorator(story => {
+    const el = story();
+    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
+    return el;
+  })
+  .add('example decoration', () => {
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', 'An example title');
+    return el;
+  });
diff --git a/examples/polymer-cli/src/stories/custom-rendering.stories.js b/examples/polymer-cli/src/stories/custom-rendering.stories.js
new file mode 100644
index 00000000000..d33bdc8c045
--- /dev/null
+++ b/examples/polymer-cli/src/stories/custom-rendering.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/polymer';
+import { document } from 'global';
+import { StringTemplateButton } from '../string-template-button';
+
+import '../separated-button/separated-button.html';
+
+storiesOf('Custom|Methods for rendering', module)
+  .add('html string', () => '<div>Rendered with string</div>')
+  .add('html with custom elements', () => '<separated-button title="Click me!"></separated-button>')
+  .add('document.createElement', () => {
+    const el = document.createElement('playground-button');
+    el.setAttribute('title', 'Rendered with document.createElement');
+    return el;
+  })
+  .add('Polymer instance', () => new StringTemplateButton());
diff --git a/examples/polymer-cli/src/stories/index.stories.js b/examples/polymer-cli/src/stories/index.stories.js
index f17d1fa3dbe..641787592c4 100644
--- a/examples/polymer-cli/src/stories/index.stories.js
+++ b/examples/polymer-cli/src/stories/index.stories.js
@@ -1,34 +1,19 @@
 import { storiesOf } from '@storybook/polymer';
-import { withKnobs, text } from '@storybook/addon-knobs/polymer';
-import { document } from 'global';
+
 import '../polymer-playground-app.html';
 import '../playground-button.html';
-import '../separated-button/separated-button.html';
 import './storybook-welcome-to-polymer.html';
-import { StringTemplateButton } from '../string-template-button';
 
 storiesOf('Welcome', module).add(
   'Welcome',
   () => '<storybook-welcome-to-polymer></storybook-welcome-to-polymer>'
 );
 
-storiesOf('App', module)
-  .addDecorator(withKnobs)
-  .add('full app', () => {
-    const title = text('title', 'This title can be edited via a knob');
-    return `<polymer-playground-app title="${title}"></polymer-playground-app>`;
-  });
+storiesOf('App', module).add(
+  'full app',
+  () => '<polymer-playground-app title="Storybook fro Polymer"></polymer-playground-app>'
+);
 
 storiesOf('Button', module)
   .add('rounded', () => '<playground-button></playground-button>')
   .add('square', () => '<playground-button is-square></playground-button>');
-
-storiesOf('Methods for rendering', module)
-  .add('html string', () => '<div>Rendered with string</div>')
-  .add('html with custom elements', () => '<separated-button title="Click me!"></separated-button>')
-  .add('document.createElement', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'Rendered with document.createElement');
-    return el;
-  })
-  .add('Polymer instance', () => new StringTemplateButton());