Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

teamleader-ui

Package Overview
Dependencies
Maintainers
3
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

teamleader-ui - npm Package Compare versions

Comparing version 0.0.4-alpha to 0.0.5-alpha

20

components/button/Button.js

@@ -9,3 +9,2 @@ import React, { Component, PropTypes } from 'react';

static propTypes = {
accent: PropTypes.bool,
children: PropTypes.node,

@@ -15,3 +14,2 @@ className: PropTypes.string,

flat: PropTypes.bool,
floating: PropTypes.bool,
href: PropTypes.string,

@@ -27,8 +25,5 @@ icon: PropTypes.oneOfType([

processing: PropTypes.bool,
raised: PropTypes.bool,
theme: PropTypes.shape({
accent: PropTypes.string,
button: PropTypes.string,
flat: PropTypes.string,
floating: PropTypes.string,
icon: PropTypes.string,

@@ -39,3 +34,2 @@ inverse: PropTypes.string,

primary: PropTypes.string,
raised: PropTypes.string,
rippleWrapper: PropTypes.string,

@@ -48,3 +42,2 @@ toggle: PropTypes.string,

static defaultProps = {
accent: false,
className: '',

@@ -61,5 +54,2 @@ flat: false,

}
if (this.props.accent) {
return 'accent';
}
return 'neutral';

@@ -69,8 +59,2 @@ };

getShape = () => {
if (this.props.raised) {
return 'raised';
}
if (this.props.floating) {
return 'floating';
}
return 'flat';

@@ -105,3 +89,2 @@ };

flat, // eslint-disable-line
floating, // eslint-disable-line
href,

@@ -114,4 +97,2 @@ icon,

processing,
raised, // eslint-disable-line
accent, // eslint-disable-line
...others

@@ -131,2 +112,3 @@ } = this.props;

[theme[state]]: true,
[theme.iconOnly]: !this.props.label && !this.props.children,
},

@@ -133,0 +115,0 @@ className

15

components/button/IconButton.js

@@ -10,3 +10,2 @@ import React, { Component, PropTypes } from 'react';

static propTypes = {
accent: PropTypes.bool,
children: PropTypes.node,

@@ -26,6 +25,4 @@ className: PropTypes.string,

theme: PropTypes.shape({
accent: PropTypes.string,
button: PropTypes.string,
flat: PropTypes.string,
floating: PropTypes.string,
icon: PropTypes.string,

@@ -36,3 +33,2 @@ inverse: PropTypes.string,

primary: PropTypes.string,
raised: PropTypes.string,
rippleWrapper: PropTypes.string,

@@ -45,3 +41,2 @@ toggle: PropTypes.string,

static defaultProps = {
accent: false,
className: '',

@@ -57,7 +52,4 @@ neutral: true,

}
if (this.props.accent) {
return 'accent';
}
return 'neutral';
}
};

@@ -80,3 +72,2 @@ handleMouseUp = (event) => {

const {
accent, // eslint-disable-line
children,

@@ -93,4 +84,6 @@ className,

} = this.props;
const element = href ? 'a' : 'button';
const level = this.getLevel();
const classes = classnames([ theme.toggle ], {

@@ -112,3 +105,3 @@ [theme[level]]: neutral,

type: !href ? type : null,
'data-react-toolbox': 'button',
'data-teamleader-ui': 'button',
};

@@ -115,0 +108,0 @@

4

components/menu/Menu.js

@@ -141,3 +141,3 @@ import React, { Component, PropTypes } from 'react';

if (this.state.active && !events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
this.setState({ active: false, rippled: false });
this.setState({ active: false });
}

@@ -231,3 +231,3 @@ };

return (
<div data-react-toolbox='menu' className={className} style={this.getRootStyle()}>
<div data-teamleader-ui='menu' className={className} style={this.getRootStyle()}>
{this.props.outline ? <div className={theme.outline} style={outlineStyle} /> : null}

@@ -234,0 +234,0 @@ <ul ref={(node) => {

2

components/menu/MenuDivider.js

@@ -6,3 +6,3 @@ import React, { PropTypes } from 'react';

const MenuDivider = ({ theme }) => (
<hr data-react-toolbox='menu-divider' className={theme.menuDivider} />
<hr data-teamleader-ui='menu-divider' className={theme.menuDivider} />
);

@@ -9,0 +9,0 @@

26

components/menu/MenuItem.js

@@ -44,10 +44,24 @@ import React, { Component, PropTypes } from 'react';

render () {
const { icon, caption, children, shortcut, selected, disabled, theme, ...others } = this.props;
const className = classnames(theme.menuItem, {
[theme.selected]: selected,
[theme.disabled]: disabled,
}, this.props.className);
const {
icon,
caption,
children,
shortcut,
selected,
disabled,
theme,
...others
} = this.props;
const className = classnames(
theme.menuItem,
{
[theme.selected]: selected,
[theme.disabled]: disabled,
},
this.props.className
);
return (
<li {...others} data-react-toolbox='menu-item' className={className} onClick={this.handleClick}>
<li {...others} data-teamleader-ui='menu-item' className={className} onClick={this.handleClick}>
{icon ? <FontIcon value={icon} className={theme.icon} /> : null}

@@ -54,0 +68,0 @@ <span className={theme.caption}>{caption}</span>

27

lib/button/Button.js

@@ -103,5 +103,2 @@ 'use strict';

}
if (this.props.accent) {
return 'accent';
}
return 'neutral';

@@ -112,8 +109,2 @@ }

value: function __getShape__REACT_HOT_LOADER__() {
if (this.props.raised) {
return 'raised';
}
if (this.props.floating) {
return 'floating';
}
return 'flat';

@@ -155,3 +146,2 @@ }

flat = _props.flat,
floating = _props.floating,
href = _props.href,

@@ -164,5 +154,3 @@ icon = _props.icon,

processing = _props.processing,
raised = _props.raised,
accent = _props.accent,
others = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'flat', 'floating', 'href', 'icon', 'label', 'theme', 'type', 'primary', 'processing', 'raised', 'accent']);
others = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'flat', 'href', 'icon', 'label', 'theme', 'type', 'primary', 'processing']);

@@ -175,3 +163,3 @@

var classes = (0, _classnames3.default)(theme.button, (_classnames = {}, (0, _defineProperty3.default)(_classnames, theme[level], true), (0, _defineProperty3.default)(_classnames, theme[shape], true), (0, _defineProperty3.default)(_classnames, theme[state], true), _classnames), className);
var classes = (0, _classnames3.default)(theme.button, (_classnames = {}, (0, _defineProperty3.default)(_classnames, theme[level], true), (0, _defineProperty3.default)(_classnames, theme[shape], true), (0, _defineProperty3.default)(_classnames, theme[state], true), (0, _defineProperty3.default)(_classnames, theme.iconOnly, !this.props.label && !this.props.children), _classnames), className);

@@ -193,7 +181,7 @@ var props = (0, _extends3.default)({}, others, {

fileName: _jsxFileName,
lineNumber: 141
lineNumber: 123
}
}) : null, processing ? _react2.default.createElement(_font_icon2.default, { className: theme.icon, value: 'spinner8', __source: {
fileName: _jsxFileName,
lineNumber: 142
lineNumber: 124
}

@@ -207,3 +195,2 @@ }) : null, label, children);

Button.propTypes = {
accent: _react.PropTypes.bool,
children: _react.PropTypes.node,

@@ -213,3 +200,2 @@ className: _react.PropTypes.string,

flat: _react.PropTypes.bool,
floating: _react.PropTypes.bool,
href: _react.PropTypes.string,

@@ -222,8 +208,5 @@ icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),

processing: _react.PropTypes.bool,
raised: _react.PropTypes.bool,
theme: _react.PropTypes.shape({
accent: _react.PropTypes.string,
button: _react.PropTypes.string,
flat: _react.PropTypes.string,
floating: _react.PropTypes.string,
icon: _react.PropTypes.string,

@@ -234,3 +217,2 @@ inverse: _react.PropTypes.string,

primary: _react.PropTypes.string,
raised: _react.PropTypes.string,
rippleWrapper: _react.PropTypes.string,

@@ -242,3 +224,2 @@ toggle: _react.PropTypes.string

Button.defaultProps = {
accent: false,
className: '',

@@ -245,0 +226,0 @@ flat: false,

17

lib/button/IconButton.js

@@ -96,5 +96,2 @@ 'use strict';

}
if (this.props.accent) {
return 'accent';
}
return 'neutral';

@@ -125,3 +122,2 @@ }

var _props = this.props,
accent = _props.accent,
children = _props.children,

@@ -136,6 +132,8 @@ className = _props.className,

type = _props.type,
others = (0, _objectWithoutProperties3.default)(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme', 'type']);
others = (0, _objectWithoutProperties3.default)(_props, ['children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme', 'type']);
var element = href ? 'a' : 'button';
var level = this.getLevel();
var classes = (0, _classnames3.default)([theme.toggle], (_classnames = {}, (0, _defineProperty3.default)(_classnames, theme[level], neutral), (0, _defineProperty3.default)(_classnames, theme.inverse, inverse), _classnames), className);

@@ -153,3 +151,3 @@

type: !href ? type : null,
'data-react-toolbox': 'button'
'data-teamleader-ui': 'button'
});

@@ -159,3 +157,3 @@

fileName: _jsxFileName,
lineNumber: 109
lineNumber: 102
}

