grid-styled - npm Package Compare versions

Comparing version 2.0.0-7 to 2.0.0-8

dist/Box.js

@@ -6,6 +6,4 @@ 'use strict';
 });
-exports.flex = undefined;
+exports.order = exports.flex = undefined;
 
-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,22 +19,22 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = require('./propTypes');
+
+var _propTypes3 = _interopRequireDefault(_propTypes2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var flex = exports.flex = (0, _styledSystem.responsiveStyle)('flex');
+var order = exports.order = (0, _styledSystem.responsiveStyle)('order');
 
-// hoc to remove unwanted width attribute
-var hoc = function hoc(Comp) {
-  return function (_ref) {
-    var width = _ref.width,
-        props = _objectWithoutProperties(_ref, ['width']);
+var Box = _styledComponents2.default.div([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex, order);
 
-    return _react2.default.createElement(Comp, _extends({}, props, { w: props.w || width }));
-  };
-};
+var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array]);
 
-var flex = exports.flex = function flex(props) {
-  return props.flex ? { flex: props.flex } : null;
-};
+Box.propTypes = Object.assign({}, _propTypes3.default, {
+  flex: responsivePropType,
+  order: responsivePropType
+});
 
-var Box = hoc(_styledComponents2.default.div([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex));
-
 exports.default = Box;

dist/Flex.js

@@ -15,2 +15,10 @@ 'use strict';
 
+var _styledSystem = require('styled-system');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = require('./propTypes');
+
+var _propTypes3 = _interopRequireDefault(_propTypes2);
+
 var _Box = require('./Box');
@@ -22,14 +30,10 @@
 
+var wrap = (0, _styledSystem.responsiveStyle)('flex-wrap', 'wrap', 'wrap');
+var direction = (0, _styledSystem.responsiveStyle)('flex-direction', 'direction');
 var align = function align(props) {
-  return props.align ? 'align-items:' + props.align + ';' : null;
+  return (0, _styledSystem.responsiveStyle)('align-items', 'align');
 };
 var justify = function justify(props) {
-  return props.justify ? 'justify-content:' + props.justify + ';' : null;
+  return (0, _styledSystem.responsiveStyle)('justify-content', 'justify');
 };
-var order = function order(props) {
-  return props.order ? 'order:' + props.order + ';' : null;
-};
-var wrap = function wrap(props) {
-  return props.wrap ? 'flex-wrap:wrap;' : null;
-};
 var column = function column(props) {
@@ -39,4 +43,14 @@ return props.column ? 'flex-direction:column;' : null;
 
-var Flex = (0, _styledComponents2.default)(_Box2.default)([], { display: 'flex' }, align, justify, order, wrap, column);
+var Flex = (0, _styledComponents2.default)(_Box2.default)([], { display: 'flex' }, wrap, column, direction, align, justify);
 
+var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array, _propTypes.bool]);
+
+Flex.propTypes = Object.assign({}, _propTypes3.default, {
+  wrap: responsivePropType,
+  direction: responsivePropType,
+  align: responsivePropType,
+  justify: responsivePropType,
+  column: _propTypes.bool
+});
+
 exports.default = Flex;

