Prompt Support

components/SLDSModal/index.jsx

@@ -42,7 +42,8 @@ const customStyles = {
 module.exports = React.createClass( {
 
   propTypes: {
-    size: React.PropTypes.oneOf(['medium', 'large'])
+    size: React.PropTypes.oneOf(['medium', 'large']),
+    prompt: React.PropTypes.oneOf(['', 'success', 'warning', 'error', 'wrench', 'offline', 'info'])
   },
 
   getDefaultProps () {
@@ -53,6 +54,7 @@ module.exports = React.createClass( {
       footer:[],
       returnFocusTo:null,
       size:'medium',
+      prompt:'', //if prompt !== '', it renders modal as prompt
       directional: false
     };
   },
@@ -106,48 +108,39 @@ module.exports = React.createClass( {
     }
   },
 
+  isPrompt(){
+    return this.props.prompt !== '';
+  },
+
   getModal() {
     const modalClass = {
       'slds-modal': true,
       'slds-fade-in-open':this.state.revealed,
       'slds-modal--large':this.props.size === 'large'
     };
 
-    const footerClass = {
-      'slds-modal__footer': true,
-      'slds-modal__footer--directional': this.props.directional
-    };
-
     return <div
             className={cx(modalClass)}
             style={{pointerEvents:'inherit'}}
-            onClick={this.closeModal}
+            onClick={this.isPrompt() ? undefined : this.closeModal}
           >
           <div
             role='dialog'
             className='slds-modal__container'
             onClick={this.handleModalClick}
             >
-            <div className='slds-modal__header'>
-              <h2 className='slds-text-heading--medium'>{this.props.title}</h2>
-              <SLDSButton
-                label='Close'
-                variant='icon'
-                iconName='close'
-                iconSize='small'
-                className='slds-modal__close'
-                onClick={this.closeModal} />
-            </div>
+
+            {this.headerComponent()}
 
             <div className='slds-modal__content'>
 
               {this.props.children}
 
-            </div>
-            <div className={cx(footerClass)}>
-              {this.props.footer}
+              {this.isPrompt() ? this.props.footer : null}
             </div>
 
+            {this.footerComponent()}
+
           </div>
 
         </div>;
@@ -170,6 +163,47 @@ module.exports = React.createClass( {
     );
   },
 
+  footerComponent() {
+    const footerClass = {
+      'slds-modal__footer': true,
+      'slds-modal__footer--directional': this.props.directional
+    };
+
+    let footer;
+
+    if (!this.isPrompt()) {
+      footer = (<div className={cx(footerClass)}>{this.props.footer}</div>);
+    }
+
+    return footer;
+  },
+
+  headerComponent() {
+    let headingClasses = [], headerClasses = ['slds-modal__header'];
+    let closeButton;
+
+    if (this.isPrompt()) {
+      headerClasses.push(`slds-theme--${this.props.prompt}`);
+      headingClasses.push('slds-text-heading--small');
+    } else {
+      headingClasses.push('slds-text-heading--medium')
+
+      closeButton =(<SLDSButton
+          label='Close'
+          variant='icon'
+          iconName='close'
+          iconSize='small'
+          className='slds-modal__close'
+          onClick={this.closeModal} />);
+    }
+
+    return (
+      <div className={cx(headerClasses)}>
+        <h2 className={cx(headingClasses)}>{this.props.title}</h2>
+        {closeButton}
+     </div>);
+  },
+
   componentDidUpdate (prevProps, prevState) {