Tweak notification documentation and add dropdown gif

Author: donnieberg

README.md

@@ -247,7 +247,9 @@ import {SLDSNotification} from 'design-system-react';
 
 ...
 
-<SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
+<SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />
+<SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />
+<SLDSNotification variant='toast' theme='success' icon='notification' content={successMsg} />
 ```
 
 [![browser support](/readme-assets/SLDSNotifications.png)](/readme-assets/SLDSNotifications.png)

demo/code-snippets/SLDSNotification.txt

@@ -1,5 +1,7 @@
 
-<SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
+<SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />
+<SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />
+<SLDSNotification variant='toast' theme='success' icon='notification' content={successMsg} />
 
 <SLDSModal
   isOpen={this.state.modalIsOpen}

demo/pages/HomePage/DropdownBaseSection.jsx

@@ -43,15 +43,13 @@ module.exports = React.createClass( {
 
 
             <div className="slds-p-around--medium">
-
               <h3 id='dropdownSection' className="slds-text-heading--medium slds-truncate">
                 Dropdown Base
               </h3>
 
               <PrismCode className='language-markup'>
                 {require("raw-loader!../../code-snippets/SLDSDropdownPage.txt")}
               </PrismCode>
-
               <div className="slds-p-vertical--large">
                 <SLDSDropdownBase
                     options={[
@@ -76,7 +74,6 @@ module.exports = React.createClass( {
                     onUpdateHighlighted={this.handleOnUpdateHighlighted}
                     />
               </div>
-
             </div>
 
 

demo/pages/HomePage/NotificationSection.jsx

@@ -96,11 +96,12 @@ module.exports = React.createClass( {
           <div className="slds-p-vertical--small">
             <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 className="slds-p-bottom--small">
+                {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={successMsg} onDismiss={this.dismissToast} />}
+              </div>
+              <div className="slds-p-bottom--small">
+                {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' theme='error' icon='warning' texture={true} content={errorMsg} onDismiss={this.dismissToast} />}
+              </div>
             </div>
           </div>