From e6052d5832341fc30af7381e55e9645e384ddb0d Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 20 Dec 2016 11:06:40 +0800
Subject: [PATCH] docs: update demo for badge

---
 .../__tests__/__snapshots__/demo.test.js.snap | 795 +++++++++---------
 components/badge/demo/99plus.md               |  27 -
 components/badge/demo/basic.md                |   4 +-
 components/badge/demo/change.md               |  28 +-
 components/badge/demo/link.md                 |   2 +-
 components/badge/demo/no-wrapper.md           |   2 +-
 components/badge/demo/overflow.md             |  14 +-
 components/badge/demo/status.md               |   2 +-
 8 files changed, 423 insertions(+), 451 deletions(-)
 delete mode 100644 components/badge/demo/99plus.md

diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index b581f047c4..e0259d963a 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1,281 +1,3 @@
-exports[`test renders ./components/badge/demo/99plus.md correctly 1`] = `
-<div>
-  <span
-    class="ant-badge"
-    title="99">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="current">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="current">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-      </span>
-    </sup>
-  </span>
-  <span
-    class="ant-badge"
-    title="200">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
-      99+
-    </sup>
-  </span>
-</div>
-`;
-
 exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
 <span
   class="ant-badge"
@@ -415,21 +137,361 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
 </span>
 `;
 
-exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
+exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
+<div>
+  <div>
+    <span
+      class="ant-badge"
+      title="5">
+      <a
+        class="head-example"
+        href="#" />
+      <sup
+        class="ant-scroll-number ant-badge-count"
+        data-show="true"
+        height="18">
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="current">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+        </span>
+      </sup>
+    </span>
+    <div
+      class="ant-btn-group">
+      <button
+        class="ant-btn ant-btn-ghost"
+        type="button">
+        <i
+          class="anticon anticon-minus" />
+      </button>
+      <button
+        class="ant-btn ant-btn-ghost"
+        type="button">
+        <i
+          class="anticon anticon-plus" />
+      </button>
+    </div>
+  </div>
+  <div
+    style="margin-top:10px;">
+    <span
+      class="ant-badge">
+      <a
+        class="head-example"
+        href="#" />
+      <sup
+        class="ant-scroll-number ant-badge-dot"
+        data-show="true"
+        height="18" />
+    </span>
+    <span
+      class="ant-switch"
+      tabindex="0">
+      <span
+        class="ant-switch-inner" />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
+<div>
+  <span
+    class="ant-badge">
+    <i
+      class="anticon anticon-notification" />
+    <sup
+      class="ant-scroll-number ant-badge-dot"
+      data-show="true"
+      height="18" />
+  </span>
+  <span
+    class="ant-badge">
+    <a
+      href="#">
+      Link something
+    </a>
+    <sup
+      class="ant-scroll-number ant-badge-dot"
+      data-show="true"
+      height="18" />
+  </span>
+</div>
+`;
+
+exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
+<a
+  href="#">
+  <span
+    class="ant-badge"
+    title="5">
+    <span
+      class="head-example" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      height="18">
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="current">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+      </span>
+    </sup>
+  </span>
+</a>
+`;
+
+exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 <div>
   <span
-    class="ant-badge"
-    title="5">
-    <a
-      class="head-example"
-      href="#" />
+    class="ant-badge ant-badge-not-a-wrapper"
+    title="25">
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
       height="18">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
         <p
           class="">
           0
@@ -479,7 +541,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
           1
         </p>
         <p
-          class="">
+          class="current">
           2
         </p>
         <p
@@ -491,7 +553,7 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
           4
         </p>
         <p
-          class="current">
+          class="">
           5
         </p>
         <p
@@ -551,84 +613,6 @@ exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
           9
         </p>
       </span>
-    </sup>
-  </span>
-  <span
-    class="ant-badge">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
-  </span>
-  <div
-    style="margin-top:10px;">
-    <div
-      class="ant-btn-group">
-      <button
-        class="ant-btn ant-btn-ghost"
-        type="button">
-        <i
-          class="anticon anticon-minus" />
-      </button>
-      <button
-        class="ant-btn ant-btn-ghost"
-        type="button">
-        <i
-          class="anticon anticon-plus" />
-      </button>
-    </div>
-    <button
-      class="ant-btn ant-btn-ghost"
-      style="margin-left:8px;"
-      type="button">
-      <span>
-        Switch state
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
-exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
-<div>
-  <span
-    class="ant-badge">
-    <i
-      class="anticon anticon-notification" />
-    <sup
-      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
-  </span>
-  <span
-    class="ant-badge">
-    <a
-      href="#">
-      Link something
-    </a>
-    <sup
-      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
-  </span>
-</div>
-`;
-
-exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
-<a
-  href="#">
-  <span
-    class="ant-badge"
-    title="5">
-    <span
-      class="head-example" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
       <span
         class="ant-scroll-number-only"
         style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
@@ -755,21 +739,17 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
       </span>
     </sup>
   </span>
-</a>
-`;
-
-exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
-<div>
   <span
     class="ant-badge ant-badge-not-a-wrapper"
-    title="25">
+    title="4">
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      height="18">
+      height="18"
+      style="background-color:#fff;color:#999;border-color:#d9d9d9;">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
         <p
           class="">
           0
@@ -819,7 +799,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           1
         </p>
         <p
-          class="current">
+          class="">
           2
         </p>
         <p
@@ -827,7 +807,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           3
         </p>
         <p
-          class="">
+          class="current">
           4
         </p>
         <p
@@ -891,9 +871,37 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           9
         </p>
       </span>
+    </sup>
+  </span>
+  <span
+    class="ant-badge ant-badge-not-a-wrapper"
+    title="109">
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      height="18"
+      style="background-color:#87d068;">
+      99+
+    </sup>
+  </span>
+</div>
+`;
+
+exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
+<div>
+  <span
+    class="ant-badge"
+    title="99">
+    <a
+      class="head-example"
+      href="#" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      height="18">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
         <p
           class="">
           0
