feat(react-dividers): Add react renderers for dividers

[Finishes #84297688]

Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io>

src/pivotal-ui/components/dividers.scss

@@ -45,3 +45,59 @@ Dividers draw horizontal lines between different content groupings.
 .divider-2 {
   margin: 4vw 0;
 }
+
+
+/*doc
+---
+title: Dividers
+name: divider_react
+categories:
+  - Beta
+---
+
+Dividers draw horizontal lines between different content groupings.
+
+```html_example_table
+<div id="divider-example"></div>
+```
+
+```jsx_example
+React.render(
+  <Divider />,
+  document.getElementById('divider-example')
+);
+```
+```html_example_table
+<div id="divider-large-example"></div>
+```
+
+```jsx_example
+React.render(
+  <Divider large="true" />,
+  document.getElementById('divider-large-example')
+);
+```
+
+
+```html_example_table
+<div id="divider-alt-example" class="contrast-bar"></div>
+```
+
+```jsx_example
+React.render(
+  <DividerInverse />,
+  document.getElementById('divider-alt-example')
+);
+```
+
+```html_example_table
+<div id="divider-alt-large-example" class="contrast-bar"></div>
+```
+
+```jsx_example
+React.render(
+  <DividerInverse large="true" />,
+  document.getElementById('divider-alt-large-example')
+);
+```
+*/

src/pivotal-ui/javascripts/dividers.jsx

@@ -0,0 +1,47 @@
+'use strict';
+
+var React = require('react');
+var _ = require('lodash');
+
+var Divider = React.createClass({
+  render: function () {
+    var typeName = "divider";
+    var classes = [];
+
+    if (!this.props.inverse) {
+      typeName += "-alternate"
+    }
+
+    if (this.props.large) {
+      typeName += "-2"
+    } else {
+      typeName += "-1"
+    }
+
+    classes.push(typeName);
+
+    if (this.props.className) {
+      classes.push(this.props.className);
+    }
+
+    classes = classes.join(" ");
+
+    return (
+      <hr {...this.props} className={classes} />
+    );
+  }
+});
+
+
+var DividerInverse = React.createClass({
+  render: function () {
+    return (
+      <Divider {...this.props} inverse="true" />
+    );
+  }
+});
+
+module.exports = {
+  Divider: Divider,
+  DividerInverse: DividerInverse
+};

src/pivotal-ui/javascripts/pivotal-ui-react.js

@@ -30,3 +30,6 @@ global.LowlightButton = require('./buttons.jsx').LowlightButton;
 global.DangerButton = require('./buttons.jsx').DangerButton;
 global.HighlightButton = require('./buttons.jsx').HighlightButton;
 global.HighlightAltButton = require('./buttons.jsx').HighlightAltButton;
+
+global.Divider = require('./dividers.jsx').Divider;
+global.DividerInverse = require('./dividers.jsx').DividerInverse;

test/spec/javascripts/divider_spec.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var $ = require('jquery');
+var React = require('react/addons');
+var TestUtils = React.addons.TestUtils;
+
+var Divider = React.createFactory(require('../../../src/pivotal-ui/javascripts/dividers.jsx').Divider);
+
+describe('Divider', function() {
+  beforeEach(function() {
+    this.node = $('<div id="container"></div>').appendTo('body').get(0);
+
+    React.render(
+      Divider({}),
+      this.node
+    );
+  });
+
+  afterEach(function() {
+    React.unmountComponentAtNode(this.node);
+    document.body.removeChild(this.node);
+  });
+
+  it("creates a divider", function() {
+    expect($('#container hr')).toHaveClass('divider-alternate-1');
+  });
+
+  describe("when large is set to true", function() {
+    beforeEach(function() {
+      React.render(
+        Divider({
+          large: "true"
+        }),
+        this.node
+      );
+    });
+
+    it("creates a divider with -2 appended to the classname", function() {
+      expect($('#container hr')).toHaveClass('divider-alternate-2');
+    });
+  });
+
+  describe("when the divider goes on a dark background, inverse: true", function() {
+    beforeEach(function() {
+      React.render(
+        Divider({
+          inverse: "true"
+        }),
+        this.node
+      );
+    });
+
+    it("creates a divider without the -alternate in the class", function() {
+      expect($('#container hr')).toHaveClass('divider-1');
+    });
+  });
+
+  describe("when a large divider goes on a dark background, inverse: true", function() {
+    beforeEach(function() {
+      React.render(
+        Divider({
+          inverse: "true",
+          large: "true"
+        }),
+        this.node
+      );
+    });
+
+    it("creates a divider without the -alternate in the class", function() {
+      expect($('#container hr')).toHaveClass('divider-2');
+    });
+  });
+
+  describe("setting a custom className", function() {
+    beforeEach(function() {
+      React.render(
+        Divider({
+          inverse: "true",
+          className: "myClass"
+        }),
+        this.node
+      );
+    });
+
+    it("passes the class through to the divider", function() {
+      expect($('#container hr')).toHaveClass('divider-1');
+      expect($('#container hr')).toHaveClass('myClass');
+    });
+  });
+
+  describe("setting a custom data attribute", function() {
+    beforeEach(function() {
+      React.render(
+        Divider({
+          "data-behavior": "myAttr"
+        }),
+        this.node
+      );
+    });
+
+    it("passes the data attribute through to the divider", function() {
+      expect($('#container hr').attr('data-behavior')).toEqual('myAttr');
+    });
+  });
+});