Merge pull request #56 from salesforce-ux/notifications

Add animations to notifications: alert

Author: donnieberg

components/SLDSNotification/index.js

@@ -17,14 +17,14 @@ import {Icon} from '../SLDSIcons';
 class SLDSNotification extends React.Component {
   constructor(props){
     super(props);
-    this.state = {isOpen: true};
+    this.state = { isOpen: true };
   }
 
   getClassName() {
     return classNames(this.props.className, 'slds-notify ', {
       [`slds-notify--${this.props.variant}`]: this.props.variant,
       [`slds-theme--${this.props.theme}`]: this.props.theme,
-      [`slds-theme--alert-texture`]: this.props.texture,
+      [`slds-theme--alert-texture-animated`]: this.props.texture,
     });
   }
 

demo/assets/styles/animations.css

@@ -0,0 +1,11 @@
+.slds .slds-theme--alert-texture-animated {
+  background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);
+  background-size: 64px 64px;
+  animation: progress-bar-stripes 2.4s 4 linear;
+}
+
+@keyframes progress-bar-stripes{
+  0% { background-position:0 64px; }
+  100% { background-position:0 0; }
+}

demo/assets/styles/salesforce-lightning-design-system-scoped.css

@@ -4719,10 +4719,13 @@ body {
         color: rgba(255, 255, 255, 0.5); }
       .slds .slds-theme--offline a:not(.slds-button--neutral)[disabled] {
         color: rgba(255, 255, 255, 0.15); }
+
   .slds .slds-theme--alert-texture {
     background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);
     background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.035) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.035) 50%, rgba(0, 0, 0, 0.035) 75%, transparent 75%, transparent);
-    background-size: 64px 64px; }
+    background-size: 64px 64px;
+  }
+
   .slds .slds-theme--inverse-text {
     color: white; }
     .slds .slds-theme--inverse-text a:not(.slds-button--neutral) {

demo/pages/HomePage/NotificationSection.jsx

@@ -77,8 +77,8 @@ module.exports = React.createClass( {
   },
 
   render() {
-    let message = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
-    let errorMessage = 'There was a problem updating the record.';
+    let successMsg = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
+    let errorMsg = 'There was a problem updating the record.';
     let toastStyle = { display: 'inline-block'};
     return (
 
@@ -94,23 +94,32 @@ module.exports = React.createClass( {
         </PrismCode>
         <div className='slds-p-vertical--medium'>
           <div className="slds-p-vertical--small">
-            1. Toasts
-            <br />
-            <div className="demo-only" style={toastStyle}>
-              {this.state.modalIsOpen ? null: <SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} onDismiss={this.dismissToast} animated={true} />}
+            <h4 className="slds-text-heading--small ">Alerts</h4>
+            <div className="demo-only">
+              Base
+              {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />}
+
+              Animated
+              {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />}
             </div>
           </div>
 
           <div className="slds-p-vertical--small">
-            2. Modal Toasts
-            <br />
+            <h4 className="slds-text-heading--small ">Toasts</h4>
+
+            <div className="demo-only" style={toastStyle}>
+              Base
+              {this.state.modalIsOpen ? null: <SLDSNotification variant='toast' theme='success' icon='notification' content={successMsg} onDismiss={this.dismissToast} />}
+            </div>
+
+            <p>Modal Toasts</p>
             <SLDSButton
               label='Open Modal Toast'
               variant='brand'
               onClick={this.openModal} />
             <SLDSModal
               isOpen={this.state.modalIsOpen}
-              toast={<SLDSNotification variant='toast' theme='error' icon='warning' texture={true} content={errorMessage} onDismiss={this.dismissToast} />}
+              toast={<SLDSNotification variant='toast' theme='error' icon='warning' content={errorMsg} onDismiss={this.dismissToast} />}
               title={<span>Lightning Design System: Style with Ease</span>}
               footer={[
                 <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,

index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" type="text/css" href="demo/static/bundle.css">
 
     <link rel="stylesheet" type="text/css" href="demo/assets/styles/salesforce-lightning-design-system-scoped.css">
+    <link rel="stylesheet" type="text/css" href="demo/assets/styles/animations.css">
 
   </head>