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',