beem-component 1.5.8 → 1.6.1

package/dist/components/Checkbox/checkboxToggler.stories.js

@@ -0,0 +1,92 @@
+"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
+});
+exports.default = exports.Sample = exports.DisabledToggler = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _checkboxToggler = require("./checkboxToggler");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = {
+  component: _checkboxToggler.BmCheckboxToggle,
+  title: 'components/CheckboxToggler',
+  argTypes: {
+    label: {
+      description: 'Label (optional))',
+      defaultValue: {
+        summary: undefined
+      }
+    },
+    checked: {
+      description: 'If true, the checkbox is set to checked. If false, it is not checked.',
+      defaultValue: {
+        summary: undefined
+      },
+      control: {
+        type: 'boolean'
+      }
+    },
+    onChange: {
+      description: 'Invoked when the user clicks or drags the toggler.'
+    },
+    disabled: {
+      description: 'for disabling the checkbox toggler'
+    }
+  }
+};
+exports.default = _default;
+
+var Sample = function Sample() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(!checked);
+    },
+    label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label")
+  });
+};
+
+exports.Sample = Sample;
+
+var DisabledToggler = function DisabledToggler() {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      checked = _useState4[0],
+      setChecked = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_checkboxToggler.BmCheckboxToggle, {
+    checked: checked,
+    onChange: function onChange() {
+      return setChecked(!checked);
+    },
+    label: /*#__PURE__*/_react.default.createElement("h4", null, "Field Label"),
+    disabled: true
+  });
+};
+
+exports.DisabledToggler = DisabledToggler;

package/dist/components/Lists/listBox.js

@@ -11,10 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _colors = require("../colors");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _colors = require("../colors");
+
 var _excluded = ["children", "showList", "setShowList"];
 
 var _templateObject;
@@ -44,7 +44,7 @@ var show = function show(isOpen) {
     }
   }
 
-  return "flex";
+  return 'flex';
 };
 
 var BmListBoxWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n  padding: 0.25rem 0rem;\n  background: ", ";\n  border: 0.071rem solid ", ";\n  box-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);\n  border-radius: 0.25rem;\n  z-index: 10000;\n  cursor: pointer;\n"])), function (props) {
@@ -65,9 +65,9 @@ var BmListBox = function BmListBox(_ref) {
       }
     };
 
-    document.addEventListener("mousedown", checkIfClickedOutside);
+    document.addEventListener('mousedown', checkIfClickedOutside);
     return function () {
-      document.removeEventListener("mousedown", checkIfClickedOutside);
+      document.removeEventListener('mousedown', checkIfClickedOutside);
     };
   }, [setShowList, showList]);
   return /*#__PURE__*/_react.default.createElement(BmListBoxWrapper, _extends({

package/dist/components/Lists/listBox.stories.js

@@ -9,10 +9,10 @@ exports.default = exports.ListBox = exports.FunctionalListBox = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _listBox = require("./listBox");
-
 var _icons = require("@material-ui/icons");
 
+var _listBox = require("./listBox");
+
 var _rowLabels = require("./rowLabels");
 
 var _buttons = require("../Buttons/buttons");
@@ -35,13 +35,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var _default = {
   component: _listBox.BmListBox,
-  title: "components/Lists/ListBox",
+  title: 'components/Lists/ListBox',
   argTypes: {
     showList: {
-      description: "Used for handling the display of listbox"
+      description: 'Used for handling the display of listbox'
     },
     setShowList: {
-      description: "Function for handling the display of listbox"
+      description: 'Function for handling the display of listbox'
     }
   }
 };

package/dist/components/Lists/listHeader.stories.js

@@ -7,40 +7,40 @@ exports.default = exports.ListHeader = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _icons = require("@material-ui/icons");
+
 var _listheader = require("./listheader");
 
 require("../../../main.scss");
 
-var _icons = require("@material-ui/icons");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _listheader.BmListHeader,
-  title: "components/Lists/ListHeader",
-  argType: {
+  title: 'components/Lists/ListHeader',
+  argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the trailing icon",
+      description: 'Size of the trailing icon',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     trailingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     color: {
-      description: "Color of the Icon and Border"
+      description: 'Color of the Icon and Border'
     },
     children: {
-      description: "List header text"
+      description: 'List header text'
     }
   }
 };

package/dist/components/Lists/listheader.js

@@ -9,12 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _excluded = ["children", "trailingIcon", "size", "color"];
 
 var _templateObject;
@@ -31,7 +31,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 0rem 1rem 1rem 1rem;\n  border-bottom: 0.125rem solid\n    ", ";\n"])), function (_ref) {
   var color = _ref.color;
-  return color ? color : "".concat(_colors.BmPrimaryBlue);
+  return color || "".concat(_colors.BmPrimaryBlue);
 });
 
 exports.Container = Container;
