feat(back-to-top): react back-to-top accepts classname, id, style

[#87784030]
pivotal-cf · Jul 15, 2015 · 92e095b · 92e095b
1 parent e73d55a
commit 92e095b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js b/spec/pivotal-ui-react/back-to-top/back-to-top_spec.js
@@ -27,7 +27,7 @@ describe('BackToTop', function() {
 
   beforeEach(function(done) {
     BackToTop = require('../../../src/pivotal-ui-react/back-to-top/back-to-top').BackToTop;
-    React.render(<BackToTop/>, root);
+    React.render(<BackToTop className="foo" id="bar" style={{fontSize: '200px'}}/>, root);
 
     jasmine.clock().uninstall();
     setTimeout(function() {
@@ -42,6 +42,12 @@ describe('BackToTop', function() {
     React.unmountComponentAtNode(root);
   });
 
+  it('passes down the className, id, and style properties', () => {
+    expect('.back-to-top').toHaveClass('foo');
+    expect('.back-to-top').toHaveProp('id', 'bar');
+    expect('.back-to-top').toHaveCss({'font-size': '200px'});
+  });
+
   it('renders a back to top link that is visible', function() {
     expect('.back-to-top').toExist();
   });

diff --git a/src/pivotal-ui-react/back-to-top/back-to-top.js b/src/pivotal-ui-react/back-to-top/back-to-top.js
@@ -2,6 +2,8 @@ var React = require('react');
 var AnimationMixin = require('pui-react-animation');
 var throttle = require('lodash.throttle');
 var {getScrollTop, setScrollTop} = require('./scroll-top');
+import {mergeProps} from 'pui-react-helpers';
+
 
 /**
  * @component BackToTop
@@ -51,9 +53,13 @@ var BackToTop = React.createClass({
 
   render() {
     var {visible} = this.state;
-    var style = {display: 'inline', opacity: this.animate('opacity', visible ? 1 : 0, BackToTop.FADE_DURATION)};
-
-    return <a className="back-to-top" role="button" onClick={this.scrollToTop} style={style}/>;
+    var props = mergeProps(this.props,
+      {
+        className: 'back-to-top',
+        style: {display: 'inline', opacity: this.animate('opacity', visible ? 1 : 0, BackToTop.FADE_DURATION)}
+      }
+    );
+    return <a {...props} role='button' onClick={this.scrollToTop}/>;
   }
 });