Merge branch 'feature/levitate-on-hover' into develop

Author: erwstout

README.md

@@ -24,17 +24,19 @@ component.
 | Chrome >= 38     | ✅ | |
 | Edge >= 14       | ✅ | |
 | Firefox >= 16    | ✅‍ |  |
-| IE 11-10         | ⚠️ | Animations are disabled for compatibility |
+| IE 11-10         | ⚠️ | Card flips have no animation |
 | IE 9.0           | ❌ | No toggling of cards |
 | Opera >= 30      | ✅ | |
 | Safari >= 6.2.8  | ✅ | |
-| Safari 6.0.5     | ⚠️ | Card flip has no animation |
+| Safari 6.0.5     | ⚠️ | Card flips have no animation |
 
 
 ## Getting Started
 You can import react-card-flipper into your React app. The following is a bare
 bones example.
 
+> **Important:** The `<ReactCardFlipper>` component must have two `<div>` elements, one for the front and one for the back.
+
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -56,26 +58,27 @@ ReactDOM.render(
 ```
 
 ## Props and Options
-The `ReactCardFlipper` component has 3 props it accepts that you can use to adjust
+The `ReactCardFlipper` component has 4 props it accepts that you can use to adjust
 how your card behaves.
 
-| Prop / Option | Accepted Prop(s)            | Default |
-| ------------- |:---------------------------:|--------:|
-| `width`       | String (ex: `300px`)        | `auto`  |
-| `height`      | String (ex: `600px`)        | `auto`  |
-| `behavior`    | String (`click` or `hover`) | `click` |
+| Prop / Option | Accepted Prop(s)            | Default | Description |
+| ------------- |:---------------------------:|:-------:| ----------- |
+| `width`       | String (ex: `300px`)        | `auto`  | Card width.  |
+| `height`      | String (ex: `600px`)        | `auto`  | Card height. |
+| `behavior`    | String (`click` or `hover`) | `click` | If the card should click to flip, or hover to flip. |
+| `levitate`    | Boolean                     | `false` | If the card should "levitate" up on hover. Only applied when `behavior` is `click`. |
 
 #### Example:
 ```js
 render() {
   return(
     <div>
-      <ReactCardFlipper width="300px" height="550px" behavior="hover">
+      <ReactCardFlipper width="300px" height="550px" behavior="click" levitate={true}>
         <div>
-          <h3>Hover me to learn more</h3>
+          <h3>Click me to learn more</h3>
         </div>
         <div>
-          <p>You hovered! Keep that knowledge growing...</p>
+          <p>You Clicked!</p>
         </div>
       </ReactCardFlipper>
     </div>

ReactCardFlipper.css

@@ -8,6 +8,7 @@
   transform-style: preserve-3d;
   width: auto;
   height: auto;
+  transition: transform 500ms cubic-bezier(.18,.45,.11,.91);
 }
 
 .rcf-front, .rcf-back {
@@ -38,6 +39,11 @@
   transform: rotateY(180deg);
 }
 
+.rcf-levitate {
+  transform: translateY(-15px);
+  transition: transform 500ms cubic-bezier(.18,.45,.11,.91);
+}
+
 /* IE Support for 11-10 */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .rcf-active .rcf-back {

ReactCardFlipper.js

@@ -10,6 +10,7 @@ import './ReactCardFlipper.css';
   * Width: string (default: auto)
   * Height: string (default: auto)
   * behavior: click, hover (default: click)
+  * levitate: boolean (default: false, only works when behavior is set to `click`)
 **/
 
 class ReactCardFlipper extends Component {
@@ -20,11 +21,13 @@ class ReactCardFlipper extends Component {
       isFlipped: false,
       width: this.props.width,
       height: this.props.height,
-      behavior: this.props.behavior ? this.props.behavior : 'click'
+      behavior: this.props.behavior ? this.props.behavior : 'click',
+      levitate: this.props.levitate ? this.props.levitate : false
     }
 
     // bind this 🤙
     this.handleFlip = this.handleFlip.bind(this);
+    this.handleMouseEvent = this.handleMouseEvent.bind(this);
   }
 
   handleFlip(e) {
@@ -34,15 +37,29 @@ class ReactCardFlipper extends Component {
     })
   }
 
+  handleLevitate(e) {
+    e.currentTarget.classList.toggle('rcf-levitate');
+  }
+
+  handleMouseEvent(e) {
+    if( this.state.behavior === 'hover' ) {
+      return this.handleFlip(e);
+    } else if ( this.state.behavior === 'click' && this.state.levitate ) {
+      return this.handleLevitate(e);
+    } else if ( this.state.behavior === 'click' ) {
+      return
+    }
+  }
+
   render(){
     const containerStyles = {
       width: this.state.width,
       height: this.state.height,
     }
 
     return(
-      <div className="rcf-container" style={containerStyles} onClick={ (e) => { if(this.state.behavior === 'click'){ this.handleFlip(e) }}} onMouseEnter={ (e) => { if(this.state.behavior === 'hover'){ this.handleFlip(e) }}}
-        onMouseLeave={ (e) => { if(this.state.behavior === 'hover'){ this.handleFlip(e) }}}>
+      <div className="rcf-container" style={containerStyles} onClick={ (e) => { if(this.state.behavior === 'click'){ this.handleFlip(e) }}} onMouseEnter={ (e) => { this.handleMouseEvent(e) }}
+        onMouseLeave={ (e) => { this.handleMouseEvent(e) }}>
         <div className="rcf-flipper">
           <div className="rcf-front" style={containerStyles}>
             {this.props.children[0]}

Test.js

@@ -22,6 +22,14 @@ ReactDOM.render(
             Great job! You win person of the day.
           </div>
         </ReactCardFlipper>
+        <ReactCardFlipper width="300px" height="400px" behavior="click" levitate={true}>
+          <div className="text-center">
+            You can click me, and I levitate
+          </div>
+          <div className="text-center">
+            Great job! You win person of the minute.
+          </div>
+        </ReactCardFlipper>
       </div>
     </div>
   </div>,

tests/tests.css

@@ -4,7 +4,7 @@
 
 .rcf-container {
   display: inline-block;
-  margin: 0 20px;
+  margin: 10px 20px;
 }
 
 .rcf-front, .rcf-back{