@@ -48,7 +48,7 @@ var BmListHeader = function BmListHeader(_ref2) {
   }, rest), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: trailingIcon,
     color: color || "".concat(_colors.BmPrimaryBlack),
-    size: size || "large"
+    size: size || 'large'
   }));
 };
 

package/dist/components/Lists/rowLabels.js

@@ -9,12 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _colors = require("../colors");
 
 var _iconStyles = require("../iconStyles");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _excluded = ["children", "trailingIcon", "leadingIcon", "label", "color", "size"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;

package/dist/components/Lists/rowLabels.stories.js

@@ -7,12 +7,12 @@ exports.default = exports.TextOnly = exports.TextLabel = exports.LabelIcons = vo
 
 var _react = _interopRequireDefault(require("react"));
 
+var _icons = require("@material-ui/icons");
+
 var _rowLabels = require("./rowLabels");
 
 require("../../../main.scss");
 
-var _icons = require("@material-ui/icons");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -23,38 +23,38 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var _default = {
   component: _rowLabels.BmRowLabel,
-  title: "components/Lists/RowLabels",
-  argType: {
+  title: 'components/Lists/RowLabels',
+  argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the icons",
+      description: 'Size of the icons',
       defaultValue: {
-        summary: "small"
+        summary: 'small'
       }
     },
     trailingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     leadingIcon: {
-      description: "Material-UI Icon(optional)",
+      description: 'Material-UI Icon(optional)',
       defaultValue: {
         summary: undefined
       }
     },
     color: {
-      description: "Color of the Icons"
+      description: 'Color of the Icons'
     },
     children: {
-      description: "Row Label text"
+      description: 'Row Label text'
     },
     label: {
-      description: "Label Text"
+      description: 'Label Text'
     }
   }
 };
@@ -80,6 +80,6 @@ exports.LabelIcons = LabelIcons;
 LabelIcons.args = _objectSpread(_objectSpread({}, TextLabel.args), {}, {
   trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowRight, null),
   leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
-  size: "large"
-}); //TODO: add checkbox button example
-//TODO: size not working
+  size: 'large'
+}); // TODO: add checkbox button example
+// TODO: size not working

package/dist/components/Loader/loader.js