@@ -955,7 +963,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           4
         </p>
         <p
-          class="current">
+          class="">
           5
         </p>
         <p
@@ -971,7 +979,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           8
         </p>
         <p
-          class="">
+          class="current">
           9
         </p>
         <p
@@ -1015,19 +1023,9 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           9
         </p>
       </span>
-    </sup>
-  </span>
-  <span
-    class="ant-badge ant-badge-not-a-wrapper"
-    title="4">
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18"
-      style="background-color:#fff;color:#999;border-color:#d9d9d9;">
       <span
         class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
         <p
           class="">
           0
@@ -1085,7 +1083,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           3
         </p>
         <p
-          class="current">
+          class="">
           4
         </p>
         <p
@@ -1105,7 +1103,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
           8
         </p>
         <p
-          class="">
+          class="current">
           9
         </p>
         <p
@@ -1152,21 +1150,18 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="ant-badge ant-badge-not-a-wrapper"
-    title="109">
+    class="ant-badge"
+    title="100">
+    <a
+      class="head-example"
+      href="#" />
     <sup
       class="ant-scroll-number ant-badge-count"
       data-show="true"
-      height="18"
-      style="background-color:#87d068;">
+      height="18">
       99+
     </sup>
   </span>
-</div>
-`;
-
-exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
-<div>
   <span
     class="ant-badge"
     title="99">
diff --git a/components/badge/demo/99plus.md b/components/badge/demo/99plus.md
deleted file mode 100644
index b284cdcdbc..0000000000
--- a/components/badge/demo/99plus.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 大数字
-  en-US: Overflowed count
----
-
-## zh-CN
-
-超过 99 的会显示为 `99+`。
-
-## en-US
-
-`99+` is displayed when count is larger than `99`.
-
-````jsx
-import { Badge } from 'antd';
-
-ReactDOM.render(<div>
-  <Badge count={99}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={200}>
-    <a href="#" className="head-example" />
-  </Badge>
-</div>, mountNode);
-````
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index 18fc7bef83..903647b5cf 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -23,7 +23,7 @@ ReactDOM.render(
 , mountNode);
 ````
 
-````css
+<style>
 .ant-badge:not(.ant-badge-status) {
   margin-right: 16px;
 }
@@ -34,4 +34,4 @@ ReactDOM.render(
   background: #eee;
   display: inline-block;
 }
-````
+</style>
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index e817b8cec0..d383e98df6 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -14,7 +14,7 @@ title:
 The count will be animated as it changes.
 
 ````jsx
-import { Badge, Button, Icon } from 'antd';
+import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;
 
 const Test = React.createClass({
@@ -35,21 +35,16 @@ const Test = React.createClass({
     }
     this.setState({ count });
   },
-  onClick() {
-    this.setState({
-      show: !this.state.show,
-    });
+  onChange(show) {
+    this.setState({ show });
   },
   render() {
     return (
       <div>
-        <Badge count={this.state.count}>
-          <a href="#" className="head-example" />
-        </Badge>
-        <Badge dot={this.state.show}>
-          <a href="#" className="head-example" />
-        </Badge>
-        <div style={{ marginTop: 10 }}>
+        <div>
+          <Badge count={this.state.count}>
+            <a href="#" className="head-example" />
+          </Badge>
           <ButtonGroup>
             <Button type="ghost" onClick={this.decline}>
               <Icon type="minus" />
@@ -58,9 +53,12 @@ const Test = React.createClass({
               <Icon type="plus" />
             </Button>
           </ButtonGroup>
-          <Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
-            Switch state
-          </Button>
+        </div>
+        <div style={{ marginTop: 10 }}>
+          <Badge dot={this.state.show}>
+            <a href="#" className="head-example" />
+          </Badge>
+          <Switch onChange={this.onChange} />
         </div>
       </div>
     );
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index 45aa19a15f..426b89061a 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 可点击
   en-US: Clickable
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index d42c5aff45..51d50bd5c7 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 1
 title:
   zh-CN: 独立使用
   en-US: Standalone
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index c0a786dd4b..6cce428040 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -1,22 +1,28 @@
 ---
-order: 6
+order: 2
 title:
   zh-CN: 封顶数字
-  en-US: Customized overflow count
+  en-US: Overflow Count
 ---
 
 ## zh-CN
 
-超过 `overflowCount` 的会显示为 `${overflowCount}+`。
+超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。
 
 ## en-US
 
-`${overflowCount}+` is displayed when count is larger than `overflowCount`.
+`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
 
 ````jsx
 import { Badge } from 'antd';
 
 ReactDOM.render(<div>
+  <Badge count={99}>
+    <a href="#" className="head-example" />
+  </Badge>
+  <Badge count={100}>
+    <a href="#" className="head-example" />
+  </Badge>
   <Badge count={99} overflowCount={10}>
     <a href="#" className="head-example" />
   </Badge>
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index 8cc14daf65..29ccd868a2 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 6
 title:
   zh-CN: 状态点
   en-US: Status