beem-component 2.1.17 → 2.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Card_v2/Card.js +1 -1
  2. package/dist/components/HorizontalCard/HorizontalCard.js +13 -5
  3. package/dist/components/HorizontalCard/HorizontalCard.stories.js +1 -3
  4. package/dist/components/Modals/modal.js +19 -11
  5. package/package.json +1 -1
  6. package/src/App.js +102 -59
  7. package/src/lib/components/Card_v2/Card.js +1 -1
  8. package/src/lib/components/HorizontalCard/HorizontalCard.js +17 -8
  9. package/src/lib/components/HorizontalCard/HorizontalCard.stories.jsx +1 -1
  10. package/src/lib/components/Modals/modal.js +11 -3
  11. package/src/lib/components/Modals/modals.stories.js +10 -6
package/dist/components/Card_v2/Card.js CHANGED
@@ -51,7 +51,7 @@ const Description = _styledComponents.default.p.withConfig({
51
51
  })(["color:var(--muted-foreground,#666);margin:0;"]);
52
52
  const Content = _styledComponents.default.div.withConfig({
53
53
  displayName: "Card__Content"
54
- })(["min-height:180px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
54
+ })(["min-height:200px;padding:0 1.5rem;max-height:calc(100vh - 28.5714rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:", " transparent;&::-webkit-scrollbar-thumb{background:", ";border-radius:0.6429rem;transition:background 0.2s ease;}&::-webkit-scrollbar-thumb:hover{background:", ";}&:last-child{padding-bottom:1.5rem;}@media (max-width:54.8571rem){max-height:calc(100vh - 17.8572rem);}"], () => hexToRgba('#33b1ba', 0.2), () => hexToRgba('#33b1ba', 0.3), () => hexToRgba('#33b1ba', 0.3));
55
55
  const Footer = _styledComponents.default.div.withConfig({
56
56
  displayName: "Card__Footer"
57
57
  })(["display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem 1.5rem 1.5rem;gap:1rem;@media (max-width:42.8571rem){flex-direction:column;align-items:stretch;& > *{width:100%;}}"]);
package/dist/components/HorizontalCard/HorizontalCard.js CHANGED
@@ -65,6 +65,14 @@ const IconButton = _styledComponents.default.button.withConfig({
65
65
  } = _ref3;
66
66
  return iconColor || '#111827';
67
67
  });
68
+ const formatDuration = duration => {
69
+ if (duration > 60) {
70
+ const hours = Math.floor(duration / 60);
71
+ const mins = duration % 60;
72
+ return "".concat(hours, "h ").concat(mins > 0 ? "".concat(mins, "m") : '');
73
+ }
74
+ return "".concat(duration, "m");
75
+ };
68
76
  const BmHorizontalCard = _ref4 => {
69
77
  let {
70
78
  onView,
@@ -76,7 +84,7 @@ const BmHorizontalCard = _ref4 => {
76
84
  color,
77
85
  isActive,
78
86
  location,
79
- paymentSettings,
87
+ paymentRequired,
80
88
  selectedResources,
81
89
  address,
82
90
  duration,
@@ -91,13 +99,13 @@ const BmHorizontalCard = _ref4 => {
91
99
  color: color
92
100
  }), /*#__PURE__*/_react.default.createElement(InfoContainer, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(Name, null, name), !isActive && /*#__PURE__*/_react.default.createElement(Badge, {
93
101
  variant: "outline"
94
- }, "Inactive"), (paymentSettings === null || paymentSettings === void 0 ? void 0 : paymentSettings.requirePayment) && /*#__PURE__*/_react.default.createElement(Badge, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
102
+ }, "Inactive"), paymentRequired && /*#__PURE__*/_react.default.createElement(Badge, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
95
103
  fontSize: "small"
96
- }), "Payment Required")), /*#__PURE__*/_react.default.createElement(Description, null, description), /*#__PURE__*/_react.default.createElement(MetaRow, null, /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AccessTime.default, {
104
+ }), "Payment Required")), /*#__PURE__*/_react.default.createElement(Description, null, description), /*#__PURE__*/_react.default.createElement(MetaRow, null, duration && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AccessTime.default, {
97
105
  fontSize: "small"
98
- }), /*#__PURE__*/_react.default.createElement("span", null, duration, " mins")), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
106
+ }), /*#__PURE__*/_react.default.createElement("span", null, formatDuration(duration))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
99
107
  fontSize: "small"
