@rentalutions/elements - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

lib/Button.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  padding: 0.5em 1em;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  cursor: pointer;\n  font-size: 1rem;\n  text-transform: uppercase;\n  &:hover {\n    background: ', ';\n    color: ', ';\n  }\n'], ['\n  padding: 0.5em 1em;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  cursor: pointer;\n  font-size: 1rem;\n  text-transform: uppercase;\n  &:hover {\n    background: ', ';\n    color: ', ';\n  }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  padding: 0.5rem 1rem;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  color: ', ';\n  cursor: pointer;\n  font-family: \'Nunito\', sans-serif;\n  font-size: 1em;\n  font-weight: 600;\n  min-width: 90px;\n  outline: none;\n  text-transform: uppercase;\n  text-align: center;\n  transition: all 200ms ', ';\n  &:hover {\n    background: ', ';\n    border: 2px solid ', ';\n    box-shadow: ', ';\n    color: ', ';\n  }\n'], ['\n  padding: 0.5rem 1rem;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  color: ', ';\n  cursor: pointer;\n  font-family: \'Nunito\', sans-serif;\n  font-size: 1em;\n  font-weight: 600;\n  min-width: 90px;\n  outline: none;\n  text-transform: uppercase;\n  text-align: center;\n  transition: all 200ms ', ';\n  &:hover {\n    background: ', ';\n    border: 2px solid ', ';\n    box-shadow: ', ';\n    color: ', ';\n  }\n']);
 
@@ -37,3 +37,3 @@ var _react = require('react');
 var returnColor = function returnColor(props) {
-  return props.primary ? _variables.colors.primary : props.success ? _variables.colors.positive : props.failure ? _variables.colors.negative : props.warning ? _variables.colors.warning : props.color ? props.color : _variables.colors.feedback;
+  return props.primary ? _variables.colors.brand.primary : props.success ? _variables.colors.ui.positive : props.failure ? _variables.colors.ui.negative : props.warning ? _variables.colors.ui.warning : props.btnColor ? props.btnColor : _variables.colors.grey.darkSecondary;
 };
@@ -72,4 +72,11 @@
       primary = _ref4.primary;
-  return primary ? (0, _polished.darken)(0.2, computedColor) : computedColor;
-}, _variables.colors.light);
+  return primary ? _variables.colors.grey.light : computedColor;
+}, (0, _polished.timingFunctions)('easeInQuad'), function (props) {
+  return props.primary ? (0, _polished.darken)(0.24, props.computedColor) : props.computedColor;
+}, function (props) {
+  return props.primary ? (0, _polished.darken)(0.24, props.computedColor) : props.computedColor;
+}, function (_ref5) {
+  var primary = _ref5.primary;
+  return primary ? '0 1px 3px rgba(0,0,0,0.12)' : 'inital';
+}, _variables.colors.grey.light);
 
@@ -76,0 +83,0 @@ Button.displayName = 'Button';

lib/Card.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n'], ['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px ', ';\n  > ', ' {\n    margin-top: 0;\n    color: ', ';\n  }\n'], ['\n  padding: 1em;\n  background: ', ';\n  border-radius: 2px;\n  box-shadow: 0 1px 3px ', ';\n  > ', ' {\n    margin-top: 0;\n    color: ', ';\n  }\n']);
 
@@ -22,2 +22,4 @@ exports.default = Card;
 
+var _polished = require('polished');
+
 var _Text = require('./Text');
@@ -27,2 +29,4 @@
 
+var _variables = require('./variables');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,4 +41,4 @@
       bgColor = _ref.bgColor;
-  return bgImage ? 'url(' + bgImage + ')' : bgColor ? bgColor : '#F9F9F9';
-});
+  return bgImage ? 'url(' + bgImage + ')' : bgColor ? bgColor : _variables.colors.grey.light;
+}, (0, _polished.tint)(0.12, _variables.colors.grey.dark), _Text2.default, _variables.colors.grey.darkSecondary);
 
@@ -41,0 +45,0 @@ function Card(_ref2) {

lib/Container.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  max-width: sizes.xLarge;\n'], ['\n  max-width: sizes.xLarge;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  max-width: sizes.xLarge;\n  padding: ', ';\n'], ['\n  max-width: sizes.xLarge;\n  padding: ', ';\n']);
 
@@ -24,3 +24,9 @@ var _react = require('react');
 
-var Container = _styledComponents2.default.div(_templateObject);
+var Container = _styledComponents2.default.div.attrs({
+  padding: function padding(props) {
+    return props.padded ? '1em' : 'initial';
+  }
+})(_templateObject, function (props) {
+  return props.padding;
+});
 
@@ -27,0 +33,0 @@ Container.displayName = 'Container';

lib/index.js

@@ -6,4 +6,12 @@ 'use strict';
 });
