add Badge docs (#83)

lightingbeetle · Feb 10, 2019 · 36af9c9 · 36af9c9
1 parent 66200a6
commit 36af9c9
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 0 deletions.
diff --git a/packages/styleguide/src/components/Badge/Badge.docs.mdx b/packages/styleguide/src/components/Badge/Badge.docs.mdx
@@ -0,0 +1,42 @@
+import { Badge, InfoBadge } from './';
+import { Preview, ComponentDocs } from './../';
+
+# Badge
+
+Badges are used to indicate status of an object. It's meant to be used inline to highlight important information.
+
+## Variants
+
+### Default
+
+<Preview>
+  <Badge>Badge</Badge>
+</Preview>
+
+### Colored badges
+
+<Preview>
+  <Badge>Badge</Badge>
+  <Badge color="accent">Accent</Badge><br />
+  <Badge color="success">Success</Badge><br />
+  <Badge color="error">Error</Badge><br />
+  <Badge color="info">Info</Badge><br />
+</Preview>
+
+### InfoBadge
+
+<Preview>
+  <InfoBadge value="ready" /><br />
+  <InfoBadge value="wip" /><br />
+  <InfoBadge value="deprecated" /><br />
+  <InfoBadge value="draft" /><br />
+  <InfoBadge value="custom" /><br />
+  <InfoBadge value="universal" /><br />
+  <InfoBadge value="react" /><br />
+  <InfoBadge value="html" /><br />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Badge />" component={Badge} />
+<ComponentDocs title="<InfoBadge />" component={InfoBadge} />
diff --git a/packages/styleguide/src/components/Badge/Badge.js b/packages/styleguide/src/components/Badge/Badge.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { rem } from './../../style/utils';
 
 const propTypes = {
+  /** Color as a string from styleguide theme */
   color: string
 };
 

diff --git a/packages/styleguide/src/components/Badge/InfoBadge.js b/packages/styleguide/src/components/Badge/InfoBadge.js
@@ -15,7 +15,9 @@ let defaultTypeToColorMap = {
 };
 
 const propTypes = {
+  /** Value is key from `typeToColorMap` prop. */
   value: string,
+  /** Default map of available states. */
   typeToColorMap: object
 };
 

diff --git a/packages/styleguide/src/index.js b/packages/styleguide/src/index.js
@@ -9,6 +9,7 @@ import PreviewDocs from './components/Preview/Preview.docs.mdx';
 import ComponentDocsDocs from './components/ComponentDocs/ComponentDocs.docs.mdx';
 import CodeDocs from './components/Code/Code.docs.mdx';
 import ColorPaletteDocs from './components/ColorPalette/ColorPalette.docs.mdx';
+import BadgeDocs from './components/Badge/Badge.docs.mdx';
 
 styleguide({
   config: {
@@ -31,6 +32,11 @@ styleguide({
       title: 'Components',
       path: '/components',
       nodes: [
+        {
+          title: 'Badge',
+          path: '/badge',
+          render: <Page render={BadgeDocs} />
+        },
         {
           title: 'Code',
           path: '/code',