rebass - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/components.js

@@ -146,2 +146,3 @@ 'use strict';
   props: {
+    color: 'inherit',
     f: 1,
@@ -158,3 +159,2 @@ p: 2
       whiteSpace: 'nowrap',
-      color: 'inherit',
       backgroundColor: props.active ? (0, _util.darken)(1 / 4) : 'transparent',
@@ -176,7 +176,8 @@ cursor: 'pointer',
   type: 'a',
-  props: {},
+  props: {
+    color: 'inherit'
+  },
   style: {
     display: 'block',
-    textDecoration: 'none',
-    color: 'inherit'
+    textDecoration: 'none'
   }
@@ -432,2 +433,3 @@ },
   props: {
+    color: 'inherit',
     w: 1,
@@ -445,3 +447,2 @@ mt: 2,
       cursor: 'pointer',
-      color: 'inherit',
       borderRadius: (0, _util.px)(99999),
@@ -544,3 +545,3 @@ backgroundColor: (0, _util.color)(props)('gray2'),
   style: function style(props) {
-    var w = (0, _util.px)(props.borderWidth || 1);
+    var w = (0, _util.px)(props.none ? 0 : props.borderWidth || 1);
     var borderWidth = !props.top && !props.right && !props.bottom && !props.left ? { borderWidth: w } : null;
@@ -565,2 +566,3 @@ var directions = borderWidth ? null : {
     left: _propTypes.bool,
+    none: _propTypes.bool,
     width: _propTypes.number,
@@ -797,3 +799,3 @@ color: _propTypes.string
       borderBottomStyle: 'solid',
-      borderColor: (0, _util.color)(props)('gray2')
+      borderColor: (0, _util.color)(props)(props.color || 'gray2')
     };
@@ -814,3 +816,3 @@ }
       fontWeight: bold(props),
-      color: props.active ? (0, _util.color)(props)('blue') : 'inherit',
+      color: props.active ? (0, _util.color)(props)(props.color || 'blue') : 'inherit',
       borderBottomWidth: props.active ? 2 : 0,
@@ -817,0 +819,0 @@ borderBottomStyle: 'solid',

dist/create-component.js

@@ -15,3 +15,4 @@ 'use strict';
   var components = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var type = config.type,
+  var name = config.name,
+      type = config.type,
       props = config.props,
@@ -28,2 +29,3 @@ style = config.style,
 
+  Component.displayName = name;
   Component.propTypes = propTypes;
@@ -30,0 +32,0 @@ Component.defaultProps = config.defaultProps || {};

dist/grid.js

@@ -18,3 +18,9 @@ 'use strict';
 
-var Flex = exports.Flex = (0, _styledComponents2.default)(_gridStyled.Flex)([], _styledSystem.fontSize, _styledSystem.color);
-var Box = exports.Box = (0, _styledComponents2.default)(_gridStyled.Box)([], _styledSystem.fontSize, _styledSystem.color);
+var Flex = (0, _styledComponents2.default)(_gridStyled.Flex)([], _styledSystem.fontSize, _styledSystem.color);
+Flex.displayName = 'Flex';
+exports.Flex = Flex;
+
+
+var Box = (0, _styledComponents2.default)(_gridStyled.Box)([], _styledSystem.fontSize, _styledSystem.color);
+Box.displayName = 'Box';
+exports.Box = Box;

dist/util.js

@@ -21,3 +21,3 @@ 'use strict';
     var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'blue';
-    return idx(['colors', n], props.theme) || n;
+    return idx('colors.' + n, props.theme) || n;
   };
@@ -24,0 +24,0 @@ };