100
- }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "$".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
108
+ }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
101
109
  fontSize: "small"
102
110
  }), /*#__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, {
103
111
  fontSize: "small"
package/dist/components/HorizontalCard/HorizontalCard.stories.js CHANGED
@@ -28,9 +28,7 @@ const Example = () => /*#__PURE__*/_react.default.createElement(_HorizontalCard.
28
28
  color: "#10b981",
29
29
  isActive: true,
30
30
  location: "physical",
31
- paymentSettings: {
32
- requirePayment: true
33
- },
31
+ paymentRequired: "true",
34
32
  selectedResources: sampleResources,
35
33
  address: "456 Innovation Avenue, Tech City",
36
34
  duration: 60,
package/dist/components/Modals/modal.js CHANGED
@@ -10,7 +10,7 @@ var _icons = require("@material-ui/icons");
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
  var _colors = require("../colors");
12
12
  var _iconStyles = require("../iconStyles");
13
- const _excluded = ["children", "show", "size", "onHide", "centered"],
13
+ const _excluded = ["children", "show", "size", "zIndex", "onHide", "centered"],
14
14
  _excluded2 = ["children", "size", "onHide", "subHeading", "closeButton", "show", "icon", "trailingIcon"];
15
15
  /* eslint-disable no-undef */
16
16
  /* eslint-disable react/display-name */
@@ -25,13 +25,18 @@ const {
25
25
  } = /*#__PURE__*/_react.default.createContext();
26
26
  const Overlay = exports.Overlay = _styledComponents.default.div.withConfig({
27
27
  displayName: "modal__Overlay"
28
- })(["position:fixed;top:0;left:0;z-index:20;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
28
+ })(["position:fixed;top:0;left:0;z-index:", ";width:100vw;height:100vh;background-color:", ";"], _ref => {
29
+ let {
30
+ zIndex
31
+ } = _ref;
32
+ return zIndex || 20;
33
+ }, _colors.BmBgGrey45);
29
34
  const ModalContent = exports.ModalContent = _styledComponents.default.div.withConfig({
30
35
  displayName: "modal__ModalContent"
31
- })(["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 => {
36
+ })(["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 => {
32
37
  let {
33
38
  size
34
- } = _ref;
39
+ } = _ref2;
35
40
  if (size) {
36
41
  return size;
37
42
  }
@@ -40,15 +45,16 @@ const ModalContent = exports.ModalContent = _styledComponents.default.div.withCo
40
45
  const ModalWrapper = exports.ModalWrapper = _styledComponents.default.div.withConfig({
41
46
  displayName: "modal__ModalWrapper"
42
47
  })(["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;"]);
43
- const BmModal = _ref2 => {
48
+ const BmModal = _ref3 => {
44
49
  let {
45
50
  children,
46
51
  show,
47
52
  size,
53
+ zIndex,
48
54
  onHide,
49
55
  centered
50
- } = _ref2,
51
- rest = _objectWithoutProperties(_ref2, _excluded);
56
+ } = _ref3,
57
+ rest = _objectWithoutProperties(_ref3, _excluded);
52
58
  const [toggle, setToggle] = (0, _react.useState)(show);
53
59
  (0, _react.useEffect)(() => {
54
60
  setToggle(show);
@@ -62,7 +68,9 @@ const BmModal = _ref2 => {
62
68
  document.addEventListener('keydown', keyPress);
63
69
  return () => document.removeEventListener('keydown', keyPress);
64
70
  }, [keyPress]);
65
- 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, {
71
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
72
+ zIndex: zIndex
73
+ }), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
66
74
  showModal: show,
67
75
  centered: centered,
68
76
  onHide: onHide
@@ -87,7 +95,7 @@ const ModalHeaderContent = _styledComponents.default.div.withConfig({
87
95
  const IconContainer = _styledComponents.default.div.withConfig({
88
96
  displayName: "modal__IconContainer"
89
97
  })(["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);"]);
90
- BmModal.Header = _ref3 => {
98
+ BmModal.Header = _ref4 => {
91
99
  let {
92
100
  children,
93
101
  size,
@@ -97,8 +105,8 @@ BmModal.Header = _ref3 => {
97
105
  show,
98
106
  icon,
99
107
  trailingIcon
100
- } = _ref3,
101
- rest = _objectWithoutProperties(_ref3, _excluded2);
108
+ } = _ref4,
109
+ rest = _objectWithoutProperties(_ref4, _excluded2);
102
110
  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", {
103
111
  style: {
104
112
  width: '100%'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "beem-component",
3
- "version": "2.1.17",
3
+ "version": "2.1.19",
4
4
  "private": false,
5
5
  "main": "dist/components/index.js",
6
6
  "scripts": {
package/src/App.js CHANGED
@@ -6,7 +6,7 @@ import React, { useState } from 'react';
6
6
  // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
7
7
  import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
8
8
  import AccessTimeIcon from '@mui/icons-material/AccessTime';
9
- import PersonIcon from '@mui/icons-material/Person';
9
+ // import PersonIcon from '@mui/icons-material/Person';
10
10
  import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
11
11
 
12
12
  import GroupIcon from '@mui/icons-material/Group';
@@ -916,6 +916,7 @@ const Chat = () => {
916
916
  };
917
917
  };
918
918
  const [showModal, setShowModal] = useState(false);
919
+ const [showModal1, setShowModal1] = useState(false);
919
920
 
920
921
  const renderJsonMessagex = () => {
921
922
  const parsedMessage = JSON.parse(x.metadata.prev_message);
@@ -966,56 +967,56 @@ const Chat = () => {
966
967
  label: '10:00 AM - 10:30 AM',
967
968
  value: { startDate: '10:00 AM', endDate: '10:30 AM' },
968
969
  },
969
- {
970
- id: 'slot-2',
971
- label: '10:30 AM - 11:10 AM',
972
- value: { startDate: '10:30 AM', endDate: '11:10 AM' },
973
- },
974
- {
975
- id: 'slot-3',
976
- label: '11:10 AM - 11:50 AM',
977
- value: { startDate: '11:10 AM', endDate: '11:50 AM' },
978
- },
979
- {
980
- id: 'slot-4',
981
- label: '11:50 AM - 12:30 PM',
982
- value: { startDate: '11:50 AM', endDate: '12:30 PM' },
983
- },
984
- {
985
- id: 'slot-5',
986
- label: '12:30 PM - 1:10 PM',
987
- value: { startDate: '12:30 PM', endDate: '1:10 PM' },
988
- },
989
- {
990
- id: 'slot-6',
991
- label: '1:10 PM - 1:50 PM',
992
- value: { startDate: '1:10 PM', endDate: '1:50 PM' },
993
- },
994
- {
995
- id: 'slot-7',
996
- label: '1:50 PM - 2:30 PM',
997
- value: { startDate: '1:50 PM', endDate: '2:30 PM' },
998
- },
999
- {
1000
- id: 'slot-8',
1001
- label: '2:30 PM - 3:10 PM',
1002
- value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1003
- },
1004
- {
1005
- id: 'slot-9',
1006
- label: '3:10 PM - 3:50 PM',
1007
- value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1008
- },
1009
- {
1010
- id: 'slot-10',
1011
- label: '3:50 PM - 4:30 PM',
1012
- value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1013
- },
1014
- {
1015
- id: 'slot-11',
1016
- label: '4:30 PM - 5:10 PM',
1017
- value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1018
- },
970
+ // {
971
+ // id: 'slot-2',
972
+ // label: '10:30 AM - 11:10 AM',
973
+ // value: { startDate: '10:30 AM', endDate: '11:10 AM' },
974
+ // },
975
+ // {
976
+ // id: 'slot-3',
977
+ // label: '11:10 AM - 11:50 AM',
978
+ // value: { startDate: '11:10 AM', endDate: '11:50 AM' },
979
+ // },
980
+ // {
981
+ // id: 'slot-4',
982
+ // label: '11:50 AM - 12:30 PM',
983
+ // value: { startDate: '11:50 AM', endDate: '12:30 PM' },
984
+ // },
985
+ // {
986
+ // id: 'slot-5',
987
+ // label: '12:30 PM - 1:10 PM',
988
+ // value: { startDate: '12:30 PM', endDate: '1:10 PM' },
989
+ // },
990
+ // {
991
+ // id: 'slot-6',
992
+ // label: '1:10 PM - 1:50 PM',
993
+ // value: { startDate: '1:10 PM', endDate: '1:50 PM' },
994
+ // },
995
+ // {
996
+ // id: 'slot-7',
997
+ // label: '1:50 PM - 2:30 PM',
998
+ // value: { startDate: '1:50 PM', endDate: '2:30 PM' },
999
+ // },
1000
+ // {
1001
+ // id: 'slot-8',
1002
+ // label: '2:30 PM - 3:10 PM',
1003
+ // value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1004
+ // },
1005
+ // {
1006
+ // id: 'slot-9',
1007
+ // label: '3:10 PM - 3:50 PM',
1008
+ // value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1009
+ // },
1010
+ // {
1011
+ // id: 'slot-10',
1012
+ // label: '3:50 PM - 4:30 PM',
1013
+ // value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1014
+ // },
1015
+ // {
1016
+ // id: 'slot-11',
1017
+ // label: '4:30 PM - 5:10 PM',
1018
+ // value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1019
+ // },
1019
1020
  {
1020
1021
  id: 'slot-12',
1021
1022
  label: '5:10 PM - 5:50 PM',
@@ -1031,7 +1032,7 @@ const Chat = () => {
1031
1032
  color: '#3b82f6', // blue
1032
1033
  isActive: true,
1033
1034
  location: 'Virtual',
1034
- paymentSettings: { requirePayment: false },
1035
+ paymentRequired: 'true',
1035
1036
  selectedResources: [],
1036
1037
  address: '',
1037
1038
  duration: '60', // in minutes
@@ -1045,10 +1046,10 @@ const Chat = () => {
1045
1046
  color: '#10b981', // green
1046
1047
  isActive: true,
1047
1048
  location: 'Physical',
1048
- paymentSettings: { requirePayment: true },
1049
+ paymentRequired: 'true',
1049
1050
  selectedResources: [{ id: 1 }],
1050
1051
  address: '456 Innovation Avenue, Tech City',
1051
- duration: '90', // in minutes
1052
+ duration: '187', // in minutes
1052
1053
  guest_limit: '5', // max number of guests allowed
1053
1054
  },
1054
1055
  {
@@ -1059,7 +1060,7 @@ const Chat = () => {
1059
1060
  color: '#f59e0b', // amber
1060
1061
  isActive: false,
1061
1062
  location: 'Virtual',
1062
- paymentSettings: { requirePayment: true },
1063
+ paymentRequired: 'true',
1063
1064
  selectedResources: [{ id: 1 }, { id: 2 }],
1064
1065
  address: '',
1065
1066
  duration: '30', // in minutes
@@ -1080,6 +1081,48 @@ const Chat = () => {
1080
1081
  <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
1081
1082
  </div>
1082
1083
  <BmModal show={showModal} onHide={() => setShowModal(false)}>
1084
+ <BmModal.Header closeButton>
1085
+ <h2>Header</h2>
1086
+ </BmModal.Header>
1087
+ <BmModal.Body>
1088
+ <div
1089
+ style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
1090
+ >
1091
+ {sampleAppointmentTypes.map((type) => (
1092
+ <BmHorizontalCard
1093
+ name={type.name}
1094
+ 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"
1095
+ price={type.price}
1096
+ color={type.color}
1097
+ isActive={type.isActive}
1098
+ location={type.location}
1099
+ paymentRequired={type.paymentRequired}
1100
+ selectedResources={type.selectedResources}
1101
+ address={type.address}
1102
+ duration={type.duration}
1103
+ guest_limit={type.guest_limit}
1104
+ key={type.id}
1105
+ onView={() => handleView(type.id)}
1106
+ onDelete={() => handleDelete(type)}
1107
+ onCopyLink={() => handleCopyLink(type.id)}
1108
+ data={type}
1109
+ editToolTip="edit appointment type"
1110
+ deleteToolTip="delete appointment type"
1111
+ copyToolTip="copy appointment type link"
1112
+ />
1113
+ ))}
1114
+ </div>
1115
+ </BmModal.Body>
1116
+ <BmModal.Footer>
1117
+ <p>This is a footer</p>
1118
+ <BmButton onClick={() => setShowModal1(true)}>open</BmButton>
1119
+ </BmModal.Footer>
1120
+ </BmModal>
1121
+ <BmModal
1122
+ zIndex={9999}
1123
+ show={showModal1}
1124
+ onHide={() => setShowModal1(false)}
1125
+ >
1083
1126
  <BmModal.Header closeButton>
1084
1127
  <h2>Header</h2>
1085
1128
  </BmModal.Header>
@@ -1088,9 +1131,9 @@ const Chat = () => {
1088
1131
  </BmModal.Body>
1089
1132
  <BmModal.Footer>
1090
1133
  <p>This is a footer</p>
1134
+ <BmButton onClick={() => setShowModal1(false)}>Close</BmButton>
1091
1135
  </BmModal.Footer>
1092
1136
  </BmModal>
1093
-
1094
1137
  <div
1095
1138
  style={{
1096
1139
  display: 'flex',
@@ -1113,7 +1156,7 @@ const Chat = () => {
1113
1156
  color={type.color}
1114
1157
  isActive={type.isActive}
1115
1158
  location={type.location}
1116
- paymentSettings={type.paymentSettings}
1159
+ paymentRequired={type.paymentRequired}
1117
1160
  selectedResources={type.selectedResources}
1118
1161
  address={type.address}
1119
1162
  duration={type.duration}
@@ -1285,7 +1328,7 @@ const Chat = () => {
1285
1328
  />
1286
1329
  </BmInfoPanel.Section>
1287
1330
  </BmInfoPanel> */}
1288
- <BmInfoPanel.Section
1331
+ {/* <BmInfoPanel.Section
1289
1332
  title="Personal Information"
1290
1333
  icon={PersonIcon}
1291
1334
  showDivider
@@ -1297,7 +1340,7 @@ const Chat = () => {
1297
1340
  <BmInfoPanel.Row label="Name" value={formData.name} />
1298
1341
  <BmInfoPanel.Row label="Phone" value={formData.phone} />
1299
1342
  <BmInfoPanel.Row label="Email" value={formData.email} />
1300
- </BmInfoPanel.Section>
1343
+ </BmInfoPanel.Section> */}
1301
1344
  </BmCardv2.Content>
1302
1345
  <BmCardv2.Footer>
1303
1346
  <BmButton
package/src/lib/components/Card_v2/Card.js CHANGED
@@ -54,7 +54,7 @@ const Description = styled.p`
54
54
  `;
55
55
 
56
56
  const Content = styled.div`
57
- min-height: 180px;
57
+ min-height: 200px;
58
58
  padding: 0 1.5rem;
59
59
  max-height: calc(100vh - 28.5714rem);
60
60
  overflow-y: auto;
package/src/lib/components/HorizontalCard/HorizontalCard.js CHANGED
@@ -149,7 +149,14 @@ const IconButton = styled.button`
149
149
  padding: 2px;
150
150
  }
151
151
  `;
152
-
152
+ const formatDuration = (duration) => {
153
+ if (duration > 60) {
154
+ const hours = Math.floor(duration / 60);
155
+ const mins = duration % 60;
156
+ return `${hours}h ${mins > 0 ? `${mins}m` : ''}`;
157
+ }
158
+ return `${duration}m`;
159
+ };
153
160
  const BmHorizontalCard = ({
154
161
  onView,
155
162
  onDelete,
@@ -160,7 +167,7 @@ const BmHorizontalCard = ({
160
167
  color,
161
168
  isActive,
162
169
  location,
163
- paymentSettings,
170
+ paymentRequired,
164
171
  selectedResources,
165
172
  address,
166
173
  duration,
@@ -179,7 +186,7 @@ const BmHorizontalCard = ({
179
186
 
180
187
  {!isActive && <Badge variant="outline">Inactive</Badge>}
181
188
 
182
- {paymentSettings?.requirePayment && (
189
+ {paymentRequired && (
183
190
  <Badge>
184
191
  <AttachMoneyIcon fontSize="small" />
185
192
  Payment Required
@@ -190,13 +197,15 @@ const BmHorizontalCard = ({
190
197
  <Description>{description}</Description>
191
198
 
192
199
  <MetaRow>
193
- <MetaItem>
194
- <AccessTimeIcon fontSize="small" />
195
- <span>{duration} mins</span>
196
- </MetaItem>
200
+ {duration && (
201
+ <MetaItem>
202
+ <AccessTimeIcon fontSize="small" />
203
+ <span>{formatDuration(duration)}</span>
204
+ </MetaItem>
205
+ )}
197
206
  <MetaItem>
198
207
  <AttachMoneyIcon fontSize="small" />
199
- <span>{price === 0 ? 'Free' : `$${price}`}</span>
208
+ <span>{price === 0 ? 'Free' : `${price}`}</span>
200
209
  </MetaItem>
201
210
  <MetaItem>
202
211
  <LocationOnOutlinedIcon fontSize="small" />
package/src/lib/components/HorizontalCard/HorizontalCard.stories.jsx CHANGED
@@ -21,7 +21,7 @@ export const Example = () => (
21
21
  color="#10b981"
22
22
  isActive
23
23
  location="physical"
24
- paymentSettings={{ requirePayment: true }}
24
+ paymentRequired="true"
25
25
  selectedResources={sampleResources}
26
26
  address="456 Innovation Avenue, Tech City"
27
27
  duration={60}
package/src/lib/components/Modals/modal.js CHANGED
@@ -15,7 +15,7 @@ export const Overlay = styled.div`
15
15
  position: fixed;
16
16
  top: 0;
17
17
  left: 0;
18
- z-index: 20;
18
+ z-index: ${({ zIndex }) => zIndex || 20};
19
19
  width: 100vw;
20
20
  height: 100vh;
21
21
  background-color: ${BmBgGrey45};
@@ -58,7 +58,15 @@ export const ModalWrapper = styled.div`
58
58
  overflow-y: auto;
59
59
  `;
60
60
 
61
- const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
61
+ const BmModal = ({
62
+ children,
63
+ show,
64
+ size,
65
+ zIndex,
66
+ onHide,
67
+ centered,
68
+ ...rest
69
+ }) => {
62
70
  const [toggle, setToggle] = useState(show);
63
71
  useEffect(() => {
64
72
  setToggle(show);
@@ -82,7 +90,7 @@ const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
82
90
  <>
83
91
  {toggle && (
84
92
  <>
85
- <Overlay />
93
+ <Overlay zIndex={zIndex} />
86
94
  <ModalWrapper showModal={show} centered={centered} onHide={onHide}>
87
95
  <Provider value={{ toggle, setToggle, size, show, onHide }}>
88
96
  <ModalContent size={size} {...rest}>
package/src/lib/components/Modals/modals.stories.js CHANGED
@@ -8,12 +8,11 @@ export default {
8
8
  component: BmModal,
9
9
  title: 'components/Modals',
10
10
  argTypes: {
11
- // size: {
12
- // options: ["small", "default", "large", "xlarge"],
13
- // control: { type: "select" },
14
- // description: "Size of the Modal (Optional)",
15
- // defaultValue: { summary: "default" },
16
- // },
11
+ size: {
12
+ control: { type: 'text' },
13
+ description: 'Controls the width of the modal in Pixels',
14
+ defaultValue: '500px',
15
+ },
17
16
  closeButton: {
18
17
  description:
19
18
  'Placed on BmModal.Header component. Displays the close button (X)',
@@ -28,6 +27,11 @@ export default {
28
27
  onHide: {
29
28
  description: 'Handling the closing of the modal',
30
29
  },
30
+ zIndex: {
31
+ description:
32
+ 'Controls the stacking order of the modal in an event you have multiple modals',
33
+ control: { type: 'number' },
34
+ },
31
35
  },
32
36
  };
33
37