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
-
+
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
+
+
+ Note content
+
+
+### Note types
+
+
+ Note content
+ Note content
+ Note content
+ Note content
+
+
+## Props
+
+
+
+## Aliases
+
+{` ===
+ ===
+ ===
+ ===
+ ===
+ ===
+`}
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 => ;
NoteInfo.displayName = 'NoteInfo';
+export const NoteSuccess = props => ;
+NoteInfo.displayName = 'NoteSuccess';
+
export const Dos = 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:
},
+ {
+ title: 'Note',
+ path: '/note',
+ render:
+ },
{
title: 'Preview',
path: '/preview',