FFE-112 added className support for ffe-check-list

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.1.0
+
+* Added className support for ffe-check-list
+
 ## v1.0.0
 
 * Initial release

README.md

@@ -25,6 +25,14 @@ To render a list, use `<li>` as children:
 </BulletList>
 ```
 
+`bg-sand` is a modifier of `CheckList` and can be used by passing the correct className:
+
+```
+<CheckList className="ffe-check-list--bg-sand">
+  ...
+</CheckList>
+```
+
 To render a description list (i.e. `DescriptionListFlex` or `DescriptionListMultiCol`) make sure both `dt` and `dd` are present as children.
 
 ```

examples/lists.js

@@ -14,7 +14,7 @@ document.body.appendChild(listDOM);
 
 render(
 	<div className="ffe-body-text">
-		<h2 className="ffe-h4">BulletList</h2>
+		<h2 className="ffe-h4">Bullet list</h2>
 		<BulletList>
 			<li>List item</li>
 			<li>Another list item</li>
@@ -23,7 +23,7 @@ render(
 
 		<hr className="ffe-divider-line"/>
 
-		<h2 className="ffe-h4">CheckList</h2>
+		<h2 className="ffe-h4">Check list</h2>
 		<CheckList>
 			<li>List item</li>
 			<li>Another list item</li>
@@ -32,7 +32,16 @@ render(
 
 		<hr className="ffe-divider-line"/>
 
-		<h2 className="ffe-h4">NumberedList</h2>
+		<h2 className="ffe-h4">Check list (bg-sand)</h2>
+		<CheckList className="ffe-check-list--bg-sand">
+			<li>List item</li>
+			<li>Another list item</li>
+			<li>Yet another list item</li>
+		</CheckList>
+
+		<hr className="ffe-divider-line"/>
+
+		<h2 className="ffe-h4">Numbered list</h2>
 		<NumberedList>
 			<li>List item</li>
 			<li>Another list item</li>
@@ -41,7 +50,7 @@ render(
 
 		<hr className="ffe-divider-line"/>
 
-		<h2 className="ffe-h4">StylizedNumberedList</h2>
+		<h2 className="ffe-h4">Stylized numbered list</h2>
 		<StylizedNumberedList>
 			<li>List item</li>
 			<li>Another list item</li>
@@ -50,7 +59,7 @@ render(
 
 		<hr className="ffe-divider-line"/>
 
-		<h2 className="ffe-h4">DescriptionListFlex</h2>
+		<h2 className="ffe-h4">Description list (Flex)</h2>
 		<DescriptionListFlex>
 			<dt>Term</dt>
 			<dd>Description</dd>
@@ -64,7 +73,7 @@ render(
 
 		<hr className="ffe-divider-line"/>
 
-		<h2 className="ffe-h4">DescriptionListMultiCol</h2>
+		<h2 className="ffe-h4">Description list (Multicolumn)</h2>
 		<DescriptionListMultiCol>
 			<dt>Term</dt>
 			<dd>Description</dd>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-lists-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "React implementation of ffe-lists",
   "main": "lib/index.js",
   "scripts": {
@@ -54,7 +54,7 @@
   },
   "peerDependencies": {
     "ffe-core": "^8.1.2",
-    "ffe-lists": "^2.2.0"
+    "ffe-lists": "^2.3.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",

src/CheckList.js

@@ -1,11 +1,12 @@
 import React from 'react';
 
-export default function CheckList({ children }) {
-    return  <ul className="ffe-check-list">
+export default function CheckList({ children, className = '' }) {
+    return  <ul className={`ffe-check-list ${className}`}>
                 {children}
             </ul>;
 }
 
 CheckList.propTypes = {
     children: React.PropTypes.array.isRequired,
+    className: React.PropTypes.string,
 };

src/CheckList.test.js

@@ -15,4 +15,9 @@ describe('<CheckList>', () => {
     assert.ok(wrapper.find('li').at(0).text(), 'First');
     assert.ok(wrapper.find('li').at(1).text(), 'Second');
   });
+  it('should render a <ul> with class ffe-check-list--bg-sand', () => {
+    const wrapper = shallow(<CheckList className="ffe-check-list--bg-sand"><li>First</li><li>Second</li></CheckList>);
+
+    assert.ok(wrapper.find('ul').hasClass('ffe-check-list--bg-sand'));
+  });
 });