teamleader-ui - npm Package Compare versions

Comparing version 0.0.19-alpha to 0.0.21-alpha

components/button/Button.js

@@ -19,2 +19,4 @@ import React, { Component } from 'react';
     label: PropTypes.string,
+    large: PropTypes.bool,
+    medium: PropTypes.bool,
     onMouseLeave: PropTypes.func,
@@ -31,3 +33,5 @@ onMouseUp: PropTypes.func,
       secondary: PropTypes.string,
-      toggle: PropTypes.string,
+      small: PropTypes.string,
+      medium: PropTypes.string,
+      large: PropTypes.string,
     }),
@@ -42,2 +46,5 @@ type: PropTypes.string,
     processing: false,
+    small: true,
+    medium: false,
+    large: false,
     type: 'button',
@@ -65,2 +72,11 @@ };
 
+  getSize = () => {
+    if (this.props.medium) {
+      return 'medium';
+    } else if (this.props.large) {
+      return 'large';
+    }
+    return 'small';
+  };
+
   handleMouseUp = (event) => {
@@ -93,3 +109,3 @@ this.buttonNode.blur();
 
-    const rest = omit(others, [ 'primary', 'bordered' ]);
+    const rest = omit(others, [ 'primary', 'bordered', 'small', 'medium', 'large' ]);
 
@@ -100,2 +116,3 @@ const element = href ? 'a' : 'button';
     const state = this.getState();
+    const size = this.getSize();
 
@@ -108,3 +125,4 @@ const classes = classnames(
         [theme[ state ]]: theme[ state ],
-        [theme.iconOnly]: !this.props.label && !this.props.children,
+        [theme[ size ]]: theme[ size ],
+        [theme.iconOnly]: !label && !children,
       },
@@ -111,0 +129,0 @@ className

components/button/IconButton.js

@@ -7,2 +7,3 @@ import React, { Component } from 'react';
 import InjectFontIcon from '../font_icon/FontIcon';
+import { omit } from 'lodash';
 
@@ -29,4 +30,4 @@ const factory = (FontIcon) => {
         icon: PropTypes.string,
+        iconOnly: PropTypes.string,
         inverse: PropTypes.string,
-        mini: PropTypes.string,
         neutral: PropTypes.string,
@@ -81,12 +82,19 @@ primary: PropTypes.string,
 
+      const rest = omit(others, [ 'small', 'medium', 'large' ]);
+
       const element = href ? 'a' : 'button';
       const level = this.getLevel();
 
-      const classes = classnames([ theme.toggle ], {
-        [theme[ level ]]: neutral,
-        [theme.inverse]: inverse,
-      }, className);
+      const classes = classnames(
+        [ theme.iconOnly ],
+        [ theme.toggle ],
+        {
+          [theme[ level ]]: neutral,
+          [theme.inverse]: inverse,
+        },
+        className
+      );
 
       const props = {
-        ...others,
+        ...rest,
         href,
@@ -93,0 +101,0 @@ ref: (node) => {

components/dialog/Dialog.js

@@ -9,5 +9,6 @@ import React, { Component } from 'react';
 import InjectButton from '../button/Button.js';
+import InjectIconButton from '../button/IconButton';
 import InjectOverlay from '../overlay/Overlay';
 
-const factory = (Overlay, Button) => {
+const factory = (Overlay, Button, IconButton) => {
   class Dialog extends Component {
@@ -55,53 +56,71 @@ static propTypes = {
     render () {
-      const actions = this.props.actions.map((action, idx) => {
+      const {
+        actions,
+        active,
+        backdrop,
+        children,
+        className,
+        onCloseClick,
+        onEscKeyDown,
+        onOverlayClick,
+        onOverlayMouseDown,
+        onOverlayMouseMove,
+        onOverlayMouseUp,
+        theme,
+        title,
+        type,
+      } = this.props;
+
+      const actionButtons = actions.map((action, idx) => {
         const className = classnames(
-          this.props.theme.button,
-          { [action.className]: action.className }
+          theme.button,
+          {
+            [action.className]: action.className,
+          }
         );
-        return <Button key={idx} {...action} className={className} />; // eslint-disable-line
+        return <Button key={idx} {...action} className={className} medium />; // eslint-disable-line
       });
 
-      const className = classnames(
+      const dialogClassNames = classnames(
         [
-          this.props.theme.dialog,
-          this.props.theme[this.props.type],
+          theme.dialog,
+          theme[type],
         ],
         {
-          [this.props.theme.active]: this.props.active,
+          [theme.active]: active,
         },
-        this.props.className
+        className
       );
 
       return (
-        <Portal className={this.props.theme.wrapper}>
+        <Portal className={theme.wrapper}>
           <Overlay
-            active={this.props.active}
-            backdrop={this.props.backdrop}
-            className={this.props.theme.overlay}
-            onClick={this.props.onOverlayClick}
-            onEscKeyDown={this.props.onEscKeyDown}
-            onMouseDown={this.props.onOverlayMouseDown}
-            onMouseMove={this.props.onOverlayMouseMove}
-            onMouseUp={this.props.onOverlayMouseUp}
-            theme={this.props.theme}
+            active={active}
+            backdrop={backdrop}
+            className={theme.overlay}
+            onClick={onOverlayClick}
+            onEscKeyDown={onEscKeyDown}
+            onMouseDown={onOverlayMouseDown}
+            onMouseMove={onOverlayMouseMove}
+            onMouseUp={onOverlayMouseUp}
+            theme={theme}
             themeNamespace="overlay"
-
           />
           <div
             data-teamleader-ui="dialog"
-            className={className}
+            className={dialogClassNames}
           >
-            <header className={this.props.theme.header}>
-              {this.props.title
-                ? <h6 className={this.props.theme.title}>{this.props.title}</h6>
+            <header className={theme.header}>
+              {title
+                ? <h6 className={theme.title}>{title}</h6>
                 : null
               }
-              <Button icon="close" className={this.props.theme.close} onMouseUp={this.props.onCloseClick} />
+              <IconButton icon="close" className={theme.close} onMouseUp={onCloseClick} />
             </header>
-            <section role="body" className={this.props.theme.body}>
-              {this.props.children}
+            <section role="body" className={theme.body}>
+              {children}
             </section>
-            {actions.length
-              ? <nav role="navigation" className={this.props.theme.navigation}>
-                {actions}
+            {actionButtons.length
+              ? <nav role="navigation" className={theme.navigation}>
+                {actionButtons}
               </nav>
@@ -119,5 +138,5 @@ : null
 
-const Dialog = factory(InjectOverlay, InjectButton);
+const Dialog = factory(InjectOverlay, InjectButton, InjectIconButton);
 export default themr(DIALOG)(Dialog);
 export { Dialog };
 export { factory as dialogFactory };

components/dialog/index.js

@@ -5,6 +5,6 @@ import { themr } from 'react-css-themr';
 import { Overlay } from '../overlay';
-import { Button } from '../button';
+import { Button, IconButton } from '../button';
 import theme from './theme.css';
 
-const Dialog = dialogFactory(Overlay, Button);
+const Dialog = dialogFactory(Overlay, Button, IconButton);
 const ThemedDialog = themr(DIALOG, theme)(Dialog);
@@ -11,0 +11,0 @@

components/identifiers.js

@@ -8,1 +8,2 @@ export const BUTTON = 'TLButton';
 export const POPOVER_HORIZONTAL = 'TLPopoverHorizontal';
+export const TOAST = 'TLToast';

components/index.js

@@ -8,2 +8,3 @@ import Button, { IconButton } from './button';
 import { PopoverHorizontal, PopoverVertical } from './popover';
+import { Toast } from './toast';
 
@@ -23,2 +24,3 @@ export {
   PopoverVertical,
+  Toast,
 };

lib/button/Button.js

@@ -42,10 +42,14 @@ import _extends from 'babel-runtime/helpers/extends';
       return (_this4 = _this).__getState__REACT_HOT_LOADER__.apply(_this4, arguments);
-    }, _this.handleMouseUp = function () {
+    }, _this.getSize = function () {
       var _this5;
 
-      return (_this5 = _this).__handleMouseUp__REACT_HOT_LOADER__.apply(_this5, arguments);
-    }, _this.handleMouseLeave = function () {
+      return (_this5 = _this).__getSize__REACT_HOT_LOADER__.apply(_this5, arguments);
+    }, _this.handleMouseUp = function () {
       var _this6;
 
-      return (_this6 = _this).__handleMouseLeave__REACT_HOT_LOADER__.apply(_this6, arguments);
+      return (_this6 = _this).__handleMouseUp__REACT_HOT_LOADER__.apply(_this6, arguments);
+    }, _this.handleMouseLeave = function () {
+      var _this7;
+
+      return (_this7 = _this).__handleMouseLeave__REACT_HOT_LOADER__.apply(_this7, arguments);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -77,2 +81,12 @@ }
   }, {
+    key: '__getSize__REACT_HOT_LOADER__',
+    value: function __getSize__REACT_HOT_LOADER__() {
+      if (this.props.medium) {
+        return 'medium';
+      } else if (this.props.large) {
+        return 'large';
+      }
+      return 'small';
+    }
+  }, {
     key: '__handleMouseUp__REACT_HOT_LOADER__',
@@ -97,3 +111,3 @@ value: function __handleMouseUp__REACT_HOT_LOADER__(event) {
       var _classnames,
-          _this7 = this;
+          _this8 = this;
 
@@ -111,3 +125,3 @@ var _props = this.props,
 
-      var rest = omit(others, ['primary', 'bordered']);
+      var rest = omit(others, ['primary', 'bordered', 'small', 'medium', 'large']);
 
@@ -118,4 +132,5 @@ var element = href ? 'a' : 'button';
       var state = this.getState();
+      var size = this.getSize();
 
-      var classes = classnames(theme.button, (_classnames = {}, _defineProperty(_classnames, theme[level], theme[level]), _defineProperty(_classnames, theme[shape], theme[shape]), _defineProperty(_classnames, theme[state], theme[state]), _defineProperty(_classnames, theme.iconOnly, !this.props.label && !this.props.children), _classnames), className);
+      var classes = classnames(theme.button, (_classnames = {}, _defineProperty(_classnames, theme[level], theme[level]), _defineProperty(_classnames, theme[shape], theme[shape]), _defineProperty(_classnames, theme[state], theme[state]), _defineProperty(_classnames, theme[size], theme[size]), _defineProperty(_classnames, theme.iconOnly, !label && !children), _classnames), className);
 
@@ -125,3 +140,3 @@ var props = _extends({}, rest, {
         ref: function ref(node) {
-          _this7.buttonNode = node;
+          _this8.buttonNode = node;
         },
@@ -138,7 +153,7 @@ className: classes,
           fileName: _jsxFileName,
-          lineNumber: 122
+          lineNumber: 140
         }
       }) : null, processing ? React.createElement(FontIcon, { className: theme.icon, value: 'spinner', __source: {
           fileName: _jsxFileName,
-          lineNumber: 123
+          lineNumber: 141
         }
@@ -160,2 +175,4 @@ }) : null, label, children);
   label: PropTypes.string,
+  large: PropTypes.bool,
+  medium: PropTypes.bool,
   onMouseLeave: PropTypes.func,
@@ -172,3 +189,5 @@ onMouseUp: PropTypes.func,
     secondary: PropTypes.string,
-    toggle: PropTypes.string
+    small: PropTypes.string,
+    medium: PropTypes.string,
+    large: PropTypes.string
   }),
@@ -182,2 +201,5 @@ type: PropTypes.string
   processing: false,
+  small: true,
+  medium: false,
+  large: false,
   type: 'button'
@@ -184,0 +206,0 @@ };

lib/button/IconButton.js

@@ -16,2 +16,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import InjectFontIcon from '../font_icon/FontIcon';
+import { omit } from 'lodash';
 
@@ -90,8 +91,10 @@ var factory = function factory(FontIcon) {
 
+        var rest = omit(others, ['small', 'medium', 'large']);
+
         var element = href ? 'a' : 'button';
         var level = this.getLevel();
 
-        var classes = classnames([theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+        var classes = classnames([theme.iconOnly], [theme.toggle], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
 
-        var props = _extends({}, others, {
+        var props = _extends({}, rest, {
           href: href,
@@ -111,3 +114,3 @@ ref: function ref(node) {
             fileName: _jsxFileName,
-            lineNumber: 102
+            lineNumber: 110
           }
@@ -138,4 +141,4 @@ }) : icon;
       icon: PropTypes.string,
+      iconOnly: PropTypes.string,
       inverse: PropTypes.string,
-      mini: PropTypes.string,
       neutral: PropTypes.string,
@@ -142,0 +145,0 @@ primary: PropTypes.string,

lib/dialog/Dialog.js

@@ -17,5 +17,6 @@ import _extends from 'babel-runtime/helpers/extends';
 import InjectButton from '../button/Button.js';
+import InjectIconButton from '../button/IconButton';
 import InjectOverlay from '../overlay/Overlay';
 
-var factory = function factory(Overlay, Button) {
+var factory = function factory(Overlay, Button, IconButton) {
   var Dialog = function (_Component) {
@@ -33,9 +34,24 @@ _inherits(Dialog, _Component);
       value: function render() {
-        var _this2 = this;
+        var _props = this.props,
+            actions = _props.actions,
+            active = _props.active,
+            backdrop = _props.backdrop,
+            children = _props.children,
+            className = _props.className,
+            onCloseClick = _props.onCloseClick,
+            onEscKeyDown = _props.onEscKeyDown,
+            onOverlayClick = _props.onOverlayClick,
+            onOverlayMouseDown = _props.onOverlayMouseDown,
+            onOverlayMouseMove = _props.onOverlayMouseMove,
+            onOverlayMouseUp = _props.onOverlayMouseUp,
+            theme = _props.theme,
+            title = _props.title,
+            type = _props.type;
 
-        var actions = this.props.actions.map(function (action, idx) {
-          var className = classnames(_this2.props.theme.button, _defineProperty({}, action.className, action.className));
-          return React.createElement(Button, _extends({ key: idx }, action, { className: className, __source: {
+
+        var actionButtons = actions.map(function (action, idx) {
+          var className = classnames(theme.button, _defineProperty({}, action.className, action.className));
+          return React.createElement(Button, _extends({ key: idx }, action, { className: className, medium: true, __source: {
               fileName: _jsxFileName,
-              lineNumber: 59
+              lineNumber: 79
             }
@@ -45,26 +61,25 @@ })); // eslint-disable-line
 
-        var className = classnames([this.props.theme.dialog, this.props.theme[this.props.type]], _defineProperty({}, this.props.theme.active, this.props.active), this.props.className);
+        var dialogClassNames = classnames([theme.dialog, theme[type]], _defineProperty({}, theme.active, active), className);
 
         return React.createElement(
           Portal,
-          { className: this.props.theme.wrapper, __source: {
+          { className: theme.wrapper, __source: {
               fileName: _jsxFileName,
-              lineNumber: 74
+              lineNumber: 94
             }
           },
           React.createElement(Overlay, {
-            active: this.props.active,
-            backdrop: this.props.backdrop,
-            className: this.props.theme.overlay,
-            onClick: this.props.onOverlayClick,
-            onEscKeyDown: this.props.onEscKeyDown,
-            onMouseDown: this.props.onOverlayMouseDown,
-            onMouseMove: this.props.onOverlayMouseMove,
-            onMouseUp: this.props.onOverlayMouseUp,
-            theme: this.props.theme,
+            active: active,
+            backdrop: backdrop,
+            className: theme.overlay,
+            onClick: onOverlayClick,
+            onEscKeyDown: onEscKeyDown,
+            onMouseDown: onOverlayMouseDown,
+            onMouseMove: onOverlayMouseMove,
+            onMouseUp: onOverlayMouseUp,
+            theme: theme,
             themeNamespace: 'overlay',
-
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 75
+              lineNumber: 95
             }
@@ -76,6 +91,6 @@ }),
               'data-teamleader-ui': 'dialog',
-              className: className,
+              className: dialogClassNames,
               __source: {
                 fileName: _jsxFileName,
-                lineNumber: 88
+                lineNumber: 107
               }
@@ -85,19 +100,19 @@ },
               'header',
-              { className: this.props.theme.header, __source: {
+              { className: theme.header, __source: {
                   fileName: _jsxFileName,
-                  lineNumber: 92
+                  lineNumber: 111
                 }
               },
-              this.props.title ? React.createElement(
+              title ? React.createElement(
                 'h6',
-                { className: this.props.theme.title, __source: {
+                { className: theme.title, __source: {
                     fileName: _jsxFileName,
-                    lineNumber: 94
+                    lineNumber: 113
                   }
                 },
-                this.props.title
+                title
               ) : null,
-              React.createElement(Button, { icon: 'close', className: this.props.theme.close, onMouseUp: this.props.onCloseClick, __source: {
+              React.createElement(IconButton, { icon: 'close', className: theme.close, onMouseUp: onCloseClick, __source: {
                   fileName: _jsxFileName,
-                  lineNumber: 97
+                  lineNumber: 116
                 }
@@ -108,17 +123,17 @@ })
               'section',
-              { role: 'body', className: this.props.theme.body, __source: {
+              { role: 'body', className: theme.body, __source: {
                   fileName: _jsxFileName,
-                  lineNumber: 99
+                  lineNumber: 118
                 }
               },
-              this.props.children
+              children
             ),
-            actions.length ? React.createElement(
+            actionButtons.length ? React.createElement(
               'nav',
-              { role: 'navigation', className: this.props.theme.navigation, __source: {
+              { role: 'navigation', className: theme.navigation, __source: {
                   fileName: _jsxFileName,
-                  lineNumber: 103
+                  lineNumber: 122
                 }
               },
-              actions
+              actionButtons
             ) : null
@@ -176,3 +191,3 @@ )
 
-var Dialog = factory(InjectOverlay, InjectButton);
+var Dialog = factory(InjectOverlay, InjectButton, InjectIconButton);
 
@@ -179,0 +194,0 @@ var _default = themr(DIALOG)(Dialog);

lib/dialog/index.js

@@ -5,6 +5,6 @@ import { themr } from 'react-css-themr';
 import { Overlay } from '../overlay';
-import { Button } from '../button';
+import { Button, IconButton } from '../button';
 import theme from './theme.css';
 
-var Dialog = dialogFactory(Overlay, Button);
+var Dialog = dialogFactory(Overlay, Button, IconButton);
 var ThemedDialog = themr(DIALOG, theme)(Dialog);
@@ -11,0 +11,0 @@

lib/identifiers.js

@@ -8,2 +8,3 @@ export var BUTTON = 'TLButton';
 export var POPOVER_HORIZONTAL = 'TLPopoverHorizontal';
+export var TOAST = 'TLToast';
 ;
@@ -29,4 +30,6 @@
   __REACT_HOT_LOADER__.register(POPOVER_HORIZONTAL, 'POPOVER_HORIZONTAL', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
+
+  __REACT_HOT_LOADER__.register(TOAST, 'TOAST', '/Users/dries/Sites/teamleader-ui/components/identifiers.js');
 }();
 
 ;

lib/index.js

@@ -8,4 +8,5 @@ import Button, { IconButton } from './button';
 import { PopoverHorizontal, PopoverVertical } from './popover';
+import { Toast } from './toast';
 
-export { Button, IconButton, Dialog, FontIcon, Menu, IconMenu, MenuItem, MenuDivider, LoadingMolecule, Overlay, PopoverHorizontal, PopoverVertical };
+export { Button, IconButton, Dialog, FontIcon, Menu, IconMenu, MenuItem, MenuDivider, LoadingMolecule, Overlay, PopoverHorizontal, PopoverVertical, Toast };
 ;
@@ -12,0 +13,0 @@

package.json

 {
   "name": "teamleader-ui",
   "description": "Teamleader UI library",
-  "version": "0.0.19-alpha",
+  "version": "0.0.21-alpha",
   "author": "Teamleader <[e-mail]>",
@@ -6,0 +6,0 @@ "betterScripts": {

spec/components/button.js

 import React from 'react';
-import { Button } from '../../components';
+import { Button, IconButton } from '../../components';
 
@@ -66,2 +66,4 @@ const handleItemClick = () => {
     <hr />
+
+    <p><IconButton icon="search" /></p>
   </section>
@@ -68,0 +70,0 @@ );

spec/Root.js

@@ -8,2 +8,3 @@ import React from 'react';
 import LoadingMolecule from './components/loadingMolecule';
+import Toast from './components/toast';
 
@@ -19,2 +20,3 @@ const Root = () => (
     <Dialog />
+    <Toast />
     <LoadingMolecule />
@@ -21,0 +23,0 @@ </div>

No alert changes

Improved metrics

Total package byte prevSize

534290

increased by5.05%

Number of package files

120

increased by3.45%

Lines of code

8347

increased by10.03%

No dependency changes