Add support for className at the node level

Resolves #32.

Author: jakezatecky

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### New Features
 
+* [#32]: Allow customization of `className` at the node level
 * [#30]: Add `showNodeIcon` property to optionally remove node icons
 
 ## [v0.5.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.5.1...v0.5.2) (2017-05-03)

README.md

@@ -103,9 +103,10 @@ class Widget extends React.Component {
 
 Individual nodes within the `nodes` property can have the following structure:
 
-| Property   | Type   | Description                     |
-| ---------- | ------ | ------------------------------- |
-| `label`    | string | **Required**. The node's label. |
-| `value`    | mixed  | **Required**. The node's value. |
-| `children` | array  | An array of child nodes.        |
-| `icon`     | mixed  | A custom icon for the node.     |
+| Property    | Type   | Description                     |
+| ----------- | ------ | ------------------------------- |
+| `label`     | string | **Required**. The node's label. |
+| `value`     | mixed  | **Required**. The node's value. |
+| `children`  | array  | An array of child nodes.        |
+| `className` | string | A className to add to the node. |
+| `icon`      | mixed  | A custom icon for the node.     |

src/js/CheckboxTree.js

@@ -143,6 +143,7 @@ class CheckboxTree extends React.Component {
 				<TreeNode
 					key={key}
 					checked={checked}
+					className={node.className}
 					expanded={node.expanded}
 					icon={node.icon}
 					label={node.label}

src/js/TreeNode.js

@@ -17,12 +17,14 @@ class TreeNode extends React.Component {
 		onExpand: PropTypes.func.isRequired,
 
 		children: PropTypes.node,
+		className: PropTypes.string,
 		icon: PropTypes.node,
 		rawChildren: PropTypes.arrayOf(nodeShape),
 	};
 
 	static defaultProps = {
 		children: null,
+		className: null,
 		icon: null,
 		rawChildren: null,
 	};
@@ -132,13 +134,13 @@ class TreeNode extends React.Component {
 	}
 
 	render() {
-		const { checked, treeId, label, showNodeIcon, value } = this.props;
+		const { checked, className, treeId, label, showNodeIcon, value } = this.props;
 		const inputId = `${treeId}-${value}`;
 		const nodeClass = classNames({
 			'rct-node': true,
 			'rct-node-parent': this.hasChildren(),
 			'rct-node-leaf': !this.hasChildren(),
-		});
+		}, className);
 
 		return (
 			<li className={nodeClass}>

test/TreeNode.js

@@ -74,6 +74,16 @@ describe('<TreeNode />', () => {
 		});
 	});
 
+	describe('className', () => {
+		it('should append the supplied className to <li> of the node', () => {
+			const wrapper = shallow(
+				<TreeNode {...baseProps} className="my-test-class" />,
+			);
+
+			assert.isTrue(wrapper.find('.my-test-class').exists());
+		});
+	});
+
 	describe('expanded', () => {
 		it('should render children when set to true', () => {
 			const wrapper = shallow(