Only use a tags in tab when an href or onClick is supplied.

Author: timmyc

client/my-sites/stats/stats-tabs/tab.jsx

@@ -23,15 +23,11 @@ export default React.createClass( {
 		value: PropTypes.number
 	},
 
-	getDefaultProps() {
-		return {
-			tabClick: () => {}
-		}
-	},
-
 	clickHandler( event ) {
-		event.preventDefault();
-		this.props.tabClick( this.props );
+		if ( this.props.tabClick ) {
+			event.preventDefault();
+			this.props.tabClick( this.props );
+		}
 	},
 
 	ensureValue( value ) {
@@ -42,14 +38,8 @@ export default React.createClass( {
 		return String.fromCharCode( 8211 );
 	},
 
-	handleLinkClick( event ) {
-		if ( ! this.props.href ) {
-			event.preventDefault();
-		}
-	},
-
 	render() {
-		const { className, children, gridicon, href, label, loading, selected, value } = this.props;
+		const { className, children, gridicon, href, label, loading, selected, tabClick, value } = this.props;
 
 		const tabClass = classNames(
 			'stats-tab',
@@ -60,16 +50,22 @@ export default React.createClass( {
 				'is-low': ! value
 			} );
 
-		const linkClass = ! href ? 'no-link' : null;
+		const tabIcon = gridicon ? <Gridicon icon={ gridicon } size={ 18 } /> : null;
+		const tabLabel = <span className="label">{ label }</span>;
+		const tabValue = <span className="value">{ this.ensureValue( value ) }</span>;
+		const hasClickAction = href || tabClick;
 
 		return (
 			<li className={ tabClass } onClick={ this.clickHandler } >
-				<a href={ href } className={ linkClass } onClick={ this.handleLinkClick }>
-					{ gridicon ? <Gridicon icon={ gridicon } size={ 18 } /> : null }
-					<span className="label">{ label }</span>
-					<span className="value">{ this.ensureValue( value ) }</span>
-					{ children }
-				</a>
+				{
+					hasClickAction
+					?	<a href={ href }>
+							{ tabIcon }{ tabLabel }{ tabValue }{ children }
+						</a>
+					: 	<span className="no-link">
+							{ tabIcon }{ tabLabel }{ tabValue }{ children }
+						</span>
+				}
 			</li>
 		);
 	}