diff --git a/addons/rose/.storybook/main.js b/addons/rose/.storybook/main.js index 990a60bc9..a1cce427b 100644 --- a/addons/rose/.storybook/main.js +++ b/addons/rose/.storybook/main.js @@ -1,9 +1,11 @@ module.exports = { - stories: ['../stories/**/*.stories.js'], + stories: [ + '../addon/components/**/*.stories.(js|mdx)', + '../stories/**/*.stories.mdx', + ], addons: [ '@storybook/addon-knobs', '@storybook/addon-actions', - '@storybook/addon-links', - '@storybook/addon-storysource' + '@storybook/addon-docs', ] }; diff --git a/addons/rose/README.md b/addons/rose/README.md index c61b25b72..2cd8b9ec1 100644 --- a/addons/rose/README.md +++ b/addons/rose/README.md @@ -70,7 +70,7 @@ Before submitting your work, be sure to run auto-formatters To build a new component, start by generating it on the command line with `ember g component rose/component-name`. Then manually add a Storybook story in -`stories/component-name.stories.js`. Use the Storybook UI during component +`component-name.stories.mdx`. Use the Storybook UI during component development (see Yarn commands). ## Running tests diff --git a/addons/rose/addon/components/rose/button.stories.mdx b/addons/rose/addon/components/rose/button.stories.mdx new file mode 100644 index 000000000..7617f0ba3 --- /dev/null +++ b/addons/rose/addon/components/rose/button.stories.mdx @@ -0,0 +1,98 @@ +import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; +import { hbs } from 'ember-cli-htmlbars'; +import { action } from '@storybook/addon-actions'; +import { text, boolean, select } from '@storybook/addon-knobs'; + + + +# Button + +A simple button component that renders an HTML `