v.3.2.0

* Add support for className prop

CHANGELOG.md

@@ -1,5 +1,8 @@
 #CHANGELOG
 
+## Version 3.2.0
+* Add support for className prop.
+
 ## Version 3.1.6
 * Expand peerDep scope of `ffe-message-box` to include `4.x`.
 * Remove peerDep on `ffe-core` and `ffe-icons-react`.

README.md

@@ -32,6 +32,7 @@ The components accept the following props:
 - `content`: Content rendered inside a `<p />` tag. Can include HTML.
 - `children`: Content rendered without an enclosing tag.
 - `style`: Styling object for applying style to the outermost container.
+- `className`: Class on the outer wrapper. 
 
 Note that no props are required. However, you should at least provide either
 `content` or children for the component to look and behave correctly.

examples/message-box.js

@@ -14,7 +14,7 @@ document.body.appendChild(messageBoxDOM);
 
 render(
   <div>
-      <SuccessMessage title="Success!" content="This message is here to tell you about great success!"/>
+      <SuccessMessage title="Success!" className="custom-class" content="This message is here to tell you about great success!"/>
       <ErrorMessage title="Error!" content="This message is here to tell you about a horrible error!"/>
       <InfoMessage title="Information" content="This message is here to tell you something..."/>
       <TipsMessage title="Tips">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-message-box-react",
-  "version": "3.1.6",
+  "version": "3.2.0",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",

src/error-message-box.js

@@ -7,12 +7,13 @@ const iconStyles = {
     height: '40px'
 };
 
-const ErrorMessage = ({ title, content, style, children }) => MessageBox({
+const ErrorMessage = ({ title, content, style, className, children }) => MessageBox({
     type: 'error',
     icon: <Icon style={ iconStyles }/>,
     title,
     content,
     style,
+    className,
     children
 });
 

src/info-message-box.js

@@ -7,12 +7,13 @@ const iconStyles = {
     height: '40px'
 };
 
-const InfoMessage = ({ title, content, style, children }) => MessageBox({
+const InfoMessage = ({ title, content, style, className, children }) => MessageBox({
     type: 'info',
     icon: <Icon style={ iconStyles }/>,
     title,
     content,
     style,
+    className,
     children
 });
 

src/message-box.js

@@ -8,10 +8,11 @@ function MessageBox(props) {
         content,
         style,
         children,
+        className = ''
     } = props;
 
     return (
-        <div className="ffe-message-box" style={ style }>
+        <div className={`ffe-message-box ${className}`} style={ style }>
             <span
                 className={`
                     ffe-message-box__icon
@@ -44,6 +45,7 @@ function MessageBox(props) {
 
 MessageBox.propTypes = {
     children: PropTypes.any,
+    className: PropTypes.string,
     content: PropTypes.node,
     icon: PropTypes.node.isRequired,
     title: PropTypes.string,

src/message-box.test.js

@@ -89,4 +89,12 @@ describe('<MessageBox />', () => {
         assert.ok(wrapper.props().style);
         assert.equal(wrapper.props().style.marginTop, '40px');
     });
+
+    it('should accept className prop to apply styles to outermost container', () => {
+        const wrapper = shallow(<SuccessMessage className="custom-class"/>);
+
+        assert.ok(wrapper.props().className);
+        assert.equal(wrapper.props().className, 'ffe-message-box custom-class');
+        assert.equal(wrapper.find('.custom-class').length, 1);
+    });
 });

src/success-message-box.js

@@ -7,12 +7,13 @@ const iconStyles = {
     height: '40px'
 };
 
-const SuccessMessage = ({ title, content, style, children }) => MessageBox({
+const SuccessMessage = ({ title, content, style, className, children }) => MessageBox({
     type: 'success',
     icon: <Icon style={ iconStyles }/>,
     title,
     content,
     style,
+    className,
     children
 });
 

src/tips-message-box.js

@@ -7,12 +7,13 @@ const iconStyles = {
     height: '40px'
 };
 
-const TipsMessage = ({ title, content, style, children }) => MessageBox({
+const TipsMessage = ({ title, content, style, className, children }) => MessageBox({
     type: 'tips',
     icon: <Icon style={ iconStyles }/>,
     title,
     content,
     style,
+    className,
     children
 });