@rentalutions/elements - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/Card.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  padding: 1em;\n  border-radius: 2px;\n  background: ', ';\n'], ['\n  padding: 1em;\n  border-radius: 2px;\n  background: ', ';\n']);
+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']);
 
@@ -10,0 +10,0 @@ exports.default = Card;

lib/Container.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  max-width: sizes.large;\n'], ['\n  max-width: sizes.large;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  max-width: sizes.xLarge;\n'], ['\n  max-width: sizes.xLarge;\n']);
 
@@ -18,3 +18,3 @@ var _react = require('react');
 
-var _variables = require('@rentalutions/variables');
+var _variables = require('./variables');
 
@@ -21,0 +21,0 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/index.js

@@ -6,6 +6,12 @@ 'use strict';
 });
-exports.Tooltip = exports.Text = exports.Loader = exports.Link = exports.Input = exports.Icon = exports.Container = exports.Button = undefined;
+exports.TouchTarget = exports.Tooltip = exports.Text = exports.Loader = exports.Input = exports.Image = exports.Icon = exports.Container = exports.Card = undefined;
 
-var _Button = require('./Button');
+var _TouchTarget = require('./TouchTarget');
 
+var _TouchTarget2 = _interopRequireDefault(_TouchTarget);
+
+var _Card = require('./Card');
+
+var _Card2 = _interopRequireDefault(_Card);
+
 var _Container = require('./Container');
@@ -37,9 +43,10 @@
 
-exports.Button = _Button.Button;
+exports.Card = _Card2.default;
 exports.Container = _Container2.default;
 exports.Icon = _Icon2.default;
+exports.Image = Image;
 exports.Input = _Input2.default;
-exports.Link = _Button.Link;
 exports.Loader = _Loader2.default;
 exports.Text = _Text2.default;
-exports.Tooltip = _Tooltip2.default;
+exports.Tooltip = _Tooltip2.default;
+exports.TouchTarget = _TouchTarget2.default;

lib/TouchTarget.js

@@ -6,6 +6,7 @@ 'use strict';
 });
-exports.Link = exports.Button = undefined;
 
-var _templateObject = _taggedTemplateLiteral(['\n  padding: 1em 0.5em;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  font-size: 1rem;\n'], ['\n  padding: 1em 0.5em;\n  background-color: ', ';\n  border: 2px solid ', ';\n  border-radius: 2px;\n  font-size: 1rem;\n']);
+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  &: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  &:hover {\n    background: ', ';\n    color: ', ';\n  }\n']);
 
+exports.default = TouchTarget;
+
 var _react = require('react');
@@ -23,8 +24,6 @@
 
-var _link = require('react-router-dom/link');
+var _reactRouterDom = require('react-router-dom');
 
-var _link2 = _interopRequireDefault(_link);
+var _variables = require('./variables');
 
-var _variables = require('@rentalutions/variables');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -42,11 +41,12 @@
       success = _ref2.success;
-  return color ? color : _variables.colors.darkSecondary;
-});
+  return color ? color : _variables.colors.dark;
+}, _variables.colors.dark, _variables.colors.light);
 Button.displayName = 'Button';
 
-var Link = Button.withComponent(_link2.default);
+var Link = Button.withComponent(_reactRouterDom.Link);
 
 Link.displayName = 'Link';
 
-exports.Button = Button;
-exports.Link = Link;
+function TouchTarget(props) {
+  if (props.to) return Link;else return Button;
+}

package.json

 {
   "name": "@rentalutions/elements",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A suite of elements for the consistent and responsive UI",
@@ -8,4 +8,5 @@ "main": "lib/index.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src -d lib",
+    "build": "npm run clean && babel src -d lib",
     "dev": "babel -w src -d lib",
+    "clean": "rm -rf lib/*",
     "prepublish": "npm run build"
@@ -15,9 +16,9 @@ },
   "license": "ISC",
+  "peerDependencies": {
+    "react": "^15.5.4",
+    "react-router-dom": "^4.1.1"
+  },
   "dependencies": {
-    "@rentalutions/variables": "^1.0.0",
     "prop-types": "^15.5.10",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
-    "react-router-dom": "^4.1.1",
-    "styled-components": "^2.0.0"
+    "styled-components": "^2.1.0"
   },
@@ -29,3 +30,5 @@ "devDependencies": {
     "babel-preset-react": "^6.24.1",
-    "jest": "^20.0.4"
+    "jest": "^20.0.4",
+    "react": "^15.5.4",
+    "react-router-dom": "^4.1.1"
   },
@@ -32,0 +35,0 @@ "babel": {

src/Card.js

@@ -7,3 +7,2 @@ import React from 'react'
   padding: 1em;
-  border-radius: 2px;
   background: ${
@@ -14,2 +13,4 @@ ({bgImage, bgColor}) => (
   };
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
 `
@@ -16,0 +17,0 @@

src/Container.js

 import React from 'react'
 import styled from 'styled-components'
-import { sizes } from '@rentalutions/variables'
+import { sizes } from './variables'
 
 const Container = styled.div`
-  max-width: sizes.large;
+  max-width: sizes.xLarge;
 `
@@ -8,0 +8,0 @@

src/index.js

@@ -1,2 +0,3 @@
-import { Button, Link }from './Button'
+import TouchTarget from './TouchTarget'
+import Card from './Card'
 import Container from './Container'
@@ -10,10 +11,11 @@ import Icon from './Icon'
 export {
-  Button,
+  Card,
   Container,
   Icon,
+  Image,
   Input,
-  Link,
   Loader,
   Text,
-  Tooltip
+  Tooltip,
+  TouchTarget
 }

src/TouchTarget.js

 import React from 'react'
 import styled from 'styled-components'
 import PropTypes from 'prop-types'
-import { default as RouterLink } from 'react-router-dom/link'
-import { colors } from '@rentalutions/variables'
+import { Link as RouterLink } from 'react-router-dom'
+import { colors } from './variables'
 
 const Button = styled.button`
-  padding: 1em 0.5em;
+  padding: 0.5em 1em;
   background-color: ${({primary, success}) => primary ? colors.primary : 'transparent' };
-  border: 2px solid ${({color, primary, success}) => color ? color : colors.darkSecondary };
+  border: 2px solid ${({color, primary, success}) => color ? color : colors.dark };
   border-radius: 2px;
+  cursor: pointer;
   font-size: 1rem;
+  &:hover {
+    background: ${colors.dark};
+    color: ${colors.light};
+  }
 `
@@ -20,5 +25,5 @@ Button.displayName = 'Button'
 
-export {
-  Button,
-  Link
+export default function TouchTarget (props) {
+  if (props.to) return Link
+  else return Button
 }

No alert changes

Improved metrics

Dependency count

4

decreased by-33.33%

Number of package files

26

increased by18.18%

Lines of code

447

increased by5.42%

Worsened metrics

Total package byte prevSize

124598

decreased by-0.33%

Dev dependency count

7

increased by40%

Dependency changes

• - Removed@rentalutions/variables@^1.0.0

• - Removedreact@^15.5.4

• - Removedreact-dom@^15.5.4

• - Removedreact-router-dom@^4.1.1

• - Removed@rentalutions/variables@1.0.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• Updatedstyled-components@^2.1.0