Merge pull request #51 from salesforce-ux/notifications

Notifications

Author: donnieberg

components/SLDSModal/index.jsx

@@ -200,6 +200,7 @@ module.exports = React.createClass( {
 
     return (
       <div className={cx(headerClasses)}>
+        {this.props.toast}
         <h2 className={cx(headingClasses)}>{this.props.title}</h2>
         {closeButton}
      </div>);

components/SLDSNotification/index.js

@@ -33,7 +33,7 @@ class SLDSNotification extends React.Component {
       <div className="slds-notify-container">
         <div className={this.getClassName()} role="alert">
           <SLDSButton
-            label='Close'
+            label='Dismiss Notification'
             variant='icon'
             iconName='close'
             iconSize='large'

components/index.js

@@ -20,6 +20,7 @@ import SLDSLookup from './SLDSLookup';
 import SLDSModal from './SLDSModal';
 import SLDSModalTrigger from './SLDSModal/trigger';
 import SLDSIcons from './SLDSIcons';
+import SLDSNotification from './SLDSNotification';
 
 module.exports = {
   SLDSPicklistBase: SLDSPicklistBase,
@@ -31,5 +32,6 @@ module.exports = {
   SLDSLookup: SLDSLookup,
   SLDSModal: SLDSModal,
   SLDSModalTrigger: SLDSModalTrigger,
-  SLDSIcons: SLDSIcons
+  SLDSIcons: SLDSIcons,
+  SLDSNotification: SLDSNotification,
 };

demo/code-snippets/SLDSIcon.txt

@@ -0,0 +1,2 @@
+
+<SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>

demo/code-snippets/SLDSModal.txt

@@ -0,0 +1,16 @@
+
+<SLDSButton
+  label='Open Modal'
+  variant='brand'
+  onClick={this.openModal}
+  />
+<SLDSModal
+  isOpen={this.state.modalIsOpen}
+  title={<span>Lightning Design System: Style with Ease</span>}
+  footer={[
+    <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
+    <SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
+   ]}
+   onRequestClose={this.closeModal}>
+    {this.getModalContent()}
+</SLDSModal>

demo/code-snippets/SLDSNotification.txt

@@ -0,0 +1,15 @@
+
+<SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
+
+<SLDSModal
+  isOpen={this.state.modalIsOpen}
+  toast={<SLDSNotification variant='toast' theme='error' icon='warning' texture={true} content={errorMessage} />}
+  title={<span>Lightning Design System: Style with Ease</span>}
+  footer={[
+    <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
+    <SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
+   ]}
+   onRequestClose={this.closeModal}
+   >
+    {this.getModalContent()}
+</SLDSModal>

demo/pages/HomePage/IconSection.jsx

@@ -42,6 +42,9 @@ module.exports = React.createClass( {
               <h3 className='slds-text-heading--medium slds-truncate'>
                 Utility Icon
               </h3>
+              <PrismCode className='language-markup'>
+                {require('raw-loader!../../code-snippets/SLDSIcon.txt')}
+              </PrismCode>
               <div className='slds-p-vertical--large'>
                 <div className='slds-input-has-icon slds-input-has-icon--left'>
                   <SLDSUtilityIcon name='adduser' className='slds-input__icon slds-icon-text-default'/>

demo/pages/HomePage/ModalSection.jsx

@@ -51,7 +51,7 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
 Utilize our detailed guidelines to confidently design excellent apps that fit right into the Salesforce ecosystem. With the Design System, you get access to all of the Salesforce core visual and interaction design patterns so that you can follow established best practices and build apps that have a consistent look and feel with the Salesforce user experience.
       </p>
 
-        <SLDSLookup 
+        <SLDSLookup
           items={[
             {label:'Paddy\'s Pub'},
             {label:'Tyrell Corp'},
@@ -149,11 +149,9 @@ Utilize our detailed guidelines to confidently design excellent apps that fit ri
               <h3 className='slds-text-heading--medium slds-truncate'>
                 Modal
               </h3>
-{/*
               <PrismCode className='language-markup'>
-                {require("raw-loader!../../code-snippets/SLDSLookupPage.txt")}
+                {require("raw-loader!../../code-snippets/SLDSModal.txt")}
               </PrismCode>
-*/}
 
               <div className='slds-p-vertical--large'>
                 <SLDSButton

demo/pages/HomePage/NotificationSection.jsx

@@ -74,22 +74,51 @@ module.exports = React.createClass( {
 
   render() {
     let message = ['New contact added ', <a href="#" key="0123">Sara Smith</a>];
-    let errorMessage = 'Error';
+    let errorMessage = 'There was a problem updating the record.';
+    let toastStyle = { display: 'inline-block'};
     return (
 
-            <div className='slds-p-around--medium'>
-              <h3 className='slds-text-heading--medium slds-truncate'>
-                Notification
-              </h3>
-              <div className='slds-p-vertical--large'>
-                1. Toasts
-                <div className="demo-only">
-                  <SLDSNotification variant='toast' theme='success' icon='notification' texture={true} content={message} animated={true} />
-                </div>
-
-                2. Modal Toasts
+      <div className='slds-p-around--medium'>
+        <h3 className='slds-text-heading--medium slds-truncate'>
+          Notification
+        </h3>
+        <h4>
+          * All notifications are fixed and centered at the top of the screen.
+        </h4>
+        <PrismCode className='language-markup'>
+          {require('raw-loader!../../code-snippets/SLDSNotification.txt')}
+        </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} animated={true} />}
+            </div>
+          </div>
+
+          <div className="slds-p-vertical--small">
+            2. Modal Toasts
+            <br />
+            <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} />}
+              title={<span>Lightning Design System: Style with Ease</span>}
+              footer={[
+                <SLDSButton key='cancelBtn' label='Cancel' variant='neutral' onClick={this.closeModal} />,
+                  <SLDSButton key='saveBtn' label='Save' variant='brand' onClick={this.handleSubmitModal} />
+                  ]}
+                  onRequestClose={this.closeModal}>
+                  {this.getModalContent()}
+                </SLDSModal>
               </div>
+
             </div>
+          </div>
 
 
     );

demo/pages/HomePage/index.jsx

@@ -72,7 +72,6 @@ module.exports = React.createClass( {
         <main className='stage-main slds-grid slds-wrap slds-grow' role='main'>
           <div className='region region--main slds-grow slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--8-of-12 slds-col-rule--right slds-p-around--large'>
 
-            <NotificationSection/>
 
             <ButtonSection/>
 
@@ -86,6 +85,8 @@ module.exports = React.createClass( {
 
             <ModalSection />
 
+            <NotificationSection/>
+
             <DatePickerSingleSelectSection />
 
             <IconSection />
@@ -94,7 +95,6 @@ module.exports = React.createClass( {
 
             <DropdownBaseSection />
 
-
           </div>
         </main>
     </SLDSGrid>