package.json

 {
   "name": "grid-styled",
-  "version": "2.0.0-7",
+  "version": "2.0.0-8",
   "description": "Responsive React grid system built with styled-components",
@@ -10,3 +10,3 @@ "main": "dist/index.js",
     "start": "webpack-dev-server",
-    "docs": "webpack -p",
+    "docs": "NODE_ENV=production webpack -p",
     "icon-dev": "repng docs/Icon.js --dev",
@@ -48,4 +48,5 @@ "icon": "repng docs/Icon.js -d 2000 -w 768 -h 768 -o docs -f icon"
   "dependencies": {
+    "prop-types": "^15.5.10",
     "styled-components": "^2.0.1",
-    "styled-system": "^1.0.0-6"
+    "styled-system": "^1.0.0-8"
   },
@@ -52,0 +53,0 @@ "ava": {

README.md

@@ -153,3 +153,3 @@
 
-#### `flex` (string)
+#### `flex` (string|array)
 
@@ -162,2 +162,10 @@ Sets the `flex` property.
 
+#### `order` (number|string|array)
+
+Sets the `order` property.
+
+```jsx
+<Box order={2} />
+```
+
 ## `<Flex />`
@@ -168,7 +176,7 @@
 
-- `align` (string) sets `align-items`
-- `justify` (string) sets `justify-content`
-- `order` (number) sets `order`
-- `wrap` (boolean) sets `flex-wrap: wrap`
-- `column` (boolean) sets `flex-direction: column`
+- `align` (string|array) sets `align-items`
+- `justify` (string|array) sets `justify-content`
+- `direction` (string|array) sets `flex-direction`
+- `wrap` (boolean|array) sets `flex-wrap: wrap`
+- `column` (boolean) shortcut for `flex-direction: column`
 
@@ -184,3 +192,3 @@
 
-Width, margin, and padding props accept arrays as values for mobile-first responsive styles,
+Most props accept arrays as values for mobile-first responsive styles,
 where the first value is for all breakpoints, then each value after is for a min-width
@@ -187,0 +195,0 @@ media query from that breakpoint and up.

src/Box.js

 import React from 'react'
 import styled from 'styled-components'
-import { space, width } from 'styled-system'
+import { space, width, responsiveStyle } from 'styled-system'
+import { number, string, array, oneOfType } from 'prop-types'
+import propTypes from './propTypes'
 
-// hoc to remove unwanted width attribute
-const hoc = Comp => ({ width, ...props }) => <Comp {...props} w={props.w || width} />
+export const flex = responsiveStyle('flex')
+export const order = responsiveStyle('order')
 
-export const flex = props => props.flex ? ({ flex: props.flex }) : null
-
-const Box = hoc(styled.div([],
+const Box = styled.div([],
   { boxSizing: 'border-box' },
   width,
   space,
-  flex
-))
+  flex,
+  order
+)
 
+const responsivePropType = oneOfType([
+  number,
+  string,
+  array
+])
+
+Box.propTypes = Object.assign({}, propTypes, {
+  flex: responsivePropType,
+  order: responsivePropType
+})
+
 export default Box

src/Flex.js

 import React from 'react'
 import styled from 'styled-components'
+import { responsiveStyle } from 'styled-system'
+import { oneOfType, number, string, array, bool } from 'prop-types'
+import propTypes from './propTypes'
 import Box from './Box'
 
-const align = props => props.align ? `align-items:${props.align};` : null
-const justify = props => props.justify ? `justify-content:${props.justify};` : null
-const order = props => props.order ? `order:${props.order};` : null
-const wrap = props => props.wrap ? `flex-wrap:wrap;` : null
+const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
+const direction = responsiveStyle('flex-direction', 'direction')
+const align = props => responsiveStyle('align-items', 'align')
+const justify = props => responsiveStyle('justify-content', 'justify')
 const column = props => props.column ? `flex-direction:column;` : null
@@ -13,9 +16,24 @@
   { display: 'flex' },
+  wrap,
+  column,
+  direction,
   align,
   justify,
-  order,
-  wrap,
-  column
 )
 
+const responsivePropType = oneOfType([
+  number,
+  string,
+  array,
+  bool
+])
+
+Flex.propTypes = Object.assign({}, propTypes, {
+  wrap: responsivePropType,
+  direction: responsivePropType,
+  align: responsivePropType,
+  justify: responsivePropType,
+  column: bool
+})
+
 export default Flex

test.js

@@ -54,1 +54,24 @@ import test from 'ava'
 
+test('Flex renders with props', t => {
+  const flex = render(
+    <Flex
+      wrap
+      direction='column'
+      align='center'
+      justify='space-between'
+    />
+  )
+  t.snapshot(flex)
+})
+
+test('Flex renders with responsive props', t => {
+  const flex = render(
+    <Flex
+      wrap={[ true, false ]}
+      direction={[ 'column', 'row' ]}
+      align={[ 'stretch', 'center' ]}
+      justify={[ 'space-between', 'center' ]}
+    />
+  )
+  t.snapshot(flex)
+})

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

28

increased by3.7%

Number of lines in readme file

252

increased by3.28%

Worsened metrics

Total package byte prevSize

23602

decreased by-90.61%

Dependency count

3

increased by50%

Lines of code

528

decreased by-92.1%

Dependency changes

• + Addedprop-types@^15.5.10

• Updatedstyled-system@^1.0.0-8