grid-styled - npm Package Compare versions

Comparing version 2.0.0-9 to 2.0.0-10

dist/Box.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _tagHoc = require('tag-hoc');
+
+var _tagHoc2 = _interopRequireDefault(_tagHoc);
+
 var _propTypes2 = require('./propTypes');
@@ -25,2 +29,6 @@
 
+var _removeProps = require('./remove-props');
+
+var _removeProps2 = _interopRequireDefault(_removeProps);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,4 +39,8 @@
 
-var Box = _styledComponents2.default.div([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex, order);
+var Tag = (0, _tagHoc2.default)(_removeProps2.default);
+var Base = Tag('div');
 
+var Box = (0, _styledComponents2.default)(Base)([], { boxSizing: 'border-box' }, _styledSystem.width, _styledSystem.space, flex, order);
+Box.displayName = 'Box';
+
 var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array]);
@@ -35,0 +47,0 @@

dist/Flex.js

@@ -42,2 +42,3 @@ 'use strict';
 var Flex = (0, _styledComponents2.default)(_Box2.default)([], { display: 'flex' }, wrap, column, direction, align, justify);
+Flex.displayName = 'Flex';
 
@@ -44,0 +45,0 @@ var responsivePropType = (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string, _propTypes.array, _propTypes.bool]);

dist/Golden.js

@@ -35,3 +35,4 @@ 'use strict';
 };
+Golden.displayName = 'Golden';
 
 exports.default = Golden;

dist/Grid.js

@@ -24,3 +24,4 @@ 'use strict';
 }, align);
+Grid.displayName = 'Grid';
 
 exports.default = Grid;

dist/Half.js

@@ -22,3 +22,4 @@ 'use strict';
 };
+Half.displayName = 'Half';
 
 exports.default = Half;

dist/Quarter.js

@@ -22,3 +22,4 @@ 'use strict';
 };
+Quarter.displayName = 'Quarter';
 
 exports.default = Quarter;

dist/Third.js

@@ -22,3 +22,4 @@ 'use strict';
 };
+Third.displayName = 'Third';
 
 exports.default = Third;

package.json

 {
   "name": "grid-styled",
-  "version": "2.0.0-9",
+  "version": "2.0.0-10",
   "description": "Responsive React grid system built with styled-components",
@@ -8,3 +8,4 @@ "main": "dist/index.js",
     "prepublish": "babel src -d dist",
-    "test": "ava",
+    "test": "nyc ava",
+    "cover": "nyc report --reporter=lcov --reporter=html",
     "start": "webpack-dev-server",
@@ -34,3 +35,5 @@ "docs": "NODE_ENV=production webpack -p",
     "funcup": "^1.0.0-0",
+    "hidden-styled": "^1.0.0-0",
     "html-webpack-plugin": "^2.24.0",
+    "nyc": "^11.0.3",
     "raw-loader": "^0.5.1",
@@ -51,3 +54,4 @@ "react": "^15.5.4",
     "styled-components": "^2.0.1",
-    "styled-system": "^1.0.0-9"
+    "styled-system": "^1.0.0-9",
+    "tag-hoc": "^1.0.0-0"
   },
