beem-component 1.0.2 → 1.0.6

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Loader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loader = require("./loader");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _loader.BmLoader,
+  title: "components/Loader",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the loader (Can also be predefined e.g. 10px)",
+      defaultValue: {
+        summary: "large"
+      }
+    },
+    type: {
+      options: ["success", "warning", "error"],
+      control: {
+        type: "select"
+      },
+      description: "Type of loader",
+      defaultValue: {
+        summary: "Beem default loader"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainLoader = function MainLoader(args) {
+  return /*#__PURE__*/_react.default.createElement(_loader.BmLoader, args);
+};
+
+var Loader = MainLoader.bind({});
+exports.Loader = Loader;
+Loader.args = {
+  type: "success",
+  size: "small"
+};

package/dist/components/{Reports/buttons.js → MainWrapper/index.js}

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmReportsButton = void 0;
+exports.MainWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _colors = require("../colors");
+
 var _templateObject;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var BmReportsButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0.5rem 0rem 1rem 0rem;\n"])));
+var MainWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 2.1875rem;\n  background-color: ", ";\n"])), _colors.BmBgGreyBlue);
 
-exports.BmReportsButton = BmReportsButton;
+exports.MainWrapper = MainWrapper;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MessageCounter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _messageCounter = _interopRequireDefault(require("./messageCounter"));
+
+var _addonKnobs = require("@storybook/addon-knobs");
+
+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",
+  argTypes: {
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the counter (can also be custom example: 10px)",
+      defaultValue: {
+        summary: "small"
+      }
+    },
+    children: {
+      description: "Counter Text",
+      defaultValue: {
+        summary: undefined
+      }
+    }
+  }
+};
+exports.default = _default;
+var optionSize = {
+  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"));
+};
+
+exports.MessageCounter = MessageCounter;

package/dist/components/MessageCounter/messageCounter.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _text = require("../text");
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+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";
+  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";
+  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);
+  return "".concat(_text.p);
+}, _colors.BmPrimaryBlue);
+
+BmCounter.propTypes = {
+  children: _propTypes.default.string,
+  size: _propTypes.default.string
+};
+var _default = BmCounter;
+exports.default = _default;

package/dist/components/Modals/modal copy.js

@@ -0,0 +1,160 @@
+"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.Overlay = exports.ModalWrapper = exports.ModalContent = exports.HeaderWrapper = exports.HeaderText = exports.Close = exports.BmModal = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@material-ui/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
+
+var _excluded = ["children", "show", "size", "centered", "setShowModals"],
+    _excluded2 = ["children", "leadingIcon", "trailingIcon", "size", "closeButton", "show"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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); }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _React$createContext = /*#__PURE__*/_react.default.createContext(),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
+
+exports.Overlay = Overlay;
+
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+  var size = _ref.size;
+
+  if (size) {
+    console.log({
+      size: size
+    });
+    if (size === "small") return "21.429rem";
+    if (size === "default") return "35.714rem";
+    if (size === "large") return "57.143rem";
+    if (size === "xlarge") return "81.429rem";
+    return size;
+  }
+
+  return "35.714rem";
+});
+
+exports.ModalContent = ModalContent;
+
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref2) {
+  var centered = _ref2.centered;
+
+  if (centered) {
+    return "50%";
+  }
+
+  return "10%";
+});
+
+exports.ModalWrapper = ModalWrapper;
+
+var HeaderWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: 1.143rem 0rem;\n"])));
+
+exports.HeaderWrapper = HeaderWrapper;
+
+var HeaderText = _styledComponents.default.h2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  text-align: center;\n  display: flex;\n  color: ", ";\n  margin-left: auto;\n"])), _colors.BmPrimaryBlack);
+
+exports.HeaderText = HeaderText;
+
+var Close = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  margin-left: auto;\n"])));
+
+exports.Close = Close;
+
+var BmModal = function BmModal(_ref3) {
+  var children = _ref3.children,
+      show = _ref3.show,
+      size = _ref3.size,
+      centered = _ref3.centered,
+      setShowModals = _ref3.setShowModals,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  var _useState = (0, _react.useState)(show),
+      _useState2 = _slicedToArray(_useState, 2),
+      toggle = _useState2[0],
+      setToggle = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setToggle(show);
+  }, [show]);
+  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, {
+    showModal: show,
+    centered: centered
+  }, /*#__PURE__*/_react.default.createElement(Provider, {
+    value: {
+      toggle: toggle,
+      setToggle: setToggle,
+      size: size,
+      show: show
+    }
+  }, /*#__PURE__*/_react.default.createElement(ModalContent, _extends({
+    size: size
+  }, rest), children)))));
+};
+
+exports.BmModal = BmModal;
+
+var ModalHeader = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+
+BmModal.Header = function (_ref4) {
+  var children = _ref4.children,
+      leadingIcon = _ref4.leadingIcon,
+      trailingIcon = _ref4.trailingIcon,
+      size = _ref4.size,
+      closeButton = _ref4.closeButton,
+      show = _ref4.show,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, JSON.stringify(value), children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+      size: "xlarge",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
+      onClick: function onClick() {
+        return value.setToggle(!value.toggle);
+      }
+    }, rest))));
+  });
+};
+
+BmModal.Body = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+BmModal.Footer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var _default = BmModal;
+exports.default = _default;

package/dist/components/Modals/modal.js

