beem-component 1.2.4 → 1.2.8

package/dist/components/Modals/modal.js

@@ -54,57 +54,25 @@ 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);
+var Overlay = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \tposition: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\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  max-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";
-}, function (_ref2) {
-  var size = _ref2.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";
-});
+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: auto;\n  max-width: 100%;\n\n  > *:not(:last-child) {\n    margin-bottom: 1rem;\n  }\n  @media (min-width: 576px) {\n    max-width: 500px;\n    width: 500px;\n  }\n"])), _colors.BmPrimaryWhite);
 
 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 (_ref3) {
-  var centered = _ref3.centered;
-
-  if (centered) {
-    return "50%";
-  }
-
-  return "15%";
-});
+var ModalWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  outline: 0;\n  margin: 2rem auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n"])));
 
 exports.ModalWrapper = ModalWrapper;
 
-var BmModal = function BmModal(_ref4) {
-  var children = _ref4.children,
-      show = _ref4.show,
-      size = _ref4.size,
-      onHide = _ref4.onHide,
-      centered = _ref4.centered,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+var BmModal = function BmModal(_ref) {
+  var children = _ref.children,
+      show = _ref.show,
+      size = _ref.size,
+      onHide = _ref.onHide,
+      centered = _ref.centered,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(show),
       _useState2 = _slicedToArray(_useState, 2),
@@ -146,13 +114,13 @@ 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 (_ref5) {
-  var children = _ref5.children,
-      size = _ref5.size,
-      onHide = _ref5.onHide,
-      closeButton = _ref5.closeButton,
-      show = _ref5.show,
-      rest = _objectWithoutProperties(_ref5, _excluded2);
+BmModal.Header = function (_ref2) {
+  var children = _ref2.children,
+      size = _ref2.size,
+      onHide = _ref2.onHide,
+      closeButton = _ref2.closeButton,
+      show = _ref2.show,
+      rest = _objectWithoutProperties(_ref2, _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({
@@ -165,8 +133,8 @@ BmModal.Header = function (_ref5) {
   });
 };
 
-BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  max-height: ", ";\n  overflow: auto;\n"])), function (_ref6) {
-  var size = _ref6.size;
+BmModal.Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  > *:not(:last-child) {\n    margin-bottom: 0.5rem;\n  }\n  max-height: ", ";\n  overflow: auto;\n"])), function (_ref3) {
+  var size = _ref3.size;
 
   if (size) {
     if (size === "small") return "21.429rem";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "beem-component",
-    "version": "1.2.4",
+    "version": "1.2.8",
     "private": false,
     "main": "dist/components/index.js",
     "scripts": {

package/src/lib/components/Modals/modal.js

@@ -12,8 +12,8 @@ export const Overlay = styled.div`
   top: 0;
   left: 0;
   z-index: 9999;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background-color: ${BmBgGrey45};
 }
 `;
@@ -24,46 +24,31 @@ export const ModalContent = styled.div`
   padding: 1rem;
   margin: auto;
   background: ${BmPrimaryWhite};
-  width: ${({ 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";
-  }};
-  max-width: ${({ 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";
-  }};
+  width: auto;
+  max-width: 100%;
+
   > *:not(:last-child) {
     margin-bottom: 1rem;
   }
+  @media (min-width: 576px) {
+    max-width: 500px;
+    width: 500px;
+  }
 `;
 
 export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: 9999;
-  overflow-x: auto;
-  overflow-y: auto;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   outline: 0;
-  position: fixed;
-  height: auto;
-  top: ${({ centered }) => {
-    if (centered) {
-      return "50%";
-    }
-    return "15%";
-  }};
-  left: 50%;
-  transform: translate(-50%, -50%);
+  margin: 2rem auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 `;
 
 export const BmModal = ({

package/src/lib/components/Modals/modals.stories.js

@@ -7,19 +7,19 @@ export default {
   component: BmModal,
   title: "components/Modals",
   argType: {
-    size: {
-      options: ["small", "default", "large", "xlarge"],
-      control: { type: "select" },
-      description: "Size of the Modal (Optional)",
-      defaultValue: { summary: "default" },
-    },
+    // 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",
-    },
+    // centered: {
+    //   description: "Centers the modal",
+    // },
     show: {
       control: { type: "boolean" },
       description: "Handling the opening and closing of the modal",
@@ -37,7 +37,7 @@ export const SampleModal = () => {
       <div>
         <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
       </div>
-      <BmModal show={showModal} onHide={() => setShowModal(false)} centered>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
         <BmModal.Header closeButton>
           <h2>Header</h2>
         </BmModal.Header>