jobiqo-cl - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

lib/components/atoms/Button/index.js

@@ -18,6 +18,2 @@ 'use strict';
 
-var _theme = require('./../../../theme');
-
-var _theme2 = _interopRequireDefault(_theme);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +23,22 @@
   displayName: 'Button__StyledButton'
-})(['font-size:1rem;margin:1rem;padding:0.6rem 1.5rem;border-radius:2px;color:white;background:', ';border:2px solid ', ';&:disabled{opacity:0.7;}'], function (props) {
-  return props.theme[props.buttonStyle];
+})(['font-size:', ';margin:', ';padding:', ';border-radius:', ';color:', ';background:', ';border:', ' ', ' ', ';&:disabled{opacity:', ';}'], function (props) {
+  return props.theme.button.fontSize;
 }, function (props) {
-  return props.theme[props.buttonStyle];
+  return props.theme.button.margin;
+}, function (props) {
+  return props.theme.button.padding;
+}, function (props) {
+  return props.theme.button.borderRadius;
+}, function (props) {
+  return props.theme.button.color;
+}, function (props) {
+  return props.theme.color[props.buttonStyle];
+}, function (props) {
+  return props.theme.button.borderWidth;
+}, function (props) {
+  return props.theme.button.borderStyle;
+}, function (props) {
+  return props.theme.color[props.buttonStyle];
+}, function (props) {
+  return props.theme.button.hoverOpacity;
 });
@@ -37,11 +49,7 @@
   return _react2.default.createElement(
-    _styledComponents.ThemeProvider,
-    { theme: props.theme },
-    _react2.default.createElement(
-      StyledButton,
-      _extends({
-        buttonStyle: props.buttonStyle
-      }, props),
-      props.children
-    )
+    StyledButton,
+    _extends({
+      buttonStyle: props.buttonStyle
+    }, props),
+    props.children
   );
@@ -53,4 +61,3 @@ };
   buttonStyle: 'primary',
-  disabled: false,
-  theme: _theme2.default
+  disabled: false
 };
@@ -57,0 +64,0 @@

lib/components/atoms/Button/index.story.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -21,2 +23,6 @@
 
+var _theme = require('./../../../theme');
+
+var _theme2 = _interopRequireDefault(_theme);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,6 +35,4 @@
 // A made up custom theme to illustrate overriding the component.
-var customTheme = {
-  primary: '#413fb6',
-  secondary: '#d0378c'
-};
+var customTheme = _extends({}, _theme2.default);
+customTheme.color = Object.assign(_extends({}, _theme2.default.color), { primary: '#413fb6', secondary: '#d0378c' });
 
@@ -67,3 +71,3 @@ var buttonTypesLabel = 'Button style';
   propTables: [_.ButtonComponent], // display propTable for Button component
-  propTablesExclude: [_2.default, _styledComponents.ThemeProvider] // do not display propTable for HOC
+  propTablesExclude: [_2.default] // do not display propTable for HOC
 })(function () {
@@ -74,7 +78,11 @@ return _react2.default.createElement(
     _react2.default.createElement(
-      _2.default,
-      { type: (0, _addonKnobs.select)(buttonTypesLabel, buttonTypes, buttonDefaultValue), disabled: (0, _addonKnobs.boolean)('Disabled', false), onClick: (0, _addonActions.action)('onClick') },
-      (0, _addonKnobs.text)('Label', 'Solid Button')
+      _styledComponents.ThemeProvider,
+      { theme: _theme2.default },
+      _react2.default.createElement(
+        _2.default,
+        { type: (0, _addonKnobs.select)(buttonTypesLabel, buttonTypes, buttonDefaultValue), disabled: (0, _addonKnobs.boolean)('Disabled', false), onClick: (0, _addonActions.action)('onClick') },
+        (0, _addonKnobs.text)('Label', 'Solid Button')
+      )
     )
   );
 }));

lib/components/atoms/Button/index.test.js

 'use strict';
 
+var _theme = require('./../../../theme');
+
+var _theme2 = _interopRequireDefault(_theme);
+
+var _ = require('.');
+
+var _2 = _interopRequireDefault(_);
+
 var _react = require('react');
@@ -7,24 +15,39 @@
 
-var _reactTestRenderer = require('react-test-renderer');
+var _styledComponents = require('styled-components');
 
-var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
+var _enzyme = require('enzyme');
 
 require('jest-styled-components');
 
-var _ = require('.');
-
-var _2 = _interopRequireDefault(_);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _ref = _react2.default.createElement(
-  _2.default,
-  null,
-  'Hello World'
+  _styledComponents.ThemeProvider,
+  { theme: _theme2.default },
+  _react2.default.createElement(
+    _2.default,
+    null,
+    'Hello world'
+  )
 );
 
-test('it works', function () {
-  var tree = _reactTestRenderer2.default.create(_ref).toJSON();
-  expect(tree).toMatchSnapshot();
-  expect(tree).toHaveStyleRule('font-size', '1rem');
+describe('Theme is applied correctly', function () {
+  var wrapper = void 0;
+
+  beforeEach(function () {
+    wrapper = (0, _enzyme.mount)(_ref);
+  });
+
+  test('Has the right background color', function () {
+    expect(wrapper.find(_2.default)).toHaveStyleRule('background', _theme2.default.color.primary);
+  });
+
+  /*
+  test('Child has the correct background-color', () => {
+    expect(wrapper.find(Child)).toHaveStyleRule('background-color', myTheme.colors.four);
+  })
+   // This test breaks, border-color property not found in Child
+  test('Child has the correct inherited border-color', () => {
+    expect(wrapper.find(Child)).toHaveStyleRule('border-color', myTheme.colors.one);
+  })*/
 });

lib/theme.js

@@ -6,7 +6,2 @@ 'use strict';
 });
-var border = exports.border = {
-  radius: '2px',
-  largeRadius: '10px'
-};
-
 var color = exports.color = {
@@ -34,22 +29,34 @@ primary: '#0E8E72',
 
+var button = exports.button = {
+  fontSize: '1rem',
+  borderRadius: '2px',
+  margin: '1rem',
+  padding: '0.6rem 1.5rem',
+  color: 'white',
+  borderWidth: '2px',
+  borderStyle: 'solid',
+  hoverOpacity: '0.7'
+};
+
+var input = exports.input = {
+  fontSize: '1rem',
+  borderRadius: '2px',
+  padding: '0.5rem 1rem',
+  borderWidth: '1px',
+  borderColor: color.gray2,
+  borderStyle: 'solid'
+};
+
 var font = exports.font = {
   fontSize: '14px',
-  primaryFont: '',
-  secondaryFont: ''
+  body: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+  color: '#333'
 };
 
-// export const size = {
-//   xl: 1170,
-//   desktop: 992,
-//   tablet: 768,
-//   phone: 376
-// }
-
 exports.default = {
-  primary: '#0E8E72',
-  secondary: '#333E49',
-  border: border,
   color: color,
+  button: button,
+  input: input,
   font: font
-  // size
 };

package.json

 {
   "name": "jobiqo-cl",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "",
@@ -68,3 +68,3 @@ "main": "lib/index.js",
     "jest": "^21.2.1",
-    "jest-styled-components": "^4.9.0",
+    "jest-styled-components": "^4.10.0",
     "polished": "^1.7.0",
@@ -71,0 +71,0 @@ "prop-types": "^15.6.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20163

increased by56.22%

Number of package files

13

increased by30%

Lines of code

387

increased by56.05%

No dependency changes