fix: ∆

Pearson-Higher-Ed · Jan 8, 2017 · 5e91d46 · 5e91d46
1 parent 3c66151
commit 5e91d46
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 35 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -6,27 +6,41 @@
     <link rel="stylesheet" type="text/css" href="elements.css">
 </head>
 <body>
+
+    <div id="demo-target1"></div>
+
     <h1>Alerts Demo</h1>
     <p>Styled using the Elements SDK.</p>
-    <h4>Instance 1</h4>
-    <div id="demo-target1"></div>
 
-    <button onclick="buttonHandler('success')">Success Alert!</button>
+    <button onclick="buttonHandler('success')">Success Alert</button>
+    <br />
+    <br />
+    <button onclick="buttonHandler('error')">Error Alert</button>
     <br />
     <br />
-    <button onclick="buttonHandler('error')">Error Alert!</button>
+    <br />
+    <br />
+    <button onclick="buttonHandler('clear')">Clear Alert</button>
 
     <script>
-      function buttonHandler(type){
+      function buttonHandler(type) {
           // To trigger an alert... dispatch 'triggerAlert' with valid type and message
-          document.body.dispatchEvent(new CustomEvent('triggerAlert', {
-              "detail":{
-                "alertList":[{
-                  "alertType"   : type,
-                  "alertMessage": type + ' test message'
-                }]
-              }
-          }));
+
+          if(type == 'success' || type == 'error') {
+            document.body.dispatchEvent(new CustomEvent('triggerAlert', {
+                "detail":{
+                  "alertList":[{
+                    "alertType"   : type,
+                    "alertMessage": type + ' test message'
+                  }]
+                }
+            }));
+          }
+
+          if(type == 'clear') {
+            document.body.dispatchEvent(new CustomEvent('clearAlert'));
+          }
+
         console.log(type + " alertTriggered!")
       }
     </script>

diff --git a/src/js/AlertList.js b/src/js/AlertList.js
@@ -1,5 +1,5 @@
-import React, { Component }      from 'react';
-import Alert                     from './Alert';
+import React, { Component } from 'react';
+import Alert                from './Alert';
 
 
 
@@ -17,7 +17,6 @@ class AlertList extends Component {
 
     this.handleClose  = _handleClose.bind(this);
     this.renderAlert  = _renderAlert.bind(this);
-    this.whichTransitionEvent = _whichTransitionEvent.bind(this);
 
   }
 
@@ -26,6 +25,10 @@ class AlertList extends Component {
     document.body.addEventListener( 'triggerAlert',
       e => this.setState({ alertList:this.state.alertList.concat(e.detail.alertList) })
     );
+
+    document.body.addEventListener( 'clearAlert',
+      () => this.setState({ alertList:[] })
+    );
   }
 
 
@@ -67,30 +70,20 @@ function _renderAlert (alertList) {
 
 }
 
-function _whichTransitionEvent () {
 
-  let transition;
+function _handleClose() {
 
   const transitions = {
     transition: 'animationend',
     WebkitTransition: 'webkitAnimationEnd'
   };
 
-  Object.keys(transitions).forEach(transitionKey => {
+  transitions.map(transitionKey => {
     if (document.getElementById('demo-target1').style[transitionKey] !== undefined) {
-      transition = transitions[transitionKey];
+      transitions[transitionKey];
     }
   });
 
-  return transition;
-
-}
-
-
-function _handleClose() {
-
-  this.whichTransitionEvent();
-
   this.setState({
     closeProp    : 'close-title-animation',
     opacity      : 0

diff --git a/src/js/alert.js b/src/js/alert.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import Icon  from './icon';
 
+
+
 const Alert = (props) => (
   <li
     className = {`pe-alert ${props.closeTitleProp}`}
@@ -24,4 +26,6 @@ const Alert = (props) => (
   </li>
 )
 
+
+
 export default Alert;
diff --git a/src/scss/component-specific.scss b/src/scss/component-specific.scss
@@ -1,12 +1,11 @@
 @import './variables';
-@import '../../node_modules/pearson-elements/scss/elements.scss';
 
 .pe-alert {
   margin-top: 30px;
   list-style:none;
   animation-name: openAlert;
   animation-duration: .3s;
-  background-color: $pe-color-white;
+  background-color: #ffffff;
   padding: $alert-padding;
 }
 
@@ -18,11 +17,11 @@
 
 
 li[id^="alert-error"] {
-  border-top: $alert-border-top $pe-color-strawberry-red;
+  border-top: $alert-border-top #db0020;
 }
 
 li[id^="alert-success"] {
-  border-top: $alert-border-top $pe-color-digital-grass-green;
+  border-top: $alert-border-top #038238;
 }
 
 svg {
@@ -36,11 +35,11 @@ svg {
 }
 
 .error-title {
-  color: $pe-color-strawberry-red;
+  color: #db0020;
 }
 
 .success-title {
-  color: $pe-color-digital-grass-green;
+  color: #038238;
 }
 
 .pe-copy {