styled-tools
Advanced tools
Comparing version 0.1.4 to 0.1.5
@@ -6,3 +6,3 @@ 'use strict'; | ||
}); | ||
exports.ifProp = exports.get = exports.prop = undefined; | ||
exports.switchProp = exports.ifProp = exports.get = exports.prop = undefined; | ||
@@ -77,2 +77,35 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; | ||
}; | ||
}; | ||
/** | ||
* Switches on a given prop. Returns the value or function for a given prop value. | ||
* @example | ||
* import styled, { css } from 'styled-components' | ||
* import { switchProp } from 'styled-theme' | ||
* | ||
* const Button = styled.button` | ||
* font-size: ${switchProp('size', { | ||
* small: prop('theme.sizes.sm', '12px'), | ||
* large: prop('theme.sizes.lg', '20px'), | ||
* default: prop('theme.sizes.md', '16px'), | ||
* })}; | ||
* ${switchProp('theme.kind', { | ||
* light: css` | ||
* color: LightBlue; | ||
* `, | ||
* dark: css` | ||
* color: DarkBlue; | ||
* `, | ||
* })} | ||
* ` | ||
* | ||
* <Button size="large" theme={{ kind: 'light' }} /> | ||
*/ | ||
var switchProp = exports.switchProp = function switchProp(needle, switches) { | ||
return function () { | ||
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | ||
var propType = (0, _get3.default)(props, needle); | ||
return (0, _get3.default)(switches, propType); | ||
}; | ||
}; |
{ | ||
"name": "styled-tools", | ||
"version": "0.1.4", | ||
"version": "0.1.5", | ||
"description": "Utilities for styled-components", | ||
@@ -56,7 +56,7 @@ "license": "MIT", | ||
"babel-eslint": "^7.1.1", | ||
"babel-jest": "^18.0.0", | ||
"babel-jest": "^20.0.2", | ||
"babel-plugin-transform-flow-strip-types": "^6.21.0", | ||
"babel-preset-env": "^1.1.8", | ||
"babel-preset-stage-2": "^6.18.0", | ||
"del-cli": "^0.2.1", | ||
"del-cli": "^1.0.0", | ||
"documentation": "^4.0.0-beta.18", | ||
@@ -68,8 +68,8 @@ "eslint": "^3.14.0", | ||
"eslint-plugin-import": "^2.2.0", | ||
"flow-bin": "^0.38.0", | ||
"flow-bin": "^0.50.0", | ||
"flow-typed": "^2.0.0", | ||
"jest-cli": "^18.1.0", | ||
"npm-watch": "^0.1.7", | ||
"jest-cli": "^20.0.2", | ||
"npm-watch": "^0.2.0", | ||
"opn-cli": "^3.1.0" | ||
} | ||
} |
@@ -7,3 +7,3 @@ # styled-tools 💅 | ||
Utilities for [styled-components](https://github.com/styled-components/styled-components) 💅 | ||
Useful interpolated functions for [styled-components](https://github.com/styled-components/styled-components) 💅 | ||
@@ -16,7 +16,7 @@ ## Install | ||
Play with it on [WebpackBin](http://www.webpackbin.com/41X3UFAuf) | ||
Play with it on [WebpackBin](https://www.webpackbin.com/bins/-Kel3KgddZSrD5oK0fIk) | ||
```jsx | ||
import styled from 'styled-components' | ||
import { prop, ifProp } from 'styled-tools' | ||
import styled, { css } from 'styled-components' | ||
import { prop, ifProp, switchProp } from 'styled-tools' | ||
@@ -26,2 +26,17 @@ const Button = styled.button` | ||
font-size: ${ifProp({ size: 'large' }, '20px', '14px')}; | ||
${switchProp('theme', { | ||
dark: css` | ||
background-color: blue; | ||
border: 1px solid blue; | ||
`, | ||
darker: css` | ||
background-color: mediumblue; | ||
border: 1px solid mediumblue; | ||
`, | ||
darkest: css` | ||
background-color: darkblue; | ||
border: 1px solid darkblue; | ||
`, | ||
})}; | ||
` | ||
@@ -37,4 +52,22 @@ | ||
<Button size="large" /> | ||
// renders with background-color: mediumblue & border: 1px solid mediumblue | ||
<Button theme="darker"> | ||
``` | ||
A more complex example: | ||
```jsx | ||
const Button = styled.button` | ||
color: ${prop('theme.colors.white', '#fff')}; | ||
font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))}; | ||
background-color: ${prop('theme.colors.black', '#000')}; | ||
${ifProp('disabled', css` | ||
background-color: ${prop('theme.colors.gray', '#999')}; | ||
pointer-events: none; | ||
`)} | ||
` | ||
``` | ||
## API | ||
@@ -90,2 +123,38 @@ | ||
### switchProp | ||
Switches on a given prop. Returns the value or function for a given prop value. | ||
**Parameters** | ||
- `needle` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** | ||
- `switches` **[Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)** | ||
**Examples** | ||
```javascript | ||
import styled, { css } from 'styled-components' | ||
import { switchProp } from 'styled-theme' | ||
const Button = styled.button` | ||
font-size: ${switchProp('size', { | ||
small: prop('theme.sizes.sm', '12px'), | ||
large: prop('theme.sizes.lg', '20px'), | ||
default: prop('theme.sizes.md', '16px'), | ||
})}; | ||
${switchProp('theme.kind', { | ||
light: css` | ||
color: LightBlue; | ||
`, | ||
dark: css` | ||
color: DarkBlue; | ||
`, | ||
})} | ||
` | ||
<Button size="large" theme={{ kind: 'light' }} /> | ||
``` | ||
Returns **any** | ||
## Related | ||
@@ -92,0 +161,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
11352
92
162