update the notification and input component

stipsan · Mar 16, 2017 · 209b2b0 · 209b2b0
1 parent ff5715f
commit 209b2b0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/Notification/NotifyMesssage.js b/src/Notification/NotifyMesssage.js
@@ -7,7 +7,7 @@ export default class NotifyMesssage extends Component {
     icon: PropTypes.string,
     isSticky: PropTypes.bool,
     timeout: PropTypes.number,
-    type: PropTypes.oneOf(['info', 'success', 'danger', 'warning', false]),
+    type: PropTypes.oneOf(['info', 'success', 'danger', 'warning', 'primary', false]),
     onClick: PropTypes.func, // eslint-disable-line react/require-default-props
   }
 
@@ -43,6 +43,7 @@ export default class NotifyMesssage extends Component {
       'uk-notification-message-success': type === 'success',
       'uk-notification-message-danger': type === 'danger',
       'uk-notification-message-warning': type === 'warning',
+      'uk-notification-message-primary': type === 'primary',
     })
     const styles = [
       { marginTop: '-64px' },

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,5 @@
 export Button from './Button'
 export Dropdown from './Dropdown'
 export Modal from './Modal'
-export Notify from './Notification'
+export Notification from './Notification'
 export Input from './Input'
diff --git a/src/stories/Notification.js b/src/stories/Notification.js
@@ -63,7 +63,7 @@ class NotificationsContainer extends PureComponent {
   }
 }
 
-// Notification.displayName = 'Notification'
+Notification.displayName = 'Notification'
 
 storiesOf('Notification', module)
   .addWithInfo('Basic Usage', '', () => (
@@ -73,12 +73,29 @@ storiesOf('Notification', module)
   ), { header: false, inline: true, propTables: [Notification] })
   .addWithInfo('Position', '', () => (
     <div className="uk-margin-bottom">
-      <NotificationsContainer position="bottom-center" type="warning" />
-      <NotificationsContainer position="top-right" type="success" />
-      <NotificationsContainer position="top-left" type="danger" />
-      <NotificationsContainer isSticky position="top-right" type="info" />
-      <NotificationsContainer icon="check" position="bottom-right" type="success" />
+      <NotificationsContainer position="top-left" type="info" />
+      <NotificationsContainer position="top-center" type="info" />
+      <NotificationsContainer position="top-right" type="info" />
+      <NotificationsContainer position="bottom-left" type="info" />
+      <NotificationsContainer position="bottom-center" type="info" />
+      <NotificationsContainer position="bottom-right" type="info" />
+    </div>
+  ), { header: false, inline: true, propTables: [Notification] })
+  .addWithInfo('Style', '', () => (
+    <div className="uk-margin-bottom">
+      <NotificationsContainer position="bottom-center" type="info" />
+      <NotificationsContainer position="top-left" type="primary" />
+      <NotificationsContainer position="top-center" type="success" />
+      <NotificationsContainer position="top-right" type="warning" />
+      <NotificationsContainer position="bottom-left" type="danger" />
+    </div>
+  ), { header: false, inline: true, propTables: [Notification] })
+  .addWithInfo('Component options', '', () => (
+    <div className="uk-margin-bottom">
       <NotificationsContainer icon="warning" position="bottom-left" timeout={10000} type="warning" />
       <NotificationsContainer icon="warning" position="top-right" timeout={5000} type="danger" onClick={action('handleClick')} />
+      <NotificationsContainer position="top-center" type="success" />
+      <NotificationsContainer position="top-right" type="warning" />
+      <NotificationsContainer icon="danger" position="top-left" type="danger" />
     </div>
   ), { header: false, inline: true, propTables: [Notification] })