From b9a550c0fee9843cbca6e70031309c8e3958cc8a Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Wed, 20 Apr 2016 16:28:07 +0800
Subject: [PATCH] site: i18n for demo

---
 components/button/demo/basic.md       | 40 ++++++++++++++++++---------
 site/component/ComponentDoc/index.jsx | 10 ++++++-
 site/component/Demo/index.jsx         | 13 +++++++--
 3 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index c39daf7b10..c0e3b400b7 100644
--- a/components/button/demo/basic.md
+++ b/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>
+```
diff --git a/site/component/ComponentDoc/index.jsx b/site/component/ComponentDoc/index.jsx
index b46e47ce47..74d38cf1f0 100644
--- a/site/component/ComponentDoc/index.jsx
+++ b/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>
       );
diff --git a/site/component/Demo/index.jsx b/site/component/Demo/index.jsx
index 2d705f26d2..65fec0a5d6 100644
--- a/site/component/Demo/index.jsx
+++ b/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}