@@ -0,0 +1,166 @@
+"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.Overlay = exports.ModalWrapper = exports.ModalContent = exports.BmModal = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _icons = require("@material-ui/icons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
+
+var _excluded = ["children", "show", "size", "onHide", "centered"],
+    _excluded2 = ["children", "size", "onHide", "closeButton", "show"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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); }
+
+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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var _React$createContext = /*#__PURE__*/_react.default.createContext(),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n}\n"])), _colors.BmBgGrey45);
+
+exports.Overlay = Overlay;
+
+var ModalContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  border-radius: 0.25rem;\n  padding: 1rem;\n  margin: auto;\n  background: ", ";\n  width: ", ";\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n"])), _colors.BmPrimaryWhite, function (_ref) {
+  var size = _ref.size;
+
+  if (size) {
+    if (size === "small") return "21.429rem";
+    if (size === "default") return "35.714rem";
+    if (size === "large") return "57.143rem";
+    if (size === "xlarge") return "81.429rem";
+    return size;
+  }
+
+  return "35.714rem";
+});
+
+exports.ModalContent = ModalContent;
+
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  z-index: 9999;\n  overflow-x: auto;\n  overflow-y: auto;\n  outline: 0;\n  position: fixed;\n  height: auto;\n  top: ", ";\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), function (_ref2) {
+  var centered = _ref2.centered;
+
+  if (centered) {
+    return "50%";
+  }
+
+  return "10%";
+});
+
+exports.ModalWrapper = ModalWrapper;
+
+var BmModal = function BmModal(_ref3) {
+  var children = _ref3.children,
+      show = _ref3.show,
+      size = _ref3.size,
+      onHide = _ref3.onHide,
+      centered = _ref3.centered,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  var _useState = (0, _react.useState)(show),
+      _useState2 = _slicedToArray(_useState, 2),
+      toggle = _useState2[0],
+      setToggle = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setToggle(show);
+  }, [show]);
+  var keyPress = (0, _react.useCallback)(function (e) {
+    if (e.key === "Escape" && show && onHide !== undefined) {
+      onHide(false);
+    }
+  }, [onHide, show]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", keyPress);
+    return function () {
+      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, {
+    showModal: show,
+    centered: centered,
+    onHide: onHide
+  }, /*#__PURE__*/_react.default.createElement(Provider, {
+    value: {
+      toggle: toggle,
+      setToggle: setToggle,
+      size: size,
+      show: show,
+      onHide: onHide
+    }
+  }, /*#__PURE__*/_react.default.createElement(ModalContent, _extends({
+    size: size
+  }, 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"])));
+
+BmModal.Header = function (_ref4) {
+  var children = _ref4.children,
+      size = _ref4.size,
+      onHide = _ref4.onHide,
+      closeButton = _ref4.closeButton,
+      show = _ref4.show,
+      rest = _objectWithoutProperties(_ref4, _excluded2);
+
+  return /*#__PURE__*/_react.default.createElement(Consumer, null, function (value) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, children, closeButton && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, _extends({
+      size: "xlarge",
+      icon: /*#__PURE__*/_react.default.createElement(_icons.Clear, null),
+      onClick: function onClick() {
+        return value && value.onHide && value.onHide(!value.show);
+      }
+    }, rest))));
+  });
+};
+
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])));
+BmModal.Footer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
+BmModal.propTypes = {
+  size: _propTypes.default.string,
+  centered: _propTypes.default.bool,
+  show: _propTypes.default.bool.isRequired,
+  onHide: _propTypes.default.func.isRequired,
+  closeButton: _propTypes.default.bool
+};
+var _default = BmModal;
+exports.default = _default;

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

@@ -0,0 +1,117 @@
+"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.SampleModal = exports.ExampleModal = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _modal = _interopRequireDefault(require("./modal"));
+
+var _buttons = require("../Buttons/buttons");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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: _modal.default,
+  title: "components/Modals",
+  argType: {
+    size: {
+      options: ["small", "default", "large", "xlarge"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the Modal (Optional)",
+      defaultValue: {
+        summary: "default"
+      }
+    },
+    closeButton: {
+      description: "Placed on BmModal.Header component. Displays the close button (X)"
+    },
+    centered: {
+      description: "Centers the modal"
+    },
+    show: {
+      control: {
+        type: "boolean"
+      },
+      description: "Handling the opening and closing of the modal"
+    },
+    onHide: {
+      description: "Handling the closing of the modal"
+    }
+  }
+};
+exports.default = _default;
+
+var SampleModal = function SampleModal() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!")), /*#__PURE__*/_react.default.createElement(_modal.default, {
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    },
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a footer"))));
+};
+
+exports.SampleModal = SampleModal;
+
+var ExampleModal = function ExampleModal() {
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showModal = _useState4[0],
+      setShowModal = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    onClick: function onClick() {
+      return setShowModal(!showModal);
+    }
+  }, "Click Me!")), /*#__PURE__*/_react.default.createElement(_modal.default, {
+    size: "small",
+    show: showModal,
+    onHide: function onHide() {
+      return setShowModal(false);
+    },
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_modal.default.Header, {
+    closeButton: true
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Header")), /*#__PURE__*/_react.default.createElement(_modal.default.Body, null, /*#__PURE__*/_react.default.createElement("p", null, "This is a body")), /*#__PURE__*/_react.default.createElement(_modal.default.Footer, null, /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    size: "small"
+  }, "Send"), /*#__PURE__*/_react.default.createElement(_buttons.BmButton, {
+    size: "small",
+    variant: "secondary"
+  }, "View"))));
+};
+
+exports.ExampleModal = ExampleModal;