diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js index 4f54cad4460..af962f73206 100644 --- a/examples/polymer-cli/.storybook/config.js +++ b/examples/polymer-cli/.storybook/config.js @@ -1,4 +1,4 @@ -import { configure, addParameters, addDecorator } from '@storybook/polymer'; +import { load, addParameters, addDecorator } from '@storybook/polymer'; import { withA11y } from '@storybook/addon-a11y'; addDecorator(withA11y); @@ -8,11 +8,4 @@ addParameters({ }, }); -function loadStories() { - require('../src/stories/index.stories'); - - const req = require.context('../src/stories', true, /\.stories\.js$/); - req.keys().forEach(filename => req(filename)); -} - -configure(loadStories, module); +load(require.context('../src/stories', true, /\.stories\.js$/), module); diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js index 3b29471cbc1..9e0ee92c547 100644 --- a/examples/polymer-cli/src/stories/addon-actions.stories.js +++ b/examples/polymer-cli/src/stories/addon-actions.stories.js @@ -1,17 +1,28 @@ -import { storiesOf } from '@storybook/polymer'; import { action } from '@storybook/addon-actions'; import { document } from 'global'; import '../simple-button.html'; -storiesOf('Addon|Actions', module) - .add('Action only', () => { - const el = document.createElement('simple-button'); - el.addEventListener('click', action('log1')); - return el; - }) - .add('Action and method', () => { - const el = document.createElement('simple-button'); - el.addEventListener('click', e => action('log2')(e.target)); - return el; - }); +export default { + title: 'Addon|Actions', +}; + +export const actionOnly = () => { + const el = document.createElement('simple-button'); + el.addEventListener('click', action('log1')); + return el; +}; + +actionOnly.story = { + name: 'Action only', +}; + +export const actionAndMethod = () => { + const el = document.createElement('simple-button'); + el.addEventListener('click', e => action('log2')(e.target)); + return el; +}; + +actionAndMethod.story = { + name: 'Action and method', +}; diff --git a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js index 11ae7370b44..bf7f776d961 100644 --- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js +++ b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js @@ -1,10 +1,16 @@ -import { storiesOf } from '@storybook/polymer'; +export default { + title: 'Addon|Backgrounds', -storiesOf('Addon|Backgrounds', module) - .addParameters({ + parameters: { backgrounds: [ { name: 'light', value: '#eeeeee' }, { name: 'dark', value: '#222222', default: true }, ], - }) - .add('button with text', () => ''); + }, +}; + +export const buttonWithText = () => ''; + +buttonWithText.story = { + name: 'button with text', +}; diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js index ee4ecf88660..e3bb16249e5 100644 --- a/examples/polymer-cli/src/stories/addon-links.stories.js +++ b/examples/polymer-cli/src/stories/addon-links.stories.js @@ -1,12 +1,19 @@ -import { storiesOf } from '@storybook/polymer'; import { linkTo } from '@storybook/addon-links'; import { document } from 'global'; import '../simple-button.html'; -storiesOf('Addon|Links', module).add('With Create Element', () => { +export default { + title: 'Addon|Links', +}; + +export const withCreateElement = () => { const el = document.createElement('simple-button'); el.title = 'Go to welcome'; el.handleClick = linkTo('Welcome'); return el; -}); +}; + +withCreateElement.story = { + name: 'With Create Element', +}; diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js index 8263fe9c776..8c9dcd9a174 100644 --- a/examples/polymer-cli/src/stories/addon-notes.stories.js +++ b/examples/polymer-cli/src/stories/addon-notes.stories.js @@ -1,20 +1,28 @@ -import { storiesOf } from '@storybook/polymer'; +export default { + title: 'Addon|Notes', +}; -storiesOf('Addon|Notes', module) - .add( - 'Simple note', - () => - '
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.
', - { - notes: 'My notes on some bold text', - } - ) - .add('Note with HTML', () => '🤔😳😯😮
😄😩😓😱
🤓😑😶😊
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.
'; + +simpleNote.story = { + name: 'Simple note', + parameters: { + notes: 'My notes on some bold text', + }, +}; + +export const noteWithHtml = () => '🤔😳😯😮
😄😩😓😱
🤓😑😶😊