@@ -171,3 +169,2 @@ }) : icon;

IconButton.propTypes = {
accent: _react.PropTypes.bool,
children: _react.PropTypes.node,

@@ -184,6 +181,4 @@ className: _react.PropTypes.string,

theme: _react.PropTypes.shape({
accent: _react.PropTypes.string,
button: _react.PropTypes.string,
flat: _react.PropTypes.string,
floating: _react.PropTypes.string,
icon: _react.PropTypes.string,

@@ -194,3 +189,2 @@ inverse: _react.PropTypes.string,

primary: _react.PropTypes.string,
raised: _react.PropTypes.string,
rippleWrapper: _react.PropTypes.string,

@@ -202,3 +196,2 @@ toggle: _react.PropTypes.string

IconButton.defaultProps = {
accent: false,
className: '',

@@ -205,0 +198,0 @@ neutral: true,

4

lib/menu/Menu.js

@@ -196,3 +196,3 @@ 'use strict';

if (this.state.active && !_utils.events.targetIsDescendant(event, _reactDom2.default.findDOMNode(this))) {
this.setState({ active: false, rippled: false });
this.setState({ active: false });
}

@@ -317,3 +317,3 @@ }

'div',
{ 'data-react-toolbox': 'menu', className: className, style: this.getRootStyle(), __source: {
{ 'data-teamleader-ui': 'menu', className: className, style: this.getRootStyle(), __source: {
fileName: _jsxFileName,

@@ -320,0 +320,0 @@ lineNumber: 230

2

lib/menu/MenuDivider.js

@@ -21,3 +21,3 @@ 'use strict';

var theme = _ref.theme;
return _react2.default.createElement('hr', { 'data-react-toolbox': 'menu-divider', className: theme.menuDivider, __source: {
return _react2.default.createElement('hr', { 'data-teamleader-ui': 'menu-divider', className: theme.menuDivider, __source: {
fileName: _jsxFileName,

@@ -24,0 +24,0 @@ lineNumber: 6

11

lib/menu/MenuItem.js

@@ -104,2 +104,3 @@ 'use strict';

var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, (0, _defineProperty3.default)(_classnames, theme.selected, selected), (0, _defineProperty3.default)(_classnames, theme.disabled, disabled), _classnames), this.props.className);

@@ -109,5 +110,5 @@

'li',
(0, _extends3.default)({}, others, { 'data-react-toolbox': 'menu-item', className: className, onClick: this.handleClick, __source: {
(0, _extends3.default)({}, others, { 'data-teamleader-ui': 'menu-item', className: className, onClick: this.handleClick, __source: {
fileName: _jsxFileName,
lineNumber: 51
lineNumber: 65
}

@@ -117,3 +118,3 @@ }),

fileName: _jsxFileName,
lineNumber: 52
lineNumber: 66
}

@@ -125,3 +126,3 @@ }) : null,

fileName: _jsxFileName,
lineNumber: 53
lineNumber: 67
}

@@ -135,3 +136,3 @@ },

fileName: _jsxFileName,
lineNumber: 54
lineNumber: 68
}

@@ -138,0 +139,0 @@ },

2

package.json
{
"name": "teamleader-ui",
"description": "Teamleader UI library",
"version": "0.0.4-alpha",
"version": "0.0.5-alpha",
"author": "Teamleader <development@teamleader.eu>",

@@ -6,0 +6,0 @@ "contributors": [

29

README.md

@@ -1,1 +0,28 @@

# Teamleader UI
# Teamleader UI
Teamleader UI is a set of [React](http://facebook.github.io/react/) components used in Teamleader.
## Installation
Teamleader UI can be installed as an [npm package](https://www.npmjs.com/package/teamleader-ui):
```bash
$ npm install --save teamleader-ui
```
## Basic usage
In this minimal example, we import a `Button` with styles already bundled:
```js
import React from 'react';
import { Button } from 'teamleader-ui';
render(
<Button label="Hello World!" />
);
```
## License
This project is licensed under the terms of the [MIT license](https://github.com/teamleadercrm/teamleader-ui/blob/master/LICENSE).

89

spec/components/button.js

@@ -10,3 +10,3 @@ import React from 'react';

<section>
<h5>Buttons</h5>
<h2>Buttons</h2>

@@ -32,62 +32,2 @@ <p>

<p>
<Button primary raised>Primary raised</Button>&nbsp;
<Button primary raised icon='notifications'>Primary raised with icon</Button>&nbsp;
<Button primary raised icon='notifications' />
</p>
<p>
<Button primary raised processing>Primary raised processing</Button>&nbsp;
<Button primary raised processing icon='notifications'>Primary raised processing with icon</Button>&nbsp;
<Button primary raised processing />
</p>
<p>
<Button primary raised disabled>Primary raised disabled</Button>&nbsp;
<Button primary raised disabled icon='notifications'>Primary raised disabled with icon</Button>&nbsp;
<Button primary raised disabled icon='notifications' />
</p>
<hr />
<p>
<Button accent>Accent flat</Button>&nbsp;
<Button accent icon='notifications'>Accent flat with icon</Button>&nbsp;
<Button accent icon='notifications' />
</p>
<p>
<Button accent processing>Accent flat processing</Button>&nbsp;
<Button accent processing icon='notifications'>Accent flat processing with icon</Button>&nbsp;
<Button accent processing />
</p>
<p>
<Button accent disabled>Accent flat disabled</Button>&nbsp;
<Button accent disabled icon='notifications'>Accent disabled with icon</Button>&nbsp;
<Button accent disabled icon='notifications' />
</p>
<hr />
<p>
<Button accent raised>Accent raised</Button>&nbsp;
<Button accent raised icon='notifications'>Accent raised with icon</Button>&nbsp;
<Button accent raised icon='notifications' />
</p>
<p>
<Button accent raised processing>Accent raised processing</Button>&nbsp;
<Button accent raised processing icon='notifications'>Accent raised processing with icon</Button>&nbsp;
<Button accent raised processing />
</p>
<p>
<Button accent raised disabled>Accent raised disabled</Button>&nbsp;
<Button accent raised disabled icon='notifications'>Accent raised disabled with icon</Button>&nbsp;
<Button accent raised disabled icon='notifications' />
</p>
<hr />
<p>
<Button>Neutral flat</Button>&nbsp;

@@ -110,29 +50,2 @@ <Button icon='notifications'>Neutral flat with icon</Button>&nbsp;

<hr />
<p>
<Button raised>Accent raised</Button>&nbsp;
<Button raised icon='notifications'>Accent raised with icon</Button>&nbsp;
<Button raised icon='notifications' />
</p>
<p>
<Button raised processing>Accent raised processing</Button>&nbsp;
<Button raised processing icon='notifications'>Accent raised processing with icon</Button>&nbsp;
<Button raised processing />
</p>
<p>
<Button raised disabled>Accent raised disabled</Button>&nbsp;
<Button raised disabled icon='notifications'>Accent raised disabled with icon</Button>&nbsp;
<Button raised disabled icon='notifications' />
</p>
<hr />
<p><Button primary floating icon='notifications' /></p>
<p><Button primary floating processing icon='notifications' /></p>
<p><Button primary floating disabled icon='notifications' /></p>
<p><Button floating icon='notifications' /></p>
</section>

@@ -139,0 +52,0 @@ );

2

spec/components/menu.js

@@ -21,3 +21,3 @@ import React from 'react';

<section>
<h5>Menus</h5>
<h2>Menus</h2>
<Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}>

@@ -24,0 +24,0 @@ <MenuItem value='foo' caption='Caption' />

components/button/config.css

Sorry, the diff of this file is not supported yet

components/button/theme.css

Sorry, the diff of this file is not supported yet

components/menu/config.css

Sorry, the diff of this file is not supported yet

components/menu/theme.css

Sorry, the diff of this file is not supported yet

components/variables.css

Sorry, the diff of this file is not supported yet

lib/button/config.css

Sorry, the diff of this file is not supported yet

lib/button/theme.css

Sorry, the diff of this file is not supported yet

lib/helpers.css

Sorry, the diff of this file is not supported yet

lib/menu/config.css

Sorry, the diff of this file is not supported yet

lib/menu/theme.css

Sorry, the diff of this file is not supported yet

lib/variables.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc