rebass - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

dist/Base.js

@@ -13,2 +13,6 @@ 'use strict';
 
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
 var _margins = require('./util/margins');
@@ -64,3 +68,3 @@
   var contextStyle = keys.reduce(function (a, key) {
-    return _extends({}, a, rebass ? rebass[key] : {});
+    return (0, _objectAssign2.default)(a, rebass ? rebass[key] : {});
   }, {});
@@ -70,5 +74,3 @@
 
-  var sx = _extends({
-    boxSizing: 'border-box'
-  }, baseStyle, contextStyle, (0, _margins2.default)(props, scale), (0, _padding2.default)(props, scale), (0, _colorStyle2.default)(props, colors, rebass), (0, _radii2.default)(props, borderRadius), style);
+  var sx = (0, _objectAssign2.default)({ boxSizing: 'border-box' }, baseStyle, contextStyle, (0, _margins2.default)(props, scale), (0, _padding2.default)(props, scale), (0, _colorStyle2.default)(props, colors, rebass), (0, _radii2.default)(props, borderRadius), style);
 
@@ -75,0 +77,0 @@ return _react2.default.createElement(Component, _extends({}, props, { style: sx }));

dist/Block.js

@@ -50,3 +50,2 @@ 'use strict';
   var sx = {
-    padding: scale[2],
     marginTop: scale[2],
@@ -53,0 +52,0 @@ marginBottom: scale[2],

dist/NavItem.js

@@ -31,5 +31,6 @@ 'use strict';
   var small = _ref.small;
+  var is = _ref.is;
   var Component = _ref.Component;
 
-  var props = _objectWithoutProperties(_ref, ['small', 'Component']);
+  var props = _objectWithoutProperties(_ref, ['small', 'is', 'Component']);
 
@@ -45,2 +46,4 @@ var rebass = _ref2.rebass;
 
+  Component = Component || is;
+
   return _react2.default.createElement(_Base2.default, _extends({}, props, {
@@ -57,3 +60,6 @@ tagName: Component,
       alignSelf: 'stretch',
-      padding: small ? scale[1] / 2 + 'px ' + scale[1] + 'px' : scale[1],
+      paddingTop: small ? scale[1] / 2 : scale[1],
+      paddingBottom: small ? scale[1] / 2 : scale[1],
+      paddingLeft: scale[1],
+      paddingRight: scale[1],
       color: 'inherit',
@@ -68,7 +74,9 @@ cursor: 'pointer'
   /** Root component - useful for use with react-router's Link component */
-  Component: _react2.default.PropTypes.node
+  is: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object, _react2.default.PropTypes.func]),
+  /** Alias for `is` prop */
+  Component: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object, _react2.default.PropTypes.func])
 };
 
 NavItem.defaultProps = {
-  Component: 'a'
+  is: 'a'
 };
@@ -75,0 +83,0 @@

dist/SequenceMap.js

@@ -94,70 +94,4 @@ 'use strict';
 
-// Subcomponent
-/*
-export const Step = ({
-  width,
-  first,
-  active,
-  children,
-  ...props
-}, { rebass }) => {
-  const { scale, colors } = { ...config, ...rebass }
-
-  const sx = {
-    link: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      textAlign: 'center',
-      lineHeight: 1.25,
-      flex: `1 1 ${width}`,
-      paddingLeft: scale[1],
-      paddingRight: scale[1]
-    },
-    dot: {
-      position: 'relative',
-      zIndex: 1,
-      display: 'inline-block',
-      width: scale[2],
-      height: scale[2],
-      marginBottom: scale[1],
-      borderRadius: 99999,
-      backgroundColor: 'currentcolor'
-    },
-    line: {
-      position: 'absolute',
-      top: scale[2] / 2,
-      transform: 'translate(-50%, -50%)',
-      left: 0,
-      right: 0,
-      height: 4,
-      backgroundColor: 'currentcolor'
-    },
-    label: {},
-    active: {
-      color: colors.primary
-    }
-  }
-
-  return (
-    <LinkBlock
-      _className='SequenceMap_Step'
-      style={{
-        ...sx.link,
-        ...(active ? sx.active : {})
-      }}
-      {...props}>
-      <div style={sx.dot} />
-      {!first && <div style={sx.line} />}
-      <div style={sx.label}>
-        {children}
-      </div>
-    </LinkBlock>
-  )
-}
-*/
-
 SequenceMap.Step = _SequenceMapStep2.default;
 
 exports.default = SequenceMap;

