Merge pull request #169 from unix/pkg

docs(icons): add icons for chinese

lib/components/displays/icons.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { Card, Input, useInput, Modal, useModal, Snippet } from 'components'
 import * as Icon from '@zeit-ui/react-icons'
 import IconsCell, { getImportString } from './icons-cell'
+import { useConfigs } from 'lib/config-context'
 
 const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
   return (
@@ -17,6 +18,7 @@ const ImportSnippet: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
 }
 
 const Icons: React.FC = () => {
+  const { isChinese } = useConfigs()
   const { setVisible, bindings: modalBindings } = useModal()
   const { state: query, bindings } = useInput('')
   const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
@@ -31,9 +33,9 @@ const Icons: React.FC = () => {
 
   return (
     <>
-      <h3 className="title">Icons Gallery</h3>
+      <h3 className="title">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>
       <Card>
-        <Input width="100%" icon={<Icon.Search />} placeholder="Search" {...bindings} />
+        <Input width="100%" icon={<Icon.Search />} placeholder={isChinese ? '搜索' : 'Search'} {...bindings} />
         <div className="icons-grid">
           {icons.map(([name, component], index) => (
             <IconsCell name={name} component={component} key={`${name}-${index}`}
@@ -43,9 +45,9 @@ const Icons: React.FC = () => {
         <Modal {...modalBindings}>
           <Modal.Title>{importStr.title}</Modal.Title>
           <Modal.Content>
-            <p>Import:</p>
+            <p>{isChinese ? '引入:' : 'Import:'}</p>
             <ImportSnippet>{importStr.normal}</ImportSnippet>
-            <p>Import single component:</p>
+            <p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>
             <ImportSnippet>{importStr.single}</ImportSnippet>
           </Modal.Content>
         </Modal>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeit-ui/react",
-  "version": "1.0.0-rc.11",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -104,4 +104,4 @@
   "dependencies": {
     "styled-jsx": "^3.2.5"
   }
-}
+}

pages/zh-cn/components/button.mdx

@@ -89,7 +89,7 @@ export const meta = {
 <Attributes.Title>Button.Props</Attributes.Title>
 
 | 属性 | 描述 | 类型 | 推荐值 | 默认
-| ---------- | ---------- | ---- |  -------------- | ------ |
+| ---------- | ---------- | ---- | -------------- | ------ |
 | **type** | 按钮的类型 | `ButtonTypes` | `'default', 'secondary', 'success', 'warning', 'error', 'abort'` | `default` |
 | **size** | 按钮的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` |
 | **ghost** | 是否为反色按钮 | `boolean` | - | `false` |

pages/zh-cn/components/icons.mdx

@@ -0,0 +1,82 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import Title from 'lib/components/playground/title'
+import { Spacer, Tabs, Snippet } from 'components'
+import * as Icon from '@zeit-ui/react-icons'
+import Github from '@zeit-ui/react-icons/github'
+import IconsGallery from 'lib/components/displays/icons'
+
+export const meta = {
+  title: '图标 Icons',
+  group: '通用',
+}
+
+## Icons / 图标
+
+显示 SVG 格式的标准向量图形。
+
+<Title title="安装" desc="安装图标库到你的项目中。" />
+<Tabs initialValue="yarn">
+  <Tabs.Item label="Yarn" value="yarn">
+    <Spacer y={0.6} />
+    <Snippet width="400px">yarn add @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+  <Tabs.Item label="npm" value="npm">
+    <Spacer y={0.6} />
+    <Snippet width="400px">npm i @zeit-ui/react-icons</Snippet>
+  </Tabs.Item>
+</Tabs>
+
+<Playground
+  title="引入图标库"
+  scope={{ Icon, Github, Spacer }}
+  code={`
+// import * as Icon from '@zeit-ui/react-icons'
+// 或是
+// import { Github } from '@zeit-ui/react-icons'
+// 或是引入单个
+// import Github from '@zeit-ui/react-icons/github'
+
+<>
+  <Icon.Github />
+  <Spacer x={1} inline />
+  <Github />
+</>
+`} />
+
+<Playground
+  title="色彩"
+  scope={{ Github }}
+  code={`
+<Github color="red" />
+`}
+/>
+
+<Playground
+  title="大小"
+  scope={{ Github, Spacer }}
+  code={`
+<>
+  <Github size={16} /> <Spacer inline x={.35} />
+  <Github size={20} /> <Spacer inline x={.35} />
+  <Github size={24} /> <Spacer inline x={.35} />
+  <Github size={28} /> <Spacer inline x={.35} />
+  <Github size={32} /> <Spacer inline x={.35} />
+  <Github size={36} />
+</>
+`}
+/>
+
+<IconsGallery />
+
+<Attributes edit="/pages/zh-cn/components/icons.mdx">
+<Attributes.Title>Icon.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| --------- | ------ | ---- | -------------- | ------ |
+| **color** | 图标颜色 | `string`        | - | -       |
+| **size**  | 图标大小 | `number`        | - | -       |
+| ...       | 原生属性 | `SVGAttributes` | `'id', 'name', 'className', ...` | - |
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>