cf-component-checkbox - npm Package Compare versions

Comparing version 3.2.3 to 3.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="3.3.0"></a>
+# [3.3.0](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-checkbox@3.2.3...cf-component-checkbox@3.3.0) (2017-09-27)
+
+
+### Features
+
+* **cf-component-checkbox:** UI-1 BREAKING CHANGE Updated checkbox to fela ([b061c11](http://stash.cfops.it:7999/www/cf-ux/commits/b061c11))
+
+
+
+
 <a name="3.2.3"></a>
@@ -8,0 +19,0 @@ ## [3.2.3](http://stash.cfops.it:7999/www/cf-ux/compare/cf-component-checkbox@3.2.2...cf-component-checkbox@3.2.3) (2017-09-27)

es/Checkbox.js

@@ -9,6 +9,87 @@ 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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
 import React from 'react';
-
 import PropTypes from 'prop-types';
+import { createComponent } from 'cf-style-container';
+import { Icon } from 'cf-component-icon';
 
+var styles = function styles(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  return {
+    cursor: 'pointer',
+    display: 'block',
+    minHeight: '1em',
+    paddingLeft: '2em'
+  };
+};
+
+var Input = createComponent(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    zIndex: 0,
+    borderWidth: 1,
+    borderColor: theme.colors.hail,
+    borderStyle: 'solid',
+    borderRadius: theme.borderRadius,
+
+    verticalAlign: 'middle',
+    fontFamily: theme.fontFamily,
+    fontSize: '0.86667rem',
+
+    background: theme.colorWhite,
+    color: theme.colors.charcoal,
+    outline: 'none',
+
+    transition: 'border-color 0.2s ease',
+    position: 'relative',
+    height: '15px',
+    width: '15px',
+    margin: '1px 0 0',
+    padding: 0,
+    lineHeight: 'normal',
+    appearance: 'none',
+    top: '-1px',
+
+    '&:hover': {
+      borderColor: theme.colors.thunder
+    },
+
+    '&:focus': {
+      outline: '5px auto -webkit-focus-ring-color',
+      outlineOffset: '-1px'
+    }
+  };
+}, 'input', ['type', 'id', 'name', 'value', 'checked', 'onChange']);
+
+var Label = createComponent(function () {
+  return {
+    display: 'inline',
+    fontSize: '0.86667rem',
+    marginBottom: '0.38333em',
+    marginLeft: '1em',
+    minHeight: '1.22em'
+  };
+}, 'span');
+
+var IconWrapper = createComponent(function (_ref3) {
+  var checked = _ref3.checked;
+  return {
+    opacity: checked ? 1 : 0,
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+    transition: 'all 150ms ease-out'
+  };
+}, 'div');
+
+var CheckboxWrapper = createComponent(function (_ref4) {
+  _objectDestructuringEmpty(_ref4);
+
+  return {
+    position: 'relative'
+  };
+}, 'div');
+
 var Checkbox = function (_React$Component) {
@@ -26,24 +107,26 @@ _inherits(Checkbox, _React$Component);
     value: function render() {
-      var className = 'cf-checkbox';
-
-      if (this.props.checked) {
-        className += ' cf-checkbox--checked';
-      }
-
       return React.createElement(
-        'label',
-        { htmlFor: this.props.name, className: className },
-        React.createElement('input', {
-          type: 'checkbox',
-          className: 'cf-checkbox__input',
-          id: this.props.name,
-          name: this.props.name,
-          value: this.props.value,
-          checked: this.props.checked,
-          onChange: this.props.onChange
-        }),
-        this.props.label && React.createElement(
-          'span',
-          { className: 'cf-checkbox__label' },
-          this.props.label
+        CheckboxWrapper,
+        null,
+        React.createElement(
+          'label',
+          { htmlFor: this.props.name, className: this.props.className },
+          React.createElement(
+            IconWrapper,
+            { checked: this.props.checked },
+            React.createElement(Icon, { type: 'ok', label: this.props.name })
+          ),
+          React.createElement(Input, {
+            type: 'checkbox',
+            id: this.props.name,
+            name: this.props.name,
+            value: this.props.value,
+            checked: this.props.checked,
+            onChange: this.props.onChange
+          }),
+          this.props.label && React.createElement(
+            Label,
+            null,
+            this.props.label
+          )
         )
@@ -62,5 +145,8 @@ );
   checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  className: PropTypes.string
 };
 
-export default Checkbox;
+Checkbox.displayName = 'Checkbox';
+
+export default createComponent(styles, Checkbox);

es/CheckboxGroup.js

@@ -11,3 +11,2 @@ 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; }; }();
 import PropTypes from 'prop-types';
-import Checkbox from './Checkbox';
 import includes from 'lodash/includes';
@@ -32,10 +31,10 @@
 
