Merge pull request #5381 from Sayegh7/feature/markdown_giphy

ADD giphy support in notes addon

addons/notes/README.md

@@ -47,3 +47,14 @@ import notes from './someMarkdownText.md';
 storiesOf('Component', module)
   .add('With Markdown', () => <Component />, { notes });
 ```
+
+### Giphy
+
+When using markdown, you can also embed gifs from Giphy into your markdown. Currently, the value `gif` of the gif prop is used to search and return the first result returned by Giphy.
+
+```md
+# Title
+
+<Giphy gif='cheese' />
+```
+

addons/notes/src/Panel.tsx

@@ -4,6 +4,7 @@ import { styled } from '@storybook/theming';
 import { STORY_CHANGED } from '@storybook/core-events';
 
 import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
+import Giphy from './giphy';
 import Markdown from 'markdown-to-jsx';
 
 import { PARAM_KEY, API, Parameters } from './shared';
@@ -59,7 +60,14 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
 
   // use our SyntaxHighlighter component in place of a <code> element when
   // converting markdown to react elements
-  options = { overrides: { code: SyntaxHighlighter } };
+  options = {
+    overrides: {
+      code: SyntaxHighlighter,
+      Giphy: {
+        component: Giphy
+      }
+    }
+  };
 
   componentDidMount() {
     const { api } = this.props;
@@ -77,7 +85,7 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
 
     const value = read(params);
     if (value) {
-      this.setState({ value });
+        this.setState({ value });
     } else {
       this.setState({ value: undefined });
     }

addons/notes/src/giphy.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import * as PropTypes from 'prop-types';
+
+interface Props{
+  gif: String
+}
+interface GiphyState {
+  src?: string;
+}
+export default class Giphy extends React.Component<Props, GiphyState> {
+  static propTypes = {
+    gif: PropTypes.string.isRequired,
+  }
+  constructor(props: any){
+    super(props)
+    this.state = {
+      src: null
+    }
+    fetch(`http://api.giphy.com/v1/gifs/search?limit=1&api_key=dc6zaTOxFJmzC&q=${props.gif}`)
+      .then(response => {
+        if(response.ok){
+          return response.json()
+        }
+      })
+      .then(data => {
+        this.setState({ src: data.data[0].images.original.url})
+      })
+  }
+  render() {
+    return (
+      <img src={this.state.src} />
+    )
+  }
+}

examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot

@@ -24,6 +24,14 @@ exports[`Storyshots Addons|Notes addon notes rendering inline, github-flavored m
 </button>
 `;
 
+exports[`Storyshots Addons|Notes with a markdown giphy 1`] = `
+<button
+  type="button"
+>
+  Button with notes - check the notes panel for details
+</button>
+`;
+
 exports[`Storyshots Addons|Notes with a markdown table 1`] = `
 <button
   type="button"

examples/official-storybook/stories/addon-notes.stories.js

@@ -41,6 +41,12 @@ const markdownTable = `
 | Row4.1  | Row4.2  | Row4.3  |
 `;
 
+const giphyMarkdown = `
+# Giphy
+
+<Giphy gif='cheese' />
+`;
+
 storiesOf('Addons|Notes', module)
   .add('addon notes', baseStory, {
     notes:
@@ -54,4 +60,7 @@ storiesOf('Addons|Notes', module)
   })
   .add('with a markdown table', baseStory, {
     notes: { markdown: markdownTable },
+  })
+  .add('with a markdown giphy', baseStory, {
+    notes: { markdown: giphyMarkdown },
   });