From 1b35708db2f3888c384f8acc88869b90e037206d Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Thu, 25 Jan 2018 19:07:20 -0600
Subject: [PATCH 1/5] Remove console.log when cropping image

---
 src/utils/Transform.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/Transform.js b/src/utils/Transform.js
index 4ecbb0d..12fdae7 100644
--- a/src/utils/Transform.js
+++ b/src/utils/Transform.js
@@ -47,7 +47,7 @@ export class Transform {
   static renderCentered(ctx, image, imgRect, boundRect) {
     let scaledRect = Transform.constrainProportions(imgRect, boundRect);
     let position = Transform.centerRect(scaledRect, boundRect);
-    
+
     Transform.renderImage(ctx, image, position, scaledRect);
   }
 
@@ -76,7 +76,6 @@ export class Transform {
    * @returns {Promise}
    */
   static cropImage(image, cropRect, boundRect, angle) {
-    console.log('crop image', cropRect, boundRect);
     return new Promise((resolve, reject) => {
       let scaledCanvas = document.createElement('canvas');
       scaledCanvas.width = boundRect.width;

From aeb2186c1aefc5d351947f1029baf56e46d08540 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Thu, 25 Jan 2018 19:17:07 -0600
Subject: [PATCH 2/5] Update unrecognized prop on CropMenu component

---
 src/components/CropMenu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CropMenu.js b/src/components/CropMenu.js
index abed82a..eec3131 100644
--- a/src/components/CropMenu.js
+++ b/src/components/CropMenu.js
@@ -4,7 +4,7 @@ export default ({isCropping, children}) =>
   <span>
     {
       React.Children.map(children, child => {
-        const showOnlyWhen = child.props['data-showOnlyWhen'];
+        const showOnlyWhen = child.props['data-showonlywhen'];
 
         if (isCropping && showOnlyWhen === "croppingIsOn") {
           return child;

From 08c57772cc4e32a3e1ae6e2d03e5d78725fbf3c4 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Thu, 25 Jan 2018 19:17:23 -0600
Subject: [PATCH 3/5] Update unrecognized prop on History component

---
 src/components/History.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/History.js b/src/components/History.js
index edd32b8..06ed8a1 100644
--- a/src/components/History.js
+++ b/src/components/History.js
@@ -10,7 +10,7 @@ const History = ({
   let childNodes = [];
 
   React.Children.forEach(children, child => {
-    const ifEmpty = child.props['data-ifEmpty'];
+    const ifEmpty = child.props['data-ifempty'];
     const action = child.props.action;
     if (action === "back") {
 

From 9ec9742c4f48e630caca0e248e9e43021713ae64 Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Thu, 25 Jan 2018 19:17:54 -0600
Subject: [PATCH 4/5] Update README with prop name changes

---
 README.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 4ed6d0f..c208bf9 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ If `crop` is set to false, then it will not show the crop handles, set `crop` to
 ## History
 
 History component uses `step` and `length` to determine where user is in history, and looks for children with
-`action` prop `back` or `next` - it also uses the `ifEmpty` tag to `disable` or `hide` the button if user is
+`action` prop `back` or `next` - it also uses the `ifempty` tag to `disable` or `hide` the button if user is
 at beginning or end of history.
 
 ```jsx
@@ -64,7 +64,7 @@ at beginning or end of history.
   <button
     action="back"
     onClick={this.onUndo}
-    data-ifEmpty="disable">
+    data-ifempty="disable">
 
     Undo
 
@@ -72,7 +72,7 @@ at beginning or end of history.
   <button
     action="forward"
     onClick={this.onRedo}
-    data-ifEmpty="disable">
+    data-ifempty="disable">
 
     Redo
 
@@ -113,21 +113,21 @@ Filepicker can be used to upload files, but not needed, it is used in the kitche
 
 ## CropMenu
 
-To add crop functionality, you can create a cropmenu, the buttons can be configured to `showOnlyWhen` a value of `croppingIsOff` or `croppingIsOn`.
+To add crop functionality, you can create a cropmenu, the buttons can be configured to `showonlywhen` a value of `croppingIsOff` or `croppingIsOn`.
 The CropMenu is entirely optional, and you can create your own composition for the crop menu if you choose.
 
 ```jsx
     <CropMenu isCropping={crop}>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
         <span className="icon icon-crop"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
         <span className="icon icon-crop"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
         <span className="icon icon-checkmark"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
         <span className="icon icon-cross"/>
       </button>
     </CropMenu>
@@ -148,7 +148,7 @@ The CropMenu is entirely optional, and you can create your own composition for t
       <button
         action="back"
         onClick={this.onUndo}
-        ifEmpty="disable"
+        data-ifempty="disable"
         data-tipsy="Undo"
         className="tipsy tipsy--sw">
         <span className="icon icon-undo2"/>
@@ -156,7 +156,7 @@ The CropMenu is entirely optional, and you can create your own composition for t
       <button
         action="forward"
         onClick={this.onRedo}
-        ifEmpty="disable"
+        data-ifempty="disable"
         data-tipsy="Redo"
         className="tipsy tipsy--sw">
         <span className="icon icon-redo2"/>
@@ -169,16 +169,16 @@ The CropMenu is entirely optional, and you can create your own composition for t
       <span className="icon icon-redo"/>
     </button>
     <CropMenu isCropping={crop}>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOff' onClick={this.onCropStart} data-tipsy="Crop" className="tipsy tipsy--sw">
         <span className="icon icon-crop"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
         <span className="icon icon-crop"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropConfirm} style={{color: 'green'}} data-tipsy="Confirm" className="tipsy tipsy--sw">
         <span className="icon icon-checkmark"/>
       </button>
-      <button disabled={!hasFile} data-showOnlyWhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
+      <button disabled={!hasFile} data-showonlywhen='croppingIsOn' onClick={this.onCropCancel} style={{color: 'red'}} data-tipsy="Cancel" className="tipsy tipsy--sw">
         <span className="icon icon-cross"/>
       </button>
     </CropMenu>

From 9559eda00d975db1ca7f272077c966141cf43e3c Mon Sep 17 00:00:00 2001
From: Alex Autem <autem.alex@gmail.com>
Date: Thu, 25 Jan 2018 19:18:14 -0600
Subject: [PATCH 5/5] Update Kitchen Sink with prop name changes

---
 src/containers/KitchenSink.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/containers/KitchenSink.js b/src/containers/KitchenSink.js
index 787a59f..717bf07 100644
--- a/src/containers/KitchenSink.js
+++ b/src/containers/KitchenSink.js
@@ -211,7 +211,7 @@ export default class KitchenSink extends React.Component {
                 <button
                   action="back"
                   onClick={this.onUndo}
-                  data-ifEmpty="disable"
+                  data-ifempty="disable"
                   data-tipsy="Undo"
                   className="tipsy tipsy--sw">
                   <span className="icon icon-undo2"/>
@@ -219,7 +219,7 @@ export default class KitchenSink extends React.Component {
                 <button
                   action="forward"
                   onClick={this.onRedo}
-                  data-ifEmpty="disable"
+                  data-ifempty="disable"
                   data-tipsy="Redo"
                   className="tipsy tipsy--sw">
                   <span className="icon icon-redo2"/>
@@ -242,18 +242,18 @@ export default class KitchenSink extends React.Component {
               <CropMenu isCropping={crop}>
                 <button
                   disabled={!hasFile}
-                  data-showOnlyWhen='croppingIsOff'
+                  data-showonlywhen='croppingIsOff'
                   onClick={this.onCropStart}
                   data-tipsy="Crop"
                   className="tipsy tipsy--sw">
                   <span className="icon icon-crop"/>
                 </button>
-                <button disabled={!hasFile} showOnlyWhen='croppingIsOn' style={{color: 'cyan'}}>
+                <button disabled={!hasFile} showonlywhen='croppingIsOn' style={{color: 'cyan'}}>
                   <span className="icon icon-crop"/>
                 </button>
                 <button
                   disabled={!hasFile}
-                  data-showOnlyWhen='croppingIsOn'
+                  data-showonlywhen='croppingIsOn'
                   onClick={this.onCropConfirm}
                   style={{color: 'green'}}
                   data-tipsy="Confirm"
@@ -262,7 +262,7 @@ export default class KitchenSink extends React.Component {
                 </button>
                 <button
                   disabled={!hasFile}
-                  data-showOnlyWhen='croppingIsOn'
+                  data-showonlywhen='croppingIsOn'
                   onClick={this.onCropCancel}
                   style={{color: 'red'}}
                   data-tipsy="Cancel"