Merge pull request #16 in FFE/ffe-dropdown-react from master_2.4.0-op…

…tional-styling-of-container-div to master

* commit '11d59c5e2e9e5b4ee3ae8fc4dd082a5517aa6040':
  DIG-11112 - Styling nytt søknadsskjema kredittkort. Lagt til proptypes for className og containerClassName.
  DIG-11112 - Styling nytt søknadsskjema kredittkort. Lagt til mulighet til å stilsette ytre container div vha prop containerClassName.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.4.0
+
+* Added added support for css styling of container-div, using prop containerClassName
+
 ## 2.3.0
 
 * Added onBlur support

README.md

@@ -57,6 +57,16 @@ Passing `invalid` to the `Dropdown` will give a red color on the element.
 </Dropdown>
 ```
 
+If you need to add styling to the outer div-container of the component and pass the attribute containerClassName.
+The containerClassName will be appended to the default class 'ffe-input-group'.
+
+```javascript
+<label for={ uniqueIdString }>{ labelTextString }</label>
+<Dropdown containerClassName={ myContainterClass }>
+    <option value="val1">Option text</option>
+</Dropdown>
+```
+
 ### Loading state
 
 Loading state can be indicated using `isLoading`. When this is set a loading spinner will be rendered next to the dropdown.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-dropdown-react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "lib/dropdown.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",

src/dropdown.js

@@ -10,6 +10,7 @@ const createID = (label, options) => {
 function Dropdown({
     id,
     className = '',
+    containerClassName = '',
     label,
     onChange,
     onBlur,
@@ -22,14 +23,14 @@ function Dropdown({
 }) {
     const domId = id || createID(label, children);
 
-    return  <div className="ffe-input-group" aria-live="polite">
+    return  <div className={ `ffe-input-group ${containerClassName}` } aria-live="polite">
                 { label &&
                         <label className="ffe-form-label" htmlFor={ domId }>
                             { label }
                         </label>
                 }
                 <select
-                        className={`ffe-dropdown ${className}`}
+                        className={ `ffe-dropdown ${className}` }
                         id={ domId }
                         onChange={ onChange }
                         onBlur={ onBlur }
@@ -54,6 +55,8 @@ function Dropdown({
 
 Dropdown.propTypes = {
     id: PropTypes.string,
+    className: PropTypes.string,
+    containerClassName: PropTypes.string,
     label: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func,