initial transition of notification component + established custom pro…

…perties for animation speeds to be more easily accessible via JS + updated documentation

docs/conventions.md

@@ -58,6 +58,7 @@ To help ensure this, the following conventions have been employed:
 * The full breadth of Less's functionality is permissible.
 * All external borders (parent level components within a view) should be the normal border color
 * All internal borders should be either muted or light (depending on the application)
+* When utilizing `CSSTransitionGroup`, styling of this wrapper should be housed within the rendered child's stylesheet
 
 ### Other Conventions
 Above are the main points, but additional structural and styling conventions of the stylesheets themselves are enforced through linting.

src/modules/app/components/nav.jsx

@@ -1,5 +1,5 @@
 import React, { Component, PropTypes } from 'react';
-
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import classnames from 'classnames';
 
 import Link from 'modules/link/components/link';
@@ -22,10 +22,21 @@ export default class Nav extends Component {
     super(props);
 
     this.state = {
-      isNotificationsVisible: false
+      isNotificationsVisible: false,
+      notificationIconXOffset: null,
+      notificationIconYOffset: null
     };
 
     this.collapseFooter = this.collapseFooter.bind(this);
+    this.setNotificationIconOffeset = this.setNotificationIconOffeset.bind(this);
+  }
+
+  componentDidMount() {
+    this.setNotificationIconOffeset();
+  }
+
+  setNotificationIconOffeset() {
+    console.log('### setNotificationIconOffeset -- ', this.notificationBell);
   }
 
   collapseFooter() {
@@ -38,6 +49,9 @@ export default class Nav extends Component {
     const p = this.props;
     const s = this.state;
 
+    const animationInSpeed = parseInt(window.getComputedStyle(document.body).getPropertyValue('--animation-speed-fast'), 10);
+    const animationOutSpeed = parseInt(window.getComputedStyle(document.body).getPropertyValue('--animation-speed-very'), 10);
+
     return (
       <nav className={`app-nav ${p.className ? p.className : ''}`}>
         <div ref={p.navRef && p.navRef} />
@@ -59,7 +73,10 @@ export default class Nav extends Component {
             className="unstyled button-notifications app-nav-link"
             onClick={() => this.setState({ isNotificationsVisible: !s.isNotificationsVisible })}
           >
-            <i className="fa fa-bell-o" />
+            <i
+              ref={(notificationBell) => { this.notificationBell = notificationBell; }}
+              className="fa fa-bell-o"
+            />
           </button>
         }
         <Link
@@ -160,9 +177,16 @@ export default class Nav extends Component {
             Sign Up / Login
           </Link>
         }
-        {p.logged && s.isNotificationsVisible &&
-          <NotificationsContainer />
-        }
+        <CSSTransitionGroup
+          id="transition_notifications_view"
+          transitionName="notifications"
+          transitionEnterTimeout={animationInSpeed}
+          transitionLeaveTimeout={animationOutSpeed}
+        >
+          {p.logged && s.isNotificationsVisible &&
+            <NotificationsContainer />
+          }
+        </CSSTransitionGroup>
       </nav>
     );
   }

src/modules/app/less/animations.less

@@ -11,6 +11,15 @@
 @animation-speed-fast: 300ms;
 @animation-speed-very-fast: 200ms;
 
+// For accessibility w/in JS
+body {
+  --animation-speed-very-fast: @animation-speed-very-fast;
+  --animation-speed-slow: @animation-speed-slow;
+  --animation-speed-normal: @animation-speed-normal;
+  --animation-speed-fast: @animation-speed-fast;
+  --animation-speed-very-fast: @animation-speed-very-fast;
+}
+
 @animation-direction-up: 'up';
 @animation-direction-right: 'right';
 @animation-direction-down: 'down';

src/modules/notifications/less/notifications-view.less

@@ -1,10 +1,42 @@
-#notifications_view {
-  .border(true);
-
-  background-color: @color-white;
+#transition_notifications_view {
   bottom: 0;
-  margin: 0;
   position: absolute;
   transform: translateY(100%);
-  width: 300px;
+
+  #notifications_view {
+    .border(true);
+
+    background-color: @color-white;
+    margin: 0;
+    width: 300px;
+
+    &.notifications-enter {
+      opacity: 0;
+
+      &.notifications-enter-active {
+        opacity: 1;
+        transition-duration: @animation-speed-fast;
+        transition-property: opacity;
+        transition-timing-function: @animation-default-type;
+      }
+    }
+
+    &.notifications-leave {
+      opacity: 1;
+
+      &.notifications-leave-active {
+        opacity: 0;
+        transition-duration: @animation-speed-very-fast;
+        transition-property: opacity;
+        transition-timing-function: @animation-default-type;
+      }
+    }
+
+    h3 {
+      .border(true, @border-bottom);
+      .font-color-dark();
+
+      padding-left: 1em;
+    }
+  }
 }