cf-style-container - npm Package Compare versions

Comparing version 6.0.2 to 7.0.0

CHANGELOG.md

@@ -6,2 +6,44 @@ # Change Log
 
+       <a name="7.0.0"></a>
+# [7.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.2...cf-style-container@7.0.0) (2018-03-12)
+
+
+### Bug Fixes
+
+* **cf-style-const:** use modern linear-gradient form ([57a2ebc](http://stash.cfops.it:7999/www/cf-ux/commits/57a2ebc))
+* **cf-style-container:** RM-2418 Don't overwrite existing props when expanding margin/padding ([5e9b843](http://stash.cfops.it:7999/www/cf-ux/commits/5e9b843))
+* **cf-style-container:** RM-2418 Get snapshot tests running again ([149650a](http://stash.cfops.it:7999/www/cf-ux/commits/149650a))
+* **cf-style-container:** RM-2418 Minor fix to readme ([033bb56](http://stash.cfops.it:7999/www/cf-ux/commits/033bb56))
+* **cf-style-container:** RM-2418 Rename style attribute to styles, ensure all tests pass (woohoo) ([fee4202](http://stash.cfops.it:7999/www/cf-ux/commits/fee4202))
+* **cf-style-container:** UI-259 Make test names more explicity, pass correct values ([fce8414](http://stash.cfops.it:7999/www/cf-ux/commits/fce8414))
+* **cf-style-container:** UI-263: fixed breakpoint mapping and updated snapshots ([5dcf9ce](http://stash.cfops.it:7999/www/cf-ux/commits/5dcf9ce))
+* **cf-style-container:** UI-263: refactored and simplified functional data mapping ([78e6965](http://stash.cfops.it:7999/www/cf-ux/commits/78e6965))
+* **cf-style-container:** UI-263: removed unneeded devDependency ([944e1ba](http://stash.cfops.it:7999/www/cf-ux/commits/944e1ba))
+* **cf-style-container:** UI-263: update snapshots ([9a5c2f2](http://stash.cfops.it:7999/www/cf-ux/commits/9a5c2f2))
+* **cf-style-container:** UI-263: update test comment ([688e811](http://stash.cfops.it:7999/www/cf-ux/commits/688e811))
+
+
+### Features
+
+* **cf-style-container:** RM-2418 Use combineRules to merge rules ([ea63fc1](http://stash.cfops.it:7999/www/cf-ux/commits/ea63fc1))
+* **cf-style-container:** UI-202: added readme ([7ffa6ed](http://stash.cfops.it:7999/www/cf-ux/commits/7ffa6ed))
+* **cf-style-container:** UI-259 Snapshot tests for createStyleComponent ([cca3989](http://stash.cfops.it:7999/www/cf-ux/commits/cca3989))
+* **cf-style-container:** UI-260: add experimental bp support ([676457c](http://stash.cfops.it:7999/www/cf-ux/commits/676457c))
+* **cf-style-container:** UI-260: First pass at processRules function ([b05da4e](http://stash.cfops.it:7999/www/cf-ux/commits/b05da4e))
+* **cf-style-container:** UI-260: Fixed breakpoint parsing logic ([0d7637d](http://stash.cfops.it:7999/www/cf-ux/commits/0d7637d))
+* **cf-style-container:** UI-260: Fixed prop type application. Added responsive scale for font-size. ([d83749c](http://stash.cfops.it:7999/www/cf-ux/commits/d83749c))
+* **cf-style-container:** UI-262 Formattng ([69d784e](http://stash.cfops.it:7999/www/cf-ux/commits/69d784e))
+* **cf-style-container:** UI-262 Gather style rules from props ([eac5c5b](http://stash.cfops.it:7999/www/cf-ux/commits/eac5c5b))
+* **cf-style-container:** UI-263: Added support for responsive 'display' override ([054b03c](http://stash.cfops.it:7999/www/cf-ux/commits/054b03c))
+* **cf-style-container:** UI-263: cleaned up function usage ([17169d6](http://stash.cfops.it:7999/www/cf-ux/commits/17169d6))
+* **cf-style-container:** UI-263: removed usage of 'style' prop ([55c17ae](http://stash.cfops.it:7999/www/cf-ux/commits/55c17ae))
+
+
+### BREAKING CHANGES
+
+* **cf-style-container:** Commit to ensure package is published as a major version when merged
+
+
+
+
        <a name="6.0.2"></a>
@@ -18,3 +60,3 @@ ## [6.0.2](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.1...cf-style-container@6.0.2) (2018-01-18)
 
-       <a name="6.0.1"></a>
+      <a name="6.0.1"></a>
 ## [6.0.1](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@6.0.0...cf-style-container@6.0.1) (2017-11-22)
@@ -31,3 +73,3 @@
 
-      <a name="6.0.0"></a>
+     <a name="6.0.0"></a>
 # [6.0.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@5.3.2...cf-style-container@6.0.0) (2017-11-14)
@@ -52,3 +94,3 @@
 
-     <a name="5.3.2"></a>
+    <a name="5.3.2"></a>
 ## [5.3.2](http://stash.cfops.it:7999/www/cf-ux/compare/cf-style-container@5.3.1...cf-style-container@5.3.2) (2017-11-08)
@@ -55,0 +97,0 @@

es/index.js

@@ -1,128 +0,12 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-/* eslint-disable behance/no-deprecated */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { combineRules } from 'fela';
-import { ThemeProvider, connect, withTheme, createComponent as createFelaComponent } from 'react-fela'; // eslint-disable-line behance/no-deprecated
+import { combineRules } from 'fela'; // eslint-disable-line behance/no-deprecated
+import { ThemeProvider, connect, withTheme } from 'react-fela'; // eslint-disable-line behance/no-deprecated
 import { capitalize } from 'underscore.string';
-import mergeThemes from './mergeThemes';
 
-var createComponent = function createComponent(rule) {
-  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'div';
-  var passThroughProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return createFelaComponent(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
-};
+import applyStaticStyles from './applyStaticStyles';
+import applyTheme from './applyTheme';
+import createComponent from './createComponent';
+import createComponentStyles from './createComponentStyles';
+import createStyledComponent from './createStyledComponent';
+import withRenderer from './withRenderer';
 
-var applyTheme = function applyTheme(ComponentToWrap) {
-  for (var _len = arguments.length, themes = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    themes[_key - 1] = arguments[_key];
-  }
-
-  var ThemedComponent = function (_Component) {
-    _inherits(ThemedComponent, _Component);
-
-    function ThemedComponent() {
-      _classCallCheck(this, ThemedComponent);
-
-      return _possibleConstructorReturn(this, (ThemedComponent.__proto__ || Object.getPrototypeOf(ThemedComponent)).apply(this, arguments));
-    }
-
-    _createClass(ThemedComponent, [{
-      key: 'render',
-      value: function render() {
-        return React.createElement(
-          ThemeProvider,
-          { theme: mergeThemes.apply(undefined, [this.props.theme || {}].concat(themes)) },
-          React.createElement(ComponentToWrap, this.props)
-        );
-      }
-    }]);
-
-    return ThemedComponent;
-  }(Component);
-
-  ThemedComponent._isFelaComponent = true;
-  ThemedComponent.displayName = 'Themed' + ComponentToWrap.displayName;
-  ThemedComponent.propTypes = {
-    theme: PropTypes.object
-  };
-  return withTheme(ThemedComponent);
-};
-
-var withRenderer = function withRenderer(ComponentToWrap) {
-  var WithRendererComponent = function (_Component2) {
-    _inherits(WithRendererComponent, _Component2);
-
-    function WithRendererComponent() {
-      _classCallCheck(this, WithRendererComponent);
-
-      return _possibleConstructorReturn(this, (WithRendererComponent.__proto__ || Object.getPrototypeOf(WithRendererComponent)).apply(this, arguments));
-    }
-
-    _createClass(WithRendererComponent, [{
-      key: 'render',
-      value: function render() {
-        return React.createElement(ComponentToWrap, _extends({ renderer: this.context.renderer }, this.props));
-      }
-    }]);
-
-    return WithRendererComponent;
-  }(Component);
-
-  WithRendererComponent.displayName = 'WithRenderer' + ComponentToWrap.displayName;
-  WithRendererComponent.contextTypes = { renderer: PropTypes.object };
-  return WithRendererComponent;
-};
-
-var createComponentStyles = function createComponentStyles(styleFunctions, component) {
-  return connect(styleFunctions)(component);
-};
-
-var applyStaticStyles = function applyStaticStyles(staticStyles, ComponentToWrap) {
-  var CompWithStaticStyles = function (_React$PureComponent) {
-    _inherits(CompWithStaticStyles, _React$PureComponent);
-
-    function CompWithStaticStyles() {
-      _classCallCheck(this, CompWithStaticStyles);
-
-      return _possibleConstructorReturn(this, (CompWithStaticStyles.__proto__ || Object.getPrototypeOf(CompWithStaticStyles)).apply(this, arguments));
-    }
-
-    _createClass(CompWithStaticStyles, [{
-      key: 'componentWillMount',
-      value: function componentWillMount() {
-        var contextTheme = this.props.theme || {};
-        staticStyles = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
-        this.context.renderer.renderStatic(staticStyles);
-      }
-    }, {
-      key: 'render',
-      value: function render() {
-        return React.createElement(ComponentToWrap, this.props);
-      }
-    }]);
-
-    return CompWithStaticStyles;
-  }(React.PureComponent);
-
-  CompWithStaticStyles.contextTypes = {
-    renderer: PropTypes.object
-  };
-
-  CompWithStaticStyles.propTypes = {
-    theme: PropTypes.object
-  };
-
-  return withTheme(CompWithStaticStyles);
-};
-
-export { createComponent, applyTheme, ThemeProvider, connect, combineRules, createComponentStyles, capitalize, withTheme, withRenderer, applyStaticStyles };
+export { createComponent, applyTheme, ThemeProvider, connect, combineRules, createComponentStyles, capitalize, withTheme, withRenderer, applyStaticStyles, createStyledComponent };

lib/index.js

@@ -6,16 +6,4 @@ 'use strict';
 });
-exports.applyStaticStyles = exports.withRenderer = exports.withTheme = exports.capitalize = exports.createComponentStyles = exports.combineRules = exports.connect = exports.ThemeProvider = exports.applyTheme = exports.createComponent = undefined;
+exports.createStyledComponent = exports.applyStaticStyles = exports.withRenderer = exports.withTheme = exports.capitalize = exports.createComponentStyles = exports.combineRules = exports.connect = exports.ThemeProvider = exports.applyTheme = exports.createComponent = undefined;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint-disable behance/no-deprecated */
-// eslint-disable-line behance/no-deprecated
-
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
 var _fela = require('fela');
@@ -27,75 +15,39 @@
 
-var _mergeThemes = require('./mergeThemes');
+var _applyStaticStyles = require('./applyStaticStyles');
 
-var _mergeThemes2 = _interopRequireDefault(_mergeThemes);
+var _applyStaticStyles2 = _interopRequireDefault(_applyStaticStyles);
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _applyTheme = require('./applyTheme');
 
-const createComponent = (rule, type = 'div', passThroughProps = []) => (0, _reactFela.createComponent)(rule, type, type.propTypes ? passThroughProps.concat(Object.keys(type.propTypes)) : passThroughProps);
+var _applyTheme2 = _interopRequireDefault(_applyTheme);
 
-const applyTheme = (ComponentToWrap, ...themes) => {
-  class ThemedComponent extends _react.Component {
-    render() {
-      return _react2.default.createElement(
-        _reactFela.ThemeProvider,
-        { theme: (0, _mergeThemes2.default)(this.props.theme || {}, ...themes) },
-        _react2.default.createElement(ComponentToWrap, this.props)
-      );
-    }
-  }
+var _createComponent = require('./createComponent');
 
-  ThemedComponent._isFelaComponent = true;
-  ThemedComponent.displayName = `Themed${ComponentToWrap.displayName}`;
-  ThemedComponent.propTypes = {
-    theme: _propTypes2.default.object
-  };
-  return (0, _reactFela.withTheme)(ThemedComponent);
-};
+var _createComponent2 = _interopRequireDefault(_createComponent);
 
-const withRenderer = ComponentToWrap => {
-  class WithRendererComponent extends _react.Component {
-    render() {
-      return _react2.default.createElement(ComponentToWrap, _extends({ renderer: this.context.renderer }, this.props));
-    }
-  }
-  WithRendererComponent.displayName = `WithRenderer${ComponentToWrap.displayName}`;
-  WithRendererComponent.contextTypes = { renderer: _propTypes2.default.object };
-  return WithRendererComponent;
-};
+var _createComponentStyles = require('./createComponentStyles');
 
-const createComponentStyles = (styleFunctions, component) => (0, _reactFela.connect)(styleFunctions)(component);
+var _createComponentStyles2 = _interopRequireDefault(_createComponentStyles);
 
-const applyStaticStyles = (staticStyles, ComponentToWrap) => {
-  class CompWithStaticStyles extends _react2.default.PureComponent {
-    componentWillMount() {
-      const contextTheme = this.props.theme || {};
-      staticStyles = typeof staticStyles === 'function' ? staticStyles(contextTheme) : staticStyles;
-      this.context.renderer.renderStatic(staticStyles);
-    }
+var _createStyledComponent = require('./createStyledComponent');
 
-    render() {
-      return _react2.default.createElement(ComponentToWrap, this.props);
-    }
-  }
+var _createStyledComponent2 = _interopRequireDefault(_createStyledComponent);
 
-  CompWithStaticStyles.contextTypes = {
-    renderer: _propTypes2.default.object
-  };
+var _withRenderer = require('./withRenderer');
 
-  CompWithStaticStyles.propTypes = {
-    theme: _propTypes2.default.object
-  };
+var _withRenderer2 = _interopRequireDefault(_withRenderer);
 
-  return (0, _reactFela.withTheme)(CompWithStaticStyles);
-};
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.createComponent = createComponent;
-exports.applyTheme = applyTheme;
+// eslint-disable-line behance/no-deprecated
+exports.createComponent = _createComponent2.default;
+exports.applyTheme = _applyTheme2.default;
 exports.ThemeProvider = _reactFela.ThemeProvider;
 exports.connect = _reactFela.connect;
 exports.combineRules = _fela.combineRules;
-exports.createComponentStyles = createComponentStyles;
+exports.createComponentStyles = _createComponentStyles2.default;
 exports.capitalize = _underscore.capitalize;
 exports.withTheme = _reactFela.withTheme;
-exports.withRenderer = withRenderer;
-exports.applyStaticStyles = applyStaticStyles;
+exports.withRenderer = _withRenderer2.default;
+exports.applyStaticStyles = _applyStaticStyles2.default;
+exports.createStyledComponent = _createStyledComponent2.default; // eslint-disable-line behance/no-deprecated

package.json

 {
   "name": "cf-style-container",
   "description": "Cloudflare Style Container",
-  "version": "6.0.2",
+  "version": "7.0.0",
   "main": "lib/index.js",
@@ -14,2 +14,3 @@ "module": "es/index.js",
   "dependencies": {
+    "cf-style-const": "^3.0.1",
     "fela": "^6.0.5",
@@ -16,0 +17,0 @@ "fela-utils": "^7.0.5",

README.md

@@ -53,2 +53,16 @@ # cf-style-container
 
+### createStyledComponent(rules, [type])
+
+Creates a new component that implements the [component styling API](https://wiki.cfops.it/pages/viewpage.action?pageId=126075383) and maps style rules to design system primitives. 
+
+Style rules can be defined in a similar fashion to `createComponent` during initialisation, but can also be overridden on an instance-by-instance basis using props on the component itself.
+
+```jsx
+const Box = createStyledComponent(() => {});
+
+<Box backgroundColor="marine" px={3} py={2}>
+  What a lovely blue box!
+</Box>
+```
+
 ### createComponentStyles(rules, Component)
@@ -142,3 +156,3 @@
   });
-  const className = renderer.renderRule(styles, { fontSize: 12 })
+  const className = renderer.renderRule(styles, { fontSize: 12 });
   return (<div>Class name: {className}</div>);
@@ -145,0 +159,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52838

increased by104.63%

Number of package files

20

increased by122.22%

Lines of code

682

increased by186.55%

Number of lines in readme file

180

increased by8.43%

Worsened metrics

Dependency count

8

increased by14.29%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addedcf-style-const@^3.0.1

• + Addedcf-style-const@3.3.0(transitive)

• + Addedpolished@1.9.3(transitive)