styled-tools - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/index.js

@@ -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);
+  };
 };

package.json

 {
   "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"
   }
 }

README.md

@@ -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 @@

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

11352

increased by31.02%

Lines of code

92

increased by50.82%

Number of lines in readme file

162

increased by74.19%

No dependency changes