style(Statistic): update docs to the latest standards (#866)

Author: dpkwhan

docs/app/Examples/views/Statistic/Content/Labels.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Statistic } from 'semantic-ui-react'
+
+const StatisticExampleLabels = () => (
+  <div>
+    <Statistic>
+      <Statistic.Value>2,204</Statistic.Value>
+      <Statistic.Label>Views</Statistic.Label>
+    </Statistic>
+
+    <Statistic>
+      <Statistic.Value value='2,204' />
+      <Statistic.Label label='Views' />
+    </Statistic>
+
+    <Statistic value='2,204' label='Views' />
+  </div>
+)
+
+export default StatisticExampleLabels

docs/app/Examples/views/Statistic/Content/StatisticExampleLabels.js

@@ -8,7 +8,7 @@ const items = [
   { label: 'Team Members', value: '42' },
 ]
 
-const Props = () => (
+const StatisticExampleProps = () => (
   <div>
     <Statistic.Group>
       <Statistic label='Saves' value='22' />
@@ -21,4 +21,4 @@ const Props = () => (
   </div>
 )
 
-export default Props
+export default StatisticExampleProps

docs/app/Examples/views/Statistic/Content/Props.js renamed to docs/app/Examples/views/Statistic/Content/StatisticExampleProps.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'semantic-ui-react'
+
+const StatisticExampleValues = () => (
+  <Statistic.Group>
+    <Statistic>
+      <Statistic.Value>22</Statistic.Value>
+      <Statistic.Label>Saves</Statistic.Label>
+    </Statistic>
+
+    <Statistic>
+      <Statistic.Value text>
+        Three<br />
+        Thousand
+      </Statistic.Value>
+      <Statistic.Label>Signups</Statistic.Label>
+    </Statistic>
+
+    <Statistic>
+      <Statistic.Value>
+        <Icon name='plane' />
+        5
+      </Statistic.Value>
+      <Statistic.Label>Flights</Statistic.Label>
+    </Statistic>
+
+    <Statistic>
+      <Statistic.Value>
+        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' inline shape='circular' />
+        42
+      </Statistic.Value>
+      <Statistic.Label>Team Members</Statistic.Label>
+    </Statistic>
+  </Statistic.Group>
+)
+
+export default StatisticExampleValues

docs/app/Examples/views/Statistic/Content/StatisticExampleValues.js

@@ -7,15 +7,15 @@ const Content = () => (
   <ExampleSection title='Content'>
     <ComponentExample
       title='Value'
-      description='A statistic can contain a numeric, icon, image, or text value'
-      examplePath='views/Statistic/Content/Values'
+      description='A statistic can contain a numeric, icon, image, or text value.'
+      examplePath='views/Statistic/Content/StatisticExampleValues'
     />
-    <ComponentExample examplePath='views/Statistic/Content/Props' />
+    <ComponentExample examplePath='views/Statistic/Content/StatisticExampleProps' />
 
     <ComponentExample
       title='Label'
-      description='A statistic can contain a label to help provide context for the presented value'
-      examplePath='views/Statistic/Content/Labels'
+      description='A statistic can contain a label to help provide context for the presented value.'
+      examplePath='views/Statistic/Content/StatisticExampleLabels'
     />
   </ExampleSection>
 )

docs/app/Examples/views/Statistic/Content/Values.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'semantic-ui-react'
 
-const BottomLabel = () => (
+const StatisticExampleBottomLabel = () => (
   <div>
     <Statistic>
       <Statistic.Value>5,550</Statistic.Value>
@@ -12,4 +12,4 @@ const BottomLabel = () => (
   </div>
 )
 
-export default BottomLabel
+export default StatisticExampleBottomLabel

docs/app/Examples/views/Statistic/Content/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Statistic } from 'semantic-ui-react'
+
+const items = [
+  { label: 'Faves', value: '22' },
+  { label: 'Views', value: '31,200' },
+  { label: 'Members', value: '22' },
+]
+
+const StatisticExampleGroups = () => (
+  <div>
+    <Statistic.Group>
+      <Statistic>
+        <Statistic.Value>22</Statistic.Value>
+        <Statistic.Label>Faves</Statistic.Label>
+      </Statistic>
+      <Statistic>
+        <Statistic.Value>31,200</Statistic.Value>
+        <Statistic.Label>Views</Statistic.Label>
+      </Statistic>
+      <Statistic label='Members' value='22' />
+    </Statistic.Group>
+
+    <Statistic.Group items={items} />
+  </div>
+)
+
+export default StatisticExampleGroups

docs/app/Examples/views/Statistic/Types/Groups.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'semantic-ui-react'
 
-const TopLabel = () => (
+const StatisticExampleTopLabel = () => (
   <div>
     <Statistic>
       <Statistic.Label>Views</Statistic.Label>
@@ -10,4 +10,4 @@ const TopLabel = () => (
   </div>
 )
 
-export default TopLabel
+export default StatisticExampleTopLabel