From 07061a3c1071317d92addbd09f141599e59f19dd Mon Sep 17 00:00:00 2001
From: Nicole Sullivan <nsullivan@pivotal.io>
Date: Fri, 12 Dec 2014 11:26:51 -0500
Subject: [PATCH] feat(react-dividers): Add react renderers for dividers

[Finishes #84297688]

Signed-off-by: Nicole Sullivan <nsullivan@pivotal.io>
---
 src/pivotal-ui/components/dividers.scss       |  56 ++++++++++
 src/pivotal-ui/javascripts/dividers.jsx       |  47 ++++++++
 .../javascripts/pivotal-ui-react.js           |   3 +
 test/spec/javascripts/divider_spec.js         | 105 ++++++++++++++++++
 4 files changed, 211 insertions(+)
 create mode 100644 src/pivotal-ui/javascripts/dividers.jsx
 create mode 100644 test/spec/javascripts/divider_spec.js

diff --git a/src/pivotal-ui/components/dividers.scss b/src/pivotal-ui/components/dividers.scss
index bf8c6cd47..586468dc9 100644
--- a/src/pivotal-ui/components/dividers.scss
+++ b/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')
+);
+```
+*/
diff --git a/src/pivotal-ui/javascripts/dividers.jsx b/src/pivotal-ui/javascripts/dividers.jsx
new file mode 100644
index 000000000..5aaa5d3eb
--- /dev/null
+++ b/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
+};
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index 306aa16af..157aa9084 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/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;
diff --git a/test/spec/javascripts/divider_spec.js b/test/spec/javascripts/divider_spec.js
new file mode 100644
index 000000000..04de6fa24
--- /dev/null
+++ b/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');
+    });
+  });
+});