Nested Segments Example

Author: Josh Habdas

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

@@ -11,6 +11,11 @@ export default class SegmentGroupsExamples extends Component {
           description='A group of segments can be formatted to appear together.'
           examplePath='elements/Segment/Groups/SegmentSegmentsExample'
         />
+        <ComponentExample
+          title='Nested Segments'
+          description='A group of segments can be nested in another group of segments.'
+          examplePath='elements/Segment/Groups/SegmentNestedSegmentsExample'
+        />
       </ExampleSection>
     );
   }

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

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

src/utils/customPropTypes.js

@@ -3,9 +3,9 @@ import _ from 'lodash';
 
 const customPropTypes = {
   /*
-   * Ensures children are of a certain type
+   * Ensures children are of a set of types
    * Similar to `oneOfType` built-in validator
-   * @param {Array<string>} allowedTypes Collection of allowed types
+   * @param {Array<string>} allowedTypes Collection of allowed Stardust component types
    * @returns {Array} containing children of the specified type
    */
   childrenOfTypesOnly: (allowedTypes) => {
@@ -15,22 +15,22 @@ const customPropTypes = {
         return _.includes(allowedTypes, _.get(child, 'type._meta.name')) ? null : child;
       });
       if (disallowed && disallowed.length !== 0) {
-        throw new Error(
+        return new Error(
           `\`${componentName}\` should only have children of type \`${allowedTypes}\`.`);
       }
     };
   },
   /*
-   * Verifies exclusivity of a given prop type
-   * @param {string} exclusives property used in exclusivity check
-   * @throws {Error} if props not mutually exclusive
+   * Verifies exclusivity of a given prop
+   * @param {string} exclusives property used for exclusivity check
+   * @throws {Error} if named prop not mutually exclusive
    * @returns no-op
    */
   mutuallyExclusive: exclusives => {
     return (props, propName, componentName) => {
       _.forEach(exclusives, exclusiveProp => {
         if (props[propName] && props[exclusiveProp]) {
-          throw new Error(
+          return new Error(
             `\`${componentName}\` should only have one of type \`${propName}\` or \`${exclusiveProp}\` not both.`
           );
         }