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', () => '

🤔😳😯😮
😄😩😓😱
🤓😑😶😊

', { +export const simpleNote = () => + '

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 = () => '

🤔😳😯😮
😄😩😓😱
🤓😑😶😊

'; + +noteWithHtml.story = { + name: 'Note with HTML', + parameters: { notes: ` -

My notes on emojies

+

My notes on emojies

- It's not all that important to be honest, but.. + It's not all that important to be honest, but.. - Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 - `, - }); + Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 + `, + }, +}; diff --git a/examples/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js new file mode 100644 index 00000000000..95173e6dc76 --- /dev/null +++ b/examples/polymer-cli/src/stories/components/app.stories.js @@ -0,0 +1,11 @@ +import '../../polymer-playground-app.html'; + +export default { + title: 'App', +}; + +export const fullApp = () => + ''; +fullApp.story = { + name: 'full app', +}; diff --git a/examples/polymer-cli/src/stories/components/button.stories.js b/examples/polymer-cli/src/stories/components/button.stories.js new file mode 100644 index 00000000000..bbea3969239 --- /dev/null +++ b/examples/polymer-cli/src/stories/components/button.stories.js @@ -0,0 +1,8 @@ +import '../../playground-button.html'; + +export default { + title: 'Button', +}; + +export const rounded = () => ''; +export const square = () => ''; diff --git a/examples/polymer-cli/src/stories/components/welcome.stories.js b/examples/polymer-cli/src/stories/components/welcome.stories.js new file mode 100644 index 00000000000..2113c1bd104 --- /dev/null +++ b/examples/polymer-cli/src/stories/components/welcome.stories.js @@ -0,0 +1,14 @@ +import { linkTo } from '@storybook/addon-links'; +import { document } from 'global'; + +import '../storybook-welcome-to-polymer.html'; + +export default { + title: 'Welcome', +}; + +export const Welcome = () => { + const el = document.createElement('storybook-welcome-to-polymer'); + el.goToButton = linkTo('Button'); + return el; +}; diff --git a/examples/polymer-cli/src/stories/core.stories.js b/examples/polymer-cli/src/stories/core.stories.js index 4fefac0a6df..96633026df6 100644 --- a/examples/polymer-cli/src/stories/core.stories.js +++ b/examples/polymer-cli/src/stories/core.stories.js @@ -1,4 +1,4 @@ -import { storiesOf, addParameters } from '@storybook/polymer'; +import { addParameters } from '@storybook/polymer'; const globalParameter = 'globalParameter'; const chapterParameter = 'chapterParameter'; @@ -6,13 +6,21 @@ const storyParameter = 'storyParameter'; addParameters({ globalParameter }); -storiesOf('Core|Parameters', module) - .addParameters({ chapterParameter }) - .add( - 'passed to story', - ({ parameters: { fileName, ...parameters } }) => - `
Parameters are ${JSON.stringify(parameters)}
`, - { - storyParameter, - } - ); +export default { + title: 'Core|Parameters', + + parameters: { + chapterParameter, + }, +}; + +export const passedToStory = ({ parameters: { fileName, ...parameters } }) => + `
Parameters are ${JSON.stringify(parameters)}
`; + +passedToStory.story = { + name: 'passed to story', + + parameters: { + storyParameter, + }, +}; diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js index 158b8be733c..f83b5575062 100644 --- a/examples/polymer-cli/src/stories/custom-decorators.stories.js +++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js @@ -1,14 +1,23 @@ -import { storiesOf } from '@storybook/polymer'; import { document } from 'global'; -storiesOf('Custom|Decorator', module) - .addDecorator(storyFn => { - const el = storyFn(); - 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; - }); +export default { + title: 'Custom|Decorator', + + decorators: [ + storyFn => { + const el = storyFn(); + el.setAttribute('title', `${el.getAttribute('title')} - decorated`); + return el; + }, + ], +}; + +export const exampleDecoration = () => { + const el = document.createElement('playground-button'); + el.setAttribute('title', 'An example title'); + return el; +}; + +exampleDecoration.story = { + name: 'example decoration', +}; diff --git a/examples/polymer-cli/src/stories/index.stories.js b/examples/polymer-cli/src/stories/index.stories.js deleted file mode 100644 index 9dea636686e..00000000000 --- a/examples/polymer-cli/src/stories/index.stories.js +++ /dev/null @@ -1,22 +0,0 @@ -import { storiesOf } from '@storybook/polymer'; -import { linkTo } from '@storybook/addon-links'; -import { document } from 'global'; - -import '../polymer-playground-app.html'; -import '../playground-button.html'; -import './storybook-welcome-to-polymer.html'; - -storiesOf('Welcome', module).add('Welcome', () => { - const el = document.createElement('storybook-welcome-to-polymer'); - el.goToButton = linkTo('Button'); - return el; -}); - -storiesOf('App', module).add( - 'full app', - () => '' -); - -storiesOf('Button', module) - .add('rounded', () => '') - .add('square', () => '');