fix(modal): allow element in closeText prop (#245)

src/Modal/Modal.stories.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import FontAwesomeStyles from 'font-awesome/css/font-awesome.min.css';
 import PropTypes from 'prop-types';
+import React from 'react';
+import { storiesOf } from '@storybook/react';
 
 import Modal from './index';
 import Button from '../Button';
+import Icon from '../Icon';
 import InputText from '../InputText';
 import Variant from '../utils/constants';
 
@@ -118,7 +120,7 @@ storiesOf('Modal', module)
       onClose={() => {}}
     />
   ))
-  .add('configurable close button', () => (
+  .add('configurable close button string', () => (
     <Modal
       open
       title="Modal title."
@@ -127,6 +129,22 @@ storiesOf('Modal', module)
       onClose={() => {}}
     />
   ))
+  .add('configurable close button element', () => (
+    <Modal
+      open
+      title="Modal title."
+      body="Modal body."
+      closeText={
+        <Icon
+          className={[
+            FontAwesomeStyles.fa,
+            FontAwesomeStyles['fa-ship'],
+          ]}
+          screenReaderText="Close"
+        />}
+      onClose={() => {}}
+    />
+  ))
   .add('modal invoked via a button', () => (
     <ModalWrapper
       title="I am the modal!"

src/Modal/Modal.test.jsx

@@ -59,6 +59,7 @@ const defaultProps = {
   open: true,
   onClose: () => {},
 };
+const closeText = 'GO AWAY!';
 
 let wrapper;
 
@@ -128,6 +129,28 @@ describe('<Modal />', () => {
       expect(wrapper.find('button')).toHaveLength(1);
     });
 
+    it('renders custom close button string', () => {
+      wrapper = mount(<Modal {...defaultProps} closeText={closeText} />);
+      const modalFooter = wrapper.find('.modal-footer');
+      const closeButton = modalFooter.find('button');
+
+      expect(closeButton).toHaveLength(1);
+      expect(closeButton.children()).toHaveLength(0);
+      expect(closeButton.text()).toEqual(closeText);
+    });
+
+    it('renders custom close button element', () => {
+      const closeElem = <span>{closeText}</span>;
+      wrapper = mount(<Modal {...defaultProps} closeText={closeElem} />);
+      const modalFooter = wrapper.find('.modal-footer');
+      const closeButton = modalFooter.find('button');
+
+      expect(closeButton).toHaveLength(1);
+      expect(closeButton.children()).toHaveLength(1);
+      expect(closeButton.find('span')).toHaveLength(1);
+      expect(closeButton.text()).toEqual(closeText);
+    });
+
     it('renders with IE11-specific styling when IE11 is detected', () => {
       const { MSInputMethodContext } = global;
       const { documentMode } = global.document;

src/Modal/README.md

@@ -16,7 +16,7 @@ Provides a basic modal component with customizable title, body, and footer butto
 ### `buttons` (element or shape in form of buttonPropTypes array; optional)
 `buttons` is an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/edx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button.
 
-### `closeText` (string; optional)
+### `closeText` (string or element; optional)
 `closeText` specifies the display text of the default Close button. It defaults to "Close".
 
 ### `onClose` (function; required)

src/Modal/index.jsx

@@ -245,7 +245,7 @@ Modal.propTypes = {
     PropTypes.element,
     PropTypes.shape(buttonPropTypes),
   ])),
-  closeText: PropTypes.string,
+  closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   onClose: PropTypes.func.isRequired,
   variant: PropTypes.shape({
     status: PropTypes.string,