Merge pull request #57 from stripe/jenan-classname

Allow `*Element` components to take `className`.

Author: jenan-stripe

README.md

@@ -219,6 +219,7 @@ These components accept all `options` that can be passed into `elements.create(t
 
 ```js
 type ElementProps = {
+  className?: string,
   elementRef?: (StripeElement) => void,
 
   // For full documentation on the events and payloads below, see:

src/components/Element.js

@@ -5,6 +5,7 @@ import shallowEqual from '../utils/shallowEqual';
 import type {ElementContext} from './Elements';
 
 type Props = {
+  className: string,
   elementRef: Function,
   onChange: Function,
   onBlur: Function,
@@ -17,13 +18,15 @@ const noop = () => {};
 const Element = (type: string, hocOptions: {sourceType?: string} = {}) =>
   class extends React.Component {
     static propTypes = {
+      className: PropTypes.string,
       elementRef: PropTypes.func,
       onChange: PropTypes.func,
       onBlur: PropTypes.func,
       onFocus: PropTypes.func,
       onReady: PropTypes.func,
     };
     static defaultProps = {
+      className: '',
       elementRef: noop,
       onChange: noop,
       onBlur: noop,
@@ -88,6 +91,7 @@ const Element = (type: string, hocOptions: {sourceType?: string} = {}) =>
 
     _extractOptions(props: Props): Object {
       const {
+        className,
         elementRef,
         onChange,
         onFocus,
@@ -102,7 +106,7 @@ const Element = (type: string, hocOptions: {sourceType?: string} = {}) =>
       this._ref = ref;
     };
     render() {
-      return <span ref={this.handleRef} />;
+      return <span className={this.props.className} ref={this.handleRef} />;
     }
   };
 

src/components/Element.test.js

@@ -1,6 +1,6 @@
 // @noflow
 import React from 'react';
-import {mount} from 'enzyme';
+import {mount, shallow} from 'enzyme';
 
 import Element from './Element';
 
@@ -25,6 +25,13 @@ describe('Element', () => {
     };
   });
 
+  it('should pass className to the DOM element', () => {
+    const className = 'my-class';
+    const CardElement = Element('card', {sourceType: 'card'});
+    const element = shallow(<CardElement className={className} />, {context});
+    expect(element.first().hasClass(className)).toBeTruthy();
+  });
+
   it('should call the right hooks for a source Element', () => {
     const SourceElement = Element('source', {sourceType: 'foobar'});
     const element = mount(<SourceElement onChange={jest.fn()} />, {context});