diff --git a/addons/notes/README.md b/addons/notes/README.md index 719b6a6b2f1c..f4f7b828a20a 100644 --- a/addons/notes/README.md +++ b/addons/notes/README.md @@ -3,7 +3,7 @@ [![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook) [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook) [![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847) -[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) +[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/) [![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors) @@ -58,6 +58,30 @@ storiesOf('Component', module) .add('With Markdown', withNotes(someMarkdownText)(() => )); ``` + +If you want to use Github flavored markdown inline, use `withMarkdownNotes`: + +```js +import { storiesOf } from '@storybook/react'; +import { withMarkdownNotes } from '@storybook/addon-notes'; +import Component from './Component'; + +storiesOf('Component', module) + .add('With Markdown', withMarkdownNotes(` +# Hello World + +This is some code showing usage of the component and other inline documentation + +~~~js +
+ hello world! + +
+~~~ + `)(() => )); + +``` + ### Deprecated API This API is slated for removal in 4.0 diff --git a/addons/notes/package.json b/addons/notes/package.json index 33e0fec9efc6..2021c8897752 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -21,6 +21,7 @@ }, "dependencies": { "babel-runtime": "^6.26.0", + "marked": "^0.3.12", "prop-types": "^15.6.0", "util-deprecate": "^1.0.2" }, diff --git a/addons/notes/src/index.js b/addons/notes/src/index.js index 1fd5d328fcb7..247210ab1e3f 100644 --- a/addons/notes/src/index.js +++ b/addons/notes/src/index.js @@ -1,7 +1,18 @@ import deprecate from 'util-deprecate'; import addons from '@storybook/addons'; +import marked from 'marked'; import { WithNotes as ReactWithNotes } from './react'; +export const withMarkdownNotes = text => { + const channel = addons.getChannel(); + + return getStory => context => { + // send the notes to the channel before the story is rendered + channel.emit('storybook/notes/add_notes', marked(text)); + return getStory(context); + }; +}; + export const withNotes = textOrOptions => { const channel = addons.getChannel(); const options = typeof textOrOptions === 'string' ? { text: textOrOptions } : textOrOptions; diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot index c63bb34386ea..326234325191 100644 --- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot +++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot @@ -17,3 +17,9 @@ exports[`Storyshots Addons|Notes withNotes rendering imported markdown 1`] = ` Button with notes - check the notes panel for details `; + +exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored markdown 1`] = ` + +`; diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js index ffed0b3cd2da..62dabca83797 100644 --- a/examples/official-storybook/stories/addon-notes.stories.js +++ b/examples/official-storybook/stories/addon-notes.stories.js @@ -2,7 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; // eslint-disable-next-line import/named -import { withNotes, WithNotes } from '@storybook/addon-notes'; +import { withNotes, WithNotes, withMarkdownNotes } from '@storybook/addon-notes'; import { action } from '@storybook/addon-actions'; import BaseButton from '../components/BaseButton'; import markdownNotes from './notes/notes.md'; @@ -20,6 +20,27 @@ storiesOf('Addons|Notes', module) )) ) + .add( + 'withNotes rendering inline, github-flavored markdown', + withMarkdownNotes(` +# Documentation + +This is inline github-flavored markdown! + +## Example Usage +~~~js +storiesOf('Addons|Notes', module) + .add( + 'withNotes rendering imported markdown', + withNotes(markdownNotes)(() => ( + + )) + ) +~~~ + `)(() => ( + + )) + ) .add('using deprecated API', () => ( diff --git a/yarn.lock b/yarn.lock index 3ce6bc6aac63..47523cbe22cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9938,7 +9938,7 @@ markdown-table@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c" -marked@^0.3.9: +marked@^0.3.12, marked@^0.3.9: version "0.3.12" resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"