Add simple fixture

fixtures/dom/src/components/Header.js

@@ -51,6 +51,7 @@ class Header extends React.Component {
                 <option value="/">Select a Fixture</option>
                 <option value="/range-inputs">Range Inputs</option>
                 <option value="/text-inputs">Text Inputs</option>
+                <option value="/mouse-events">Mouse Events</option>
                 <option value="/number-inputs">Number Input</option>
                 <option value="/password-inputs">Password Input</option>
                 <option value="/selects">Selects</option>

fixtures/dom/src/components/fixtures/index.js

@@ -4,6 +4,7 @@ import TextInputFixtures from './text-inputs';
 import SelectFixtures from './selects';
 import TextAreaFixtures from './textareas';
 import InputChangeEvents from './input-change-events';
+import MouseEventsFixtures from './mouse-events';
 import NumberInputFixtures from './number-inputs';
 import PasswordInputFixtures from './password-inputs';
 import ButtonFixtures from './buttons';
@@ -24,6 +25,8 @@ function FixturesPage() {
       return <TextAreaFixtures />;
     case '/input-change-events':
       return <InputChangeEvents />;
+    case '/mouse-events':
+      return <MouseEventsFixtures />;
     case '/number-inputs':
       return <NumberInputFixtures />;
     case '/password-inputs':

fixtures/dom/src/components/fixtures/mouse-events/index.js

@@ -0,0 +1,51 @@
+const React = window.React;
+
+const Rectangle = ({style, ...props}) => (
+  <div {...props} style={{border: '1px solid black', padding: 40, ...style}} />
+);
+
+class MouseEventsFixtures extends React.Component {
+  state = {log: []};
+
+  log = msg => {
+    this.setState(({log}) => ({
+      log: log.concat(msg),
+    }));
+  };
+  clearLog = () => {
+    this.setState({log: []});
+  };
+  render() {
+    let getLogger = prefix => e => this.log(`${prefix}: ${e.type}`);
+    let outerLogger = getLogger('outer');
+    let innerLogger = getLogger('inner');
+
+    return (
+      <div>
+        <div className="container">
+          <p>
+            Mouse the mouse between the two rectangles. The console should
+            only log for a given box when the mouse crosses into the box the first
+            time and again when the mouse exits the
+            {' '}
+            <em>outer</em>
+            {' '}
+            bounds of each box.
+          </p>
+          <Rectangle onMouseEnter={outerLogger} onMouseLeave={outerLogger}>
+            <Rectangle onMouseEnter={innerLogger} onMouseLeave={innerLogger} />
+          </Rectangle>
+        </div>
+
+        <div className="container">
+          <h4>Console: <button onClick={this.clearLog}>clear</button></h4>
+          <pre className="output">
+            {this.state.log.join('\n')}
+          </pre>
+        </div>
+      </div>
+    );
+  }
+}
+
+module.exports = MouseEventsFixtures;