beem-component 2.1.18 → 2.1.19

package/dist/components/Modals/modal.js

@@ -10,7 +10,7 @@ var _icons = require("@material-ui/icons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-const _excluded = ["children", "show", "size", "onHide", "centered"],
+const _excluded = ["children", "show", "size", "zIndex", "onHide", "centered"],
   _excluded2 = ["children", "size", "onHide", "subHeading", "closeButton", "show", "icon", "trailingIcon"];
 /* eslint-disable no-undef */
 /* eslint-disable react/display-name */
@@ -25,13 +25,18 @@ const {
 } = /*#__PURE__*/_react.default.createContext();
 const Overlay = exports.Overlay = _styledComponents.default.div.withConfig({
   displayName: "modal__Overlay"
-})(["position:fixed;top:0;left:0;z-index:20;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
+})(["position:fixed;top:0;left:0;z-index:", ";width:100vw;height:100vh;background-color:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex || 20;
+}, _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:", ";}"], _colors.BmPrimaryWhite, _ref => {
+})(["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, _ref2 => {
   let {
     size
-  } = _ref;
+  } = _ref2;
   if (size) {
     return size;
   }
@@ -40,15 +45,16 @@ const ModalContent = exports.ModalContent = _styledComponents.default.div.withCo
 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 = _ref2 => {
+const BmModal = _ref3 => {
   let {
       children,
       show,
       size,
+      zIndex,
       onHide,
       centered
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   const [toggle, setToggle] = (0, _react.useState)(show);
   (0, _react.useEffect)(() => {
     setToggle(show);
@@ -62,7 +68,9 @@ const BmModal = _ref2 => {
     document.addEventListener('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, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
+    zIndex: zIndex
+  }), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
     showModal: show,
     centered: centered,
     onHide: onHide
@@ -87,7 +95,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 = _ref3 => {
+BmModal.Header = _ref4 => {
   let {
       children,
       size,
@@ -97,8 +105,8 @@ BmModal.Header = _ref3 => {
       show,
       icon,
       trailingIcon
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _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.18",
+  "version": "2.1.19",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -916,6 +916,7 @@ const Chat = () => {
     };
   };
   const [showModal, setShowModal] = useState(false);
+  const [showModal1, setShowModal1] = useState(false);
 
   const renderJsonMessagex = () => {
     const parsedMessage = JSON.parse(x.metadata.prev_message);
@@ -1080,6 +1081,48 @@ const Chat = () => {
         <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
       </div>
       <BmModal show={showModal} onHide={() => setShowModal(false)}>
+        <BmModal.Header closeButton>
+          <h2>Header</h2>
+        </BmModal.Header>
+        <BmModal.Body>
+          <div
+            style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
+          >
+            {sampleAppointmentTypes.map((type) => (
+              <BmHorizontalCard
+                name={type.name}
+                description="Handles imaging and diagnostic scanssdijfsdoijfoisd jsdoij fosidf jsdoif jsdoifs ergjri gr[  jdi[t gegrepg fghepoiurig hroegeigig hep etghtpg hepghrp eug hrg[o hrgiorwrgh w[uugo ggwg iuhwoigw[ig soiug [oh g[wgh[oig hrw[ouig hei reg rwg wgujhsuw hgwrg h9rug rfewrewg fskg42398 glskjgur ghwpgh43hsaujhpghrpeihhou re9ojgpoh"
+                price={type.price}
+                color={type.color}
+                isActive={type.isActive}
+                location={type.location}
+                paymentRequired={type.paymentRequired}
+                selectedResources={type.selectedResources}
+                address={type.address}
+                duration={type.duration}
+                guest_limit={type.guest_limit}
+                key={type.id}
+                onView={() => handleView(type.id)}
+                onDelete={() => handleDelete(type)}
+                onCopyLink={() => handleCopyLink(type.id)}
+                data={type}
+                editToolTip="edit appointment type"
+                deleteToolTip="delete appointment type"
+                copyToolTip="copy appointment type link"
+              />
+            ))}
+          </div>
+        </BmModal.Body>
+        <BmModal.Footer>
+          <p>This is a footer</p>
+          <BmButton onClick={() => setShowModal1(true)}>open</BmButton>
+        </BmModal.Footer>
+      </BmModal>
+      <BmModal
+        zIndex={9999}
+        show={showModal1}
+        onHide={() => setShowModal1(false)}
+      >
         <BmModal.Header closeButton>
           <h2>Header</h2>
         </BmModal.Header>
@@ -1088,9 +1131,9 @@ const Chat = () => {
         </BmModal.Body>
         <BmModal.Footer>
           <p>This is a footer</p>
+          <BmButton onClick={() => setShowModal1(false)}>Close</BmButton>
         </BmModal.Footer>
       </BmModal>
-
       <div
         style={{
           display: 'flex',

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

@@ -15,7 +15,7 @@ export const Overlay = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 20;
+  z-index: ${({ zIndex }) => zIndex || 20};
   width: 100vw;
   height: 100vh;
   background-color: ${BmBgGrey45};
@@ -58,7 +58,15 @@ export const ModalWrapper = styled.div`
   overflow-y: auto;
 `;
 
-const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
+const BmModal = ({
+  children,
+  show,
+  size,
+  zIndex,
+  onHide,
+  centered,
+  ...rest
+}) => {
   const [toggle, setToggle] = useState(show);
   useEffect(() => {
     setToggle(show);
@@ -82,7 +90,7 @@ const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
     <>
       {toggle && (
         <>
-          <Overlay />
+          <Overlay zIndex={zIndex} />
           <ModalWrapper showModal={show} centered={centered} onHide={onHide}>
             <Provider value={{ toggle, setToggle, size, show, onHide }}>
               <ModalContent size={size} {...rest}>

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

@@ -8,12 +8,11 @@ export default {
   component: BmModal,
   title: 'components/Modals',
   argTypes: {
-    // size: {
-    //   options: ["small", "default", "large", "xlarge"],
-    //   control: { type: "select" },
-    //   description: "Size of the Modal (Optional)",
-    //   defaultValue: { summary: "default" },
-    // },
+    size: {
+      control: { type: 'text' },
+      description: 'Controls the width of the modal in Pixels',
+      defaultValue: '500px',
+    },
     closeButton: {
       description:
         'Placed on BmModal.Header component. Displays the close button (X)',
@@ -28,6 +27,11 @@ export default {
     onHide: {
       description: 'Handling the closing of the modal',
     },
+    zIndex: {
+      description:
+        'Controls the stacking order of the modal in an event you have multiple modals',
+      control: { type: 'number' },
+    },
   },
 };