add GitHub flavored markdown notes

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)(() => <Component/>));
 
 ```
+
+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
+<div>
+  hello world!
+  <Component/>
+</div>
+~~~
+  `)(() => <Component/>));
+
+```
+
 ### Deprecated API
 This API is slated for removal in 4.0
 

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"
   },

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;

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
 </button>
 `;
+
+exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored markdown 1`] = `
+<button>
+  Button with notes from inline github-flavored markdown - check the notes panel for details
+</button>
+`;

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)
       <BaseButton label="Button with notes - check the notes panel for details" />
     ))
   )
+  .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)(() => (
+      <BaseButton label="Button with notes - check the notes panel for details" />
+    ))
+  )
+~~~
+    `)(() => (
+      <BaseButton label="Button with notes from inline github-flavored markdown - check the notes panel for details" />
+    ))
+  )
   .add('using deprecated API', () => (
     <WithNotes notes="Hello">
       <BaseButton onClick={action('clicked')} label="😀 😎 👍 💯" />

yarn.lock

@@ -9800,7 +9800,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"