Add more examples for TreeGrid

Author: aswinshenoy

components/tree-grid/__docs__/storybook-stories.jsx

@@ -11,8 +11,18 @@ storiesOf(TREE_GRID, module)
 		<div className="slds-p-around_medium">{getStory()}</div>
 	))
 	.add('Default', () => <Default action={action} />)
-	.add('w/ Single Select', () => (
+	.add('Single Select', () => (
 		<Default action={action} selectRows="single" />
 	))
+	.add('w/o Border', () => <Default action={action} isBorderless />)
+	.add('Single Select w/o Border', () => (
+		<Default action={action} selectRows="single" isBorderless />
+	))
+	.add('Headless Single Select w/ Border', () => (
+		<Headless action={action} selectRows="single" />
+	))
 	.add('Headless w/ Border', () => <Headless action={action} />)
+	.add('Headless Single Select w/o Border', () => (
+		<Headless action={action} selectRows="single" isBorderless />
+	))
 	.add('Headless w/o Border', () => <Headless action={action} isBorderless />);

components/tree-grid/__examples__/default.jsx

@@ -182,6 +182,7 @@ class Example extends React.Component {
 		nodes: this.props.nodes || sampleData,
 		isIndeterminate: false,
 		allSelect: false,
+		selectedNode: null
 	};
 
 	getNodes = (node) =>
@@ -250,6 +251,12 @@ class Example extends React.Component {
 			}
 			this.setState({ nodes: curr, isIndeterminate, allSelect });
 		}
+		else {
+			const { nodes, selectedNode } = this.state;
+			nodes[data.node.id].selected = true;
+			if(selectedNode != null) { nodes[selectedNode].selected = false; }
+			this.setState({ nodes, selectedNode: data.node.id })
+		}
 	};
 
 	handleSelectAll = (event) => {
@@ -285,6 +292,7 @@ class Example extends React.Component {
 					<TreeGrid
 						id="example"
 						nodes={this.state.nodes['0'].nodes}
+						isBorderless={this.props.isBorderless}
 						getNodes={this.getNodes}
 						onExpand={this.handleExpansion}
 						onSelect={this.handleSelection}

components/tree-grid/__examples__/headless.jsx

@@ -158,6 +158,7 @@ class Example extends React.Component {
 					<TreeGrid
 						isHeadless
 						isBorderless={this.props.isBorderless}
+						selectRows={this.props.selectRows}
 						nodes={this.state.nodes['0'].nodes}
 						getNodes={this.getNodes}
 						onExpand={this.handleExpansion}

components/tree-grid/private/item.jsx

@@ -102,7 +102,7 @@ const Item = (props) => {
 					props.row.selected ? `slds-is-selected` : null
 				)}
 				onClick={(event) =>
-					props.selectRows === 'single' ? props.onSelect(event,props.row) : null
+					props.selectRows === 'single' ? handleSelection(event) : null
 				}
 				onKeyDown={handleKeyDown}
 				ref={(component) => {