Upgrade/468 input (#475)

* update notification and input component * update input and Notification component * update the notification and input component
stipsan · Mar 16, 2017 · 0190e78 · 0190e78
1 parent 932f7b3
commit 0190e78
Show file tree

Hide file tree

Showing 13 changed files with 71 additions and 51 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -56,7 +56,7 @@ function loadStories() {
   require('../src/stories/Button')
   require('../src/stories/Dropdown')
   require('../src/stories/Modal')
-  require('../src/stories/Notify')
+  require('../src/stories/Notification')
   require('../src/stories/Input')
 }
 

diff --git a/.storybook/uikit.less b/.storybook/uikit.less
@@ -18,7 +18,7 @@
 // uikit-react deps
 //@import "../less/select.less";
 
-@icon-font-path: "~uikit/dist/fonts";
+//@icon-font-path: "~uikit/dist/fonts";
 
 // Storybook specific
 .tm-navbar {

diff --git a/src/Input.js b/src/Input.js
@@ -21,7 +21,6 @@ const Input = ({
     'uk-form-success': success,
     'uk-form-width-large': width === 'large',
     'uk-form-width-medium': width === 'medium',
-    'uk-form-width-mini': width === 'mini',
     'uk-form-width-small': width === 'small',
     'uk-width-1-1': width === 'full',
   })
@@ -50,7 +49,7 @@ Input.propTypes = {
   large: PropTypes.bool,
   small: PropTypes.bool,
   success: PropTypes.bool,
-  width: PropTypes.oneOf(['full', 'large', 'medium', 'small', 'mini', false]),
+  width: PropTypes.oneOf(['full', 'large', 'medium', 'small', false]),
 }
 
 Input.defaultProps = {

diff --git a/src/Notify/NotifyMesssage.js → src/Notification/NotifyMesssage.js b/src/Notify/NotifyMesssage.js → 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
   }
 
@@ -38,11 +38,12 @@ export default class NotifyMesssage extends Component {
 
   render() {
     const { children, type, icon, onClick } = this.props
-    const className = cx('uk-notify-message', {
-      'uk-notify-message-info': type === 'info',
-      'uk-notify-message-success': type === 'success',
-      'uk-notify-message-danger': type === 'danger',
-      'uk-notify-message-warning': type === 'warning',
+    const className = cx('uk-notification-message', {
+      'uk-notification-message-info': type === 'info',
+      '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/Notify/__tests__/NotifyMessage-test.js → ...ification/__tests__/NotifyMessage-test.js b/src/Notify/__tests__/NotifyMessage-test.js → ...ification/__tests__/NotifyMessage-test.js
diff --git a/.../__snapshots__/NotifyMessage-test.js.snap → .../__snapshots__/NotifyMessage-test.js.snap b/.../__snapshots__/NotifyMessage-test.js.snap → .../__snapshots__/NotifyMessage-test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`NotifyMesssage should render correctly 1`] = `
 <div
-  className="uk-notify-message"
+  className="uk-notification-message"
   style={
     Object {
       "marginTop": "-64px",

diff --git a/..._tests__/__snapshots__/index-test.js.snap → ..._tests__/__snapshots__/index-test.js.snap b/..._tests__/__snapshots__/index-test.js.snap → ..._tests__/__snapshots__/index-test.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Notify should render correctly 1`] = `
+exports[`Notification should render correctly 1`] = `
 <Portal
   isOpened={true}
   onClose={[Function]}
 >
   <div
-    className="uk-notify uk-notify-top-center"
+    className="uk-notification uk-notification-top-center"
   >
     <div
-      className="uk-notify-message uk-notify-message-warning"
+      className="uk-notification-message uk-notification-message-warning"
       style={
         Object {
           "marginTop": "-64px",

diff --git a/src/Notify/__tests__/index-test.js → src/Notification/__tests__/index-test.js b/src/Notify/__tests__/index-test.js → src/Notification/__tests__/index-test.js
@@ -1,16 +1,16 @@
 import renderer from 'react-test-renderer'
 
-import Notify from '../index'
+import Notification from '../index'
 
 jest.mock('react-portal', () => 'Portal')
 
-describe('Notify', () => {
+describe('Notification', () => {
   const defaultProps = {
     notifications: [{ id: 1, type: 'warning', message: 'Notification #1', icon: 'check' }],
     position: 'top-center',
   }
   const component = renderer.create(
-    <Notify {...defaultProps} />
+    <Notification {...defaultProps} />
   )
   it('should render correctly', () => {
     expect(component.toJSON()).toMatchSnapshot()

diff --git a/src/Notify/index.js → src/Notification/index.js b/src/Notify/index.js → src/Notification/index.js
@@ -4,15 +4,15 @@ import cx from 'classnames'
 
 import NotifyMesssage from './NotifyMesssage'
 
-export default class Notify extends Component {
+export default class Notification extends Component {
   static propTypes = {
     notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
     position: PropTypes.string,
   }
 
   static defaultProps = {
     type: 'primary',
-    className: 'uk-notify',
+    className: 'uk-notification',
     position: 'top-center',
     notifications: [],
   }
@@ -33,13 +33,13 @@ export default class Notify extends Component {
       notifications,
     } = this.props
 
-    const className = cx('uk-notify', {
-      'uk-notify-top-center': position === 'top-center',
-      'uk-notify-top-left': position === 'top-left',
-      'uk-notify-top-right': position === 'top-right',
-      'uk-notify-bottom-center': position === 'bottom-center',
-      'uk-notify-bottom-left': position === 'bottom-left',
-      'uk-notify-bottom-right': position === 'bottom-right',
+    const className = cx('uk-notification', {
+      'uk-notification-top-center': position === 'top-center',
+      'uk-notification-top-left': position === 'top-left',
+      'uk-notification-top-right': position === 'top-right',
+      'uk-notification-bottom-center': position === 'bottom-center',
+      'uk-notification-bottom-left': position === 'bottom-left',
+      'uk-notification-bottom-right': position === 'bottom-right',
     })
     return (
       <Portal

diff --git a/src/__tests__/__snapshots__/Input-test.js.snap b/src/__tests__/__snapshots__/Input-test.js.snap
@@ -69,7 +69,7 @@ exports[`Input renders correctly 11`] = `
 
 exports[`Input renders correctly 12`] = `
 <input
-  className="uk-input  uk-form-width-mini"
+  className="uk-input "
 />
 `;
 

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 './Notify'
+export Notification from './Notification'
 export Input from './Input'
diff --git a/src/stories/Input.js b/src/stories/Input.js
@@ -13,50 +13,48 @@ storiesOf('Input', module)
       <Input placeholder="Text input" /> &nbsp;
       <Input danger defaultValue="danger" /> &nbsp;
       <Input success defaultValue="success" /> &nbsp;
-      <Input blank placeholder="blank" />
+      <Input blank placeholder="blank" />&nbsp;
+      <Input disabled placeholder="disabled" />&nbsp;
     </form>
   ), { header: false, inline: true, propTables: [Input], mtrcConf: { // eslint-disable-line
     a: ({ href, children }) => <a href={href} target="_blank">{children}</a>, // eslint-disable-line
   } })
   .addWithInfo('Size modifiers', '', () => (
     <form className="uk-margin-bottom uk-form">
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input large placeholder="large" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input placeholder="default" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input small placeholder="small" />
       </div>
     </form>
   ), { header: false, inline: true })
   .addWithInfo('Width modifiers', '', () => (
     <form className="uk-margin-bottom uk-form">
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input placeholder="full" width="full" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input placeholder="large" width="large" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input placeholder="medium" width="medium" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input placeholder="small" width="small" />
       </div>
-      <div className="uk-form-row">
-        <Input placeholder="mini" width="mini" />
-      </div>
     </form>
   ), { header: false, inline: true })
   .addWithInfo('Form and icons', '', () => (
     <form className="uk-margin-bottom uk-form">
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input icon="calendar" /> &nbsp;
         <Input flip icon="clock-o" />
       </div>
-      <div className="uk-form-row">
+      <div className="uk-margin">
         <Input icon="spinner" /> &nbsp;
         <Input flip icon="refresh" />
       </div>

diff --git a/src/stories/Notify.js → src/stories/Notification.js b/src/stories/Notify.js → src/stories/Notification.js
@@ -1,5 +1,5 @@
 import { storiesOf, action } from '@kadira/storybook'
-import { Notify, Button } from 'uikit-react'
+import { Notification, Button } from 'uikit-react'
 import { PureComponent, PropTypes } from 'react'
 
 class NotificationsContainer extends PureComponent {
@@ -55,25 +55,47 @@ class NotificationsContainer extends PureComponent {
         {this.props.onClick ? '- click' : ''}
         {this.props.timeout ? '- timeout' : ''}
       </Button>
-      <Notify
+      <Notification
         notifications={notifications}
         position={position}
       />
     </div>)
   }
 }
 
-storiesOf('Notify', module)
+Notification.displayName = 'Notification'
+
+storiesOf('Notification', module)
   .addWithInfo('Basic Usage', '', () => (
     <div className="uk-margin-bottom">
       <NotificationsContainer type="info" />
-      <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" />
+    </div>
+  ), { header: false, inline: true, propTables: [Notification] })
+  .addWithInfo('Position', '', () => (
+    <div className="uk-margin-bottom">
+      <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: [Notify] })
+  ), { header: false, inline: true, propTables: [Notification] })