styled-system - npm Package Compare versions

Comparing version 1.0.0-7 to 1.0.0-8

dist/index.js

@@ -7,2 +7,3 @@ 'use strict';
 var color = require('./color');
+var responsiveStyle = require('./responsive-style');
 var removeProps = require('./remove-props');
@@ -17,2 +18,3 @@ var util = require('./util');
   color: color,
+  responsiveStyle: responsiveStyle,
   removeProps: removeProps,
@@ -19,0 +21,0 @@ util: util,

package.json

 {
   "name": "styled-system",
-  "version": "1.0.0-7",
+  "version": "1.0.0-8",
   "description": "Design system utilities for styled-components, glamorous, and other css-in-js libraries",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -154,2 +154,26 @@ # styled-system
 
+## responsiveStyle
+
+The `responsiveStyle` utility can be used to handle array-based responsive style props for other CSS properties.
+
+```js
+import styled from 'styled-components'
+import { responsiveStyle } from 'styled-system'
+
+// Usage
+// responsiveStyle(cssProperty[, propName][, booleanValue])
+
+const Flex = styled.div`
+  display: flex;
+  ${responsiveStyle('flex-direction', 'direction')}
+`
+
+const App = props => (
+  <Flex direction={[ 'column', 'row' ]}>
+    <div>Responsive</div>
+    <div>Direction</div>
+  </Flex>
+)
+```
+
 ## Remove Props
@@ -156,0 +180,0 @@

src/index.js

@@ -5,2 +5,3 @@ const space = require('./space')
 const color = require('./color')
+const responsiveStyle = require('./responsive-style')
 const removeProps = require('./remove-props')
@@ -15,2 +16,3 @@ const util = require('./util')
   color,
+  responsiveStyle,
   removeProps,
@@ -17,0 +19,0 @@ util,

test.js

@@ -8,2 +8,3 @@ import test from 'ava'
   color,
+  responsiveStyle,
   removeProps,
@@ -425,2 +426,57 @@ util
 
+test('responsiveStyle returns a function', t => {
+  const sx = responsiveStyle('order')
+  t.is(typeof sx, 'function')
+})
+
+test('responsiveStyle‘s returned function returns a style object', t => {
+  const order = responsiveStyle('order')
+  const a = order({ order: 1 })
+  t.deepEqual(a, { order: 1 })
+})
+
+test('responsiveStyle‘s returned function returns null', t => {
+  const order = responsiveStyle('order')
+  const a = order({ })
+  t.is(a, null)
+})
+
+test('responsiveStyle allows property aliases', t => {
+  const direction = responsiveStyle('flex-direction', 'direction')
+  const a = direction({ direction: 'column' })
+  t.deepEqual(a, {
+    'flex-direction': 'column'
+  })
+})
+
+test('responsiveStyle allows array values', t => {
+  const direction = responsiveStyle('flex-direction', 'direction')
+  const a = direction({ direction: [ 'column', 'row' ] })
+  t.deepEqual(a, {
+    'flex-direction': 'column',
+    '@media screen and (min-width: 40em)': {
+      'flex-direction': 'row',
+    }
+  })
+})
+
+test('responsiveStyle can be configured for boolean props', t => {
+  const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
+  const a = wrap({ wrap: true })
+  t.deepEqual(a, {
+    'flex-wrap': 'wrap'
+  })
+})
+
+test('responsiveStyle boolean props handle arrays', t => {
+  const wrap = responsiveStyle('flex-wrap', 'wrap', 'wrap')
+  const a = wrap({ wrap: [ true, false ] })
+  t.deepEqual(a, {
+    'flex-wrap': 'wrap',
+    '@media screen and (min-width: 40em)': {
+      'flex-wrap': false
+    }
+  })
+})
+
 test('breakpoints can be configured with a theme', t => {
@@ -427,0 +483,0 @@ const a = space({theme, m: [1, 2, 3, 4]})

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

33453

increased by11.99%

Number of package files

25

increased by8.7%

Lines of code

949

increased by11.91%

Number of lines in readme file

289

increased by9.06%

No dependency changes