Set is-active style on trap demos, special-elem returns focus (#101)

And the 'special element' demo is now set to return focus
after deactivation, in particular to make it easier to
reproduce the issue that focus is NOT returned when deactivating
with the ESC key, which is the issue #54 is trying to fix.

demo/index.html

@@ -15,7 +15,7 @@ <h1 tabindex="0">focus-trap-react demo</h1>
 
   <p>
     <span style="font-size:2em;vertical-align:middle;">☜</span>
-    <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
+    <a href="https://github.com/focus-trap/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
   </p>
 
   <h2>defaults</h2>
@@ -45,6 +45,10 @@ <h2>special element</h2>
   <p>
     ALSO, when you click outside this FocusTrap, the trap deactivates and your click carries through.
   </p>
+  <p>
+    Finally, focus should return to the "activate trap" button, whether you click the "deactivate trap"
+    button, or press the ESC key.
+  </p>
   <div id="demo-special-element"></div>
 
   <h2>demo autofocus</h2>
@@ -55,7 +59,7 @@ <h2>demo autofocus</h2>
 
   <p>
     <span style="font-size:2em;vertical-align:middle;">☜</span>
-    <a href="https://github.com/davidtheclark/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
+    <a href="https://github.com/focus-trap/focus-trap-react" style="vertical-align:middle;">Return to the repository</a>
   </p>
 
   <script src="demo-bundle.js"></script>

demo/js/demo-autofocus.js

@@ -31,7 +31,7 @@ class DemoAutofocus extends React.Component {
           onDeactivate: this.unmountTrap,
         }}
       >
-        <div className="trap">
+        <div className="trap is-active">
           <button onClick={this.unmountTrap}>deactivate trap</button>
           <div>
             <a href="#">Another focusable thing</a>

demo/js/demo-defaults.js

@@ -31,7 +31,7 @@ class DemoDefaults extends React.Component {
           onDeactivate: this.unmountTrap,
         }}
       >
-        <div className="trap">
+        <div className="trap is-active">
           <p>
             Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
             <a href="#">focusable</a> parts.

demo/js/demo-ffne.js

@@ -33,7 +33,7 @@ class DemoFfne extends React.Component {
           escapeDeactivates: false,
         }}
       >
-        <div className="trap">
+        <div className="trap is-active">
           <p>
             Here is a focus trap <a href="#">with</a> <a href="#">some</a>{' '}
             <a href="#">focusable</a> parts.

demo/js/demo-special-element.js

@@ -26,7 +26,9 @@ class DemoSpecialElement extends React.Component {
 
   render() {
     let trapClass = 'trap';
-    if (this.state.activeTrap) trapClass += ' is-active';
+    if (this.state.activeTrap) {
+      trapClass += ' is-active';
+    }
 
     return (
       <div>
@@ -38,11 +40,12 @@ class DemoSpecialElement extends React.Component {
           focusTrapOptions={{
             onDeactivate: this.unmountTrap,
             clickOutsideDeactivates: true,
+            returnFocusOnDeactivate: true,
           }}
         >
           <section
             id="focus-trap-three"
-            style={{ background: '#eee' }}
+            style={this.state.activeTrap ? null : { background: '#eee' }}
             data-whatever="nothing"
             className={trapClass}
           >