Update Statistic to v1 API (#334)

* (feat) Rail #181

* (feat) Rail #181

* (feat) Rail docs #181

* (fix) Sort Rail props #181

* (fix) Rail review fixes #181

* (fix) Rail review fixes #181

* (fix) Rail review fixes #181

* (fix) Rail sizes #181

* (fix) Rail sizes in docs #181

* (fix) Statistic

* (feat) Statistic Item

* (feat) Statistic Label and Value

* (feat) Statistic Group

* (fix) Statistic fix sizes

* (fix) Statistic functionality

* (fix) Statistic docs

* (fix) Statistic lint fixes

* (fix) Statistic tests

* (Statistic) Remove shorthands

* (utils) Update numberToWord

* (Statistic) Fix returned JSX

* (utils) Update numberToWord, fix imports

* (Statistic) Update widths usage

* (Statistic) Fix JSDoc

* (Statistic) Update `rest` prop

* (utils) implementsNumberToWordProp test

* (Statistic) Test update

* fix(Statistic) Fix example

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const { Label, Value } = Statistic
+
+const StatisticLabelExample = () => (
+  <div>
+    <Statistic>
+      <Value>2,204</Value>
+      <Label>Views</Label>
+    </Statistic>
+
+    <Statistic value='2,204' label='Views' />
+  </div>
+)
+
+export default StatisticLabelExample

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

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'stardust'
+
+const { Group, Label, Value } = Statistic
+
+// TODO: Update <Icon> usage after <Icon> will be updated to v1 API
+// TODO: Update <Image> usage after <Image> will be updated to v1 API
+
+const StatisticValueExample = () => (
+  <Group>
+    <Statistic>
+      <Value>22</Value>
+      <Label>Saves</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value text>
+        Three<br />
+        Thousand
+      </Value>
+      <Label>Signups</Label>
+    </Statistic>
+
+    <Statistic>
+      <Value>
+        <Icon className='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 StatisticValueExample

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

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'stardust'
+
+// TODO: Update <Icon> usage after <Icon> will be updated to v1 API
+// TODO: Update <Image> usage after <Image> will be updated to v1 API
+
+const iconValue = (<div><Icon className='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' text value={textValue} />
+      <Statistic label='Flights' value={iconValue} />
+      <Statistic label='Team Members' value={imageValue} />
+    </Statistic.Group>
+
+    <Statistic.Group items={items} />
+  </div>
+)
+
+export default StatisticValuePropsExample

docs/app/Examples/views/Statistic/StatisticExamples.js

@@ -1,12 +1,79 @@
-import React, { Component } from 'react'
-import StatisticTypesExamples from './Types/StatisticTypesExamples'
-
-export default class StatisticExamples extends Component {
-  render() {
-    return (
-      <div>
-        <StatisticTypesExamples />
-      </div>
-    )
-  }
-}
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+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>
+  </div>
+)
+
+export default StatisticExamples

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

@@ -1,13 +1,15 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Statistic } from 'stardust'
 
-export default class StatisticBottomLabelExample extends Component {
-  render() {
-    return (
-      <Statistic>
-        <Statistic.Value>5,550</Statistic.Value>
-        <Statistic.Label>Downloads</Statistic.Label>
-      </Statistic>
-    )
-  }
-}
+const StatisticBottomLabelExample = () => (
+  <div>
+    <Statistic>
+      <Statistic.Value>5,550</Statistic.Value>
+      <Statistic.Label>Downloads</Statistic.Label>
+    </Statistic>
+
+    <Statistic value='5,500' label='Downloads' />
+  </div>
+)
+
+export default StatisticBottomLabelExample

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

@@ -1,24 +1,29 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Statistic } from 'stardust'
-const { Statistics, Label, Value } = Statistic
 
-export default class StatisticGroupExample extends Component {
-  render() {
-    return (
-      <Statistics>
-        <Statistic>
-          <Value>22</Value>
-          <Label>Faves</Label>
-        </Statistic>
-        <Statistic>
-          <Value>31,200</Value>
-          <Label>Views</Label>
-        </Statistic>
-        <Statistic>
-          <Value>22</Value>
-          <Label>Members</Label>
-        </Statistic>
-      </Statistics>
-    )
-  }
-}
+const { Group, Label, Value } = Statistic
+const items = [
+  { label: 'Faves', value: 22 },
+  { label: 'Views', value: '31,200' },
+  { label: 'Members', value: 22 },
+]
+
+const StatisticGroupExample = () => (
+  <div>
+    <Group>
+      <Statistic>
+        <Value>22</Value>
+        <Label>Faves</Label>
+      </Statistic>
+      <Statistic>
+        <Value>31,200</Value>
+        <Label>Views</Label>
+      </Statistic>
+      <Statistic label='Members' value='22' />
+    </Group>
+
+    <Group items={items} />
+  </div>
+)
+
+export default StatisticGroupExample

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

@@ -1,13 +1,13 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Statistic } from 'stardust'
 
-export default class StatisticTopLabelExample extends Component {
-  render() {
-    return (
-      <Statistic>
-        <Statistic.Label>Views</Statistic.Label>
-        <Statistic.Value>40,509</Statistic.Value>
-      </Statistic>
-    )
-  }
-}
+const StatisticTopLabelExample = () => (
+  <div>
+    <Statistic>
+      <Statistic.Label>Views</Statistic.Label>
+      <Statistic.Value>40,509</Statistic.Value>
+    </Statistic>
+  </div>
+)
+
+export default StatisticTopLabelExample

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Statistic } from 'stardust'
+
+const StatisticColoredExample = () => (
+  <Statistic.Group>
+    <Statistic color='red' value='27' label='red' />
+    <Statistic color='orange' value='8' label='orange' />
+    <Statistic color='yellow' value='28' label='yellow' />
+    <Statistic color='olive' value='7' label='olive' />
+    <Statistic color='green' value='14' label='green' />
+    <Statistic color='teal' value='82' label='teal' />
+    <Statistic color='blue' value='1' label='blue' />
+    <Statistic color='violet' value='22' label='violet' />
+    <Statistic color='purple' value='23' label='purple' />
+    <Statistic color='pink' value='15' label='pink' />
+    <Statistic color='brown' value='36' label='brown' />
+    <Statistic color='grey' value='49' label='grey' />
+  </Statistic.Group>
+)
+
+export default StatisticColoredExample

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Icon, Image, Statistic } from 'stardust'
+
+// TODO: Update <Icon> usage after <Icon> will be updated to v1 API
+// TODO: Update <Image> usage after <Image> will be updated to v1 API
+
+const iconValue = (<div><Icon className='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