feat(Alert): restructure Alert architecture, remove AlertMeetingConta…

…iner BREAKING CHANGE: AlertMeetingContainer has been removed Alert is now passed in as children to AlertContainer Alert otherProps now passed to outer div Alert add dismissBtnProps for close button Alert closable prop now defaults to true AlertContainer remove orderNewest prop/logic
momentum-design · May 3, 2019 · 57ad936 · 57ad936
1 parent cc99184
commit 57ad936
Show file tree

Hide file tree

Showing 19 changed files with 653 additions and 410 deletions.
diff --git a/react/src/lib/Alert/examples/Default.js b/react/src/lib/Alert/examples/Default.js
@@ -1,36 +1,41 @@
 import React from 'react';
 import {
+  Alert,
   AlertContainer,
   Button
 } from '@momentum-ui/react';
 export default class AlertDefault extends React.PureComponent {
   state = {
-    alertMessage: 'Who\'s awesome?  You are!'
+    alertMessage: 'Who\'s awesome?  You are!',
+    show: false
   }
   render() {
-    let alertContainer;
     return (
       <section>
         <div>
           <div className='row'>
             <Button
               ariaLabel='Click to Open'
-              onClick={() => alertContainer.info(
-                'Alert',
-                this.state.alertMessage,
-                () => alert('onHide info'),
-                { ariaLabel: 'Close Alert' }
-              )}
+              onClick={() => this.setState({ show: true })}
               children='Info/Default'
               color='primary'
             />
           </div>
         </div>
         <br />
-        <AlertContainer
-          ref={ref => alertContainer = ref}
-          orderNewest={false}
-        />
+        <AlertContainer>
+          <Alert
+            closable
+            title='Alert'
+            message={'Who\'s awesome?  You are!'}
+            dismissBtnProps={{ 
+              onClick: () => this.setState({ show: false }),
+              ariaLabel: 'Close Alert'
+            }}
+            show={this.state.show}
+            type='info'
+          />
+        </AlertContainer>
       </section>
     );
   }

diff --git a/react/src/lib/Alert/examples/Error.js b/react/src/lib/Alert/examples/Error.js
@@ -1,37 +1,41 @@
 import React from 'react';
 import {
+  Alert,
   AlertContainer,
   Button
 } from '@momentum-ui/react';
-export default class AlertError extends React.PureComponent {
+export default class AlertDefault extends React.PureComponent {
   state = {
-    alertMessage: 'Who\'s awesome?  You are!'
+    alertMessage: 'Who\'s awesome?  You are!',
+    show: false
   }
   render() {
-    let alertContainer;
     return (
       <section>
         <div>
           <div className='row'>
-            <br />
             <Button
               ariaLabel='Click to Open'
-              onClick={() => alertContainer.error(
-                'Alert',
-                this.state.alertMessage,
-                () => alert('onHide info'),
-                { ariaLabel: 'Close Alert' }
-              )}
+              onClick={() => this.setState({ show: true })}
               children='Error'
               color='primary'
             />
           </div>
         </div>
         <br />
-        <AlertContainer
-          ref={ref => alertContainer = ref}
-          orderNewest={false}
-        />
+        <AlertContainer>
+          <Alert
+            closable
+            title='Error'
+            message={'Who\'s awesome?  You are!'}
+            dismissBtnProps={{ 
+              onClick: () => this.setState({ show: false }),
+              ariaLabel: 'Close Alert'
+            }}
+            show={this.state.show}
+            type='error'
+          />
+        </AlertContainer>
       </section>
     );
   }

diff --git a/react/src/lib/Alert/examples/Success.js b/react/src/lib/Alert/examples/Success.js
@@ -1,37 +1,41 @@
 import React from 'react';
 import {
+  Alert,
   AlertContainer,
   Button
 } from '@momentum-ui/react';
-export default class AlertSuccess extends React.PureComponent {
+export default class AlertDefault extends React.PureComponent {
   state = {
-    alertMessage: 'Who\'s awesome?  You are!'
+    alertMessage: 'Who\'s awesome?  You are!',
+    show: false
   }
   render() {
-    let alertContainer;
     return (
       <section>
         <div>
           <div className='row'>
-            <br />
             <Button
               ariaLabel='Click to Open'
-              onClick={() => alertContainer.success(
-                'Alert',
-                this.state.alertMessage,
-                () => alert('onHide info'),
-                { ariaLabel: 'Close Alert' }
-              )}
+              onClick={() => this.setState({ show: true })}
               children='Success'
               color='primary'
             />
           </div>
         </div>
         <br />
-        <AlertContainer
-          ref={ref => alertContainer = ref}
-          orderNewest={false}
-        />
+        <AlertContainer>
+          <Alert
+            closable
+            title='Alert'
+            message={'Who\'s awesome?  You are!'}
+            dismissBtnProps={{ 
+              onClick: () => this.setState({ show: false }),
+              ariaLabel: 'Close Alert'
+            }}
+            show={this.state.show}
+            type='success'
+          />
+        </AlertContainer>
       </section>
     );
   }

diff --git a/react/src/lib/Alert/examples/Warning.js b/react/src/lib/Alert/examples/Warning.js
@@ -1,37 +1,41 @@
 import React from 'react';
 import {
+  Alert,
   AlertContainer,
   Button
 } from '@momentum-ui/react';
-export default class AlertWarning extends React.PureComponent {
+export default class AlertDefault extends React.PureComponent {
   state = {
-    alertMessage: 'Who\'s awesome?  You are!'
+    alertMessage: 'Who\'s awesome?  You are!',
+    show: false
   }
   render() {
-    let alertContainer;
     return (
       <section>
         <div>
           <div className='row'>
-            <br />
             <Button
               ariaLabel='Click to Open'
-              onClick={() => alertContainer.warning(
-                'Alert',
-                this.state.alertMessage,
-                () => alert('onHide info'),
-                { ariaLabel: 'Close Alert' }
-              )}
+              onClick={() => this.setState({ show: true })}
               children='Warning'
               color='primary'
             />
           </div>
         </div>
         <br />
-        <AlertContainer
-          ref={ref => alertContainer = ref}
-          orderNewest={false}
-        />
+        <AlertContainer>
+          <Alert
+            closable
+            title='Alert'
+            message={'Who\'s awesome?  You are!'}
+            dismissBtnProps={{ 
+              onClick: () => this.setState({ show: false }),
+              ariaLabel: 'Close Alert'
+            }}
+            show={this.state.show}
+            type='warning'
+          />
+        </AlertContainer>
       </section>
     );
   }

diff --git a/react/src/lib/Alert/index.js b/react/src/lib/Alert/index.js
@@ -7,57 +7,73 @@ import {
   Icon,
 } from '@momentum-ui/react';
 
-const Alert = props => {
-  const {
-    closable,
-    message,
-    onHide,
-    show,
-    title,
-    type,
-    ...otherProps
-  } = props;
+class Alert extends React.PureComponent {
+  render () {
+    const {
+      className,
+      closable,
+      dismissBtnProps,
+      message,
+      show,
+      title,
+      type,
+      ...otherProps
+    } = this.props;
 
-  return (
-    show && (
-      <div className={`md-alert md-alert--${type}`}>
-        <div className='md-alert__icon' />
-        <div className={'md-alert__content'}>
-          <div className='md-alert__title'>{title}</div>
-          <div className='md-alert__message'>{message}</div>
-        </div>
-        {closable &&
-          <div className='md-alert__button'>
-            <Button
-              circle
-              onClick={onHide}
-              size={44}
-              {...otherProps}
-            >
-              <Icon name='cancel_16' />
-            </Button>
+    return (
+      show && (
+        <div 
+          className={
+            'md-alert' + 
+            ` md-alert--${type}` +
+            `${(className && ` ${className}`) || ''}`
+          }
+          {...otherProps}
+        >
+          <div className='md-alert__icon' />
+          <div className='md-alert__content'>
+            <div className='md-alert__title'>
+              {title}
+            </div>
+            <div className='md-alert__message'>
+              {message}
+            </div>
           </div>
-        }
-      </div>
-    )
-  );
-};
+          {closable &&
+            <div className='md-alert__button'>
+              <Button
+                circle
+                size={44}
+                {...dismissBtnProps}
+              >
+                <Icon name='cancel_16' />
+              </Button>
+            </div>
+          }
+        </div>
+      )
+    );
+
+  }
+}
 
 Alert.defaultProps = {
-  closable: false,
+  dismissBtnProps: null,
+  closable: true,
   message: '',
-  onHide: null,
   title: '',
   type: 'info',
 };
 
 Alert.propTypes = {
-  /** @prop To show/hide Close button of the Alert | false */
+  /** @prop Props to be passed to dismiss button | null */
+  dismissBtnProps: PropTypes.object,
+  /** @prop Optional css class string | '' */
+  className: PropTypes.string,
+  /** @prop To show/hide Close button of the Alert | true */
   closable: PropTypes.bool,
   /** @prop Optional Alert message | '' */
   message: PropTypes.string,
-  /** @prop Mandatory handler invoked when the user presses on the Alert's close button or hit's the esc key | null */
-  onHide: PropTypes.func,
   /** @prop Set Alert visibility */
   show: PropTypes.bool.isRequired,
   /** @prop Optional Alert title | '' */