add Note docs (#88)

lightingbeetle · Mar 4, 2019 · 8e865c3 · 8e865c3
1 parent 1a1f274
commit 8e865c3
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',