@@ -35,9 +35,9 @@ var style = {
   colorPrimary: {
     color: function color(_ref) {
       var type = _ref.type;
-      if (type === "success") return "".concat(_colors.BmSecondaryDarkGreen);
-      if (type === "warning") return "".concat(_colors.BmPrimaryGold);
-      if (type === "error") return "".concat(_colors.BmSecondaryRed);
+      if (type === 'success') return "".concat(_colors.BmSecondaryDarkGreen);
+      if (type === 'warning') return "".concat(_colors.BmPrimaryGold);
+      if (type === 'error') return "".concat(_colors.BmSecondaryRed);
       return "".concat(_colors.BmPrimaryBlue);
     }
   }
@@ -46,12 +46,12 @@ var BmLoader = (0, _styles.withStyles)(style)(function (_ref2) {
   var size = _ref2.size,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
-  var defaultSize = size || "2.286rem";
+  var defaultSize = size || '2.286rem';
 
   if (size) {
-    if (size === "large") defaultSize = "2.286rem";
-    if (size === "medium") defaultSize = "1.714rem";
-    if (size === "small") defaultSize = "1.429rem";
+    if (size === 'large') defaultSize = '2.286rem';
+    if (size === 'medium') defaultSize = '1.714rem';
+    if (size === 'small') defaultSize = '1.429rem';
   }
 
   return /*#__PURE__*/_react.default.createElement(_CircularProgress.default, _extends({

package/dist/components/Loader/loader.stories.js

@@ -14,26 +14,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _loader.BmLoader,
-  title: "components/Loader",
+  title: 'components/Loader',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the loader (Can also be predefined e.g. 10px)",
+      description: 'Size of the loader (Can also be predefined e.g. 10px)',
       defaultValue: {
-        summary: "large"
+        summary: 'large'
       }
     },
     type: {
-      options: ["success", "warning", "error"],
+      options: ['success', 'warning', 'error'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Type of loader",
+      description: 'Type of loader',
       defaultValue: {
-        summary: "Beem default loader"
+        summary: 'Beem default loader'
       }
     }
   }
@@ -47,6 +47,6 @@ var MainLoader = function MainLoader(args) {
 var Loader = MainLoader.bind({});
 exports.Loader = Loader;
 Loader.args = {
-  type: "success",
-  size: "small"
+  type: 'success',
+  size: 'small'
 };

package/dist/components/MessageCounter/MessageCounter.stories.js

@@ -7,29 +7,29 @@ exports.default = exports.MessageCounter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _messageCounter = _interopRequireDefault(require("./messageCounter"));
-
 var _addonKnobs = require("@storybook/addon-knobs");
 
+var _messageCounter = _interopRequireDefault(require("./messageCounter"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable import/no-anonymous-default-export */
 var _default = {
   component: _messageCounter.default,
-  title: "components/MessageCounter",
+  title: 'components/MessageCounter',
   argTypes: {
     size: {
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       control: {
-        type: "select"
+        type: 'select'
       },
-      description: "Size of the counter (can also be custom example: 10px)",
+      description: 'Size of the counter (can also be custom example: 10px)',
       defaultValue: {
-        summary: "small"
+        summary: 'small'
       }
     },
     children: {
-      description: "Counter Text",
+      description: 'Counter Text',
       defaultValue: {
         summary: undefined
       }
@@ -38,15 +38,15 @@ var _default = {
 };
 exports.default = _default;
 var optionSize = {
-  small: "small",
-  medium: "medium",
-  large: "large"
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
 };
 
 var MessageCounter = function MessageCounter() {
   return /*#__PURE__*/_react.default.createElement(_messageCounter.default, {
-    size: (0, _addonKnobs.select)("size", optionSize, "large")
-  }, (0, _addonKnobs.text)("children", "00"));
+    size: (0, _addonKnobs.select)('size', optionSize, 'large')
+  }, (0, _addonKnobs.text)('children', '00'));
 };
 
 exports.MessageCounter = MessageCounter;

package/dist/components/MessageCounter/messageCounter.js

@@ -21,23 +21,23 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var BmCounter = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  border-radius: 50%;\n  text-align: center;\n  background: ", ";\n"])), _colors.BmPrimaryWhite, function (_ref) {
   var size = _ref.size;
-  if (size === "small") return "1.429rem";
-  if (size === "medium") return "1.714rem";
-  if (size === "large") return "2.286rem";
-  if (!size) return "1.429rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '1.429rem';
   return size;
 }, function (_ref2) {
   var size = _ref2.size;
-  if (size === "small") return "1.429rem";
-  if (size === "medium") return "1.714rem";
-  if (size === "large") return "2.286rem";
-  if (!size) return "1.429rem";
+  if (size === 'small') return '1.429rem';
+  if (size === 'medium') return '1.714rem';
+  if (size === 'large') return '2.286rem';
+  if (!size) return '1.429rem';
   return size;
 }, function (_ref3) {
   var size = _ref3.size;
-  if (size === "large") return "".concat(_text.h3);
-  if (size === "medium") return "".concat(_text.h4);
-  if (size === "small") return "".concat(_text.p);
+  if (size === 'large') return "".concat(_text.h3);
+  if (size === 'medium') return "".concat(_text.h4);
+  if (size === 'small') return "".concat(_text.p);
   return "".concat(_text.p);
 }, _colors.BmPrimaryBlue);
 

package/dist/components/Modals/modal.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Overlay = exports.ModalWrapper = exports.ModalContent = exports.BmModal = void 0;
+exports.default = exports.Overlay = exports.ModalWrapper = exports.ModalContent = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -83,14 +83,14 @@ var BmModal = function BmModal(_ref) {
     setToggle(show);
   }, [show]);
   var keyPress = (0, _react.useCallback)(function (e) {
-    if (e.key === "Escape" && show && onHide !== undefined) {
+    if (e.key === 'Escape' && show && onHide !== undefined) {
       onHide(false);
     }
   }, [onHide, show]);
   (0, _react.useEffect)(function () {
-    document.addEventListener("keydown", keyPress);
+    document.addEventListener('keydown', keyPress);
     return function () {
-      return document.removeEventListener("keydown", keyPress);
+      return document.removeEventListener('keydown', keyPress);
     };
   }, [keyPress]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
@@ -110,9 +110,7 @@ var BmModal = function BmModal(_ref) {
   }, rest), children)))));
 };
 
-exports.BmModal = BmModal;
-
-var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items:center;\n"])));
+var ModalHeader = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
 
 BmModal.Header = function (_ref2) {
   var children = _ref2.children,
@@ -133,7 +131,7 @@ BmModal.Header = function (_ref2) {
   });
 };
 
