📚 maintain storybook

kufu · Jun 21, 2019 · 033da17 · 033da17
1 parent a6d1370
commit 033da17
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 16 deletions.
diff --git a/src/components/Tag/README.md b/src/components/Tag/README.md
@@ -0,0 +1,14 @@
+# AppBar
+
+```tsx
+import { Tag } from 'smarthr-ui'
+
+<Tag type="require">必須</Tag>
+```
+
+## props
+
+| Name       | Required | Type                              | DefaultValue | Description                                                       |
+| ---------- | -------- | --------------------------------- | ------------ | ----------------------------------------------------------------- |
+| skeleton     | -        | **boolean** <br> true &#124; false | false            | Set transparent background when its true  |
+| type | true        | **enum** <br> `suuccess` &#124; `error` &#124; `warning` &#124; `require` | -            | Can be set type of tag   |
diff --git a/src/components/Tag/Tag.stories.tsx b/src/components/Tag/Tag.stories.tsx
@@ -3,23 +3,53 @@ import * as React from 'react'
 import styled from 'styled-components'
 
 import { Tag } from './Tag'
+import readme from './README.md'
 
-storiesOf('Tag', module).add('all', () => (
-  <List>
-    <li>
-      <Tag type="success">サクセス</Tag>
-    </li>
-    <li>
-      <Tag type="warning">警告</Tag>
-    </li>
-    <li>
-      <Tag type="error">エラー</Tag>
-    </li>
-    <li>
-      <Tag type="require">必須</Tag>
-    </li>
-  </List>
-))
+storiesOf('Tag', module)
+  .addParameters({
+    readme: {
+      sidebar: readme,
+    },
+  })
+  .add('all', () => (
+    <List>
+      <li>
+        <Tag>デフォルト</Tag>
+      </li>
+      <li>
+        <Tag type="success">サクセス</Tag>
+      </li>
+      <li>
+        <Tag type="warning">警告</Tag>
+      </li>
+      <li>
+        <Tag type="error">エラー</Tag>
+      </li>
+      <li>
+        <Tag type="require">必須</Tag>
+      </li>
+      <li>
+        <Tag type="success" skeleton={true}>
+          サクセス
+        </Tag>
+      </li>
+      <li>
+        <Tag type="warning" skeleton={true}>
+          警告
+        </Tag>
+      </li>
+      <li>
+        <Tag type="error" skeleton={true}>
+          エラー
+        </Tag>
+      </li>
+      <li>
+        <Tag type="require" skeleton={true}>
+          必須
+        </Tag>
+      </li>
+    </List>
+  ))
 
 const List = styled.ul`
   padding: 8px 24px;