package.json

 {
   "name": "rebass",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Functional React UI component library, built with styled-components",
@@ -26,25 +26,25 @@ "main": "dist/index.js",
   "dependencies": {
-    "grid-styled": "^2.0.0-10",
+    "grid-styled": "^2.0.0-11",
     "palx": "^1.0.2",
-    "prop-types": "^15.5.10",
-    "recompose": "^0.23.5",
-    "styled-components": "^2.1.2",
-    "styled-system": "^1.0.0-12",
+    "prop-types": "^15.6.0",
+    "recompose": "^0.26.0",
+    "styled-components": "^2.4.0",
+    "styled-system": "^1.1.1",
     "tag-hoc": "^1.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-options": "^3.2.4",
-    "@storybook/react": "^3.2.4",
-    "ava": "^0.20.0",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.25.0",
-    "babel-preset-env": "^1.5.2",
+    "@storybook/addon-options": "^3.3.3",
+    "@storybook/react": "^3.3.3",
+    "ava": "^0.24.0",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.24.1",
-    "codecov": "^2.3.0",
-    "nyc": "^11.1.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
-    "react-x-ray": "^1.0.0-2",
+    "babel-register": "^6.26.0",
+    "codecov": "^3.0.0",
+    "nyc": "^11.4.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
+    "react-x-ray": "^1.0.0-4",
     "refunk": "^1.0.0-2"
@@ -51,0 +51,0 @@ },

README.md

@@ -274,2 +274,3 @@ # Rebass
 - `left` (boolean) border-left
+- `none` (boolean) hide all borders
 - `color` (string) sets *only* the border color
@@ -363,6 +364,5 @@
 ```jsx
-import styled from 'styled-components'
 import { Button } from 'rebass'
 
-const CustomButton = styled(Button)`
+const CustomButton = Button.extend`
   border: 1px solid rgba(0, 0, 0, .25);
@@ -369,0 +369,0 @@ background-image: linear-gradient(transparent, rgba(0, 0, 0, .125));

src/components.js

@@ -139,2 +139,3 @@ import React from 'react'
     props: {
+      color: 'inherit',
       f: 1,
@@ -150,3 +151,2 @@ p: 2,
       whiteSpace: 'nowrap',
-      color: 'inherit',
       backgroundColor: props.active ? darken(1/4) : 'transparent',
@@ -168,7 +168,8 @@ cursor: 'pointer',
     type: 'a',
-    props: {},
+    props: {
+      color: 'inherit',
+    },
     style: {
       display: 'block',
       textDecoration: 'none',
-      color: 'inherit',
     }
@@ -430,2 +431,3 @@ },
     props: {
+      color: 'inherit',
       w: 1,
@@ -442,3 +444,2 @@ mt: 2,
       cursor: 'pointer',
-      color: 'inherit',
       borderRadius: px(99999),
@@ -542,3 +543,3 @@ backgroundColor: color(props)('gray2'),
     style: props => {
-      const w = px(props.borderWidth || 1)
+      const w = px(props.none ? 0 : props.borderWidth || 1)
       const borderWidth = (!props.top && !props.right && !props.bottom && !props.left)
@@ -565,2 +566,3 @@ ? { borderWidth: w }
       left: bool,
+      none: bool,
       width: number,
@@ -791,3 +793,3 @@ color: string,
       borderBottomStyle: 'solid',
-      borderColor: color(props)('gray2')
+      borderColor: color(props)(props.color || 'gray2')
     })
@@ -807,3 +809,3 @@ },
       fontWeight: bold(props),
-      color: props.active ? color(props)('blue') : 'inherit',
+      color: props.active ? color(props)(props.color || 'blue') : 'inherit',
       borderBottomWidth: props.active ? 2 : 0,
@@ -810,0 +812,0 @@ borderBottomStyle: 'solid',

src/create-component.js

@@ -5,2 +5,3 @@ import hoc from './hoc'
   const {
+    name,
     type,
@@ -17,2 +18,3 @@ props,
 
+  Component.displayName = name
   Component.propTypes = propTypes
@@ -19,0 +21,0 @@ Component.defaultProps = config.defaultProps || {}

src/grid.js

@@ -11,3 +11,10 @@ import styled from 'styled-components'
 
-export const Flex = styled(_Flex)([], fontSize, color)
-export const Box = styled(_Box)([], fontSize, color)
+const Flex = styled(_Flex)([], fontSize, color)
+Flex.displayName = 'Flex'
+export { Flex }
+
+const Box = styled(_Box)([], fontSize, color)
+Box.displayName = 'Box'
+export { Box }
+
+

src/util.js

@@ -9,3 +9,3 @@ // replace with get?
 
-export const color = props => (n = 'blue') => idx([ 'colors', n ], props.theme) || n
+export const color = props => (n = 'blue') => idx(`colors.${n}`, props.theme) || n
 
@@ -12,0 +12,0 @@ export const darken = n => `rgba(0, 0, 0, ${n})`

No alert changes

Improved metrics

Total package byte prevSize

97747

increased by0.34%

Lines of code

3454

increased by0.47%

Worsened metrics

Number of package files

34

decreased by-2.86%

Dependency changes

• + Addedrecompose@0.26.0(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedrecompose@0.23.5(transitive)

• Updatedgrid-styled@^2.0.0-11

• Updatedprop-types@^15.6.0

• Updatedrecompose@^0.26.0

• Updatedstyled-components@^2.4.0

• Updatedstyled-system@^1.1.1