-BmModal.SubHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items:center;\n"])));
+BmModal.SubHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n"])));
 BmModal.Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  ", "\n"])), ''
 /* max-height: ${({ size }) => {
 if (size) {

package/dist/components/Modals/modals.stories.js

@@ -33,8 +33,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var _default = {
   component: _modal.default,
-  title: "components/Modals",
-  argType: {
+  title: 'components/Modals',
+  argTypes: {
     // size: {
     //   options: ["small", "default", "large", "xlarge"],
     //   control: { type: "select" },
@@ -42,19 +42,19 @@ var _default = {
     //   defaultValue: { summary: "default" },
     // },
     closeButton: {
-      description: "Placed on BmModal.Header component. Displays the close button (X)"
+      description: 'Placed on BmModal.Header component. Displays the close button (X)'
     },
     // centered: {
     //   description: "Centers the modal",
     // },
     show: {
       control: {
-        type: "boolean"
+        type: 'boolean'
       },
-      description: "Handling the opening and closing of the modal"
+      description: 'Handling the opening and closing of the modal'
     },
     onHide: {
-      description: "Handling the closing of the modal"
+      description: 'Handling the closing of the modal'
     }
   }
 };

package/dist/components/NoteBar/noteBar.js

@@ -54,10 +54,10 @@ var NoteBarWrapper = _styledComponents.default.div(_templateObject || (_template
       isOpen = _ref.isOpen;
 
   if (!closeButton) {
-    return "flex";
+    return 'flex';
   }
 
-  return isOpen ? "flex" : "none";
+  return isOpen ? 'flex' : 'none';
 }, _colors.BmGrey400);
 
 exports.NoteBarWrapper = NoteBarWrapper;
@@ -78,24 +78,24 @@ var BmNoteBar = function BmNoteBar(_ref2) {
   return /*#__PURE__*/_react.default.createElement(NoteBarWrapper, _extends({
     closeButton: closeButton,
     isOpen: isOpen
-  }, rest), type === "info" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+  }, rest), type === 'info' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Info, null),
-    color: color ? color : "".concat(_colors.BmPrimaryBlue),
-    size: size ? size : "large"
-  }), type === "error" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    color: color || "".concat(_colors.BmPrimaryBlue),
+    size: size || 'large'
+  }), type === 'error' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Error, null),
-    color: color ? color : "".concat(_colors.BmSecondaryRed),
-    size: size ? size : "large"
-  }), type === "warning" && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    color: color || "".concat(_colors.BmSecondaryRed),
+    size: size || 'large'
+  }), type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Warning, null),
-    color: color ? color : "".concat(_colors.BmPrimaryGold),
-    size: size ? size : "large"
+    color: color || "".concat(_colors.BmPrimaryGold),
+    size: size || 'large'
   }), children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
-    color: color ? color : "".concat(_colors.BmSecondaryGrey),
-    size: size ? size : "small",
+    color: color || "".concat(_colors.BmSecondaryGrey),
+    size: size || 'small',
     style: {
-      marginLeft: "auto"
+      marginLeft: 'auto'
     },
     onClick: function onClick() {
       return setIsOpen(false);