@@ -54,0 +58,0 @@ "ava": {

README.md

 
-# [Grid Styled](http://jxnblk.com/grid-styled)
+# Grid Styled
 
 Responsive React grid system built with [styled-components](https://github.com/styled-components/styled-components)
 
+http://jxnblk.com/grid-styled
+
 [![Build Status](https://travis-ci.org/jxnblk/grid-styled.svg?branch=master)](https://travis-ci.org/jxnblk/grid-styled)
@@ -169,2 +171,10 @@
 
+#### `is` (Component|string)
+
+Sets the underlying HTML element.
+
+```jsx
+<Box is='section' />
+```
+
 ## `<Flex />`
@@ -208,2 +218,60 @@
 
+## Extending Components
+
+Using styled-components, you can customize any of the grid-styled components' styles.
+
+
+### InlineFlex
+
+```js
+// Example
+import styled from 'styled-components'
+import { Flex } from 'grid-styled'
+
+const InlineFlex = styled(Flex)`
+  display: inline-flex;
+`
+```
+
+### Max-Width Container
+
+```js
+// Example
+import styled from 'styled-components'
+import { Box } from 'grid-styled'
+
+const Container = styled(Box)`
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+`
+```
+
+
+### Auto Grid
+
+Components can also be extended with React.
+This example creates components for a grid with set gutters where the columns expand to fill in the space.
+
+```jsx
+// Example
+import React from 'react'
+import { Flex, Box } from 'grid-styled'
+
+const Row = props => (
+  <Flex
+    {...props}
+    mx={-3}
+  />
+)
+
+const Column = props => (
+  <Box
+    {...props}
+    px={3}
+    flex='1 1 auto'
+  />
+)
+```
+
 ## Theming
@@ -250,5 +318,6 @@
 
+- [Rebass](https://github.com/jxnblk/rebass)
 - [styled-system](https://github.com/jxnblk/styled-system)
 - [styled-components](https://github.com/styled-components/styled-components)
 
-MIT License
+[MIT License](LICENSE.md)

src/Box.js

@@ -5,3 +5,5 @@ import React from 'react'
 import { number, string, array, oneOfType } from 'prop-types'
+import tag from 'tag-hoc'
 import propTypes from './propTypes'
+import removeProps from './remove-props'
 
@@ -11,3 +13,6 @@ export const flex = responsiveStyle('flex')
 
-const Box = styled.div([],
+const Tag = tag(removeProps)
+const Base = Tag('div')
+
+const Box = styled(Base)([],
   { boxSizing: 'border-box' },
@@ -19,2 +24,3 @@ width,
 )
+Box.displayName = 'Box'
 
@@ -21,0 +27,0 @@ const responsivePropType = oneOfType([

src/Flex.js

@@ -22,2 +22,3 @@ import React from 'react'
 )
+Flex.displayName = 'Flex'
 
@@ -24,0 +25,0 @@ const responsivePropType = oneOfType([

src/Golden.js

@@ -15,3 +15,4 @@ import React from 'react'
 }
+Golden.displayName = 'Golden'
 
 export default Golden

src/Grid.js

@@ -9,3 +9,4 @@ import styled from 'styled-components'
 }, align)
+Grid.displayName = 'Grid'
 
 export default Grid

src/Half.js

@@ -5,3 +5,4 @@ import React from 'react'
 const Half = props => <Grid {...props} width={[ 1, 1/2 ]} />
+Half.displayName = 'Half'
 
 export default Half

src/Quarter.js

@@ -5,3 +5,4 @@ import React from 'react'
 const Quarter = props => <Grid {...props} width={[ 1, 1/4 ]} />
+Quarter.displayName = 'Quarter'
 
 export default Quarter

src/Third.js

@@ -5,3 +5,4 @@ import React from 'react'
 const Third = props => <Grid {...props} width={[ 1, 1/3 ]} />
+Third.displayName = 'Third'
 
 export default Third

test.js

@@ -27,2 +27,8 @@ import test from 'ava'
 
+test('Box renders with `is` prop', t => {
+  const json = render(<Box is='section' />).toJSON()
+  t.snapshot(json)
+  t.is(json.type, 'section')
+})
+
 test('flex util returns null', t => {
@@ -67,2 +73,11 @@ const sx = flex({})
 
+test('Flex renders with column prop', t => {
+  const flex = render(
+    <Flex
+      column
+    />
+  )
+  t.snapshot(flex)
+})
+
 test('Flex renders with responsive props', t => {
@@ -69,0 +84,0 @@ const flex = render(

No alert changes

Improved metrics

Total package byte prevSize

27613

increased by16.99%

Number of package files

31

increased by10.71%

Lines of code

594

increased by12.5%

Number of lines in readme file

321

increased by27.38%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

22

increased by10%

Dependency changes

• + Addedtag-hoc@^1.0.0-0

• + Addedtag-hoc@1.0.0(transitive)