-      var values = this.props.options.filter(function (option) {
-        if (option.value === value) {
+      var values = this.props.children.filter(function (option) {
+        if (option.props.value === value) {
           return checked;
         }
 
-        return includes(_this2.props.values, option.value);
+        return includes(_this2.props.values, option.props.value);
       }).map(function (option) {
-        return option.value;
+        return option.props.value;
       });
@@ -52,12 +51,9 @@
         'div',
-        { className: 'cf-checkbox__group' },
-        this.props.options.map(function (option) {
-          return React.createElement(Checkbox, {
-            key: option.name,
-            label: option.label,
-            name: option.name,
-            value: option.value,
-            checked: includes(_this3.props.values, option.value),
-            onChange: function onChange(e) {
-              return _this3.handleChange(option.value, e.target.checked);
+        null,
+        React.Children.map(this.props.children, function (Checkbox) {
+          return React.cloneElement(Checkbox, {
+            key: Checkbox.props.name,
+            checked: includes(_this3.props.values, Checkbox.props.value),
+            onChange: function onChange(event) {
+              return _this3.handleChange(Checkbox.props.value, event.target.checked);
             }
@@ -76,9 +72,5 @@ });
   onChange: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired
-  })).isRequired
+  children: PropTypes.node.isRequired
 };
 
 export default CheckboxGroup;

es/index.js

@@ -1,4 +0,8 @@
-import Checkbox from './Checkbox';
+import { applyTheme } from 'cf-style-container';
+import CheckboxUnstyled from './Checkbox';
+import CheckboxTheme from './CheckboxTheme';
 import CheckboxGroup from './CheckboxGroup';
 
-export { Checkbox, CheckboxGroup };
+var Checkbox = applyTheme(CheckboxUnstyled, CheckboxTheme);
+
+export { Checkbox, CheckboxUnstyled, CheckboxTheme, CheckboxGroup };

lib/Checkbox.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _cfStyleContainer = require('cf-style-container');
+
+var _cfComponentIcon = require('cf-component-icon');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -24,2 +28,82 @@
 
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
+var styles = function styles(_ref) {
+  _objectDestructuringEmpty(_ref);
+
+  return {
+    cursor: 'pointer',
+    display: 'block',
+    minHeight: '1em',
+    paddingLeft: '2em'
+  };
+};
+
+var Input = (0, _cfStyleContainer.createComponent)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    zIndex: 0,
+    borderWidth: 1,
+    borderColor: theme.colors.hail,
+    borderStyle: 'solid',
+    borderRadius: theme.borderRadius,
+
+    verticalAlign: 'middle',
+    fontFamily: theme.fontFamily,
+    fontSize: '0.86667rem',
+
+    background: theme.colorWhite,
+    color: theme.colors.charcoal,
+    outline: 'none',
+
+    transition: 'border-color 0.2s ease',
+    position: 'relative',
+    height: '15px',
+    width: '15px',
+    margin: '1px 0 0',
+    padding: 0,
+    lineHeight: 'normal',
+    appearance: 'none',
+    top: '-1px',
+
+    '&:hover': {
+      borderColor: theme.colors.thunder
+    },
+
+    '&:focus': {
+      outline: '5px auto -webkit-focus-ring-color',
+      outlineOffset: '-1px'
+    }
+  };
+}, 'input', ['type', 'id', 'name', 'value', 'checked', 'onChange']);
+
+var Label = (0, _cfStyleContainer.createComponent)(function () {
+  return {
+    display: 'inline',
+    fontSize: '0.86667rem',
+    marginBottom: '0.38333em',
+    marginLeft: '1em',
+    minHeight: '1.22em'
+  };
+}, 'span');
+
+var IconWrapper = (0, _cfStyleContainer.createComponent)(function (_ref3) {
+  var checked = _ref3.checked;
+  return {
+    opacity: checked ? 1 : 0,
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+    transition: 'all 150ms ease-out'
+  };
+}, 'div');
+
+var CheckboxWrapper = (0, _cfStyleContainer.createComponent)(function (_ref4) {
+  _objectDestructuringEmpty(_ref4);
+
+  return {
+    position: 'relative'
+  };
+}, 'div');
+
 var Checkbox = function (_React$Component) {
@@ -37,24 +121,26 @@ _inherits(Checkbox, _React$Component);
     value: function render() {
-      var className = 'cf-checkbox';
-
-      if (this.props.checked) {
-        className += ' cf-checkbox--checked';
-      }
-
       return _react2.default.createElement(
-        'label',
-        { htmlFor: this.props.name, className: className },
-        _react2.default.createElement('input', {
-          type: 'checkbox',
-          className: 'cf-checkbox__input',
-          id: this.props.name,
-          name: this.props.name,
-          value: this.props.value,
-          checked: this.props.checked,
-          onChange: this.props.onChange
-        }),
-        this.props.label && _react2.default.createElement(
-          'span',
-          { className: 'cf-checkbox__label' },
-          this.props.label
+        CheckboxWrapper,
+        null,
+        _react2.default.createElement(
+          'label',
+          { htmlFor: this.props.name, className: this.props.className },
+          _react2.default.createElement(
+            IconWrapper,
+            { checked: this.props.checked },
+            _react2.default.createElement(_cfComponentIcon.Icon, { type: 'ok', label: this.props.name })
+          ),
+          _react2.default.createElement(Input, {
+            type: 'checkbox',
+            id: this.props.name,
+            name: this.props.name,
+            value: this.props.value,
+            checked: this.props.checked,
+            onChange: this.props.onChange
+          }),
+          this.props.label && _react2.default.createElement(
+            Label,
+            null,
+            this.props.label
+          )
         )
@@ -73,5 +159,8 @@ );
   checked: _propTypes2.default.bool.isRequired,
-  onChange: _propTypes2.default.func.isRequired
+  onChange: _propTypes2.default.func.isRequired,
+  className: _propTypes2.default.string
 };
 
-exports.default = Checkbox;
+Checkbox.displayName = 'Checkbox';
+
+exports.default = (0, _cfStyleContainer.createComponent)(styles, Checkbox);

lib/CheckboxGroup.js

@@ -15,6 +15,2 @@ 'use strict';
 
-var _Checkbox = require('./Checkbox');
-
-var _Checkbox2 = _interopRequireDefault(_Checkbox);
-
 var _includes = require('lodash/includes');
@@ -49,10 +45,10 @@
 
-      var values = this.props.options.filter(function (option) {
-        if (option.value === value) {
+      var values = this.props.children.filter(function (option) {
+        if (option.props.value === value) {
           return checked;
         }
 
-        return (0, _includes2.default)(_this2.props.values, option.value);
+        return (0, _includes2.default)(_this2.props.values, option.props.value);
       }).map(function (option) {
-        return option.value;
+        return option.props.value;
       });
@@ -69,12 +65,9 @@
         'div',
-        { className: 'cf-checkbox__group' },
-        this.props.options.map(function (option) {
-          return _react2.default.createElement(_Checkbox2.default, {
-            key: option.name,
-            label: option.label,
-            name: option.name,
-            value: option.value,
-            checked: (0, _includes2.default)(_this3.props.values, option.value),
-            onChange: function onChange(e) {
-              return _this3.handleChange(option.value, e.target.checked);
+        null,
+        _react2.default.Children.map(this.props.children, function (Checkbox) {
+          return _react2.default.cloneElement(Checkbox, {
+            key: Checkbox.props.name,
+            checked: (0, _includes2.default)(_this3.props.values, Checkbox.props.value),
+            onChange: function onChange(event) {
+              return _this3.handleChange(Checkbox.props.value, event.target.checked);
             }
@@ -93,9 +86,5 @@ });
   onChange: _propTypes2.default.func.isRequired,
-  options: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.oneOf([false])]).isRequired,
-    name: _propTypes2.default.string.isRequired,
-    value: _propTypes2.default.string.isRequired
-  })).isRequired
+  children: _propTypes2.default.node.isRequired
 };
 
 exports.default = CheckboxGroup;

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.CheckboxGroup = exports.Checkbox = undefined;
+exports.CheckboxGroup = exports.CheckboxTheme = exports.CheckboxUnstyled = exports.Checkbox = undefined;
 
+var _cfStyleContainer = require('cf-style-container');
+
 var _Checkbox = require('./Checkbox');
@@ -10,2 +12,6 @@
 
+var _CheckboxTheme = require('./CheckboxTheme');
+
+var _CheckboxTheme2 = _interopRequireDefault(_CheckboxTheme);
+
 var _CheckboxGroup = require('./CheckboxGroup');
@@ -17,3 +23,7 @@
 
-exports.Checkbox = _Checkbox2.default;
+var Checkbox = (0, _cfStyleContainer.applyTheme)(_Checkbox2.default, _CheckboxTheme2.default);
+
+exports.Checkbox = Checkbox;
+exports.CheckboxUnstyled = _Checkbox2.default;
+exports.CheckboxTheme = _CheckboxTheme2.default;
 exports.CheckboxGroup = _CheckboxGroup2.default;

package.json

 {
   "name": "cf-component-checkbox",
   "description": "Cloudflare Checkbox Component",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "main": "lib/index.js",
@@ -14,2 +14,3 @@ "module": "es/index.js",
   "dependencies": {
+    "cf-component-icon": "^3.0.4",
     "lodash": "^4.1.0",
@@ -16,0 +17,0 @@ "prop-types": "^15.5.8"

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

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

Improved metrics

Total package byte prevSize

22305

increased by28.51%

Number of package files

12

increased by20%

Lines of code

405

increased by60.08%

Worsened metrics

Dependency count

4

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedcf-component-icon@^3.0.4

• + Addedasap@2.0.6(transitive)

• + Addedcf-component-icon@3.1.1(transitive)

• + Addedcf-style-container@5.3.2(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcreate-react-class@15.7.0(transitive)

• + Addedcss-in-js-utils@1.0.32.0.13.1.0(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addedfast-loops@1.1.4(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfela@5.2.06.2.4(transitive)

• + Addedfela-dom@5.0.8(transitive)

• + Addedfela-tools@5.2.3(transitive)

• + Addedfela-utils@5.0.56.0.18.1.3(transitive)

• + Addedhyphenate-style-name@1.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedreact@15.7.0(transitive)

• + Addedreact-fela@5.3.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedseamless-immutable@7.1.4(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsprintf-js@1.1.3(transitive)

• + Addedstring-hash@1.1.3(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedunderscore.string@3.3.6(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)