Fix React warnings for nested components/className (https://github.com/woocommerce/woocommerce-admin/pull/83)

* Fix class/className warning

* Fix nested `a` warning

* Add note about SCRIPT_DEBUG

plugins/woocommerce-admin/README.md

@@ -6,6 +6,8 @@ This is a feature plugin for a modern, javascript-driven dashboard for WooCommer
 
 [Gutenberg](https://wordpress.org/plugins/gutenberg/) and [WooCommerce](https://wordpress.org/plugins/woocommerce/) should be installed prior to activating the WooCommerce Dashboard feature plugin.
 
+For better debugging, it's also recommended you add `define( 'SCRIPT_DEBUG', true );` to your wp-config. This will load the unminified version of all libraries, and specifically the development build of React.
+
 ## Development
 
 After cloning the repo, install dependencies with `npm install`. Now you can build the files using one of these commands:

plugins/woocommerce-admin/client/dashboard/widgets/agenda/header.js

@@ -4,7 +4,7 @@
  */
 import classnames from 'classnames';
 import { Component } from '@wordpress/element';
-import { IconButton } from '@wordpress/components';
+import { Dashicon, IconButton } from '@wordpress/components';
 import PropTypes from 'prop-types';
 
 class AgendaHeader extends Component {
@@ -41,7 +41,9 @@ class AgendaHeader extends Component {
 						{ count && <span>{ count }</span> }
 						{ title }
 					</h3>
-					<IconButton href={ href } icon="arrow-right-alt2" />
+					<span className="woo-dash__agenda-group-arrow">
+						<Dashicon icon="arrow-right-alt2" />
+					</span>
 				</div>
 			</a>
 		);

plugins/woocommerce-admin/client/dashboard/widgets/agenda/style.scss

@@ -44,6 +44,7 @@
 		margin: 0;
 	}
 
+	.woo-dash__agenda-group-arrow,
 	.components-button {
 		position: relative;
 		padding: 16px;
@@ -55,6 +56,7 @@
 		color: #444;
 	}
 
+	.woo-dash__agenda-group-arrow .dashicon,
 	.components-icon-button {
 		overflow: visible;
 	}

plugins/woocommerce-admin/client/layout/sidebar/header.js

@@ -9,9 +9,9 @@ class SidebarHeader extends Component {
 	render() {
 		const { label } = this.props;
 		return (
-			<div class="woo-dash__sidebar-header">
+			<div className="woo-dash__sidebar-header">
 				<h3 className="woo-dash__sidebar-header-label">{ label }</h3>
-				<div class="woo-dash__sidebar-header-divider" />
+				<div className="woo-dash__sidebar-header-divider" />
 			</div>
 		);
 	}