doc: split demos (#17415)

* split demos

close #17396

* snapshot updated

* split all demo

* fix lint error

* better code style

* change complex to error

* sort demos

components/result/demo/403.md

@@ -0,0 +1,28 @@
+---
+order: 4
+title:
+  zh-CN: 403
+  en-US: 403
+---
+
+## zh-CN
+
+你没有此页面的访问权限。
+
+## en-US
+
+you are not authorized to access this page.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    status="403"
+    title="403"
+    subTitle="Sorry, you are not authorized to access this page."
+    extra={<Button type="primary">Back Home</Button>}
+  />,
+  mountNode,
+);
+```

components/result/demo/404.md

@@ -0,0 +1,28 @@
+---
+order: 5
+title:
+  zh-CN: 404
+  en-US: 404
+---
+
+## zh-CN
+
+此页面未找到。
+
+## en-US
+
+The page you visited does not exist.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    status="404"
+    title="404"
+    subTitle="'Sorry, the page you visited does not exist."
+    extra={<Button type="primary">Back Home</Button>}
+  />,
+  mountNode,
+);
+```

components/result/demo/500.md

@@ -0,0 +1,28 @@
+---
+order: 6
+title:
+  zh-CN: 500
+  en-US: 500
+---
+
+## zh-CN
+
+服务器发生了错误。
+
+## en-US
+
+The server is wrong.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    status="500"
+    title="500"
+    subTitle="Sorry, the server is wrong."
+    extra={<Button type="primary">Back Home</Button>}
+  />,
+  mountNode,
+);
+```

components/result/demo/basic.md

@@ -1,106 +0,0 @@
----
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
----
-
-## zh-CN
-
-默认支持的各种状态的展示。
-
-## en-US
-
-The display of the default status.
-
-```jsx
-import { Result, Radio, Button } from 'antd';
-
-const StatusMap = {
-  '403': {
-    title: '403',
-    subTitle: 'Sorry, you are not authorized to access this page.',
-    extra: <Button type="primary">Back Home</Button>,
-  },
-  '404': {
-    title: '404',
-    subTitle: 'Sorry, the page you visited does not exist.',
-    extra: <Button type="primary">Back Home</Button>,
-  },
-  '500': {
-    title: '500',
-    subTitle: 'Sorry, the server is wrong.',
-    extra: <Button type="primary">Back Home</Button>,
-  },
-  success: {
-    title: 'Successfully Purchased Cloud Server ECS!',
-    subTitle:
-      'Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.',
-    extra: [
-      <Button type="primary" key="console">
-        Go Console
-      </Button>,
-      <Button key="buy">Buy Again</Button>,
-    ],
-  },
-  info: {
-    title: 'Your operation has been executed',
-    extra: (
-      <Button type="primary" key="console">
-        Go Console
-      </Button>
-    ),
-  },
-  error: {
-    title: 'Submission Failed',
-    subTitle: 'Please check and modify the following information before resubmitting.',
-    extra: [
-      <Button type="primary" key="console">
-        Go Console
-      </Button>,
-    ],
-  },
-  warning: {
-    title: 'There are some problems with your operation.',
-    extra: (
-      <Button type="primary" key="console">
-        Go Console
-      </Button>
-    ),
-  },
-};
-
-const StatusArray = Object.keys(StatusMap);
-
-class ResultDemo extends React.Component {
-  state = {
-    status: '403',
-  };
-
-  onChange = e => {
-    console.log('status checked', e.target.value);
-    this.setState({
-      status: e.target.value,
-    });
-  };
-
-  render() {
-    const { status } = this.state;
-    const resultProps = StatusMap[status];
-    return (
-      <div>
-        <p>
-          <Radio.Group onChange={this.onChange} value={status}>
-            {StatusArray.map(statusItem => (
-              <Radio value={statusItem}>{statusItem}</Radio>
-            ))}
-          </Radio.Group>
-        </p>
-        <Result status={status} {...resultProps} />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<ResultDemo />, mountNode);
-```

components/result/demo/customIcon.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 8
 title:
   zh-CN: 自定义 icon
   en-US: Custom icon

components/result/demo/error.md

@@ -1,22 +1,22 @@
 ---
-order: 1
+order: 7
 title:
-  zh-CN: 复杂的例子
+  zh-CN: Error
-  en-US: Complex example
+  en-US: Error
 ---
 
 ## zh-CN
 
-提供更加复杂的反馈。
+复杂的错误反馈。
 
 ## en-US
 
-Provide more complex feedback.
+Complex error feedback.
 
 ```jsx
 import { Result, Button, Icon, Typography } from 'antd';
 
-const { Title, Paragraph } = Typography;
+const { Paragraph, Text } = Typography;
 
 ReactDOM.render(
   <Result
@@ -31,14 +31,23 @@ ReactDOM.render(
     ]}
   >
     <div className="desc">
-      <Title level={4}>The content you submitted has the following error:</Title>
+      <Paragraph>
+        <Text
+          strong
+          style={{
+            fontSize: 16,
+          }}
+        >
+          The content you submitted has the following error:
+        </Text>
+      </Paragraph>
       <Paragraph>
         <Icon style={{ color: 'red' }} type="close-circle" /> Your account has been frozen{' '}
         <a>Thaw immediately &gt;</a>
       </Paragraph>
       <Paragraph>
-        <Icon type="close-circle" /> Your account is not yet eligible to apply{' '}
+        <Icon style={{ color: 'red' }} type="close-circle" /> Your account is not yet eligible to
-        <a>Apply immediately &gt;</a>
+        apply <a>Apply Unlock &gt;</a>
       </Paragraph>
     </div>
   </Result>,

components/result/demo/info.md

@@ -0,0 +1,30 @@
+---
+order: 1
+title:
+  zh-CN: Info
+  en-US: Info
+---
+
+## zh-CN
+
+展示处理结果。
+
+## en-US
+
+Show processing results.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    title="Your operation has been executed"
+    extra={
+      <Button type="primary" key="console">
+        Go Console
+      </Button>
+    }
+  />,
+  mountNode,
+);
+```

components/result/demo/success.md

@@ -0,0 +1,33 @@
+---
+order: 0
+title:
+  zh-CN: Success
+  en-US: Success
+---
+
+## zh-CN
+
+成功的结果。
+
+## en-US
+
+Show successful results.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    status="success"
+    title="Successfully Purchased Cloud Server ECS!"
+    subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+    extra={[
+      <Button type="primary" key="console">
+        Go Console
+      </Button>,
+      <Button key="buy">Buy Again</Button>,
+    ]}
+  />,
+  mountNode,
+);
+```

components/result/demo/warning.md

@@ -0,0 +1,31 @@
+---
+order: 2
+title:
+  zh-CN: Warning
+  en-US: Warning
+---
+
+## zh-CN
+
+警告类型的结果。
+
+## en-US
+
+The result of the warning.
+
+```jsx
+import { Result, Button } from 'antd';
+
+ReactDOM.render(
+  <Result
+    status="warning"
+    title="There are some problems with your operation."
+    extra={
+      <Button type="primary" key="console">
+        Go Console
+      </Button>
+    }
+  />,
+  mountNode,
+);
+```