diff --git a/README.md b/README.md
index 77aea61c04..6c97174417 100644
--- a/README.md
+++ b/README.md
@@ -144,7 +144,7 @@ Be sure to check out the above migrations before embarking on a new component.
 | x Rail          |                 |                 | _ Shape         |                    |
 | _ Reveal        |                 |                 | _ Sidebar       |                    |
 | x Segment       |                 |                 | _ Sticky        |                    |
-| _ Step          |                 |                 | _ Tab           |                    |
+| x Step          |                 |                 | _ Tab           |                    |
 |                 |                 |                 | _ Transition    |                    |
 
 ## Releasing
diff --git a/docs/app/Examples/elements/Loader/index.js b/docs/app/Examples/elements/Loader/index.js
index 4abb7fa578..e670fd7a46 100644
--- a/docs/app/Examples/elements/Loader/index.js
+++ b/docs/app/Examples/elements/Loader/index.js
@@ -4,7 +4,6 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 import { Message } from 'stardust'
 
 // TODO: Update dimmers after implement <Dimmer>
-// TODO: Update messages after convert <Message> to v1 API
 
 const LoaderExamples = () => (
   <div>
@@ -14,7 +13,7 @@ const LoaderExamples = () => (
         description='A loader'
         examplePath='elements/Loader/Types/LoaderExample'
       >
-        <Message>
+        <Message info>
           Loaders are hidden unless has prop "active" or inside an "dimmer" with active prop.
         </Message>
       </ComponentExample>
diff --git a/docs/app/Examples/elements/Step/Groups/index.js b/docs/app/Examples/elements/Step/Groups/index.js
index 1dfd1e1e30..89f49b5143 100644
--- a/docs/app/Examples/elements/Step/Groups/index.js
+++ b/docs/app/Examples/elements/Step/Groups/index.js
@@ -4,8 +4,6 @@ import { Icon, Message } from 'stardust'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-// TODO: Update <Message> usage after v1 API
-
 const Groups = () => (
   <ExampleSection title='Groups'>
     <ComponentExample
diff --git a/docs/app/Examples/views/Statistic/Content/StatisticLabelExample.js b/docs/app/Examples/views/Statistic/Content/Labels.js
similarity index 64%
rename from docs/app/Examples/views/Statistic/Content/StatisticLabelExample.js
rename to docs/app/Examples/views/Statistic/Content/Labels.js
index a43cdb4233..6dbe949ff5 100644
--- a/docs/app/Examples/views/Statistic/Content/StatisticLabelExample.js
+++ b/docs/app/Examples/views/Statistic/Content/Labels.js
@@ -3,15 +3,20 @@ import { Statistic } from 'stardust'
 
 const { Label, Value } = Statistic
 
-const StatisticLabelExample = () => (
+const Labels = () => (
   <div>
     <Statistic>
       <Value>2,204</Value>
       <Label>Views</Label>
     </Statistic>
 
+    <Statistic>
+      <Value value='2,204' />
+      <Label label='Views' />
+    </Statistic>
+
     <Statistic value='2,204' label='Views' />
   </div>
 )
 
-export default StatisticLabelExample
+export default Labels
diff --git a/docs/app/Examples/views/Statistic/Content/Props.js b/docs/app/Examples/views/Statistic/Content/Props.js
new file mode 100644
index 0000000000..d989cec443
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Content/Props.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const items = [
+  { label: 'Saves', value: '22' },
+  { label: 'Signups', text: true, value: 'Three Thousand' },
+  { label: 'Flights', value: '5' },
+  { label: 'Team Members', value: '42' },
+]
+
+const Props = () => (
+  <div>
+    <Statistic.Group>
+      <Statistic label='Saves' value='22' />
+      <Statistic label='Signups' value='Three Thousand' text />
+      <Statistic label='Flights' value='5' />
+      <Statistic label='Team Members' value='42' />
+    </Statistic.Group>
+
+    <Statistic.Group items={items} />
+  </div>
+)
+
+export default Props
diff --git a/docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js b/docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js
deleted file mode 100644
index cfca0595f8..0000000000
--- a/docs/app/Examples/views/Statistic/Content/StatisticValuePropsExample.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react'
-import { Icon, Image, Statistic } from 'stardust'
-
-// TODO: Update <Image> usage after <Image> will be updated to v1 API
-
-const iconValue = (
-  <div>
-    <Icon name='plane' /> 5
-  </div>
-)
-const imageValue = (
-  <div>
-    <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
-    42
-  </div>
-)
-const textValue = <div>Three<br />Thousand</div>
-
-const items = [
-  { label: 'Saves', value: 22 },
-  { label: 'Signups', text: true, value: textValue },
-  { label: 'Flights', value: iconValue },
-  { label: 'Team Members', value: imageValue },
-]
-
-const StatisticValuePropsExample = () => (
-  <div>
-    <Statistic.Group>
-      <Statistic label='Saves' value='22' />
-      <Statistic label='Signups' value={textValue} text />
-      <Statistic label='Flights' value={iconValue} />
-      <Statistic label='Team Members' value={imageValue} />
-    </Statistic.Group>
-
-    <Statistic.Group items={items} />
-  </div>
-)
-
-export default StatisticValuePropsExample
diff --git a/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js b/docs/app/Examples/views/Statistic/Content/Values.js
similarity index 73%
rename from docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
rename to docs/app/Examples/views/Statistic/Content/Values.js
index 804d0e7734..067eb008e5 100644
--- a/docs/app/Examples/views/Statistic/Content/StatisticValueExample.js
+++ b/docs/app/Examples/views/Statistic/Content/Values.js
@@ -3,7 +3,9 @@ import { Icon, Image, Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
 
-const StatisticValueExample = () => (
+// TODO: Update <Image> usage after <Image> will be updated to v1 API
+
+const Values = () => (
   <Group>
     <Statistic>
       <Value>22</Value>
@@ -28,7 +30,7 @@ const StatisticValueExample = () => (
 
     <Statistic>
       <Value>
-        <Image inline shape='circular' src='http://semantic-ui.com/images/avatar/small/joe.jpg' />
+        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
         42
       </Value>
       <Label>Team Members</Label>
@@ -36,4 +38,4 @@ const StatisticValueExample = () => (
   </Group>
 )
 
-export default StatisticValueExample
+export default Values
diff --git a/docs/app/Examples/views/Statistic/Content/index.js b/docs/app/Examples/views/Statistic/Content/index.js
new file mode 100644
index 0000000000..a1cfd13be1
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Content/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+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'
+    />
+    <ComponentExample examplePath='views/Statistic/Content/Props' />
+
+    <ComponentExample
+      title='Label'
+      description='A statistic can contain a label to help provide context for the presented value'
+      examplePath='views/Statistic/Content/Labels'
+    />
+  </ExampleSection>
+)
+
+export default Content
diff --git a/docs/app/Examples/views/Statistic/Types/StatisticBottomLabelExample.js b/docs/app/Examples/views/Statistic/Types/BottomLabel.js
similarity index 75%
rename from docs/app/Examples/views/Statistic/Types/StatisticBottomLabelExample.js
rename to docs/app/Examples/views/Statistic/Types/BottomLabel.js
index 095f888966..ecc087f690 100644
--- a/docs/app/Examples/views/Statistic/Types/StatisticBottomLabelExample.js
+++ b/docs/app/Examples/views/Statistic/Types/BottomLabel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticBottomLabelExample = () => (
+const BottomLabel = () => (
   <div>
     <Statistic>
       <Statistic.Value>5,550</Statistic.Value>
@@ -12,4 +12,4 @@ const StatisticBottomLabelExample = () => (
   </div>
 )
 
-export default StatisticBottomLabelExample
+export default BottomLabel
diff --git a/docs/app/Examples/views/Statistic/Types/StatisticGroupExample.js b/docs/app/Examples/views/Statistic/Types/Groups.js
similarity index 76%
rename from docs/app/Examples/views/Statistic/Types/StatisticGroupExample.js
rename to docs/app/Examples/views/Statistic/Types/Groups.js
index be186c2b2e..fd03d689fe 100644
--- a/docs/app/Examples/views/Statistic/Types/StatisticGroupExample.js
+++ b/docs/app/Examples/views/Statistic/Types/Groups.js
@@ -2,13 +2,14 @@ import React from 'react'
 import { Statistic } from 'stardust'
 
 const { Group, Label, Value } = Statistic
+
 const items = [
-  { label: 'Faves', value: 22 },
+  { label: 'Faves', value: '22' },
   { label: 'Views', value: '31,200' },
-  { label: 'Members', value: 22 },
+  { label: 'Members', value: '22' },
 ]
 
-const StatisticGroupExample = () => (
+const Groups = () => (
   <div>
     <Group>
       <Statistic>
@@ -26,4 +27,4 @@ const StatisticGroupExample = () => (
   </div>
 )
 
-export default StatisticGroupExample
+export default Groups
diff --git a/docs/app/Examples/views/Statistic/Types/StatisticTopLabelExample.js b/docs/app/Examples/views/Statistic/Types/TopLabel.js
similarity index 72%
rename from docs/app/Examples/views/Statistic/Types/StatisticTopLabelExample.js
rename to docs/app/Examples/views/Statistic/Types/TopLabel.js
index cea613ba81..b67074bafb 100644
--- a/docs/app/Examples/views/Statistic/Types/StatisticTopLabelExample.js
+++ b/docs/app/Examples/views/Statistic/Types/TopLabel.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticTopLabelExample = () => (
+const TopLabel = () => (
   <div>
     <Statistic>
       <Statistic.Label>Views</Statistic.Label>
@@ -10,4 +10,4 @@ const StatisticTopLabelExample = () => (
   </div>
 )
 
-export default StatisticTopLabelExample
+export default TopLabel
diff --git a/docs/app/Examples/views/Statistic/Types/index.js b/docs/app/Examples/views/Statistic/Types/index.js
new file mode 100644
index 0000000000..1464853278
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Types/index.js
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+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'
+    />
+    <ComponentExample examplePath='views/Statistic/Types/TopLabel' />
+
+    <ComponentExample
+      title='Statistic Group'
+      description='A group of statistics'
+      examplePath='views/Statistic/Types/Groups'
+    />
+  </ExampleSection>
+)
+
+export default Types
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticColoredExample.js b/docs/app/Examples/views/Statistic/Variations/Colored.js
similarity index 90%
rename from docs/app/Examples/views/Statistic/Variations/StatisticColoredExample.js
rename to docs/app/Examples/views/Statistic/Variations/Colored.js
index ad3c38ba34..9a300a2e64 100644
--- a/docs/app/Examples/views/Statistic/Variations/StatisticColoredExample.js
+++ b/docs/app/Examples/views/Statistic/Variations/Colored.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticColoredExample = () => (
+const Colored = () => (
   <Statistic.Group>
     <Statistic color='red' value='27' label='red' />
     <Statistic color='orange' value='8' label='orange' />
@@ -18,4 +18,4 @@ const StatisticColoredExample = () => (
   </Statistic.Group>
 )
 
-export default StatisticColoredExample
+export default Colored
diff --git a/docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js b/docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js
new file mode 100644
index 0000000000..804f30ab4d
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Variations/EvenlyDivided.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'stardust'
+
+const { Group, Label, Value } = Statistic
+
+const EvenlyDivided = () => (
+  <Group widths='four'>
+    <Statistic>
+      <Value>22</Value>
+      <Label>Saves</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value text>
+        Three
+        <br />Thousand
+      </Value>
+      <Label>Signups</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value>
+        <Icon name='plane' />
+        5
+      </Value>
+      <Label>Flights</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value>
+        <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
+        42
+      </Value>
+      <Label>Team Members</Label>
+    </Statistic>
+  </Group>
+)
+
+export default EvenlyDivided
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticFloatedExample.js b/docs/app/Examples/views/Statistic/Variations/Floated.js
similarity index 95%
rename from docs/app/Examples/views/Statistic/Variations/StatisticFloatedExample.js
rename to docs/app/Examples/views/Statistic/Variations/Floated.js
index 098c9e2ff3..64e67db2c2 100644
--- a/docs/app/Examples/views/Statistic/Variations/StatisticFloatedExample.js
+++ b/docs/app/Examples/views/Statistic/Variations/Floated.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Segment, Statistic } from 'stardust'
 
-const StatisticFloatedExample = () => (
+const Floated = () => (
   <Segment>
     <Statistic floated='right' label='Views' value='2,204' />
 
@@ -32,4 +32,4 @@ const StatisticFloatedExample = () => (
   </Segment>
 )
 
-export default StatisticFloatedExample
+export default Floated
diff --git a/docs/app/Examples/views/Statistic/Variations/Horizontal.js b/docs/app/Examples/views/Statistic/Variations/Horizontal.js
new file mode 100644
index 0000000000..4ef290dfbb
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Variations/Horizontal.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const Horizontal = () => <Statistic horizontal value='2,204' label='Views' />
+
+export default Horizontal
diff --git a/docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js b/docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js
new file mode 100644
index 0000000000..b7a5b1f7ea
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Variations/HorizontalGroup.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const items = [
+  { label: 'Views', value: '2,204' },
+  { label: 'Downloads', value: '3,322' },
+  { label: 'Tasks', value: '22' },
+]
+
+const HorizontalGroup = () => <Statistic.Group horizontal items={items} />
+
+export default HorizontalGroup
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticInvertedExample.js b/docs/app/Examples/views/Statistic/Variations/Inverted.js
similarity index 92%
rename from docs/app/Examples/views/Statistic/Variations/StatisticInvertedExample.js
rename to docs/app/Examples/views/Statistic/Variations/Inverted.js
index 9746b9c7b0..70357a4610 100644
--- a/docs/app/Examples/views/Statistic/Variations/StatisticInvertedExample.js
+++ b/docs/app/Examples/views/Statistic/Variations/Inverted.js
@@ -3,7 +3,7 @@ import { Segment, Statistic } from 'stardust'
 
 // TODO: Update <Segment> usage after <Segment> will be updated to v1 API
 
-const StatisticInvertedExample = () => (
+const Inverted = () => (
   <Segment className='inverted'>
     <Statistic inverted value='54' label='inverted' />
     <Statistic inverted color='red' value='27' label='red' />
@@ -21,4 +21,4 @@ const StatisticInvertedExample = () => (
   </Segment>
 )
 
-export default StatisticInvertedExample
+export default Inverted
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticSizeExamples.js b/docs/app/Examples/views/Statistic/Variations/Size.js
similarity index 84%
rename from docs/app/Examples/views/Statistic/Variations/StatisticSizeExamples.js
rename to docs/app/Examples/views/Statistic/Variations/Size.js
index cedbe70e8b..240cd1b940 100644
--- a/docs/app/Examples/views/Statistic/Variations/StatisticSizeExamples.js
+++ b/docs/app/Examples/views/Statistic/Variations/Size.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Statistic } from 'stardust'
 
-const StatisticSizeExamples = () => (
+const Size = () => (
   <div>
     <Statistic size='mini' label='Views' value='2,204' />
     <Statistic size='tiny' label='Views' value='2,204' />
@@ -12,4 +12,4 @@ const StatisticSizeExamples = () => (
   </div>
 )
 
-export default StatisticSizeExamples
+export default Size
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticSizeDividedExamples.js b/docs/app/Examples/views/Statistic/Variations/SizeDivided.js
similarity index 85%
rename from docs/app/Examples/views/Statistic/Variations/StatisticSizeDividedExamples.js
rename to docs/app/Examples/views/Statistic/Variations/SizeDivided.js
index f77e138903..f921d95483 100644
--- a/docs/app/Examples/views/Statistic/Variations/StatisticSizeDividedExamples.js
+++ b/docs/app/Examples/views/Statistic/Variations/SizeDivided.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Divider, Statistic } from 'stardust'
 
-const StatisticSizeDividedExamples = () => (
+const SizeDivided = () => (
   <div>
     <Statistic size='mini' label='Views' value='2,204' />
     <Divider />
@@ -22,4 +22,4 @@ const StatisticSizeDividedExamples = () => (
   </div>
 )
 
-export default StatisticSizeDividedExamples
+export default SizeDivided
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticEvenlyDividedExample.js b/docs/app/Examples/views/Statistic/Variations/StatisticEvenlyDividedExample.js
deleted file mode 100644
index dc73b791c3..0000000000
--- a/docs/app/Examples/views/Statistic/Variations/StatisticEvenlyDividedExample.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react'
-import { Icon, Image, Statistic } from 'stardust'
-
-// TODO: Update <Image> usage after <Image> will be updated to v1 API
-
-const iconValue = (
-  <div>
-    <Icon name='plane' /> 5
-  </div>
-)
-const imageValue = (
-  <div>
-    <Image src='http://semantic-ui.com/images/avatar/small/joe.jpg' className='circular inline' />
-    42
-  </div>
-)
-const textValue = <div>Three<br />Thousand</div>
-
-const items = [
-  { label: 'Saves', value: 22 },
-  { label: 'Signups', text: true, value: textValue },
-  { label: 'Flights', value: iconValue },
-  { label: 'Team Members', value: imageValue },
-]
-
-const StatisticEvenlyDividedExample = () => (
-  <div>
-    <Statistic.Group widths='four' items={items} />
-    <Statistic.Group widths={4} items={items} />
-  </div>
-)
-
-export default StatisticEvenlyDividedExample
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticGroupHorizontalExample.js b/docs/app/Examples/views/Statistic/Variations/StatisticGroupHorizontalExample.js
deleted file mode 100644
index 956ec73244..0000000000
--- a/docs/app/Examples/views/Statistic/Variations/StatisticGroupHorizontalExample.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import { Statistic } from 'stardust'
-
-const items = [
-  { label: 'Views', value: '2,204' },
-  { label: 'Downloads', value: '3,322' },
-  { label: 'Tasks', value: 22 },
-]
-
-const StatisticGroupHorizontalExample = () => <Statistic.Group horizontal items={items} />
-
-export default StatisticGroupHorizontalExample
diff --git a/docs/app/Examples/views/Statistic/Variations/StatisticHorizontalExample.js b/docs/app/Examples/views/Statistic/Variations/StatisticHorizontalExample.js
deleted file mode 100644
index 07aecc72dd..0000000000
--- a/docs/app/Examples/views/Statistic/Variations/StatisticHorizontalExample.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Statistic } from 'stardust'
-
-const StatisticHorizontalExample = () => <Statistic horizontal value='2,204' label='Views' />
-
-export default StatisticHorizontalExample
diff --git a/docs/app/Examples/views/Statistic/Variations/index.js b/docs/app/Examples/views/Statistic/Variations/index.js
new file mode 100644
index 0000000000..869a08e667
--- /dev/null
+++ b/docs/app/Examples/views/Statistic/Variations/index.js
@@ -0,0 +1,48 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Horizontal Statistic'
+      description='A statistic can present its measurement horizontally'
+      examplePath='views/Statistic/Variations/Horizontal'
+    />
+    <ComponentExample examplePath='views/Statistic/Variations/HorizontalGroup' />
+
+    <ComponentExample
+      title='Colored'
+      description='A statistic can be formatted to be different colors'
+      examplePath='views/Statistic/Variations/Colored'
+    />
+
+    <ComponentExample
+      title='Inverted'
+      description='A statistic can be formatted to fit on a dark background'
+      examplePath='views/Statistic/Variations/Inverted'
+    />
+
+    <ComponentExample
+      title='Evenly Divided'
+      description='A statistic group can have its items divided evenly'
+      examplePath='views/Statistic/Variations/EvenlyDivided'
+    />
+
+    <ComponentExample
+      title='Floated'
+      description='An statistic can sit to the left or right of other content'
+      examplePath='views/Statistic/Variations/Floated'
+    />
+
+    <ComponentExample
+      title='Size'
+      description='A statistic can vary in size'
+      examplePath='views/Statistic/Variations/Size'
+    />
+    <ComponentExample examplePath='views/Statistic/Variations/SizeDivided' />
+  </ExampleSection>
+)
+
+export default Variations
diff --git a/docs/app/Examples/views/Statistic/index.js b/docs/app/Examples/views/Statistic/index.js
index 13b90ceb03..4cb75e20ad 100644
--- a/docs/app/Examples/views/Statistic/index.js
+++ b/docs/app/Examples/views/Statistic/index.js
@@ -1,78 +1,14 @@
 import React from 'react'
-import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import Content from './Content'
+import Types from './Types'
+import Variations from './Variations'
 
 const StatisticExamples = () => (
   <div>
-    <ExampleSection title='Types'>
-      <ComponentExample
-        title='Statistic'
-        description='A statistic can display a value with a label above or below it.'
-        examplePath='views/Statistic/Types/StatisticBottomLabelExample'
-      />
-      <ComponentExample examplePath='views/Statistic/Types/StatisticTopLabelExample' />
-
-      <ComponentExample
-        title='Statistic Group'
-        description='A group of statistics'
-        examplePath='views/Statistic/Types/StatisticGroupExample'
-      />
-    </ExampleSection>
-
-    <ExampleSection title='Content'>
-      <ComponentExample
-        title='Value'
-        description='A statistic can contain a numeric, icon, image, or text value.'
-        examplePath='views/Statistic/Content/StatisticValueExample'
-      />
-      <ComponentExample examplePath='views/Statistic/Content/StatisticValuePropsExample' />
-
-      <ComponentExample
-        title='Label'
-        description='A statistic can contain a label to help provide context for the presented value'
-        examplePath='views/Statistic/Content/StatisticLabelExample'
-      />
-    </ExampleSection>
-
-    <ExampleSection title='Variations'>
-      <ComponentExample
-        title='Horizontal Statistic'
-        description='A statistic can present its measurement horizontally.'
-        examplePath='views/Statistic/Variations/StatisticHorizontalExample'
-      />
-      <ComponentExample examplePath='views/Statistic/Variations/StatisticGroupHorizontalExample' />
-
-      <ComponentExample
-        title='Colored'
-        description='A statistic can be formatted to be different colors'
-        examplePath='views/Statistic/Variations/StatisticColoredExample'
-      />
-
-      <ComponentExample
-        title='Inverted'
-        description='A statistic can be formatted to fit on a dark background'
-        examplePath='views/Statistic/Variations/StatisticInvertedExample'
-      />
-
-      <ComponentExample
-        title='Evenly Divided'
-        description='A statistic group can have its items divided evenly'
-        examplePath='views/Statistic/Variations/StatisticEvenlyDividedExample'
-      />
-
-      <ComponentExample
-        title='Floated'
-        description='An statistic can sit to the left or right of other content'
-        examplePath='views/Statistic/Variations/StatisticFloatedExample'
-      />
-
-      <ComponentExample
-        title='Size'
-        description='A statistic can vary in size.'
-        examplePath='views/Statistic/Variations/StatisticSizeExamples'
-      />
-      <ComponentExample examplePath='views/Statistic/Variations/StatisticSizeDividedExamples' />
-    </ExampleSection>
+    <Types />
+    <Content />
+    <Variations />
   </div>
 )
 
diff --git a/src/views/Statistic/Statistic.js b/src/views/Statistic/Statistic.js
index cccfc56b2f..6d3055ab60 100644
--- a/src/views/Statistic/Statistic.js
+++ b/src/views/Statistic/Statistic.js
@@ -34,8 +34,8 @@ function Statistic(props) {
 
   return (
     <div {...rest} className={classes}>
-      <Statistic.Value text={text}>{value}</Statistic.Value>
-      <Statistic.Label>{label}</Statistic.Label>
+      <StatisticValue text={text} value={value} />
+      <StatisticLabel label={label} />
     </div>
   )
 }
@@ -75,7 +75,7 @@ Statistic.propTypes = {
   /** Label content of the Statistic. Mutually exclusive with the children prop. */
   label: customPropTypes.every([
     customPropTypes.disallow(['children']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 
   /** A statistic can vary in size. */
@@ -87,7 +87,7 @@ Statistic.propTypes = {
   /** Value content of the Statistic. Mutually exclusive with the children prop. */
   value: customPropTypes.every([
     customPropTypes.disallow(['children']),
-    PropTypes.node,
+    PropTypes.string,
   ]),
 }
 
diff --git a/src/views/Statistic/StatisticGroup.js b/src/views/Statistic/StatisticGroup.js
index b1f19d7c8e..96d6c217d0 100644
--- a/src/views/Statistic/StatisticGroup.js
+++ b/src/views/Statistic/StatisticGroup.js
@@ -26,11 +26,10 @@ function StatisticGroup(props) {
     return <div {...rest} className={classes}>{children}</div>
   }
 
-  let itemsJSX = []
+  let itemsJSX = items.map(item => {
+    const key = item.key || [item.label, item.title].join('-')
 
-  items.forEach((item, index) => {
-    const key = `${item.label}-${item.value}-${index}`
-    itemsJSX.push(<Statistic key={key} {...item} />)
+    return <Statistic key={key} {...item} />
   })
 
   return <div {...rest} className={classes}>{itemsJSX}</div>
@@ -61,7 +60,12 @@ StatisticGroup.propTypes = {
   /** Array of props for Statistic. */
   items: customPropTypes.every([
     customPropTypes.disallow(['children']),
-    PropTypes.array,
+    PropTypes.arrayOf(PropTypes.shape({
+      key: PropTypes.string,
+      label: PropTypes.string,
+      text: PropTypes.bool,
+      value: PropTypes.string,
+    })),
   ]),
 
   /** A statistic group can have its items divided evenly. */
diff --git a/src/views/Statistic/StatisticLabel.js b/src/views/Statistic/StatisticLabel.js
index df33f3443a..016714d827 100644
--- a/src/views/Statistic/StatisticLabel.js
+++ b/src/views/Statistic/StatisticLabel.js
@@ -7,17 +7,12 @@ import {
   META,
 } from '../../lib'
 
-// TODO: This file has disabled shorthand props
-// @see https://github.com/TechnologyAdvice/stardust/pull/334
-
 function StatisticLabel(props) {
-  // const { children, className, content } = props
-  const { children, className } = props
+  const { children, className, label } = props
   const classes = cx(className, 'label')
   const rest = getUnhandledProps(StatisticLabel, props)
 
-  // return <div className={classes} {...rest}>{children || content}</div>
-  return <div {...rest} className={classes}>{children}</div>
+  return <div {...rest} className={classes}>{children || label}</div>
 }
 
 StatisticLabel._meta = {
@@ -36,11 +31,11 @@ StatisticLabel.propTypes = {
   /** Classes that will be added to the StatisticLabel className. */
   className: PropTypes.string,
 
-  // /** Primary content of the StatisticLabel. Mutually exclusive with the children prop. */
-  // content: customPropTypes.every([
-  //   customPropTypes.disallow(['children']),
-  //   PropTypes.node,
-  // ]),
+  /** Primary content of the StatisticLabel. Mutually exclusive with the children prop. */
+  label: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.string,
+  ]),
 }
 
 export default StatisticLabel
diff --git a/src/views/Statistic/StatisticValue.js b/src/views/Statistic/StatisticValue.js
index f5070c227c..9d8964e671 100644
--- a/src/views/Statistic/StatisticValue.js
+++ b/src/views/Statistic/StatisticValue.js
@@ -8,17 +8,12 @@ import {
   useKeyOnly,
 } from '../../lib'
 
-// TODO: This file has disabled shorthand props
-// @see https://github.com/TechnologyAdvice/stardust/pull/334
-
 function StatisticValue(props) {
-  // const { children, className, content, text } = props
-  const { children, className, text } = props
+  const { children, className, text, value } = props
   const classes = cx(useKeyOnly(text, 'text'), className, 'value')
   const rest = getUnhandledProps(StatisticValue, props)
 
-  // return <div className={classes} {...rest}>{children || content}</div>
-  return <div {...rest} className={classes}>{children}</div>
+  return <div {...rest} className={classes}>{children || value}</div>
 }
 
 StatisticValue._meta = {
@@ -37,14 +32,14 @@ StatisticValue.propTypes = {
   /** Classes that will be added to the StatisticValue className. */
   className: PropTypes.string,
 
-  // /** Primary content of the StatisticValue. Mutually exclusive with the children prop. */
-  // content: customPropTypes.every([
-  //   customPropTypes.disallow(['children']),
-  //   PropTypes.node,
-  // ]),
-
   /** Format the value with smaller font size to fit nicely beside number values. */
   text: PropTypes.bool,
+
+  /** Primary content of the StatisticValue. Mutually exclusive with the children prop. */
+  value: customPropTypes.every([
+    customPropTypes.disallow(['children']),
+    PropTypes.string,
+  ]),
 }
 
 export default StatisticValue
diff --git a/test/specs/views/Stastistic/StatisticLabel-test.js b/test/specs/views/Stastistic/StatisticLabel-test.js
index dfb9ac35c1..c8dc27b92c 100644
--- a/test/specs/views/Stastistic/StatisticLabel-test.js
+++ b/test/specs/views/Stastistic/StatisticLabel-test.js
@@ -1,6 +1,7 @@
+import faker from 'faker'
 import React from 'react'
-import * as common from 'test/specs/commonTests'
 
+import * as common from 'test/specs/commonTests'
 import StatisticLabel from 'src/views/Statistic/StatisticLabel'
 
 describe('StatisticLabel', () => {
@@ -12,19 +13,9 @@ describe('StatisticLabel', () => {
       .should.have.tagName('div')
   })
 
-  // describe('content prop', () => {
-  //   it('renders child text', () => {
-  //     const text = faker.hacker.phrase()
-  //
-  //     shallow(<StatisticLabel content={text} />)
-  //       .should.contain.text(text)
-  //   })
-  //
-  //   it('renders child components', () => {
-  //     const child = <div data-child={faker.hacker.noun()} />
-  //
-  //     shallow(<StatisticLabel content={child} />)
-  //       .should.contain(child)
-  //   })
-  // })
+  it('renders text with label prop', () => {
+    const text = faker.hacker.phrase()
+
+    shallow(<StatisticLabel label={text} />).should.contain.text(text)
+  })
 })
diff --git a/test/specs/views/Stastistic/StatisticValue-test.js b/test/specs/views/Stastistic/StatisticValue-test.js
index 9233e75f53..ab001c677d 100644
--- a/test/specs/views/Stastistic/StatisticValue-test.js
+++ b/test/specs/views/Stastistic/StatisticValue-test.js
@@ -1,6 +1,7 @@
+import faker from 'faker'
 import React from 'react'
-import * as common from 'test/specs/commonTests'
 
+import * as common from 'test/specs/commonTests'
 import StatisticValue from 'src/views/Statistic/StatisticValue'
 
 describe('StatisticValue', () => {
@@ -8,25 +9,10 @@ describe('StatisticValue', () => {
   common.rendersChildren(StatisticValue)
   common.propKeyOnlyToClassName(StatisticValue, 'text')
 
-  it('renders an div element', () => {
-    shallow(<StatisticValue />)
-      .should.have.tagName('div')
-  })
+  it('renders text with label prop', () => {
+    const text = faker.hacker.phrase()
 
-  // describe('content prop', () => {
-  //   it('renders child text', () => {
-  //     const text = faker.hacker.phrase()
-  //
-  //     shallow(<StatisticValue content={text} />)
-  //       .should.contain.text(text)
-  //   })
-  //
-  //   it('renders child components', () => {
-  //     const child = <div data-child={faker.hacker.noun()} />
-  //
-  //     shallow(<StatisticValue content={child} />)
-  //       .should.contain(child)
-  //   })
-  // })
+    shallow(<StatisticValue value={text} />).should.contain.text(text)
+  })
 })