test(breadcrumbs): add testcase

docs: add api for breadcrumbs

pages/en-us/components/breadcrumbs.mdx

@@ -90,7 +90,6 @@ Show where users are in the application.
 | **href** | link address | `string` | - | - |
 | **nextLink** | in `next.js` route | `boolean` | - | `false` |
 | **onClick** | click event | `(event: MouseEvent) => void` | - | - |
-| **onClick** | click event | `(event: MouseEvent) => void` | - | - |
 | ... | native props | `AnchorHTMLAttributes` | `'id', 'className', ...` | - |
 
 <Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>

pages/zh-cn/components/breadcrumbs.mdx

@@ -0,0 +1,103 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Breadcrumbs, Spacer } from 'components'
+import NextLink from 'next/link'
+import Home from '@zeit-ui/react-icons/home'
+import Inbox from '@zeit-ui/react-icons/inbox'
+
+export const meta = {
+  title: '面包屑 Breadcrumbs',
+  group: '导航',
+}
+
+## Breadcrumbs / 面包屑导航
+
+显示用户在应用中的层级位置。
+
+<Playground
+  scope={{ Breadcrumbs }}
+  code={`
+<Breadcrumbs>
+  <Breadcrumbs.Item>Home</Breadcrumbs.Item>
+  <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
+  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Playground
+  title="分隔符"
+  desc="定制字符中的分隔符。"
+  scope={{ Breadcrumbs, Spacer }}
+  code={`
+<>
+  <Breadcrumbs separator="-">
+    <Breadcrumbs.Item>Home</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Catalog</Breadcrumbs.Item>
+    <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+  </Breadcrumbs>
+  <Spacer y={.5} />
+  <Breadcrumbs separator=">">
+    <Breadcrumbs.Item>
+      Home
+      <Breadcrumbs.Separator>:</Breadcrumbs.Separator>
+    </Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Components</Breadcrumbs.Item>
+    <Breadcrumbs.Item href="">Basic</Breadcrumbs.Item>
+    <Breadcrumbs.Item >Button</Breadcrumbs.Item>
+  </Breadcrumbs>
+</>
+`} />
+
+<Playground
+  title="图标"
+  desc="以图标表达更多信息。"
+  scope={{ Breadcrumbs, Home, Inbox }}
+  code={`
+<Breadcrumbs>
+  <Breadcrumbs.Item><Home /></Breadcrumbs.Item>
+  <Breadcrumbs.Item href=""><Inbox /> Inbox</Breadcrumbs.Item>
+  <Breadcrumbs.Item >Page</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Playground
+  title="结合 NextJS"
+  desc="与 `next.js` 结合使用的示例。"
+  scope={{ Breadcrumbs, NextLink }}
+  code={`
+<Breadcrumbs>
+  <NextLink href="/">
+    <Breadcrumbs.Item nextLink>Home</Breadcrumbs.Item>
+  </NextLink>
+  <NextLink href="/en-us/components">
+    <Breadcrumbs.Item nextLink>Components</Breadcrumbs.Item>
+  </NextLink>
+  <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
+</Breadcrumbs>
+`} />
+
+<Attributes edit="/pages/zh-cn/components/breadcrumbs.mdx">
+<Attributes.Title>Breadcrumbs.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **separator** | 分隔符 | `string` | - | `/` |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>Breadcrumbs.Item.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **href** |  链接地址 | `string` | - | - |
+| **nextLink** | 是否为 `next.js` 路由 | `boolean` | - | `false` |
+| **onClick** | 点击事件 | `(event: MouseEvent) => void` | - | - |
+| ... | 原生属性 | `AnchorHTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>Breadcrumbs.Separator.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>