add group example, use sub-components for statistic parts

Author: levithomason

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

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

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

@@ -0,0 +1,24 @@
+import React, {Component} from 'react';
+import {Statistic} from 'stardust';
+const {Statistics, Label, Value} = Statistic;
+
+export default class StatisticStatisticsExample 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/StatisticStatisticsExample.js

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

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

@@ -9,7 +9,15 @@ export default class StatisticTypesExamples extends Component {
         <ComponentExample
           title='Statistic'
           description='A statistic can display a value with a label above or below it.'
-          examplePath='views/Statistic/Types/StatisticStatisticExample'
+          examplePath='views/Statistic/Types/StatisticBottomLabelExample'
+        />
+        <ComponentExample
+          examplePath='views/Statistic/Types/StatisticTopLabelExample'
+        />
+        <ComponentExample
+          title='Statistic Group'
+          description='A group of statistics'
+          examplePath='views/Statistic/Types/StatisticStatisticsExample'
         />
       </ExampleSection>
     );

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

@@ -39,7 +39,6 @@ import Dropdown from 'src/modules/Dropdown/Dropdown';
 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
@@ -83,5 +82,4 @@ export default {
   Item,
   Items,
   Statistic,
-  Statistics,
 };

src/index.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 Statistic extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'StatisticLabel',
+    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/Label.js

@@ -1,13 +1,27 @@
-import React, {Component, PropTypes} from 'react';
+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,
-    label: PropTypes.node.isRequired,
-    value: PropTypes.node.isRequired,
   };
 
   static _meta = {
@@ -16,6 +30,10 @@ export default class Statistic extends Component {
     type: META.type.view,
   };
 
+  static Statistics = Statistics;
+  static Label = Label;
+  static Value = Value;
+
   render() {
     const classes = classNames(
       'sd-statistic',
@@ -28,12 +46,7 @@ export default class Statistic extends Component {
 
     return (
       <div {...props} className={classes}>
-        <div className='value'>
-          {this.props.value}
-        </div>
-        <div className='label'>
-          {this.props.label}
-        </div>
+        {this.props.children}
       </div>
     );
   }

src/views/Statistic/Statistic.js

@@ -20,7 +20,7 @@ export default class Statistics extends Component {
       'sd-statistics',
       'ui',
       this.props.className,
-      'statistic'
+      'statistics'
     );
     return (
       <div {...this.props} className={classes}>

src/views/Statistic/Statistics.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 Statistic extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+  };
+
+  static _meta = {
+    library: META.library.semanticUI,
+    name: 'StatisticValue',
+    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>
+    );
+  }
+}