beem-component 2.1.13 → 2.1.14

package/dist/components/Modals/modal.js

@@ -28,19 +28,27 @@ const Overlay = exports.Overlay = _styledComponents.default.div.withConfig({
 })(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
 const ModalContent = exports.ModalContent = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalContent"
-})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:500px;}"], _colors.BmPrimaryWhite);
+})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:", ";}"], _colors.BmPrimaryWhite, _ref => {
+  let {
+    size
+  } = _ref;
+  if (size) {
+    return size;
+  }
+  return '500px';
+});
 const ModalWrapper = exports.ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalWrapper"
 })(["position:fixed;top:0;left:0;z-index:9999;display:block;width:100%;height:100%;overflow:hidden;outline:0;margin:auto;overflow-x:hidden;overflow-y:auto;"]);
-const BmModal = _ref => {
+const BmModal = _ref2 => {
   let {
       children,
       show,
       size,
       onHide,
       centered
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   const [toggle, setToggle] = (0, _react.useState)(show);
   (0, _react.useEffect)(() => {
     setToggle(show);
@@ -79,7 +87,7 @@ const ModalHeaderContent = _styledComponents.default.div.withConfig({
 const IconContainer = _styledComponents.default.div.withConfig({
   displayName: "modal__IconContainer"
 })(["display:flex;padding:0.5714rem;justify-content:center;align-items:center;border-radius:0.7143rem;border:0.0714rem solid var(--Gray-200,#eaecf0);background:var(--Base-White,#fff);box-shadow:0rem 0.0714rem 0.1429rem 0rem rgba(16,24,40,0.05);"]);
-BmModal.Header = _ref2 => {
+BmModal.Header = _ref3 => {
   let {
       children,
       size,
@@ -89,8 +97,8 @@ BmModal.Header = _ref2 => {
       show,
       icon,
       trailingIcon
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
   return /*#__PURE__*/_react.default.createElement(Consumer, null, value => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, trailingIcon && /*#__PURE__*/_react.default.createElement(IconContainer, null, trailingIcon), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%'

package/package.json

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

package/src/App.js

@@ -31,7 +31,7 @@ import {
   // BmButtonDropDown,
   // BmBtnIcon,
   BmContactCard,
-  // BmModal,
+  BmModal,
   // BmContactCheckbox,
   // BmCounter,
   // BmProfileIcon,
@@ -915,6 +915,7 @@ const Chat = () => {
       ],
     };
   };
+  const [showModal, setShowModal] = useState(false);
 
   const renderJsonMessagex = () => {
     const parsedMessage = JSON.parse(x.metadata.prev_message);
@@ -1075,6 +1076,20 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
+      <div>
+        <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
+      </div>
+      <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <p>This is a body</p>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+        </BmModal.Footer>
+      </BmModal>
 
       <div
         style={{

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

@@ -34,7 +34,12 @@ export const ModalContent = styled.div`
     margin-bottom: 0.5rem;
   }
   @media (min-width: 576px) {
-    width: 500px;
+    width: ${({ size }) => {
+      if (size) {
+        return size;
+      }
+      return '500px';
+    }};
   }
 `;