dibk-design 0.4.29 → 0.4.33

package/dist/components/Accordion.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,52 +15,88 @@ var _AccordionModule = _interopRequireDefault(require("./Accordion.module.scss")
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class Accordion extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: this.props.expanded,
-      initialized: this.props.expanded
-    };
-    this.handleToggleExpand = this.handleToggleExpand.bind(this);
-  }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Accordion = /*#__PURE__*/function (_React$Component) {
+  _inherits(Accordion, _React$Component);
 
-  handleToggleExpand() {
-    this.setState({
-      expanded: !this.state.expanded,
-      initialized: true
-    });
+  var _super = _createSuper(Accordion);
+
+  function Accordion(props) {
+    var _this;
+
+    _classCallCheck(this, Accordion);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      expanded: _this.props.expanded,
+      initialized: _this.props.expanded
+    };
+    _this.handleToggleExpand = _this.handleToggleExpand.bind(_assertThisInitialized(_this));
+    return _this;
   }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.expanded !== prevProps.expanded) {
+  _createClass(Accordion, [{
+    key: "handleToggleExpand",
+    value: function handleToggleExpand() {
       this.setState({
-        expanded: this.props.expanded
+        expanded: !this.state.expanded,
+        initialized: true
       });
     }
-  }
-
-  renderPanel() {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: _AccordionModule.default.panel,
-      onClick: this.handleToggleExpand
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _AccordionModule.default.panelText
-    }, this.props.title), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(_AccordionModule.default.panelChevron, " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
-    }));
-  }
-
-  render() {
-    const className = "".concat(_AccordionModule.default.accordion, " ").concat(this.props.color ? _AccordionModule.default[this.props.color] : '');
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: className
-    }, this.renderPanel(), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_AccordionModule.default.content, " ").concat(this.state.initialized ? _AccordionModule.default.initialized : '', " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
-    }, this.props.children));
-  }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.expanded !== prevProps.expanded) {
+        this.setState({
+          expanded: this.props.expanded
+        });
+      }
+    }
+  }, {
+    key: "renderPanel",
+    value: function renderPanel() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _AccordionModule.default.panel,
+        onClick: this.handleToggleExpand
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _AccordionModule.default.panelText
+      }, this.props.title), /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_AccordionModule.default.panelChevron, " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var className = "".concat(_AccordionModule.default.accordion, " ").concat(this.props.color ? _AccordionModule.default[this.props.color] : '');
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: className
+      }, this.renderPanel(), /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_AccordionModule.default.content, " ").concat(this.state.initialized ? _AccordionModule.default.initialized : '', " ").concat(this.state.expanded ? _AccordionModule.default.expanded : '')
+      }, this.props.children));
+    }
+  }]);
 
