styled-system - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -34,2 +34,3 @@ 'use strict';
 var theme = require('./theme');
+var propTypes = require('./prop-types');
 var removeProps = require('./remove-props');
@@ -64,2 +65,3 @@ var util = require('./util');
   theme: theme,
+  propTypes: propTypes,
   removeProps: removeProps,
@@ -66,0 +68,0 @@ util: util,

package.json

 {
   "name": "styled-system",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -63,3 +63,6 @@ "main": "dist/index.js",
     "url": "git+https://github.com/jxnblk/styled-system.git"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
   }
 }

README.md

@@ -20,2 +20,3 @@ # styled-system
 - Add style props that hook into your own theme
+- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more
 - Influenced by constraint-based design system principles
@@ -26,3 +27,2 @@ - Typographic scale
 - Works with any color palette
-- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more
 - Works with most css-in-js libraries, including [styled-components][sc], [glamorous][glamorous], [emotion][emotion], [fela][fela], and [cxs][cxs]
@@ -39,3 +39,4 @@
 ```jsx
-// Example uses styled-components, but works with most other css-in-js libraries as well
+// Example uses styled-components,
+// but styled-system works with most other css-in-js libraries as well
 import styled from 'styled-components'
@@ -55,4 +56,2 @@ import { space, width, fontSize, color } from 'styled-system'
 elements based on values defined in a theme.
-Some props allow an array value to be passed to set styles
-responsively per-breakpoint.
 
@@ -78,3 +77,11 @@ ```jsx
 <Box bg='tomato' />
+```
 
+## Responsive Style Props
+
+Set responsive width, margin, padding, font-size,
+and other properties with a shorthand
+array syntax. [Read more](#responsive-styles)
+
+```jsx
 // responsive width
@@ -102,14 +109,14 @@ <Box width={[ 1, 1/2, 1/4 ]} />
 - [**Extras**](#extras)
-  - [textAlign](#textAlign-responsive)
-  - [fontWeight](#fontWeight)
-  - [alignItems](#alignItems)
-  - [justifyContent](#justifyContent)
-  - [flexWrap](#flexWrap)
-  - [flexDirection](#flexDirection)
-  - [flex](#flex)
-  - [alignSelf](#alignSelf)
-  - [borderRadius](#borderRadius)
-  - [borderColor](#borderColor)
-  - [borderWidth](#borderWidth)
-  - [boxShadow](#boxShadow)
+  - [textAlign](#textalign-responsive)
+  - [fontWeight](#fontweight)
+  - [alignItems](#alignitems-responsive)
+  - [justifyContent](#justifycontent-responsive)
+  - [flexWrap](#flexwrap-responsive)
+  - [flexDirection](#flexdirection-responsive)
+  - [flex](#flex-responsive)
+  - [alignSelf](#alignself-responsive)
+  - [borderRadius](#borderradius)
+  - [borderColor](#bordercolor)
+  - [borderWidth](#borderwidth)
+  - [boxShadow](#boxshadow)
   - [hover](#hover)
@@ -122,6 +129,6 @@ - [focus](#focus)
   - [removeProps](#removeProps)
-- [**Low-level**](#Low-level-style-functions)
+- [**Low-level**](#low-level-style-functions)
   - [style](#style)
-  - [responsiveStyle](#responsiveStyle)
-  - [pseudoStyle](#pseudoStyle)
+  - [responsiveStyle](#responsivestyle)
+  - [pseudoStyle](#pseudostyle)
 
@@ -203,6 +210,9 @@ ## Core
 ```jsx
-// 100% below the smallest breakpoint,
-// 50% from the next breakpoint and up,
-// and 25% from the next breakpoint and up
-<Box w={[ 1, 1/2, 1/4 ]} />
+<Box
+  width={[
+    1,    // 100% below the smallest breakpoint
+    1/2,  // 50% from the next breakpoint and up
+    1/4   // 25% from the next breakpoint and up
+  ]}
+/>
 
@@ -237,3 +247,3 @@ // responsive font size
 import { fontWeight } from 'styled-system'
-// <Text weight='bold' />
+// <Text fontWeight='bold' />
 // props.theme.fontWeights.bold
@@ -246,3 +256,3 @@ ```
 import { alignItems } from 'styled-system'
-// <Flex alignItems='center' />
+// <Flex align='center' />
 ```
@@ -254,3 +264,3 @@
 import { justifyContent } from 'styled-system'
-// <Flex justifyContent='center' />
+// <Flex justify='center' />
 ```
@@ -262,3 +272,3 @@
 import { flexWrap } from 'styled-system'
-// <Flex flexWrap />
+// <Flex wrap />
 ```
@@ -377,2 +387,19 @@
 
+### propTypes
+
+Prop type definitions are available for each style function to add to your component's propTypes object.
+
+```jsx
+import styled from 'styled-components'
+import { width, propTypes } from 'styled-system'
+
+const Box = styled.div`
+  ${width}
+`
+
+Box.propTypes = {
+  ...propTypes.width
+}
+```
+
 ## Remove Props
@@ -379,0 +406,0 @@

src/index.js

@@ -33,2 +33,3 @@
 const theme = require('./theme')
+const propTypes = require('./prop-types')
 const removeProps = require('./remove-props')
@@ -63,2 +64,3 @@ const util = require('./util')
   theme,
+  propTypes,
   removeProps,
@@ -65,0 +67,0 @@ util,

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

75328

increased by14.33%

Number of package files

76

increased by18.75%

Lines of code

2222

increased by19.33%

Number of lines in readme file

614

increased by4.6%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.0

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)