-exports.Tooltip = exports.Text = exports.Loader = exports.Input = exports.Image = exports.Icon = exports.Container = exports.Card = exports.Button = undefined;
+exports.Tooltip = exports.Text = exports.Loader = exports.Input = exports.Image = exports.Icon = exports.Container = exports.Card = exports.Button = exports.Avatar = undefined;
 
+var _templateObject = _taggedTemplateLiteral(['\n  *,*:before,*:after {\n    box-sizing: border-box;\n  }\n'], ['\n  *,*:before,*:after {\n    box-sizing: border-box;\n  }\n']);
+
+var _styledComponents = require('styled-components');
+
+var _Avatar = require('./Avatar');
+
+var _Avatar2 = _interopRequireDefault(_Avatar);
+
 var _Button = require('./Button');
@@ -43,2 +51,7 @@
 
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+(0, _styledComponents.injectGlobal)(_templateObject);
+
+exports.Avatar = _Avatar2.default;
 exports.Button = _Button2.default;
@@ -45,0 +58,0 @@ exports.Card = _Card2.default;

lib/Input.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  background: none;\n'], ['\n  background: none;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  input {\n    width: 100%;\n    &:focus {\n      outline: none;\n    }\n  }\n  input + label {\n\n  }\n'], ['\n  input {\n    width: 100%;\n    &:focus {\n      outline: none;\n    }\n  }\n  input + label {\n\n  }\n']);
 
@@ -18,2 +18,8 @@ var _react = require('react');
 
+var _variables = require('./variables');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,6 +29,20 @@
 
-var Input = _styledComponents2.default.input(_templateObject);
+var InputMarkup = function InputMarkup(props) {
+  var classes = (0, _classnames2.default)('input-group', props.className);
+  return _react2.default.createElement(
+    'div',
+    { className: classes },
+    _react2.default.createElement('input', { id: props.id, type: props.type, placeholder: props.placeholder }),
+    _react2.default.createElement(
+      'label',
+      { htmlFor: props.id },
+      props.label
+    )
+  );
+};
 
+var Input = (0, _styledComponents2.default)(InputMarkup)(_templateObject);
+
 Input.displayName = 'Input';
 
 exports.default = Input;

lib/Text.js

@@ -9,6 +9,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  margin: 1rem 0;\n  padding: 0;\n  color: #404040;\n  font-family: \'Open Sans\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 3rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n'], ['\n  margin: 1rem 0;\n  padding: 0;\n  color: #404040;\n  font-family: \'Open Sans\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.25rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 3rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  margin: 1rem 0;\n  padding: 0;\n  color: ', ';\n  font-family: \'Nunito\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n'], ['\n  margin: 1rem 0;\n  padding: 0;\n  color: ', ';\n  font-family: \'Nunito\';\n  font-size: 1rem;\n  &.small { font-size: 0.75rem; }\n  &.title {\n    font-size: 1.5rem;\n    font-weight: 600;\n  }\n  &.headline { font-size: 2rem; }\n  &.hero {\n    font-size: 4rem;\n    font-weight: 300;\n  }\n  &.center { text-align: center; }\n  &.right { text-align: right; }\n  &.bold { font-weight: bolder; }\n']);
 
-exports.default = Text;
-
 var _react = require('react');
@@ -30,11 +28,11 @@
 
+var _variables = require('./variables');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TextWrapper = _styledComponents2.default.p(_templateObject);
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function Text(_ref) {
+function TextLogic(_ref) {
   var center = _ref.center,
@@ -54,9 +52,27 @@ children = _ref.children,
   }, className);
-  return _react2.default.createElement(
-    TextWrapper,
-    _extends({ color: color, className: classes }, rest),
+  return hero ? _react2.default.createElement(
+    'h1',
+    { className: classes },
     children
+  ) : headline ? _react2.default.createElement(
+    'h2',
+    { className: classes },
+    children
+  ) : title ? _react2.default.createElement(
+    'h3',
+    { className: classes },
+    children
+  ) : small ? _react2.default.createElement(
+    'p',
+    { className: classes },
+    children
+  ) : _react2.default.createElement(
+    'p',
+    _extends({ className: classes }, rest),
+    children
   );
 }
 
