Add Segments component

Author: Josh Habdas

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

@@ -1,17 +1,16 @@
 import React, {Component} from 'react';
-import {Segment} from 'stardust';
+import {Segment, Segments} from 'stardust';
 
-// TODO: File card to create a Segments wrapper component with appropriate classNames
 export default class SegmentSegmentsExample extends Component {
   render() {
     return (
-      <div className='ui segments'>
+      <Segments>
         <Segment>Top</Segment>
         <Segment>Middle</Segment>
         <Segment>Middle</Segment>
         <Segment>Middle</Segment>
         <Segment>Bottom</Segment>
-      </div>
+      </Segments>
     );
   }
 }

src/elements/Segment/Segments.js

@@ -2,19 +2,22 @@ import React, {Component, PropTypes} from 'react';
 import classNames from 'classnames';
 import META from 'src/utils/Meta';
 
-export default class Segment extends Component {
+export default class Segments extends Component {
   static propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.node.isRequired,
     className: PropTypes.string,
   };
 
   static _meta = {
     library: META.library.semanticUI,
     name: 'Segments',
     type: META.type.element,
+    parent: 'Segment'
   };
 
   render() {
+    const {children} = this.props;
+
     const classes = classNames(
       'sd-segments',
       'ui',
@@ -24,7 +27,7 @@ export default class Segment extends Component {
 
     return (
       <div {...this.props} className={classes}>
-        {this.props.children}
+        {children}
       </div>
     );
   }

src/index.js

@@ -26,6 +26,7 @@ import Input from 'src/elements/Input/Input';
 import List from 'src/elements/List/List';
 import ListItem from 'src/elements/List/ListItem';
 import Segment from 'src/elements/Segment/Segment';
+import Segments from 'src/elements/Segment/Segments';
 
 // Modules
 import Checkbox from 'src/modules/Checkbox/Checkbox';
@@ -68,6 +69,7 @@ export default {
   List,
   ListItem,
   Segment,
+  Segments,
 
   // Modules
   Checkbox,

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

@@ -1,9 +1,33 @@
 import React from 'react';
-import {Segments} from 'stardust';
+import {Segment, Segments} from 'stardust';
 
-describe('Segment', () => {
-  it('renders its children', () => {
-    render(<Segments>Some text</Segments>)
-      .assertText('Some text');
+describe('Segments', () => {
+  it('should render children', () => {
+    const [segmentOne, segmentTwo] = render(
+      <Segments>
+        <Segment>Top</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    ).scryClass('sd-segment');
+
+    segmentOne
+      .textContent
+      .should.equal('Top');
+    segmentTwo
+      .textContent
+      .should.equal('Bottom');
+  });
+
+  it('renders expected number of children', () => {
+    const [component] = render(
+      <Segments>
+        <Segment>Top</Segment>
+        <Segment>Bottom</Segment>
+      </Segments>
+    ).scryClass('sd-segments');
+
+    expect(
+      component.querySelectorAll('.sd-segment').length
+    ).to.equal(2);
   });
 });