site: i18n for demo

components/button/demo/basic.md

@@ -1,28 +1,42 @@
 ---
 order: 0
-title: 按钮类型
+title:
+  zh-CN: 按钮类型
+  en-US: Type
 ---
 
-按钮有三种类型：主按钮、次按钮、幽灵按钮。
+## zh-CN
 
-通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
+按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。
 
-主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。
+通过设置 `type` 为 `primary` `ghost` `dashed` 可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
+
+主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
+
+## en-US
+
+There are primary button, default button, ghost button and dashed button in antd.
+
+`type` can be set as `primary` or `ghost` or `dashed`, in order to create primary button or ghost button or dashed button. If nothing is provided to `type`, we will get default button. Users can tell the significance of button from it's appearance.
+
+Primary button and default button can be used without other button, but ghost button must be used with primary button.
 
 ````jsx
 import { Button } from 'antd';
 
-ReactDOM.render(<div>
-  <Button type="primary">主按钮</Button>
-  <Button>次按钮</Button>
-  <Button type="ghost">幽灵按钮</Button>
-  <Button type="dashed">虚线按钮</Button>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Button type="primary">Primary</Button>
+    <Button>Default</Button>
+    <Button type="ghost">Ghost</Button>
+    <Button type="dashed">Dashed</Button>
+  </div>,
+  mountNode
+);
 ````
 
-<style>
+```css
 #components-button-demo-basic .ant-btn {
   margin-right: 8px;
-  margin-bottom: 12px;
 }
-</style>
+```

site/component/ComponentDoc/index.jsx

@@ -7,6 +7,10 @@ import * as utils from '../utils';
 import demosList from '../../../_data/demos-list';
 
 export default class ComponentDoc extends React.Component {
+  static contextTypes = {
+    intl: React.PropTypes.object,
+  }
+
   constructor(props) {
     super(props);
 
@@ -62,12 +66,16 @@ export default class ComponentDoc extends React.Component {
       'code-box-expand-trigger-active': expand,
     });
 
+    const locale = this.context.intl.locale;
     const jumper = demos.map((demo) => {
+      const title = demo.meta.title;
+      const localizeTitle = typeof title === 'object' ?
+              title[locale] : title;
       return (
         <li key={demo.id}>
           <Link className={demo.id === scrollTo ? 'current' : ''}
             to={{ pathname: location.pathname, query: { scrollTo: `${demo.id}` } }}>
-            {demo.meta.title}
+            { localizeTitle }
           </Link>
         </li>
       );

site/component/Demo/index.jsx

@@ -6,6 +6,10 @@ import * as utils from '../utils';
 const isLocal = location.port;
 
 export default class Demo extends React.Component {
+  static contextTypes = {
+    intl: React.PropTypes.object,
+  }
+
   constructor(props) {
     super(props);
 
@@ -35,7 +39,12 @@ export default class Demo extends React.Component {
       [className]: className,
       expand: codeExpand,
     });
-    const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(intro));
+
+    const locale = this.context.intl.locale;
+    const localizeIntro = intro[locale] || intro;
+    const introChildren = utils.jsonmlToComponent(pathname, ['div'].concat(localizeIntro));
+    const localizedTitle = typeof meta.title === 'object' ?
+            meta.title[locale] : meta.title;
     return (
       <section className={codeBoxClass} id={id}>
         <section className="code-box-demo">
@@ -53,7 +62,7 @@ export default class Demo extends React.Component {
         <section className="code-box-meta markdown">
           <div className="code-box-title">
             <Link to={{ pathname, query: { scrollTo: id } }}>
-              {meta.title}
+              { localizedTitle }
             </Link>
           </div>
           {introChildren}