Restyle alert vs toast notifications

Author: donnieberg

components/SLDSModal/index.jsx

@@ -115,7 +115,8 @@ module.exports = React.createClass( {
     const modalClass = {
       'slds-modal': true,
       'slds-fade-in-open':this.state.revealed,
-      'slds-modal--large':this.props.size === 'large'
+      'slds-modal--large':this.props.size === 'large',
+      'slds-modal--prompt':this.isPrompt()
     };
 
     return <div
@@ -135,7 +136,6 @@ module.exports = React.createClass( {
 
               {this.props.children}
 
-              {this.isPrompt() ? this.props.footer : null}
             </div>
 
             {this.footerComponent()}
@@ -167,12 +167,13 @@ module.exports = React.createClass( {
 
     const footerClass = {
       'slds-modal__footer': true,
-      'slds-modal__footer--directional': this.props.directional
+      'slds-modal__footer--directional': this.props.directional,
+      'slds-theme--default': this.isPrompt()
     };
 
     const hasFooter = this.props.footer && this.props.footer.length > 0;
 
-    if (!this.isPrompt() && hasFooter ) {
+    if (hasFooter ) {
       footer = (<div className={cx(footerClass)}>{this.props.footer}</div>);
     }
 
@@ -191,6 +192,7 @@ module.exports = React.createClass( {
 
     if (this.isPrompt()) {
       headerClasses.push(`slds-theme--${this.props.prompt}`);
+      headerClasses.push('slds-theme--alert-texture');
       headingClasses.push('slds-text-heading--small');
     } else {
       headingClasses.push('slds-text-heading--medium')

components/SLDSNotification/index.js

@@ -20,17 +20,38 @@ class SLDSNotification extends React.Component {
     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-animated`]: this.props.texture,
-    });
-  }
-
   renderIcon(){
     if(this.props.icon){
-      return <Icon category='utility' name={this.props.icon} size='small' className='slds-m-right--x-small slds-col slds-no-flex' />;
+      let classes = '';
+      if(this.props.variant === 'alert') {
+        classes = 'slds-m-right--x-small';
+      }
+      else if(this.props.variant === 'toast') {
+        classes = 'slds-m-right--small slds-col slds-no-flex';
+      }
+      return <Icon category='utility' name={this.props.icon} size='small' className={classes} />;
+    }
+  }
+
+  renderClose(){
+    let that = this;
+    if(this.props.dismissible){
+      let size = '';
+      if(this.props.variant === 'alert') {
+        size = 'medium';
+      }
+      else if(this.props.variant === 'toast') {
+        size = 'large';
+      }
+      return <SLDSButton
+            label='Dismiss Notification'
+            variant='icon'
+            iconName='close'
+            iconSize={size}
+            inverse={true}
+            className='slds-button slds-notify__close'
+            onClick={that.onDismiss.bind(that)}
+          />
     }
   }
 
@@ -39,28 +60,47 @@ class SLDSNotification extends React.Component {
     this.setState({isOpen:false});
   }
 
+  renderAlertContent(){
+    if(this.props.variant === 'alert'){
+      return(
+          <h2>
+            {this.renderIcon()}
+            {this.props.content}
+          </h2>
+      );
+    }
+  }
+
+  renderToastContent(){
+    if(this.props.variant === 'toast'){
+      return(
+        <section className="notify__content slds-grid">
+          {this.renderIcon()}
+          <div className="slds-col slds-align-middle">
+          <h2 className="slds-text-heading--small ">{this.props.content}</h2>
+          </div>
+        </section>
+      );
+    }
+  }
+
+  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-animated`]: this.props.texture,
+    });
+  }
+
   render(){
     if(this.state.isOpen){
     return(
       <div className="slds-notify-container">
         <div className={this.getClassName()} role="alert">
-          <SLDSButton
-            label='Dismiss Notification'
-            variant='icon'
-            iconName='close'
-            iconSize='large'
-            inverse={true}
-            className='slds-button slds-notify__close'
-            onClick={this.onDismiss.bind(this)}
-          />
-
           <span className="slds-assistive-text">{this.props.theme}</span>
-
-          <section className="notify__content slds-grid">
-            {this.renderIcon()}
-            <h2 className="slds-col slds-align-middle slds-text-heading--small">{this.props.content}</h2>
-          </section>
-
+          {this.renderClose()}
+          {this.renderAlertContent()}
+          {this.renderToastContent()}
         </div>
       </div>
     );
@@ -75,7 +115,13 @@ SLDSNotification.propTypes = {
   variant: React.PropTypes.oneOf(['alert', 'toast']),
   theme: React.PropTypes.oneOf(['success', 'warning', 'error', 'offline']),
   texture: React.PropTypes.bool,
+  dismissible: React.PropTypes.bool,
   onDismiss: React.PropTypes.func,
 };
+
+SLDSNotification.defaultProps = {
+  dismissible: true
+};
+
 module.exports = SLDSNotification;
 

demo/pages/HomePage/ModalSection.jsx

@@ -24,14 +24,19 @@ module.exports = React.createClass( {
 
   getInitialState () {
     return {
-      modalIsOpen: false
+      modalIsOpen: false,
+      promptIsOpen:false
     };
   },
 
   openModal () {
     this.setState({modalIsOpen: true});
   },
 
+  togglePrompt () {
+    this.setState({promptIsOpen: !this.state.promptIsOpen});
+  },
+
   closeModal () {
     this.setState({modalIsOpen: false});
   },
@@ -133,10 +138,7 @@ module.exports = React.createClass( {
         </PrismCode>
 
         <div className='slds-p-vertical--large'>
-          <SLDSButton
-            label='Open Modal'
-            variant='brand'
-            onClick={this.openModal} />
+          <SLDSButton label='Open Modal' variant='brand' onClick={this.openModal} />
           <SLDSModal
             size='medium'
             directional={true}
@@ -150,6 +152,17 @@ module.exports = React.createClass( {
                 onRequestClose={this.closeModal}>
                 {this.getModalContent()}
               </SLDSModal>
+
+          <SLDSButton label='Open Prompt' variant='brand' onClick={this.togglePrompt} />
+          <SLDSModal
+            prompt='error'
+            size='medium'
+            isOpen={this.state.promptIsOpen}
+            title={<span>Service Unavailable</span>}
+            footer={[ <SLDSButton label='ok' variant='neutral' onClick={this.togglePrompt} /> ]}
+            >
+            Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.
+          </SLDSModal>
             </div>
           </div>
     );

demo/pages/HomePage/NotificationSection.jsx

@@ -79,6 +79,7 @@ module.exports = React.createClass( {
   render() {
     let successMsg = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
     let errorMsg = 'There was a problem updating the record.';
+    let offlineMsg = 'Sandbox: TestOrg123';
     let toastStyle = { display: 'inline-block'};
     return (
 
@@ -102,6 +103,9 @@ module.exports = React.createClass( {
               <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 className="slds-p-bottom--small">
+                {this.state.modalIsOpen ? null: <SLDSNotification variant='alert' icon='user' content={offlineMsg} dismissible={false} onDismiss={this.dismissToast} />}
+              </div>
             </div>
           </div>