Add Statistic and Statistics components

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

@@ -0,0 +1,12 @@
+import React, {Component} from 'react';
+import StatisticTypesExamples from './Types/StatisticTypesExamples';
+
+export default class StatisticExamples extends Component {
+  render() {
+    return (
+      <div>
+        <StatisticTypesExamples />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import {Statistic} from 'stardust';
+import _ from 'lodash';
+
+export default class StatisticStatisticExample extends Component {
+  render() {
+    const value = _.random(0, 12000).toLocaleString();
+
+    return (
+      <Statistic value={value} label='Value'/>
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample';
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection';
+
+export default class StatisticTypesExamples extends Component {
+  render() {
+    return (
+      <ExampleSection title='Types'>
+        <ComponentExample
+          title='Statistic'
+          description='A statistic can display a value with a label above or below it.'
+          examplePath='views/Statistic/Types/StatisticStatisticExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

src/index.js

@@ -38,6 +38,8 @@ import Dropdown from 'src/modules/Dropdown/Dropdown';
 // Views
 import Item from 'src/views/Items/Item';
 import Items from 'src/views/Items/Items';
+import Statistic from 'src/views/Statistic/Statistic';
+import Statistics from 'src/views/Statistic/Statistics';
 
 export default {
   // Addons
@@ -80,4 +82,6 @@ export default {
   // Views
   Item,
   Items,
+  Statistic,
+  Statistics,
 };

src/views/Statistic/Statistic.js

@@ -0,0 +1,40 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
+import META from 'src/utils/Meta';
+
+export default class Statistic extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.node.isRequired,
+    value: PropTypes.node.isRequired,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Statistic',
+    type: META.type.view,
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-statistic',
+      'ui',
+      this.props.className,
+      'statistic',
+    );
+
+    const props = getUnhandledProps(this);
+
+    return (
+      <div {...props} className={classes}>
+        <div className='value'>
+          {this.props.value}
+        </div>
+        <div className='label'>
+          {this.props.label}
+        </div>
+      </div>
+    );
+  }
+}

src/views/Statistic/Statistics.js

@@ -0,0 +1,31 @@
+import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
+import META from 'src/utils/Meta';
+
+export default class Statistics extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Statistics',
+    type: META.type.view,
+    parent: 'Statistic'
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-statistics',
+      'ui',
+      this.props.className,
+      'statistic'
+    );
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

test/specs/views/Items/Statistic-test.js

@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import React from 'react';
+import {Statistic} from 'stardust';
+import faker from 'faker';
+
+describe('Statistic', () => {
+  it('renders value', () => {
+    const value = faker.hacker.phrase();
+    render(<Statistic value={value} />).assertText(value);
+  });
+  it('renders data', () => {
+    const data = _.random(0, 10000000).toLocaleString();
+    render(<Statistic data={data} />).assertText(data);
+  });
+});

test/specs/views/Items/Statistics-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Statistics} from 'stardust';
+import faker from 'faker';
+
+describe('Statistics', () => {
+  it('renders children', () => {
+    const child = faker.hacker.phrase();
+    render(<Statistics>{child}</Statistics>)
+      .assertText(child);
+  });
+});