Merge pull request #8 from chefsplate/tagName

custom tag names

Author: roylee0704

src/components/Col.js

@@ -39,7 +39,7 @@ export default class Col extends Component {
       }
     }
 
-    return React.createElement('div', Object.assign({}, this.props, {
+    return React.createElement(this.props.tagName || 'div', Object.assign({}, this.props, {
       className: classes.join(' ')
     }), this.props.children);
   }
@@ -56,5 +56,6 @@ Col.propTypes = {
   lgOffset: PropTypes.number,
   reverse: PropTypes.bool,
   className: PropTypes.string,
+  tagName: PropTypes.string,
   children: PropTypes.node
 };

src/components/Grid.js

@@ -6,16 +6,16 @@ export default class Grid extends Component {
   render() {
     const containerClass = style[this.props.fluid ? 'container-fluid' : 'container'];
     const className = classNames(this.props.className, containerClass);
-    return (
-      <div {...this.props} className={className}>
-        {this.props.children}
-      </div>
-    );
+
+    return React.createElement(this.props.tagName || 'div', Object.assign({}, this.props, {
+      className
+    }), this.props.children);
   }
 }
 
 Grid.propTypes = {
   fluid: PropTypes.bool,
   className: PropTypes.string,
+  tagName: PropTypes.string,
   children: PropTypes.node
 };

src/components/Row.js

@@ -23,11 +23,9 @@ export default class Row extends Component {
 
     const className = classNames(this.props.className, modificators);
 
-    return (
-      <div {...this.props} className={className}>
-        {this.props.children}
-      </div>
-    );
+    return React.createElement(this.props.tagName || 'div', Object.assign({}, this.props, {
+      className
+    }), this.props.children);
   }
 }
 
@@ -44,5 +42,6 @@ Row.propTypes = {
   first: ModificatorType,
   last: ModificatorType,
   className: PropTypes.string,
+  tagName: PropTypes.string,
   children: PropTypes.node
 };

test/components/Col.spec.js

@@ -35,4 +35,11 @@ describe('Col', () => {
     expect(className).toContain(style['col-md']);
     expect(className).toContain(style['col-lg']);
   });
+
+  it('Should support custom tag name', () => {
+    const col = TestUtils.renderIntoDocument(<Col xs sm md lg tagName="li" />);
+    const { tagName } = ReactDOM.findDOMNode(col);
+
+    expect(tagName).toBe('LI');
+  });
 });

test/components/Grid.spec.js

@@ -23,4 +23,11 @@ describe('Grid', () => {
     const grid = TestUtils.renderIntoDocument(<Grid fluid />);
     expect(ReactDOM.findDOMNode(grid).className).toEqual(style['container-fluid']);
   });
+
+  it('Should support custom tag name', () => {
+    const col = TestUtils.renderIntoDocument(<Grid tagName="section" />);
+    const { tagName } = ReactDOM.findDOMNode(col);
+
+    expect(tagName).toBe('SECTION');
+  });
 });

test/components/Row.spec.js

@@ -52,4 +52,11 @@ describe('Row', () => {
     expect(className).toContain(style['first-xs']);
     expect(className).toContain(style['last-sm']);
   });
+
+  it('Should support custom tag name', () => {
+    const col = TestUtils.renderIntoDocument(<Row tagName="ul" />);
+    const { tagName } = ReactDOM.findDOMNode(col);
+
+    expect(tagName).toBe('UL');
+  });
 });