From 0986a0800b6d07adfaf8898109641694bfbcdbdc Mon Sep 17 00:00:00 2001
From: Adam Mockor <adam.mockor@gmail.com>
Date: Mon, 4 Mar 2019 17:05:12 +0100
Subject: [PATCH] add Note docs

---
 .../ComponentInfo/ComponentInfo.docs.mdx      |  2 +-
 .../src/components/Note/Note.docs.mdx         | 37 +++++++++++++++++++
 .../styleguide/src/components/Note/Note.js    |  7 ++--
 .../styleguide/src/components/Note/index.js   |  3 ++
 packages/styleguide/src/index.js              |  6 +++
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 packages/styleguide/src/components/Note/Note.docs.mdx

diff --git a/packages/styleguide/src/components/ComponentInfo/ComponentInfo.docs.mdx b/packages/styleguide/src/components/ComponentInfo/ComponentInfo.docs.mdx
index aba8b747601..210599dfb76 100644
--- a/packages/styleguide/src/components/ComponentInfo/ComponentInfo.docs.mdx
+++ b/packages/styleguide/src/components/ComponentInfo/ComponentInfo.docs.mdx
@@ -66,4 +66,4 @@ Color must be picked from theme.
 
 ## Props
 
-<ComponentDocs title="<ComponentInfo />" component={console.log(ComponentInfo.__docgenInfo) || ComponentInfo} />
+<ComponentDocs title="<ComponentInfo />" component={ComponentInfo} />
diff --git a/packages/styleguide/src/components/Note/Note.docs.mdx b/packages/styleguide/src/components/Note/Note.docs.mdx
new file mode 100644
index 00000000000..effe683cc2a
--- /dev/null
+++ b/packages/styleguide/src/components/Note/Note.docs.mdx
@@ -0,0 +1,37 @@
+import Note from './';
+import { Preview, ComponentDocs, Code } from './../';
+
+# Note
+
+Note should be used to display additional or somehow important information with visual indication of type of information.
+
+## Variants
+
+### Default
+
+<Preview>
+  <Note title="Note title">Note content</Note>
+</Preview>
+
+### Note types
+
+<Preview>
+  <Note title="Info" type="info">Note content</Note>
+  <Note title="Success" type="success">Note content</Note>
+  <Note title="Warning" type="warning">Note content</Note>
+  <Note title="Error" type="error">Note content</Note>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Note />" component={Note} />
+
+## Aliases
+
+<Code inline={false} language="jsx">{`<NoteInfo /> === <Note type="info" />
+<NoteSuccess /> === <Note type="success" />
+<NoteWarning /> === <Note type="warning" />
+<NoteError /> === <Note type="error" />
+<Dos /> === <Note type="success" title="Do's" />
+<Donts /> === <Note type="error" title="Dont's" />
+`}</Code>
diff --git a/packages/styleguide/src/components/Note/Note.js b/packages/styleguide/src/components/Note/Note.js
index ca537d4f040..b59011dd2ed 100644
--- a/packages/styleguide/src/components/Note/Note.js
+++ b/packages/styleguide/src/components/Note/Note.js
@@ -4,9 +4,10 @@ import styled from 'styled-components';
 import cx from 'classnames';
 
 const propTypes = {
-  title: string,
-  /* type influences set styles */
-  type: oneOf(['warning', 'success', 'error', 'info']),
+  /** Note title */
+  title: string.isRequired,
+  /** Type influences note visal style */
+  type: oneOf(['warning', 'success', 'error', 'info'])
 };
 
 const CLASS_ROOT = 'note';
diff --git a/packages/styleguide/src/components/Note/index.js b/packages/styleguide/src/components/Note/index.js
index 4f516047a8d..c9b5bd02be3 100644
--- a/packages/styleguide/src/components/Note/index.js
+++ b/packages/styleguide/src/components/Note/index.js
@@ -11,6 +11,9 @@ NoteError.displayName = 'NoteError';
 export const NoteInfo = props => <Note type="info" {...props} />;
 NoteInfo.displayName = 'NoteInfo';
 
+export const NoteSuccess = props => <Note type="success" {...props} />;
+NoteInfo.displayName = 'NoteSuccess';
+
 export const Dos = props => <Note type="success" title="Do's" {...props} />;
 Dos.displayName = 'Dos';
 
diff --git a/packages/styleguide/src/index.js b/packages/styleguide/src/index.js
index 8a620a6abe5..7af35eec87e 100644
--- a/packages/styleguide/src/index.js
+++ b/packages/styleguide/src/index.js
@@ -11,6 +11,7 @@ import CodeDocs from './components/Code/Code.docs.mdx';
 import ColorPaletteDocs from './components/ColorPalette/ColorPalette.docs.mdx';
 import ComponentInfoDocs from './components/ComponentInfo/ComponentInfo.docs.mdx';
 import BadgeDocs from './components/Badge/Badge.docs.mdx';
+import NoteDocs from './components/Note/Note.docs.mdx';
 import TableDocs from './components/Table/Table.docs.mdx';
 
 styleguide({
@@ -59,6 +60,11 @@ styleguide({
           path: '/component-info',
           render: <Page render={ComponentInfoDocs} />
         },
+        {
+          title: 'Note',
+          path: '/note',
+          render: <Page render={NoteDocs} />
+        },
         {
           title: 'Preview',
           path: '/preview',