Segments as class property; Refactor Statistic to use customPropType

Author: Josh Habdas

docs/app/Examples/elements/Segment/Groups/SegmentHorizontalSegmentsExample.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentHorizontalSegmentsExample extends Component {
   render() {
     return (
-      <Segments className='horizontal'>
+      <Segment.Segments className='horizontal'>
         <Segment>Left</Segment>
         <Segment>Middle</Segment>
         <Segment>Right</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Groups/SegmentNestedSegmentsExample.js

@@ -1,23 +1,23 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentNestedSegmentsExample extends Component {
   render() {
     return (
-      <Segments>
+      <Segment.Segments>
         <Segment>Top</Segment>
-        <Segments>
+        <Segment.Segments>
           <Segment>Nested Top</Segment>
           <Segment>Nested Middle</Segment>
           <Segment>Nested Bottom</Segment>
-        </Segments>
-        <Segments className='horizontal'>
+        </Segment.Segments>
+        <Segment.Segments className='horizontal'>
           <Segment>Top</Segment>
           <Segment>Middle</Segment>
           <Segment>Bottom</Segment>
-        </Segments>
+        </Segment.Segments>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Groups/SegmentPiledSegmentsExample.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentPiledSegmentsExample extends Component {
   render() {
     return (
-      <Segments className='piled'>
+      <Segment.Segments className='piled'>
         <Segment>Top</Segment>
         <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Groups/SegmentRaisedSegmentsExample.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentRaisedSegmentsExample extends Component {
   render() {
     return (
-      <Segments className='raised'>
+      <Segment.Segments className='raised'>
         <Segment>Left</Segment>
         <Segment>Middle</Segment>
         <Segment>Right</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Groups/SegmentSegmentsExample.js

@@ -1,16 +1,16 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentSegmentsExample extends Component {
   render() {
     return (
-      <Segments>
+      <Segment.Segments>
         <Segment>Top</Segment>
         <Segment>Middle</Segment>
         <Segment>Middle</Segment>
         <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Groups/SegmentStackedSegmentsExample.js

@@ -1,14 +1,14 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentStackedSegmentsExample extends Component {
   render() {
     return (
-      <Segments className='stacked'>
+      <Segment.Segments className='stacked'>
         <Segment>Top</Segment>
         <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

docs/app/Examples/elements/Segment/Variations/SegmentCompactGroupExample.js

@@ -1,17 +1,17 @@
 import React, {Component} from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 export default class SegmentCompactGroupExample extends Component {
   render() {
     return (
-      <Segments className='compact'>
+      <Segment.Segments className='compact'>
         <Segment>
           Pellentesque habitant morbi
         </Segment>
         <Segment>
           Pellentesque habitant morbi
         </Segment>
-      </Segments>
+      </Segment.Segments>
     );
   }
 }

src/elements/Segment/Segment.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
+import Segments from './Segments';
 
 /**
  * A segment is used to create a grouping of related content.
@@ -24,6 +25,8 @@ export default class Segment extends Component {
     type: META.type.element,
   };
 
+  static Segments = Segments;
+
   render() {
     const heading = <h4 className='sd-segment-heading ui header'>{this.props.heading}</h4>;
     const classes = classNames(

src/views/Statistic/Statistic.js

@@ -1,7 +1,8 @@
-import _ from 'lodash';
 import classNames from 'classnames';
-import React, {Children, Component, PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
+
 import getUnhandledProps from 'src/utils/getUnhandledProps';
+import {ofComponentTypes} from 'src/utils/customPropTypes';
 import META from 'src/utils/Meta';
 
 import Statistics from './Statistics';
@@ -10,17 +11,7 @@ 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.');
-      }
-    },
+    children: ofComponentTypes(['Statistics', 'Label', 'Value']),
     className: PropTypes.string,
   };
 

test/specs/elements/Segment/Segments-test.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import {Segment, Segments} from 'stardust';
+import {Segment} from 'stardust';
 
 describe('Segments', () => {
   it('should render children', () => {
     const [segmentOne, segmentTwo] = render(
-      <Segments>
+      <Segment.Segments>
         <Segment>Top</Segment>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     ).scryClass('sd-segment');
 
     segmentOne
@@ -20,11 +20,11 @@ describe('Segments', () => {
 
   it('renders expected number of children', () => {
     render(
-      <Segments>
+      <Segment.Segments>
         <Segment>Top</Segment>
         <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
-      </Segments>
+      </Segment.Segments>
     )
       .scryClass('sd-segment')
       .should.have.a.lengthOf(3);