Add notifications:toast variant

Author: donnieberg

components/SLDSButton/index.js

@@ -47,6 +47,7 @@ class Button extends React.Component {
       ['slds-max-small-button--stretch']: this.props.responsive,
       ['slds-not-selected']: notSelected,
       ['slds-is-selected']: isSelected,
+      ['slds-button--icon-inverse']: this.props.inverse,
     });
   }
 

components/SLDSNotification/index.js

@@ -12,8 +12,9 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React from 'react';
 const classNames = require('classnames');
 import SLDSButton from '../SLDSButton';
+import {Icon} from '../SLDSIcons';
 
-class Notification extends React.Component {
+class SLDSNotification extends React.Component {
   constructor(props){
     super(props);
     this.state = {};
@@ -35,22 +36,26 @@ class Notification extends React.Component {
             label='Close'
             variant='icon'
             iconName='close'
+            iconSize='large'
             inverse={true}
-            className='slds-button slds-button--icon-inverse slds-notify__close'
+            className='slds-button slds-notify__close'
             onClick={this.props.onDismiss}
           />
-          <span className="slds-assistive-text">Info</span>
-          <div className="notify__content">
-            <h2 className="slds-text-heading--small">
-            {this.props.content}
-            </h2>
-          </div>
+
+          <span className="slds-assistive-text">{this.props.theme}</span>
+
+          <section className="notify__content slds-grid">
+            <Icon category='utility' name={this.props.icon} size='small' className='slds-m-right--x-small slds-col slds-no-flex' />
+            <h2 className="slds-col slds-align-middle slds-text-heading--small"> {this.props.content} </h2>
+          </section>
+
         </div>
       </div>
+
     );
   }
 }
-Notification.propTypes = {
+SLDSNotification.propTypes = {
 };
-module.exports = Notification;
+module.exports = SLDSNotification;
 

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

@@ -2624,6 +2624,9 @@ body {
     top: 0;
     z-index: 10000;
     text-align: center; }
+  .demo-only .slds-notify-container {
+    position: relative;
+  }
   .slds .slds-notify {
     color: white;
     position: relative;

demo/pages/HomePage/NotificationSection.jsx

@@ -11,6 +11,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React from 'react';
 import SLDSNotification from '../../../components/SLDSNotification';
+import {SLDSButton, SLDSModal} from '../../../components';
 import {default as PrismCode} from "react-prism/lib/PrismCode";
 
 module.exports = React.createClass( {
@@ -20,21 +21,73 @@ module.exports = React.createClass( {
   },
 
   getInitialState () {
-    return {};
+    return {
+      modalIsOpen: false
+    };
+  },
+
+  getModalContent(){
+    return (
+      <div>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+        <p> wjefiowjefio wejoif wejiof jfiowejfo ijw </p>
+      </div>
+    )
+  },
+
+  openModal () {
+    this.setState({modalIsOpen: true});
+  },
+
+  closeModal () {
+    this.setState({modalIsOpen: false});
+  },
+
+  handleSubmitModal () {
+    this.closeModal();
   },
 
   render() {
-    let message = ['Your new contact, ', <a href="#">Sara Smith</a>, ', has been created.'];
+    let message = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
+    let errorMessage = 'Error';
     return (
 
             <div className='slds-p-around--medium'>
               <h3 className='slds-text-heading--medium slds-truncate'>
                 Notification
               </h3>
               <div className='slds-p-vertical--large'>
-                <div className='slds-input-has-icon slds-input-has-icon--left'>
-                  <SLDSNotification variant='alert' theme='success' icon='notification' texture={true} content={message} animated={true} />
+                1. Toasts
+                <div className="demo-only">
+                  <SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
                 </div>
+
+                2. Modal Toasts
               </div>
             </div>