Merge pull request #117 from TechnologyAdvice/feature/statistic

Add Statistic and Statistics components

Author: levithomason

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/StatisticBottomLabelExample.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import {Statistic} from 'stardust';
+
+export default class StatisticBottomLabelExample extends Component {
+  render() {
+    return (
+      <Statistic>
+        <Statistic.Label>5,550</Statistic.Label>
+        <Statistic.Value>Downloads</Statistic.Value>
+      </Statistic>
+    );
+  }
+}

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

@@ -0,0 +1,24 @@
+import React, {Component} 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>
+    );
+  }
+}

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

@@ -0,0 +1,13 @@
+import React, {Component} 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>
+    );
+  }
+}

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

@@ -0,0 +1,25 @@
+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/StatisticBottomLabelExample'
+        />
+        <ComponentExample
+          examplePath='views/Statistic/Types/StatisticTopLabelExample'
+        />
+        <ComponentExample
+          title='Statistic Group'
+          description='A group of statistics'
+          examplePath='views/Statistic/Types/StatisticGroupExample'
+        />
+      </ExampleSection>
+    );
+  }
+}

src/index.js

@@ -38,6 +38,7 @@ 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';
 
 export default {
   // Addons
@@ -80,4 +81,5 @@ export default {
   // Views
   Item,
   Items,
+  Statistic,
 };

src/views/Statistic/Label.js

@@ -0,0 +1,34 @@
+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 Label extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Label',
+    type: META.type.view,
+    parent: 'Statistic',
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-statistic-label',
+      this.props.className,
+      'label',
+    );
+
+    const props = getUnhandledProps(this);
+
+    return (
+      <div {...props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/views/Statistic/Statistic.js

@@ -0,0 +1,53 @@
+import _ from 'lodash';
+import classNames from 'classnames';
+import React, {Children, Component, PropTypes} from 'react';
+import getUnhandledProps from 'src/utils/getUnhandledProps';
+import META from 'src/utils/Meta';
+
+import Statistics from './Statistics';
+import Label from './Label';
+import Value from './Value';
+
+export default class Statistic extends Component {
+  static propTypes = {
+    children: (props, propName, componentName) => {
+      let isValid = true;
+      Children.forEach(props.children, (child) => {
+        if (!_.includes([Statistics, Label, Value], child.type)) {
+          isValid = false;
+        }
+      });
+      if (!isValid) {
+        return new Error('`Statistic` must only have `Label` or `Value` children.');
+      }
+    },
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Statistic',
+    type: META.type.view,
+  };
+
+  static Statistics = Statistics;
+  static Label = Label;
+  static Value = Value;
+
+  render() {
+    const classes = classNames(
+      'sd-statistic',
+      'ui',
+      this.props.className,
+      'statistic',
+    );
+
+    const props = getUnhandledProps(this);
+
+    return (
+      <div {...props} className={classes}>
+        {this.props.children}
+      </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,
+      'statistics'
+    );
+    return (
+      <div {...this.props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}

src/views/Statistic/Value.js

@@ -0,0 +1,34 @@
+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 Value extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'Value',
+    type: META.type.view,
+    parent: 'Statistic',
+  };
+
+  render() {
+    const classes = classNames(
+      'sd-statistic-value',
+      this.props.className,
+      'value',
+    );
+
+    const props = getUnhandledProps(this);
+
+    return (
+      <div {...props} className={classes}>
+        {this.props.children}
+      </div>
+    );
+  }
+}