Ivan - Frontend - Create static method for open modal, improve animation, add accessibility [skip ci]

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" role="dialog" aria-labelledby="are-you-sure__header" aria-describedby="are-you-sure__description">
-                <div className="are-you-sure__header">
+                <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>

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>
+          <div className={this.getClass()}>
-              {React.cloneElement(this.props.children, {})}
+              <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,

client/src/app/app.scss

@@ -0,0 +1,12 @@
+@import "../scss/vars";
+
+.application {
+    padding: $half-space;
+
+    &_modal-opened {
+        .application__content {
+            position: fixed;
+            overflow: hidden;
+        }
+    }
+}

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 ModalContainer = require('app/modal-container');
-const store = require('app/store');
-
 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(
+                    ModalContainer.openModal(
-                        ModalActions.openModal(
+                        <AreYouSure description="I confirm I want to perform this action." onYes={()=> {alert('yes');}} />
-                            <AreYouSure description="I confirm I want to perform this action." onYes={()=> {alert('yes');}} />
-                        )
                     );
                 }}>
                     Open Modal

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));
     }
 

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;

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;
+        }
+    }
 }

client/src/core-components/modal.js

@@ -9,11 +9,9 @@ class Modal extends React.Component {
 
     render() {
         return (
-            <div className="modal">
+            <Motion {...this.getAnimations()}>
-                <Motion {...this.getAnimations()}>
+                {this.renderModal.bind(this)}
-                    {this.renderContent.bind(this)}
+            </Motion>
-                </Motion>
-            </div>
         );
     }
 
@@ -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) {
+    renderModal(animation) {
-        const style = {
-            transform: 'scale(' + animation.scale + ')',
-            opacity: animation.fade
-        };
-
         return (
-            <div className="modal__content" style={style}>
+            <div className="modal" style={{opacity: animation.fade}}>
-                {this.props.content}
+                <div className="modal__content" style={{transform: 'scale(' + animation.scale + ')'}}>
+                    {this.props.content}
+                </div>
             </div>
         )
     }

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;
     }
 }

client/src/scss/_base.scss

@@ -5,5 +5,4 @@
 body {
   font-family: Helvetica, sans-serif;
   background-color: $light-grey;
-  padding: $half-space;
 }