From a0b4457676d7ba7fc24d0f14fce5e4c699e875cd Mon Sep 17 00:00:00 2001
From: ivan <ivan@opensupports.com>
Date: Fri, 9 Sep 2016 18:22:17 -0300
Subject: [PATCH] Ivan - Frontend - Create static method for open modal,
 improve animation, add accessibility [skip ci]

---
 client/src/app-components/are-you-sure.js   | 14 +++++---
 client/src/app/App.js                       | 16 +++++++--
 client/src/app/app.scss                     | 12 +++++++
 client/src/app/demo/components-demo-page.js | 10 ++----
 client/src/app/modal-container.js           | 11 ++++++-
 client/src/core-components/button.js        |  5 +++
 client/src/core-components/button.scss      | 36 ++++++++++++---------
 client/src/core-components/modal.js         | 23 ++++++-------
 client/src/core-components/modal.scss       |  2 +-
 client/src/scss/_base.scss                  |  1 -
 10 files changed, 83 insertions(+), 47 deletions(-)
 create mode 100644 client/src/app/app.scss

diff --git a/client/src/app-components/are-you-sure.js b/client/src/app-components/are-you-sure.js
index df76ee79..a1502c09 100644
--- a/client/src/app-components/are-you-sure.js
+++ b/client/src/app-components/are-you-sure.js
@@ -13,23 +13,27 @@ class AreYouSure extends React.Component {
         closeModal: React.PropTypes.func
     };
 
+    componentDidMount() {
+        this.refs.yesButton && this.refs.yesButton.focus();
+    }
+
     render() {
         return (
-            <div className="are-you-sure">
-                <div className="are-you-sure__header">
+            <div className="are-you-sure" role="dialog" aria-labelledby="are-you-sure__header" aria-describedby="are-you-sure__description">
+                <div className="are-you-sure__header" id="are-you-sure__header">
                     {i18n('ARE_YOU_SURE')}
                 </div>
-                <div className="are-you-sure__description">
+                <div className="are-you-sure__description" id="are-you-sure__description">
                     {this.props.description}
                 </div>
                 <div className="are-you-sure__buttons">
                     <div className="are-you-sure__yes-button">
-                        <Button type="secondary" size="small" onClick={this.onYes.bind(this)}>
+                        <Button type="secondary" size="small" onClick={this.onYes.bind(this)} ref="yesButton" tabIndex="2">
                             {i18n('YES')}
                         </Button>
                     </div>
                     <div className="are-you-sure__no-button">
-                        <Button type="link" size="auto" onClick={this.onNo.bind(this)}>
+                        <Button type="link" size="auto" onClick={this.onNo.bind(this)}  tabIndex="2">
                             {i18n('CANCEL')}
                         </Button>
                     </div>
diff --git a/client/src/app/App.js b/client/src/app/App.js
index e35a0be7..00f2efdf 100644
--- a/client/src/app/App.js
+++ b/client/src/app/App.js
@@ -1,5 +1,6 @@
 import React              from 'react';
 import _                  from 'lodash';
+import classNames         from 'classnames';
 import { connect }        from 'react-redux'
 import { browserHistory } from 'react-router';
 
@@ -21,13 +22,24 @@ class App extends React.Component {
 
     render() {
         return (
-          <div>
-              {React.cloneElement(this.props.children, {})}
+          <div className={this.getClass()}>
+              <div className="application__content">
+                {React.cloneElement(this.props.children, {})}
+              </div>
               <ModalContainer />
           </div>
         );
     }
 
+    getClass() {
+        let classes = {
+            'application': true,
+            'application_modal-opened': (this.props.modal.opened)
+        };
+
+        return classNames(classes);
+    }
+
     redirectIfPathIsNotValid(props) {
         const validations = {
             languageChanged: props.config.language !== this.props.config.language,
diff --git a/client/src/app/app.scss b/client/src/app/app.scss
new file mode 100644
index 00000000..feccbaf6
--- /dev/null
+++ b/client/src/app/app.scss
@@ -0,0 +1,12 @@
+@import "../scss/vars";
+
+.application {
+    padding: $half-space;
+
+    &_modal-opened {
+        .application__content {
+            position: fixed;
+            overflow: hidden;
+        }
+    }
+}
\ No newline at end of file
diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js
index 874edabb..04473348 100644
--- a/client/src/app/demo/components-demo-page.js
+++ b/client/src/app/demo/components-demo-page.js
@@ -3,9 +3,7 @@
 const React = require('react');
 const DocumentTitle = require('react-document-title');
 
-const ModalActions = require('actions/modal-actions');
-const store = require('app/store');
-
+const ModalContainer = require('app/modal-container');
 const AreYouSure = require('app-components/are-you-sure');
 
 const Button = require('core-components/button');
@@ -96,10 +94,8 @@ let DemoPage = React.createClass({
             title: 'ModalTrigger',
             render: (
                 <Button onClick={function () {
-                    store.dispatch(
-                        ModalActions.openModal(
-                            <AreYouSure description="I confirm I want to perform this action." onYes={()=> {alert('yes');}} />
-                        )
+                    ModalContainer.openModal(
+                        <AreYouSure description="I confirm I want to perform this action." onYes={()=> {alert('yes');}} />
                     );
                 }}>
                     Open Modal
diff --git a/client/src/app/modal-container.js b/client/src/app/modal-container.js
index 5f6ca33c..c9591c31 100644
--- a/client/src/app/modal-container.js
+++ b/client/src/app/modal-container.js
@@ -2,11 +2,20 @@ import React              from 'react';
 import { connect }        from 'react-redux';
 import keyCode            from 'keycode';
 
+import store from 'app/store';
 import ModalActions from 'actions/modal-actions';
 import Modal from 'core-components/modal';
 
 class ModalContainer extends React.Component {
 
+    static openModal(content) {
+        store.dispatch(
+            ModalActions.openModal(
+                content
+            )
+        );
+    }
+    
     static childContextTypes = {
         closeModal: React.PropTypes.func
     };
@@ -21,7 +30,7 @@ class ModalContainer extends React.Component {
         window.addEventListener('keydown', this.onKeyDown.bind(this));
     }
     
-    componentWillUnMount() {
+    componentWillUnmount() {
         window.removeEventListener('keydown', this.onKeyDown.bind(this));
     }
 
diff --git a/client/src/core-components/button.js b/client/src/core-components/button.js
index 13dc4298..222bedab 100644
--- a/client/src/core-components/button.js
+++ b/client/src/core-components/button.js
@@ -56,6 +56,7 @@ class Button extends React.Component {
 
         props.onClick = callback(this.handleClick.bind(this), this.props.onClick);
         props.className = this.getClass();
+        props.ref = 'button';
 
         delete props.route;
         delete props.iconName;
@@ -91,6 +92,10 @@ class Button extends React.Component {
             this.context.router.push(this.props.route.to);
         }
     }
+
+    focus() {
+        this.refs.button.focus();
+    }
 }
 
 export default Button;
diff --git a/client/src/core-components/button.scss b/client/src/core-components/button.scss
index a446402e..89295775 100644
--- a/client/src/core-components/button.scss
+++ b/client/src/core-components/button.scss
@@ -21,22 +21,6 @@
         background-color: $secondary-blue;
     }
 
-    &_clean {
-        background: none;
-        border: none;
-    }
-
-    &_link {
-        background: none;
-        border: none;
-        color: $dark-grey;
-        text-decoration: underline;
-
-        &:focus {
-            outline: none;
-        }
-    }
-
     &_disabled {
         background-color: #ec9696;
     }
@@ -58,4 +42,24 @@
         width: initial;
         height: initial;
     }
+
+    &_clean {
+        background: none;
+        border: none;
+        width: initial;
+        height: initial;
+    }
+
+    &_link {
+        background: none;
+        border: none;
+        color: $dark-grey;
+        width: initial;
+        height: initial;
+
+        &:focus, &:hover {
+            outline: none;
+            text-decoration: underline;
+        }
+    }
 }
\ No newline at end of file
diff --git a/client/src/core-components/modal.js b/client/src/core-components/modal.js
index bbed32e0..64fb8b15 100644
--- a/client/src/core-components/modal.js
+++ b/client/src/core-components/modal.js
@@ -9,11 +9,9 @@ class Modal extends React.Component {
 
     render() {
         return (
-            <div className="modal">
-                <Motion {...this.getAnimations()}>
-                    {this.renderContent.bind(this)}
-                </Motion>
-            </div>
+            <Motion {...this.getAnimations()}>
+                {this.renderModal.bind(this)}
+            </Motion>
         );
     }
 
@@ -21,7 +19,7 @@ class Modal extends React.Component {
         return {
             defaultStyle: {
                 scale: spring(0.7),
-                fade: spring(0)
+                fade: spring(0.5)
             },
             style: {
                 scale: spring(1),
@@ -30,15 +28,12 @@ class Modal extends React.Component {
         }
     }
 
-    renderContent(animation) {
-        const style = {
-            transform: 'scale(' + animation.scale + ')',
-            opacity: animation.fade
-        };
-
+    renderModal(animation) {
         return (
-            <div className="modal__content" style={style}>
-                {this.props.content}
+            <div className="modal" style={{opacity: animation.fade}}>
+                <div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}}>
+                    {this.props.content}
+                </div>
             </div>
         )
     }
diff --git a/client/src/core-components/modal.scss b/client/src/core-components/modal.scss
index 123bda25..061142c6 100644
--- a/client/src/core-components/modal.scss
+++ b/client/src/core-components/modal.scss
@@ -13,6 +13,6 @@
         background-color: white;
         border-radius: 4px;
         padding: 50px;
-        box-shadow: 0 0 11px white;
+        box-shadow: 0 0 10px white;
     }
 }
\ No newline at end of file
diff --git a/client/src/scss/_base.scss b/client/src/scss/_base.scss
index cba21b56..11a6fffb 100644
--- a/client/src/scss/_base.scss
+++ b/client/src/scss/_base.scss
@@ -5,5 +5,4 @@
 body {
   font-family: Helvetica, sans-serif;
   background-color: $light-grey;
-  padding: $half-space;
 }
\ No newline at end of file