dist/SequenceMapStep.js

@@ -6,3 +6,2 @@ 'use strict';
 });
-exports.SequenceMapStep = undefined;
 
@@ -31,3 +30,3 @@ 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 SequenceMapStep = exports.SequenceMapStep = function SequenceMapStep(_ref, _ref2) {
+var SequenceMapStep = function SequenceMapStep(_ref, _ref2) {
   var width = _ref.width;
@@ -34,0 +33,0 @@ var first = _ref.first;

dist/util/margins.js

@@ -7,2 +7,8 @@ 'use strict';
 
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -32,3 +38,3 @@
 
-  var result = Object.assign({}, n('margin', m, s), n('marginTop', mt, s), n('marginBottom', mb, s), n('marginTop', my, s), n('marginBottom', my, s), n('marginLeft', ml, s), n('marginRight', mr, s), n('marginLeft', mx, s), n('marginRight', mx, s));
+  var result = (0, _objectAssign2.default)({}, n('margin', m, s), n('marginTop', mt, s), n('marginBottom', mb, s), n('marginTop', my, s), n('marginBottom', my, s), n('marginLeft', ml, s), n('marginRight', mr, s), n('marginLeft', mx, s), n('marginRight', mx, s));
 
@@ -35,0 +41,0 @@ return result;

dist/util/padding.js

@@ -7,2 +7,8 @@ 'use strict';
 
+var _objectAssign = require('object-assign');
+
+var _objectAssign2 = _interopRequireDefault(_objectAssign);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -32,3 +38,3 @@
 
-  var result = Object.assign({}, n('padding', p, s), n('paddingTop', pt, s), n('paddingBottom', pb, s), n('paddingTop', py, s), n('paddingBottom', py, s), n('paddingLeft', pl, s), n('paddingRight', pr, s), n('paddingLeft', px, s), n('paddingRight', px, s));
+  var result = (0, _objectAssign2.default)({}, n('padding', p, s), n('paddingTop', pt, s), n('paddingBottom', pb, s), n('paddingTop', py, s), n('paddingBottom', py, s), n('paddingLeft', pl, s), n('paddingRight', pr, s), n('paddingLeft', px, s), n('paddingRight', px, s));
 
@@ -35,0 +41,0 @@ return result;

package.json

 {
   "name": "rebass",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Configurable React Stateless Functional UI Components",
@@ -33,3 +33,3 @@ "author": "Brent Jackson",
     "react-geomicons": "^2.0.4",
-    "reflexbox": "^1.0.0",
+    "reflexbox": "^1.1.0",
     "standard": "^6.0.7",
@@ -57,3 +57,4 @@ "static-react": "^3.1.0"
   "dependencies": {
-    "classnames": "^2.2.3"
+    "classnames": "^2.2.3",
+    "object-assign": "^4.0.1"
   },
@@ -60,0 +61,0 @@ "standard": {

src/Base.js

 
 import React from 'react'
+import assign from 'object-assign'
 import margins from './util/margins'
@@ -26,16 +27,16 @@ import padding from './util/padding'
   const keys = name ? name.split(' ') : []
-  const contextStyle = keys.reduce((a, key) => ({ ...a, ...(rebass ? rebass[key] : {}) }), {})
+  const contextStyle = keys.reduce((a, key) => (assign(a, (rebass ? rebass[key] : {}))), {})
 
   const Component = tagName || 'div'
 
-  const sx = {
-    boxSizing: 'border-box',
-    ...baseStyle,
-    ...contextStyle,
-    ...margins(props, scale),
-    ...padding(props, scale),
-    ...colorStyle(props, colors, rebass),
-    ...radii(props, borderRadius),
-    ...style
-  }
+  const sx = assign(
+    { boxSizing: 'border-box' },
+    baseStyle,
+    contextStyle,
+    margins(props, scale),
+    padding(props, scale),
+    colorStyle(props, colors, rebass),
+    radii(props, borderRadius),
+    style
+  )
 
@@ -42,0 +43,0 @@ return <Component {...props} style={sx} />

src/Block.js

@@ -24,3 +24,2 @@
   const sx = {
-    padding: scale[2],
     marginTop: scale[2],
@@ -27,0 +26,0 @@ marginBottom: scale[2],

src/NavItem.js

@@ -12,2 +12,3 @@
   small,
+  is,
   Component,
@@ -18,2 +19,4 @@ ...props
 
+  Component = Component || is
+
   return (
@@ -32,3 +35,6 @@ <Base
         alignSelf: 'stretch',
-        padding: small ? `${scale[1] / 2}px ${scale[1]}px` : scale[1],
+        paddingTop: small ? scale[1] / 2 : scale[1],
+        paddingBottom: small ? scale[1] / 2 : scale[1],
+        paddingLeft: scale[1],
+        paddingRight: scale[1],
         color: 'inherit',
@@ -44,7 +50,17 @@ cursor: 'pointer'
   /** Root component - useful for use with react-router's Link component */
-  Component: React.PropTypes.node
+  is: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.object,
+    React.PropTypes.func
+  ]),
+  /** Alias for `is` prop */
+  Component: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.object,
+    React.PropTypes.func
+  ])
 }
 
 NavItem.defaultProps = {
-  Component: 'a'
+  is: 'a'
 }
@@ -51,0 +67,0 @@

src/SequenceMap.js

@@ -67,68 +67,2 @@
 
-// Subcomponent
-/*
-export const Step = ({
-  width,
-  first,
-  active,
-  children,
-  ...props
-}, { rebass }) => {
-  const { scale, colors } = { ...config, ...rebass }
-
-  const sx = {
-    link: {
-      position: 'relative',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      textAlign: 'center',
-      lineHeight: 1.25,
-      flex: `1 1 ${width}`,
-      paddingLeft: scale[1],
-      paddingRight: scale[1]
-    },
-    dot: {
-      position: 'relative',
-      zIndex: 1,
-      display: 'inline-block',
-      width: scale[2],
-      height: scale[2],
-      marginBottom: scale[1],
-      borderRadius: 99999,
-      backgroundColor: 'currentcolor'
-    },
-    line: {
-      position: 'absolute',
-      top: scale[2] / 2,
-      transform: 'translate(-50%, -50%)',
-      left: 0,
-      right: 0,
-      height: 4,
-      backgroundColor: 'currentcolor'
-    },
-    label: {},
-    active: {
-      color: colors.primary
-    }
-  }
-
-  return (
-    <LinkBlock
-      _className='SequenceMap_Step'
-      style={{
-        ...sx.link,
-        ...(active ? sx.active : {})
-      }}
-      {...props}>
-      <div style={sx.dot} />
-      {!first && <div style={sx.line} />}
-      <div style={sx.label}>
-        {children}
-      </div>
-    </LinkBlock>
-  )
-}
-*/
-
 SequenceMap.Step = SequenceMapStep
@@ -135,0 +69,0 @@

src/SequenceMapStep.js

@@ -10,3 +10,3 @@
 
-export const SequenceMapStep = ({
+const SequenceMapStep = ({
   width,
@@ -13,0 +13,0 @@ first,

src/util/margins.js

 
+import assign from 'object-assign'
+
 /**
@@ -20,3 +22,3 @@ * Utility for extracting margin props from components
 
-  const result = Object.assign({},
+  const result = assign({},
     n('margin', m, s),
@@ -23,0 +25,0 @@ n('marginTop', mt, s),

src/util/padding.js

 
+import assign from 'object-assign'
+
 /**
@@ -20,3 +22,3 @@ * Utility for extracting padding props from components
 
-  const result = Object.assign({},
+  const result = assign({},
     n('padding', p, s),
@@ -23,0 +25,0 @@ n('paddingTop', pt, s),

test/NavItem.spec.js

@@ -35,3 +35,3 @@
   it('should have default padding', () => {
-    expect(tree.props.baseStyle.padding).toEqual(8)
+    expect(tree.props.baseStyle.paddingTop).toEqual(8)
   })
@@ -46,3 +46,4 @@
     it('should have smaller padding', () => {
-      expect(tree.props.baseStyle.padding).toEqual('4px 8px')
+      expect(tree.props.baseStyle.paddingTop).toEqual(4)
+      expect(tree.props.baseStyle.paddingRight).toEqual(8)
     })
@@ -49,0 +50,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

734531

decreased by-5.59%

Dependency count

3

increased by50%

Lines of code

13166

decreased by-0.73%

Dependency changes

• + Addedobject-assign@^4.0.1

• + Addedobject-assign@4.1.1(transitive)