+var Text = (0, _styledComponents2.default)(TextLogic)(_templateObject, _variables.colors.grey.dark);
+
 Text.propTypes = {
@@ -74,3 +90,2 @@ center: _propTypes2.default.bool,
   center: false,
-  color: '',
   headline: false,
@@ -81,2 +96,4 @@ hero: false,
   title: false
-};
+};
+
+exports.default = Text;

lib/variables.js

@@ -17,6 +17,8 @@ 'use strict';
     primary: 'rgba(101, 126, 212, 1)',
-    accent: 'rgba(255, 51, 31, 1)',
-    dark: 'rgba(13, 1, 6, 1)',
+    accent: 'rgba(255, 51, 31, 1)'
+  },
+  grey: {
+    dark: 'rgba(1, 12, 12, 1)',
+    darkSecondary: 'rgba(13, 1, 6, 0.6)',
     light: 'rgba(251, 251, 255, 1)',
-    darkSecondary: 'rgba(13, 1, 6, 0.6)',
     lightSecondary: 'rgba(251, 251, 255, 0.8)',
@@ -23,0 +25,0 @@ disabled: 'rgba(13, 1, 6, 0.4)'

package.json

 {
   "name": "@rentalutions/elements",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A suite of elements for the consistent and responsive UI",
@@ -16,4 +16,7 @@ "main": "lib/index.js",
   "peerDependencies": {
+    "classnames": "^2.2.5",
+    "polished": "^1.2.0",
     "react": "^15.5.4",
-    "react-router-dom": "^4.1.1"
+    "react-router-dom": "^4.1.1",
+    "styled-components": "^2.1.0"
   },
@@ -29,5 +32,5 @@ "devDependencies": {
     "prop-types": "^15.5.10",
-    "styled-components": "^2.1.0",
     "react": "^15.5.4",
-    "react-router-dom": "^4.1.1"
+    "react-router-dom": "^4.1.1",
+    "styled-components": "^2.1.0"
   },
@@ -34,0 +37,0 @@ "babel": {

src/Button.js

@@ -5,12 +5,12 @@ import React from 'react'
 import { Link } from 'react-router-dom'
-import { darken } from 'polished'
+import { darken, timingFunctions } from 'polished'
 import { colors } from './variables'
 
 const returnColor = (props) => (
-  props.primary ? colors.primary
-  : props.success ? colors.positive
-  : props.failure ? colors.negative
-  : props.warning ? colors.warning
-  : props.color ? props.color
-  : colors.feedback
+  props.primary ? colors.brand.primary
+  : props.success ? colors.ui.positive
+  : props.failure ? colors.ui.negative
+  : props.warning ? colors.ui.warning
+  : props.btnColor ? props.btnColor
+  : colors.grey.darkSecondary
 )
@@ -31,12 +31,21 @@
 })`
-  padding: 0.5em 1em;
+  padding: 0.5rem 1rem;
   background-color: ${({computedColor, primary}) => primary ? computedColor : 'transparent'};
   border: 2px solid ${({computedColor}) => computedColor};
   border-radius: 2px;
+  color: ${({computedColor, primary}) => primary ? colors.grey.light : computedColor};
   cursor: pointer;
-  font-size: 1rem;
+  font-family: 'Nunito', sans-serif;
+  font-size: 1em;
+  font-weight: 600;
+  min-width: 90px;
+  outline: none;
   text-transform: uppercase;
+  text-align: center;
+  transition: all 200ms ${timingFunctions('easeInQuad')};
   &:hover {
-    background: ${({computedColor, primary}) => primary ? darken(0.2, computedColor) : computedColor};
-    color: ${colors.light};
+    background: ${props => props.primary ? darken(0.24, props.computedColor) : props.computedColor};
+    border: 2px solid ${props => props.primary ? darken(0.24, props.computedColor) : props.computedColor};
+    box-shadow: ${({primary}) => primary ? '0 1px 3px rgba(0,0,0,0.12)' : 'inital'};
+    color: ${colors.grey.light};
   }
@@ -43,0 +52,0 @@ `

src/Card.js

 import React from 'react'
 import styled from 'styled-components'
+import { tint } from 'polished'
 import Text from './Text'
+import { colors } from './variables'
 
@@ -9,7 +11,11 @@ const CardWrapper = styled.div`
     ({bgImage, bgColor}) => (
-      bgImage ? `url(${bgImage})` : bgColor ? bgColor : '#F9F9F9'
+      bgImage ? `url(${bgImage})` : bgColor ? bgColor : colors.grey.light
     )
   };
   border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0 1px 3px ${tint(0.12, colors.grey.dark)};
+  > ${Text} {
+    margin-top: 0;
+    color: ${colors.grey.darkSecondary};
+  }
 `
@@ -16,0 +22,0 @@

src/Container.js

@@ -5,4 +5,7 @@ import React from 'react'
 
-const Container = styled.div`
+const Container = styled.div.attrs({
+  padding: props => props.padded ? '1em' : 'initial'
+})`
   max-width: sizes.xLarge;
+  padding: ${props => props.padding};
 `
@@ -9,0 +12,0 @@

src/index.js

@@ -0,1 +1,10 @@
+import { injectGlobal } from 'styled-components'
+
+injectGlobal`
+  *,*:before,*:after {
+    box-sizing: border-box;
+  }
+`
+
+import Avatar from './Avatar'
 import Button from './Button'
@@ -11,2 +20,3 @@ import Card from './Card'
 export {
+  Avatar,
   Button,
@@ -13,0 +23,0 @@ Card,

src/Input.js

 import React from 'react'
 import styled from 'styled-components'
+import { colors } from './variables'
+import classNames from 'classnames'
 
-const Input = styled.input`
-  background: none;
+const InputMarkup = props => {
+  const classes = classNames('input-group', props.className)
+  return (
+    <div className={classes}>
+      <input id={props.id} type={props.type} placeholder={props.placeholder}/>
+      <label htmlFor={props.id}>{props.label}</label>
+    </div>
+  )
+}
+
+const Input = styled(InputMarkup)`
+  input {
+    width: 100%;
+    &:focus {
+      outline: none;
+    }
+  }
+  input + label {
+
+  }
 `
@@ -7,0 +27,0 @@

src/Text.js

@@ -6,24 +6,5 @@ import React from 'react'
 
-const TextWrapper = styled.p`
-  margin: 1rem 0;
-  padding: 0;
-  color: #404040;
-  font-family: 'Open Sans';
-  font-size: 1rem;
-  &.small { font-size: 0.75rem; }
-  &.title {
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-  &.headline { font-size: 2rem; }
-  &.hero {
-    font-size: 3rem;
-    font-weight: 300;
-  }
-  &.center { text-align: center; }
-  &.right { text-align: right; }
-  &.bold { font-weight: bolder; }
-`
+import { colors } from './variables'
 
-export default function Text ({
+function TextLogic ({
   center,
@@ -43,5 +24,30 @@ children,
   }, className)
-  return <TextWrapper color={color} className={classes} {...rest}>{children}</TextWrapper>
+  return hero ? <h1 className={classes}>{children}</h1>
+  : headline ? <h2 className={classes}>{children}</h2>
+  : title ? <h3 className={classes}>{children}</h3>
+  : small ? <p className={classes}>{children}</p>
+  : <p className={classes} {...rest}>{children}</p>
 }
 
+const Text = styled(TextLogic)`
+  margin: 1rem 0;
+  padding: 0;
+  color: ${colors.grey.dark};
+  font-family: 'Nunito';
+  font-size: 1rem;
+  &.small { font-size: 0.75rem; }
+  &.title {
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+  &.headline { font-size: 2rem; }
+  &.hero {
+    font-size: 4rem;
+    font-weight: 300;
+  }
+  &.center { text-align: center; }
+  &.right { text-align: right; }
+  &.bold { font-weight: bolder; }
+`
+
 Text.propTypes = {
@@ -59,3 +65,2 @@ center: PropTypes.bool,
   center: false,
-  color: '',
   headline: false,
@@ -67,1 +72,3 @@ hero: false,
 }
+
+export default Text

src/variables.js

@@ -12,8 +12,10 @@ export const sizes = {
     primary: 'rgba(101, 126, 212, 1)',
-    accent: 'rgba(255, 51, 31, 1)',
-    dark: 'rgba(13, 1, 6, 1)',
+    accent: 'rgba(255, 51, 31, 1)'
+  },
+  grey: {
+    dark: 'rgba(1, 12, 12, 1)',
+    darkSecondary: 'rgba(13, 1, 6, 0.6)',
     light: 'rgba(251, 251, 255, 1)',
-    darkSecondary: 'rgba(13, 1, 6, 0.6)',
     lightSecondary: 'rgba(251, 251, 255, 0.8)',
-    disabled: 'rgba(13, 1, 6, 0.4)',
+    disabled: 'rgba(13, 1, 6, 0.4)'
   },
@@ -20,0 +22,0 @@ ui: {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

443665

increased by245.56%

Number of package files

30

increased by15.38%

Lines of code

10030

increased by1894.04%

Worsened metrics

Dependency count

5

increased by150%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes