fix: ∆

src/js/AlertList.js

@@ -10,13 +10,12 @@ class AlertList extends Component {
     super(props);
 
     this.state = {
-      opacity      : 1,
-      closeProp    : '',
-      alertList    : []
+      alertList : [],
+      dismissAlert : ''
     };
 
-    this.handleClose  = _handleClose.bind(this);
-    this.renderAlert  = _renderAlert.bind(this);
+    this.renderAlert = _renderAlert.bind(this);
+    this.handleClose = _handleClose.bind(this);
 
   }
 
@@ -37,7 +36,6 @@ class AlertList extends Component {
     const { alertList } = this.state;
     return <ul className={"alertList"}>{alertList.length > 0 ? this.renderAlert(alertList) : null}</ul>;
 
-
   }
 
 
@@ -49,45 +47,37 @@ export default AlertList;
 
 
 
+function _handleClose (currentIndex) {
+
+  // apply style and decrement array...
+  this.setState({
+    dismissAlert:'close-title-animation',
+    alertList:this.state.alertList.filter((e, index, a) => a[index] !== a[currentIndex] )
+  });
+
+  this.state.alertList.forEach(((a, i) => console.log(i + ' ' + a)))
+
+}
+
+
+
 function _renderAlert (alertList) {
 
   const alertsToRender = [];
 
   alertList.forEach((alert, index) => {
     alertsToRender.push(
         <Alert
-          key            = {index}
-          index          = {index}
-          opacity        = {this.state.opacity}
-          closeTitleProp = {this.state.closeProp}
-          alertType      = {alert.alertType}
-          alertMessage   = {alert.alertMessage}
-          handleClose    = {this.handleClose}
+          index        = {index}
+          key          = {index}
+          alertType    = {alert.alertType}
+          alertMessage = {alert.alertMessage}
+          dismissAlert = {this.state.dismissAlert}
+          handleClose  = {this.handleClose}
         />
       )
   })
 
   return alertsToRender;
 
 }
-
-
-function _handleClose() {
-
-  const transitions = {
-    transition: 'animationend',
-    WebkitTransition: 'webkitAnimationEnd'
-  };
-
-  transitions.map(transitionKey => {
-    if (document.getElementById('demo-target1').style[transitionKey] !== undefined) {
-      transitions[transitionKey];
-    }
-  });
-
-  this.setState({
-    closeProp    : 'close-title-animation',
-    opacity      : 0
-  });
-
-};

src/js/alert.js

@@ -2,29 +2,27 @@ import React from 'react';
 import Icon  from './icon';
 
 
-
 const Alert = (props) => (
-  <li
-    className = {`pe-alert ${props.closeTitleProp}`}
-    id        = {`alert-${props.alertType}-${props.index}`}
-    role      = "alert"
-    style     = {{opacity: props.opacity}}
-    >
-
-    <strong className={`pe-label ${props.alertType}-title`}>
-      {props.alertType}
-    </strong>
-
-    <button className="close-title" onClick={props.handleClose} aria-label="Close alert">
-      <Icon name="remove-lg-18" />
-    </button><br/>
-
-    <span className="pe-copy">
-      {props.alertMessage}
-    </span>
-
-  </li>
-)
+      <li
+        className = {`pe-alert ${props.dismissAlert}`}
+        id        = {`alert-${props.alertType}-${props.index}`}
+        role      = "alert"
+        >
+
+        <strong className={`pe-label ${props.alertType}-title`}>
+          {props.alertType}
+        </strong>
+
+        <button className="close-title" onClick={() => props.handleClose(props.index)} aria-label="Close alert">
+          <Icon name="remove-lg-18" />
+        </button><br/>
+
+        <span className="pe-copy">
+          {props.alertMessage}
+        </span>
+
+      </li>
+    )
 
 
 

src/scss/component-specific.scss

@@ -13,6 +13,7 @@
   position:fixed;
   width:35%;
   right:0;
+  top:0;
   margin-right:2%;
 }
 
@@ -31,7 +32,7 @@ svg {
 }
 
 @keyframes openAlert {
-  0% { top: 0px; }
+  0% { top: 200px; }
   100% { top: 0px; }
 }