-}
+  return Accordion;
+}(_react.default.Component);
 
 Accordion.propTypes = {
   /** Content title inside box */

package/dist/components/Button.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,43 +19,85 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-class Button extends _react.default.Component {
-  getArrowClass() {
-    switch (this.props.arrow) {
-      case 'left':
-        return _ButtonModule.default.hasArrowLeft;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-      case 'right':
-        return _ButtonModule.default.hasArrowRight;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-      default:
-        return '';
-    }
-  }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  getThemeStyle(theme, color) {
-    return {
-      backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
-      color: (0, _theme.getThemePaletteTextColor)(theme, color),
-      borderColor: (0, _theme.getThemePaletteBorderColor)(theme, color),
-      borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? '1px' : '0'
-    };
-  }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-  render() {
-    let buttonProps = { ...this.props
-    };
-    delete buttonProps.noHover;
-    delete buttonProps.rounded;
-    const themeStyle = this.props.theme ? this.getThemeStyle(this.props.theme, this.props.color) : null;
-    const className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[this.props.color], " ").concat(_ButtonModule.default[this.props.size], " ").concat(this.getArrowClass(), " ").concat(this.props.theme ? _ButtonModule.default.hasTheme : '', " ").concat(this.props.noHover ? _ButtonModule.default.noHover : '', " ").concat(this.props.rounded ? _ButtonModule.default.rounded : '');
-    return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
-      className: className,
-      style: themeStyle
-    }), this.props.content);
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Button = /*#__PURE__*/function (_React$Component) {
+  _inherits(Button, _React$Component);
+
+  var _super = _createSuper(Button);
+
+  function Button() {
+    _classCallCheck(this, Button);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(Button, [{
+    key: "getArrowClass",
+    value: function getArrowClass() {
+      switch (this.props.arrow) {
+        case 'left':
+          return _ButtonModule.default.hasArrowLeft;
+
+        case 'right':
+          return _ButtonModule.default.hasArrowRight;
+
+        default:
+          return '';
+      }
+    }
+  }, {
+    key: "getThemeStyle",
+    value: function getThemeStyle(theme, color) {
+      return {
+        backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
+        color: (0, _theme.getThemePaletteTextColor)(theme, color),
+        borderColor: (0, _theme.getThemePaletteBorderColor)(theme, color),
+        borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? '1px' : '0'
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var buttonProps = _objectSpread({}, this.props);
+
+      delete buttonProps.noHover;
+      delete buttonProps.rounded;
+      var themeStyle = this.props.theme ? this.getThemeStyle(this.props.theme, this.props.color) : null;
+      var className = "".concat(_ButtonModule.default.button, " ").concat(_ButtonModule.default[this.props.color], " ").concat(_ButtonModule.default[this.props.size], " ").concat(this.getArrowClass(), " ").concat(this.props.theme ? _ButtonModule.default.hasTheme : '', " ").concat(this.props.noHover ? _ButtonModule.default.noHover : '', " ").concat(this.props.rounded ? _ButtonModule.default.rounded : '');
+      return /*#__PURE__*/_react.default.createElement("button", _extends({}, buttonProps, {
+        className: className,
+        style: themeStyle
+      }), this.props.content);
+    }
+  }]);
+
+  return Button;
+}(_react.default.Component);
 
 Button.propTypes = {
   /** Text content inside button */

package/dist/components/CheckBoxIcon.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,35 +17,76 @@ var _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class CheckBoxIcon extends _react.default.Component {
-  render() {
-    let inlineStyle = {
-      height: this.props.size,
-      width: this.props.size,
-      fontSize: this.props.size
-    };
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-    if (this.props.theme && this.props.checked) {
-      inlineStyle = { ...inlineStyle,
-        color: (0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'),
-        boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary')) // TODO: support theme error color
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-      };
-    }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
-      style: inlineStyle
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _CheckBoxIconModule.default.checkmark
-    }, this.props.checked ? this.props.checkmarkCharacter : ''));
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
+  _inherits(CheckBoxIcon, _React$Component);
+
+  var _super = _createSuper(CheckBoxIcon);
+
+  function CheckBoxIcon() {
+    _classCallCheck(this, CheckBoxIcon);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(CheckBoxIcon, [{
+    key: "render",
+    value: function render() {
+      var inlineStyle = {
+        height: this.props.size,
+        width: this.props.size,
+        fontSize: this.props.size
+      };
+
+      if (this.props.theme && this.props.checked) {
+        inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
+          color: (0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'),
+          boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary')) // TODO: support theme error color
+
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.disabled ? _CheckBoxIconModule.default.disabled : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
+        style: inlineStyle
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: _CheckBoxIconModule.default.checkmark
+      }, this.props.checked ? this.props.checkmarkCharacter : ''));
+    }
+  }]);
+
+  return CheckBoxIcon;
+}(_react.default.Component);
 
 CheckBoxIcon.propTypes = {
   size: _propTypes.default.string,
   checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
   showBox: _propTypes.default.bool,
   theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool,
@@ -52,6 +95,7 @@ CheckBoxIcon.propTypes = {
 CheckBoxIcon.defaultProps = {
   size: '20px',
   checked: false,
+  disabled: false,
   showBox: true,
   hasErrors: false,
   checkmarkCharacter: '✔'

package/dist/components/CheckBoxIcon.md

@@ -4,6 +4,9 @@ Regular check box icons example:
 <CheckBoxIcon  />
 <CheckBoxIcon checked={true} />
 <CheckBoxIcon checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon disabled={true} />
+<CheckBoxIcon checked={true} disabled={true} />
+<CheckBoxIcon checked={true} checkmarkCharacter="✕" disabled={true} />
 ```
 
 Themed Regular check box icons example:
@@ -11,18 +14,24 @@ Themed Regular check box icons example:
 ```js
 import customTheme from 'data/customTheme';
 <React.Fragment>
-<CheckBoxIcon theme={customTheme} />
-<CheckBoxIcon checked={true} theme={customTheme} />
-<CheckBoxIcon checked={true} theme={customTheme} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' />
+<CheckBoxIcon size='43px' checked={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
 </React.Fragment>
 ```
 
 Check box icons with custom size example:
 
 ```js
-<CheckBoxIcon size='43px'  />
+<CheckBoxIcon size='43px' />
 <CheckBoxIcon size='43px' checked={true} />
 <CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" />
+<CheckBoxIcon size='43px' disabled={true} />
+<CheckBoxIcon size='43px' checked={true} disabled={true} />
+<CheckBoxIcon size='43px' checked={true} checkmarkCharacter="✕" disabled={true} />
 ```
 
 

package/dist/components/CheckBoxIcon.module.scss

@@ -13,6 +13,7 @@
   margin-right: 0.2em;
   line-height: 1;
   text-align: center;
+  cursor: pointer;
 
   &:local(.showBox) {
     margin-right: 0.4em;
@@ -38,6 +39,12 @@
     }
   }
 
+  &:local(.disabled) {
+    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.25);
+    cursor: default;
+  }
+
   :local(.checkmark) {
     font-size: 1em;
     line-height: 0.75em;

package/dist/components/CheckBoxInput.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,33 +17,71 @@ var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.modul
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-class CheckBoxInput extends _react.default.Component {
-  render() {
-    return /*#__PURE__*/_react.default.createElement("label", {
-      className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(this.props.contentOnly ? _CheckBoxInputModule.default.contentOnly : '', " ").concat(this.props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ''),
-      htmlFor: this.props.id
-    }, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, {
-      checked: this.props.checked,
-      theme: this.props.theme,
-      hasErrors: this.props.hasErrors,
-      checkmarkCharacter: this.props.checkmarkCharacter
-    }), /*#__PURE__*/_react.default.createElement("input", {
-      onChange: this.props.onChange,
-      type: "checkbox",
-      name: this.props.name,
-      id: this.props.id,
-      checked: this.props.checked
-    })) : /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, {
-      checked: this.props.checked,
-      showBox: false,
-      theme: this.props.theme
-    }), /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
+  _inherits(CheckBoxInput, _React$Component);
+
+  var _super = _createSuper(CheckBoxInput);
+
+  function CheckBoxInput() {
+    _classCallCheck(this, CheckBoxInput);
+
+    return _super.apply(this, arguments);
   }
 
-}
+  _createClass(CheckBoxInput, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("label", {
+        className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(this.props.contentOnly ? _CheckBoxInputModule.default.contentOnly : '', " ").concat(this.props.disabled ? _CheckBoxInputModule.default.disabled : '', " ").concat(this.props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ''),
+        htmlFor: this.props.id
+      }, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, {
+        checked: this.props.checked,
+        disabled: this.props.disabled,
+        theme: this.props.theme,
+        hasErrors: this.props.hasErrors,
+        checkmarkCharacter: this.props.checkmarkCharacter
+      }), /*#__PURE__*/_react.default.createElement("input", {
+        onChange: this.props.onChange,
+        type: "checkbox",
+        name: this.props.name,
+        id: this.props.id,
+        checked: this.props.checked,
+        disabled: this.props.disabled
+      })) : /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, {
+        checked: this.props.checked,
+        disabled: this.props.disabled,
+        showBox: false,
+        theme: this.props.theme
+      }), /*#__PURE__*/_react.default.createElement("span", null, this.props.children));
+    }
+  }]);
+
+  return CheckBoxInput;
+}(_react.default.Component);
 
 CheckBoxInput.propTypes = {
   checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
@@ -52,6 +92,7 @@ CheckBoxInput.propTypes = {
 };
 CheckBoxInput.defaultProps = {
   checked: false,
+  disabled: false,
   name: '',
   contentOnly: false,
   hasErrors: false,

package/dist/components/CheckBoxInput.md

@@ -5,16 +5,19 @@ Checkbox input example:
 <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-1" checked={true}>
   <span>Label for checked checkbox</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-2" checked={true} disabled={true}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3">
   <span>Label for unchecked checkbox</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-3" checked={true} contentOnly={true}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" checked={true} contentOnly={true}>
   <span>Checked checkbox with content only</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-4" contentOnly={true}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" contentOnly={true}>
   <span>Unchecked checkbox with content only</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-5" checked={true} checkmarkCharacter="✕">
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
   <span>Label for checked checkbox with custom checkmark</span>
 </CheckBoxInput>
 </div>
@@ -29,16 +32,19 @@ import customTheme from 'data/customTheme';
 <CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-1" checked={true} theme={customTheme}>
   <span>Label for checked checkbox</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" theme={customTheme}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-2" checked={true} disabled={true} theme={customTheme}>
+  <span>Label for checked disabled checkbox</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" theme={customTheme}>
   <span>Label for unchecked checkbox</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-3" checked={true} contentOnly={true} theme={customTheme}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" checked={true} contentOnly={true} theme={customTheme}>
   <span>Checked checkbox with content only</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-4" contentOnly={true} theme={customTheme}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="themed-checkbox" id="themed-checkBoxInput-5" contentOnly={true} theme={customTheme}>
   <span>Unchecked checkbox with content only</span>
 </CheckBoxInput>
-<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-5" checked={true} checkmarkCharacter="✕" theme={customTheme}>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="themed-checkBoxInput-6" checked={true} checkmarkCharacter="✕" theme={customTheme}>
   <span>Label for checked checkbox with custom checkmark</span>
 </CheckBoxInput>
 </div>

package/dist/components/CheckBoxInput.module.scss

@@ -4,8 +4,11 @@
   display: flex;
   margin-right: 1em;
 
-  &:not(:local(.contentOnly)) {
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
     cursor: pointer;
+    input {
+      cursor: pointer;
+    }
   }
 
   &:local(.hasErrors) {