beem-component 2.1.12 → 2.1.14

package/dist/components/BmTabv2/BmTabv2.js

@@ -16,7 +16,7 @@ const TabsHeader = _styledComponents.default.div.withConfig({
 })(["display:flex;justify-content:flex-start;align-items:center;margin-bottom:14px;padding:0 14px;border-radius:var(--radius-lg,12px);flex-wrap:wrap;"]);
 const TabsList = _styledComponents.default.div.withConfig({
   displayName: "BmTabv2__TabsList"
-})(["display:inline-flex;background-color:var(--color-muted,#f2f2f2);color:var(--color-muted-foreground,#666);align-items:center;justify-content:center;border-radius:var(--radius-lg,12px);padding:4px 4px;"]);
+})(["width:100%;display:inline-flex;background-color:var(--color-muted,#f2f2f2);color:var(--color-muted-foreground,#666);align-items:center;justify-content:center;border-radius:var(--radius-lg,12px);padding:4px 4px;"]);
 const TabsTriggerButton = _styledComponents.default.button.withConfig({
   displayName: "BmTabv2__TabsTriggerButton"
 })(["display:inline-flex;flex:1;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-lg,12px);padding:6px 12px;font-size:14px;font-weight:500;white-space:nowrap;transition:color 0.2s,box-shadow 0.2s,background-color 0.2s;cursor:pointer;", " &:focus-visible{outline:none;border-color:var(--color-ring,#2684ff);box-shadow:0 0 0 3px rgba(38,132,255,0.3);}&:disabled{pointer-events:none;opacity:0.5;}svg{flex-shrink:0;pointer-events:none;width:16px;height:16px;}"], _ref => {

package/dist/components/HorizontalCard/HorizontalCard.js

@@ -14,6 +14,7 @@ var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
 var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
 var _Groups2Outlined = _interopRequireDefault(require("@mui/icons-material/Groups2Outlined"));
 var _PeopleAltOutlined = _interopRequireDefault(require("@mui/icons-material/PeopleAltOutlined"));
+var _lodash = require("lodash");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RowContainer = _styledComponents.default.div.withConfig({
@@ -95,7 +96,7 @@ const BmHorizontalCard = _ref4 => {
     fontSize: "small"
   }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "$".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
     fontSize: "small"
-  }), /*#__PURE__*/_react.default.createElement("span", null, location, location === 'physical' && address ? " (".concat(address.split(',')[0], "...)") : '')), guest_limit && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_Groups2Outlined.default, {
+  }), /*#__PURE__*/_react.default.createElement("span", null, location, (0, _lodash.lowerCase)(location) === 'physical' && address ? " (".concat(address.split(',')[0], "...)") : '')), guest_limit && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_Groups2Outlined.default, {
     fontSize: "small"
   }), /*#__PURE__*/_react.default.createElement("span", null, "Max ", guest_limit, " attendee", guest_limit > 1 ? 's' : '')), selectedResources && selectedResources.length > 0 && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_PeopleAltOutlined.default, {
     fontSize: "small"

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.12",
+  "version": "2.1.14",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -10,7 +10,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
 
 import GroupIcon from '@mui/icons-material/Group';
-import BusinessIcon from '@mui/icons-material/Business';
+// import BusinessIcon from '@mui/icons-material/Business';
 
 import CheckIcon from '@mui/icons-material/Check';
 import EditIcon from '@mui/icons-material/Edit';
@@ -31,7 +31,7 @@ import {
   // BmButtonDropDown,
   // BmBtnIcon,
   BmContactCard,
-  // BmModal,
+  BmModal,
   // BmContactCheckbox,
   // BmCounter,
   // BmProfileIcon,
@@ -71,7 +71,7 @@ import AlertBox from './lib/components/Alert/Alert';
 // });
 // console.log(datsa);
 const tabs = [
-  { value: 'departments', label: 'Departments', icon: BusinessIcon },
+  { value: 'departments', label: 'Departments' },
   { value: 'resources', label: 'Resources', icon: GroupIcon },
   { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
 ];
@@ -915,6 +915,7 @@ const Chat = () => {
       ],
     };
   };
+  const [showModal, setShowModal] = useState(false);
 
   const renderJsonMessagex = () => {
     const parsedMessage = JSON.parse(x.metadata.prev_message);
@@ -1075,7 +1076,34 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <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={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '2rem',
+          width: '50%',
+        }}
+      >
+        <BmCustomTab
+          value={activeTab}
+          onValueChange={setActiveTab}
+          tabs={tabs}
+        />
         <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
           {sampleAppointmentTypes.map((type) => (
             <BmHorizontalCard
@@ -1099,13 +1127,6 @@ const Chat = () => {
           ))}
         </div>
 
-        <BmCustomTab
-          value={activeTab}
-          onValueChange={setActiveTab}
-          tabs={tabs}
-          className="event-types-tabs"
-        />
-
         <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
           <div style={{ maxWidth: 400, margin: '2rem auto' }}>
             <BmDepartmentCard

package/src/lib/components/BmTabv2/BmTabv2.js

@@ -16,6 +16,7 @@ const TabsHeader = styled.div`
 `;
 
 const TabsList = styled.div`
+  width: 100%;
   display: inline-flex;
   background-color: var(--color-muted, #f2f2f2);
   color: var(--color-muted-foreground, #666);

package/src/lib/components/HorizontalCard/HorizontalCard.js

@@ -8,6 +8,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Groups2OutlinedIcon from '@mui/icons-material/Groups2Outlined';
 import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
+import { lowerCase } from 'lodash';
 
 const RowContainer = styled.div`
   position: relative;
@@ -195,7 +196,7 @@ const BmHorizontalCard = ({
             <LocationOnOutlinedIcon fontSize="small" />
             <span>
               {location}
-              {location === 'physical' && address
+              {lowerCase(location) === 'physical' && address
                 ? ` (${address.split(',')[0]}...)`
                 : ''}
             </span>

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';
+    }};
   }
 `;