diff --git a/types/storybook__addon-notes/index.d.ts b/types/storybook__addon-notes/index.d.ts
index f212cbce63..b669ce0a9c 100644
--- a/types/storybook__addon-notes/index.d.ts
+++ b/types/storybook__addon-notes/index.d.ts
@@ -1,18 +1,21 @@
-// Type definitions for @storybook/addon-notes 3.3
+// Type definitions for @storybook/addon-notes 4.0
 // Project: https://github.com/storybooks/storybook
 // Definitions by: Joscha Feth <https://github.com/joscha>
 //                 A.MacLeay <https://github.com/amacleay>
+//                 Michael Loughry <https://github.com/MLoughry>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// TypeScript Version: 3.0
 
 import * as React from 'react';
-import { RenderFunction } from '@storybook/react';
+import { RenderFunction, StoryDecorator } from '@storybook/react';
+import { MarkedOptions } from 'marked';
 
-export function withNotes(textOrOptions: string | object): (getStory: RenderFunction) => RenderFunction;
-export function withMarkdownNotes(text: string): (getStory: RenderFunction) => RenderFunction;
+export type WithNotesOptions = string | {
+    text: string;
+} | {
+    markdown: string;
+    markdownOptions?: MarkedOptions;
+};
 
-export interface WithNotesProps extends React.HTMLProps<HTMLDivElement> {
-    notes?: string;
-}
-
-export const WithNotes: React.StatelessComponent<WithNotesProps>;
+export function withNotes(options?: WithNotesOptions): StoryDecorator;
+export function withMarkdownNotes(markdown: string, options?: MarkedOptions): StoryDecorator;
diff --git a/types/storybook__addon-notes/storybook__addon-notes-tests.tsx b/types/storybook__addon-notes/storybook__addon-notes-tests.tsx
index cf3108fc6d..ebf24ce227 100644
--- a/types/storybook__addon-notes/storybook__addon-notes-tests.tsx
+++ b/types/storybook__addon-notes/storybook__addon-notes-tests.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { withNotes, withMarkdownNotes, WithNotes } from '@storybook/addon-notes';
+import { withNotes, withMarkdownNotes, } from '@storybook/addon-notes';
 
 const SIMPLE_MARKDOWN = `
 ## Markdown for component
@@ -10,18 +10,31 @@ A very simple component with markdown notes
 `;
 
 storiesOf('Component', module)
-  .add('with some emoji', () => (
-    <WithNotes notes={'A very simple component'}>
-      my component
-    </WithNotes>
-  ))
+  .addDecorator(withNotes())
   .add('with withNotes',
-    withNotes('A very simple component')(
-      () => (<div>my component</div>)
-    )
-  )
-  .add('with withMarkdownNotes',
-    withMarkdownNotes(SIMPLE_MARKDOWN)(
-      () => (<div>my component</div>)
-    )
+    () => (<div>my component</div>)
+  );
+
+storiesOf('Component', module)
+  .addDecorator(withNotes('Some text'))
+  .add('with withNotes',
+    () => (<div>my component</div>)
+  );
+
+storiesOf('Component', module)
+  .addDecorator(withNotes({ text: 'Some text' }))
+  .add('with withNotes',
+    () => (<div>my component</div>)
+  );
+
+storiesOf('Component', module)
+  .addDecorator(withNotes({ markdown: 'Some text' }))
+  .add('with withNotes',
+    () => (<div>my component</div>)
+  );
+
+storiesOf('Component', module)
+  .addDecorator(withNotes({ markdown: 'Some text', markdownOptions: { sanitize: true } }))
+  .add('with withNotes',
+    () => (<div>my component</div>)
   );