smarthr-ui - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/components/Alert/Alert.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _lodash = _interopRequireDefault(require("lodash.assign"));
 
@@ -17,19 +17,7 @@ var _style = require("../../constants/style");
 
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  padding: 15px;\n  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n  border: 0 solid;\n  border-left-width: 10px;\n  background-color: ", ";\n\n  &.success {\n    border-color: ", ";\n    color: ", ";\n  }\n  &.info {\n    border-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    border-color: ", ";\n    color: ", ";\n  }\n  &.danger {\n    border-color: ", ";\n    color: ", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Alert = function Alert(_ref) {
   var type = _ref.type,
       children = _ref.children;
-  return _react.default.createElement(Box, {
-    className: type || 'success'
+  return _react.default.createElement("div", {
+    style: getStyle(type)
   }, children);
@@ -41,2 +29,47 @@ };
 
-var Box = _styledComponents.default.div(_templateObject(), _style.color.white, _style.color.success.primary, _style.color.success.secondary, _style.color.info.primary, _style.color.info.secondary, _style.color.warning.primary, _style.color.warning.secondary, _style.color.danger.primary, _style.color.danger.secondary);
+var getStyle = function getStyle(type) {
+  var typeStyle = {};
+
+  switch (type) {
+    case 'success':
+      typeStyle = {
+        borderColor: _style.color.success.primary,
+        color: _style.color.success.secondary
+      };
+      break;
+
+    case 'info':
+      typeStyle = {
+        borderColor: _style.color.info.primary,
+        color: _style.color.info.secondary
+      };
+      break;
+
+    case 'warning':
+      typeStyle = {
+        borderColor: _style.color.warning.primary,
+        color: _style.color.warning.secondary
+      };
+      break;
+
+    case 'danger':
+      typeStyle = {
+        borderColor: _style.color.danger.primary,
+        color: _style.color.danger.secondary
+      };
+      break;
+
+    default:
+      break;
+  }
+
+  return (0, _lodash.default)({
+    display: 'inline-block',
+    padding: '15px',
+    boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
+    borderRadius: '3px',
+    border: '0 solid',
+    borderLeftWidth: '10px',
+    backgroundColor: _style.color.white
+  }, typeStyle);
+};

dist/constants/style.js

@@ -14,3 +14,3 @@ "use strict";
   info: {
-    primary: '#b3e5e',
+    primary: '#b3e5ef',
     secondary: '#31708f'
@@ -17,0 +17,0 @@ },

package.json

 {
   "name": "smarthr-ui",
   "author": "SmartHR-UI Team",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "SmartHR ui components built with React.",
@@ -35,3 +35,3 @@ "keywords": [
   "dependencies": {
-    "styled-components": "^3.3.0"
+    "lodash.assign": "^4.2.0"
   },
@@ -38,0 +38,0 @@ "sideEffects": false,

src/components/Alert/Alert.js

 import React from 'react'
-import styled from 'styled-components'
+import assign from 'lodash.assign'
 
@@ -7,3 +7,3 @@ import { color } from '../../constants/style'
 const Alert = ({ type, children }) => (
-  <Box className={type || 'success'}>{children}</Box>
+  <div style={getStyle(type)}>{children}</div>
 )
@@ -13,27 +13,46 @@
 
-const Box = styled.div`
-  display: inline-block;
-  padding: 15px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  border: 0 solid;
-  border-left-width: 10px;
-  background-color: ${color.white};
+const getStyle = type => {
+  let typeStyle = {}
 
-  &.success {
-    border-color: ${color.success.primary};
-    color: ${color.success.secondary};
+  switch (type) {
+    case 'success':
+      typeStyle = {
+        borderColor: color.success.primary,
+        color: color.success.secondary,
+      }
+      break
+    case 'info':
+      typeStyle = {
+        borderColor: color.info.primary,
+        color: color.info.secondary,
+      }
+      break
+    case 'warning':
+      typeStyle = {
+        borderColor: color.warning.primary,
+        color: color.warning.secondary,
+      }
+      break
+    case 'danger':
+      typeStyle = {
+        borderColor: color.danger.primary,
+        color: color.danger.secondary,
+      }
+      break
+    default:
+      break
   }
-  &.info {
-    border-color: ${color.info.primary};
-    color: ${color.info.secondary};
-  }
-  &.warning {
-    border-color: ${color.warning.primary};
-    color: ${color.warning.secondary};
-  }
-  &.danger {
-    border-color: ${color.danger.primary};
-    color: ${color.danger.secondary};
-  }
-`
+
+  return assign(
+    {
+      display: 'inline-block',
+      padding: '15px',
+      boxShadow: '0 0 8px rgba(0, 0, 0, 0.1)',
+      borderRadius: '3px',
+      border: '0 solid',
+      borderLeftWidth: '10px',
+      backgroundColor: color.white,
+    },
+    typeStyle,
+  )
+}

src/constants/style.js

@@ -9,3 +9,3 @@ export const color = {
   info: {
-    primary: '#b3e5e',
+    primary: '#b3e5ef',
     secondary: '#31708f',
@@ -12,0 +12,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

7958

increased by2.49%

Lines of code

250

increased by23.76%

Dependency changes

• + Addedlodash.assign@^4.2.0

• + Addedlodash.assign@4.2.0(transitive)

• - Removedstyled-components@^3.3.0

• - Removedasap@2.0.6(transitive)

• - Removedbase64-js@1.5.1(transitive)

• - Removedbuffer@5.7.1(transitive)

• - Removedcamelize@1.0.1(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcss-color-keywords@1.0.0(transitive)

• - Removedcss-to-react-native@2.3.2(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhas-flag@1.0.0(transitive)

• - Removedhoist-non-react-statics@2.5.5(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedieee754@1.2.1(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpostcss-value-parser@3.3.1(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedstyled-components@3.4.10(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• - Removedsupports-color@3.2.3(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)