[fixed] ListGroup outputs <ul> or <div> depending on ListGroupItem (d…

…efaults to <ul> if no ListGroupItem). ListGroupItem outputs <li> or <a> if href prop is set.

src/ListGroup.js

@@ -9,6 +9,34 @@ class ListGroup extends React.Component {
  (item, index) => cloneElement(item, { key: item.key ? item.key : index })
  );
 
+ let child;
+
+ if (this.props.children) {
+ if (Array.isArray(this.props.children)) {
+ child = this.props.children[0];
+ } else {
+ child = this.props.children;
+ }
+ }
+
+ // If child has an href prop, it is an
+ // 'anchor' tag and ListGroup should be a Div.
+ if (child && child.props.href){
+ return this.renderDiv(items);
+ } else {
+ return this.renderUL(items);
+ }
+ }
+
+ renderUL(items) {
+ return (
+ <ul className={classSet(this.props.className, 'list-group')}>
+ {items}
+ </ul>
+ );
+ }
+
+ renderDiv(items) {
  return (
  <div className={classSet(this.props.className, 'list-group')}>
  {items}

src/ListGroupItem.js

@@ -11,6 +11,7 @@ const ListGroupItem = React.createClass({
  active: React.PropTypes.any,
  disabled: React.PropTypes.any,
  header: React.PropTypes.node,
+ badge: React.PropTypes.node,
  onClick: React.PropTypes.func,
  eventKey: React.PropTypes.any,
  href: React.PropTypes.string,
@@ -32,15 +33,16 @@ const ListGroupItem = React.createClass({
  if (this.props.href || this.props.target || this.props.onClick) {
  return this.renderAnchor(classes);
  } else {
- return this.renderSpan(classes);
+ return this.renderLi(classes);
  }
  },
 
- renderSpan(classes) {
+ renderLi(classes) {
  return (
- <span {...this.props} className={classSet(this.props.className, classes)}>
+ <li
+ {...this.props} className={classSet(this.props.className, classes)}>
  {this.props.header ? this.renderStructuredContent() : this.props.children}
- </span>
+ </li>
  );
  },
 

test/ListGroupItemSpec.js

@@ -4,15 +4,15 @@ import ListGroupItem from '../src/ListGroupItem';
 
 describe('ListGroupItem', function () {
 
- it('Should output a "span" with the class "list-group-item"', function () {
+ it('Should output a "li" with the class "list-group-item"', function () {
  let instance = ReactTestUtils.renderIntoDocument(
  <ListGroupItem>Text</ListGroupItem>
  );
- assert.equal(instance.getDOMNode().nodeName, 'SPAN');
+ assert.equal(instance.getDOMNode().nodeName, 'LI');
  assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
  });
 
- it('Should output a "anchor" if "href" prop is set', function () {
+ it('Should output an "anchor" if "href" prop is set', function () {
  let instance = ReactTestUtils.renderIntoDocument(
  <ListGroupItem href='#test'>Achor</ListGroupItem>
  );
@@ -65,5 +65,4 @@ describe('ListGroupItem', function () {
  assert.equal(instance.getDOMNode().lastChild.innerText, 'Item text');
  assert.ok(instance.getDOMNode().lastChild.className.match(/\blist-group-item-text\b/));
  });
-
 });

test/ListGroupSpec.js

@@ -5,12 +5,11 @@ import ListGroupItem from '../src/ListGroupItem';
 
 describe('ListGroup', function () {
 
- // TODO: Why div, shouldn't it be a ul?
- it('Should output a "div" with the class "list-group"', function () {
+ it('Should output a "ul" with the class "list-group"', function () {
  let instance = ReactTestUtils.renderIntoDocument(
- <ListGroup />
+ <ListGroup/>
  );
- assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+ assert.equal(React.findDOMNode(instance).nodeName, 'UL');
  assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
  });
 
@@ -28,4 +27,28 @@ describe('ListGroup', function () {
  assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(items[1], 'list-group-item'));
  });
 
+ it('Should output a "ul" when children are list items', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+ <ListGroup>
+ <ListGroupItem>1st Child</ListGroupItem>
+ <ListGroupItem>2nd Child</ListGroupItem>
+ </ListGroup>
+ );
+ assert.equal(React.findDOMNode(instance).nodeName, 'UL');
+ assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'LI');
+ });
+
+
+ it('Should output a "div" when "ListGroupItem" children are anchors', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+ <ListGroup>
+ <ListGroupItem href="#test">1st Child</ListGroupItem>
+ <ListGroupItem href="#test">2nd Child</ListGroupItem>
+ </ListGroup>
+ );
+ assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+ assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'A');
+ assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'A');
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
+ });
 });