style(Statistic): update docs to the latest standards

docs/app/Examples/views/Statistic/Content/StatisticExampleLabels.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/Props.js → docs/app/Examples/views/Statistic/Content/StatisticExampleProps.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/StatisticExampleValues.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/index.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/Types/BottomLabel.js → docs/app/Examples/views/Statistic/Types/StatisticExampleBottomLabel.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/Types/StatisticExampleGroups.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/TopLabel.js → docs/app/Examples/views/Statistic/Types/StatisticExampleTopLabel.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

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

@@ -7,15 +7,15 @@ const Types = () => (
   <ExampleSection title='Types'>
     <ComponentExample
       title='Statistic'
-      description='A statistic can display a value with a label above or below it'
-      examplePath='views/Statistic/Types/BottomLabel'
+      description='A statistic can display a value with a label above or below it.'
+      examplePath='views/Statistic/Types/StatisticExampleBottomLabel'
     />
-    <ComponentExample examplePath='views/Statistic/Types/TopLabel' />
+    <ComponentExample examplePath='views/Statistic/Types/StatisticExampleTopLabel' />
 
     <ComponentExample
       title='Statistic Group'
-      description='A group of statistics'
-      examplePath='views/Statistic/Types/Groups'
+      description='A group of statistics.'
+      examplePath='views/Statistic/Types/StatisticExampleGroups'
     />
   </ExampleSection>
 )

docs/app/Examples/views/Statistic/Variations/Colored.js → docs/app/Examples/views/Statistic/Variations/StatisticExampleColored.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'semantic-ui-react'
 
-const Colored = () => (
+const StatisticExampleColored = () => (
   <Statistic.Group>
     <Statistic color='red' value='27' label='red' />
     <Statistic color='orange' value='8' label='orange' />
@@ -18,4 +18,4 @@ const Colored = () => (
   </Statistic.Group>
 )
 
-export default Colored
+export default StatisticExampleColored

docs/app/Examples/views/Statistic/Variations/StatisticExampleEvenlyDivided.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'semantic-ui-react'
+
+const StatisticExampleEvenlyDivided = () => (
+  <Statistic.Group widths='four'>
+    <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' className='circular inline' />
+        42
+      </Statistic.Value>
+      <Statistic.Label>Team Members</Statistic.Label>
+    </Statistic>
+  </Statistic.Group>
+)
+
+export default StatisticExampleEvenlyDivided

docs/app/Examples/views/Statistic/Variations/Floated.js → docs/app/Examples/views/Statistic/Variations/StatisticExampleFloated.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Segment, Statistic } from 'semantic-ui-react'
 
-const Floated = () => (
+const StatisticExampleFloated = () => (
   <Segment>
     <Statistic floated='right' label='Views' value='2,204' />
 
@@ -32,4 +32,4 @@ const Floated = () => (
   </Segment>
 )
 
-export default Floated
+export default StatisticExampleFloated

docs/app/Examples/views/Statistic/Variations/StatisticExampleHorizontal.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Statistic } from 'semantic-ui-react'
+
+const StatisticExampleHorizontal = () => <Statistic horizontal value='2,204' label='Views' />
+
+export default StatisticExampleHorizontal

docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js → docs/app/Examples/views/Statistic/Variations/StatisticExampleHorizontalGroup.js

@@ -7,6 +7,6 @@ const items = [
   { label: 'Tasks', value: '22' },
 ]
 
-const HorizontalGroup = () => <Statistic.Group horizontal items={items} />
+const StatisticExampleHorizontalGroup = () => <Statistic.Group horizontal items={items} />
 
-export default HorizontalGroup
+export default StatisticExampleHorizontalGroup