feat: InfoBox className (#638)

InfoBox/NewBox now accept a className prop, in which you can add additional css information. NewBox makes use of this by default.

ERM-3040

lib/InfoBox/InfoBox.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import css from './InfoBox.css';
 
-const InfoBox = ({ children, type }) => {
+const InfoBox = ({ children, className, type }) => {
   const classnames = [css.infoBox];
 
   switch (type) {
@@ -24,7 +24,7 @@ const InfoBox = ({ children, type }) => {
   return (
     <span
       className={
-        classNames(classnames)
+        classNames(classnames, className)
       }
     >
       {children}
@@ -38,6 +38,7 @@ InfoBox.propTypes = {
     PropTypes.node,
     PropTypes.func,
   ]).isRequired,
+  className: PropTypes.string,
   type: PropTypes.oneOf([
     'success',
     'warn',

lib/NewBox/NewBox.css

@@ -0,0 +1,3 @@
+.newBox {
+  text-wrap: nowrap;
+}

lib/NewBox/NewBox.js

@@ -1,12 +1,25 @@
+import PropTypes from 'prop-types';
+
 import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+
 import InfoBox from '../InfoBox';
 
-const NewBox = () => (
+import css from './NewBox.css';
+
+const NewBox = ({ className }) => (
   <InfoBox
+    className={
+      classNames(css.newBox, className)
+    }
     type="success"
   >
     <FormattedMessage id="stripes-erm-components.new" />
   </InfoBox>
 );
 
+NewBox.propTypes = {
+  className: PropTypes.string,
+};
+
 export default NewBox;