beem-component 2.1.1 → 2.1.3

package/dist/components/BmSelector/BmSelector.js

@@ -89,10 +89,23 @@ const BmSelector = _ref8 => {
     themeColor,
     textColor,
     fontWeight,
-    name = 'selection'
+    name = 'selection',
+    useFormik = false
   } = _ref8;
   return /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, null, data.map(item => {
     const isSelected = selectedDataId === item.id;
+    const handleChange = () => {
+      if (useFormik) {
+        onChange({
+          target: {
+            name,
+            value: item.id
+          }
+        });
+      } else {
+        onChange(item.id);
+      }
+    };
     return /*#__PURE__*/_react.default.createElement("label", {
       key: item.id,
       htmlFor: item.id
@@ -101,7 +114,7 @@ const BmSelector = _ref8 => {
       name: name,
       value: item.id,
       checked: isSelected,
-      onChange: () => onChange(item.id)
+      onChange: handleChange
     }), /*#__PURE__*/_react.default.createElement(TimeSlotCard, {
       selected: isSelected,
       themeColor: themeColor

package/dist/components/BmSelector/BmSelector.stories.js

@@ -56,6 +56,12 @@ var _default = exports.default = {
           endDate: '09:30 AM'
         }
       }]
+    },
+    useFormik: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
     }
   }
 };
@@ -102,6 +108,7 @@ Default.args = {
       endDate: '09:30 AM'
     }
   }],
+  useFormik: false,
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
   fontWeight: '',
@@ -124,15 +131,21 @@ const Example = () => {
       endDate: '11:10 AM'
     }
   }];
+
+  // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
+  // so that is works accordingly
+
   const [selectedDataId, setSelectedDataId] = (0, _react.useState)(null);
   return /*#__PURE__*/_react.default.createElement(_BmSelector.default, {
+    name: "time",
     data: slots,
     selectedDataId: selectedDataId,
     onChange: setSelectedDataId,
     icon: _AccessTime.default,
     themeColor: "#33B1BA",
     textColor: "#33B1BA",
-    fontWeight: "600"
+    fontWeight: "600",
+    useFormik: "false"
   });
 };
 exports.Example = Example;

package/dist/components/InfoPanel/InfoPanel.js

@@ -86,8 +86,19 @@ const Value = _styledComponents.default.span.withConfig({
 })(["font-weight:500;@media (max-width:42.8571rem){font-size:0.75rem;}"]);
 const Divider = _styledComponents.default.hr.withConfig({
   displayName: "InfoPanel__Divider"
-})(["border:none;border-top:0.0714rem dashed rgba(51,177,186,0.2);margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"]);
-const SectionSummary = _ref6 => {
+})(["border:none;border-top:", ";margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"], _ref6 => {
+  let {
+    showDivider,
+    dividerColor = '#33b1ba',
+    dividerType = 'dashed',
+    dividerWitdh = '1px',
+    dividerOpacity = '0.2'
+  } = _ref6;
+  if (showDivider) {
+    return "".concat(dividerWitdh, " ").concat(dividerType, " ").concat(hexToRgba(dividerColor, dividerOpacity));
+  }
+});
+const SectionSummary = _ref7 => {
   let {
     icon: Icon,
     title,
@@ -95,7 +106,7 @@ const SectionSummary = _ref6 => {
     textColor,
     subtitle,
     iconBackgroundColor
-  } = _ref6;
+  } = _ref7;
   return /*#__PURE__*/_react.default.createElement(SectionSummaryContainer, null, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
@@ -105,13 +116,13 @@ const SectionSummary = _ref6 => {
     textColor: textColor
   }, subtitle)));
 };
-const BmInfoPanel = _ref7 => {
+const BmInfoPanel = _ref8 => {
   let {
     children
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/_react.default.createElement(Panel, null, children);
 };
-const Section = _ref8 => {
+const Section = _ref9 => {
   let {
     title,
     icon: Icon,
@@ -119,20 +130,30 @@ const Section = _ref8 => {
     showDivider,
     backgroundColor,
     iconColor,
-    iconBackgroundColor
-  } = _ref8;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(SectionContainer, {
+    iconBackgroundColor,
+    dividerColor,
+    dividerWitdh,
+    dividerType,
+    dividerOpacity
+  } = _ref9;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, {
+    dividerColor: dividerColor,
+    showDivider: showDivider,
+    dividerWitdh: dividerWitdh,
+    dividerType: dividerType,
+    dividerOpacity: dividerOpacity
+  }), /*#__PURE__*/_react.default.createElement(SectionContainer, {
     backgroundColor: backgroundColor
   }, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
   }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(SectionTitle, null, title)), /*#__PURE__*/_react.default.createElement(SectionBody, null, children));
 };
-const Row = _ref9 => {
+const Row = _ref0 => {
   let {
     label,
     value
-  } = _ref9;
+  } = _ref0;
   return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, null, label, ":"), /*#__PURE__*/_react.default.createElement(Value, null, value));
 };
 BmInfoPanel.Section = Section;

package/dist/components/InfoPanel/InfoPanel.stories.js

@@ -48,6 +48,28 @@ var _default = exports.default = {
     },
     iconBackgroundColor: {
       control: 'boolean'
+    },
+    dividerColor: {
+      control: 'color'
+    },
+    dividerWidth: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: '3px'
+    },
+    dividerOpacity: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: '0.2'
+    },
+    dividerType: {
+      control: {
+        type: 'select'
+      },
+      options: ['dashed', 'solid'],
+      defaultValue: 'dashed'
     }
   }
 };
@@ -58,7 +80,11 @@ const Template = _ref => {
     backgroundColor,
     iconColor,
     textColor,
-    iconBackgroundColor
+    iconBackgroundColor,
+    dividerColor,
+    dividerOpacity,
+    dividerType,
+    dividerWidth
   } = _ref;
   if (variant === 'summary') {
     return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, {
@@ -106,7 +132,11 @@ const Template = _ref => {
     title: "Personal Information",
     icon: _Person.default,
     showDivider: showDivider,
-    iconColor: iconColor
+    iconColor: iconColor,
+    dividerColor: dividerColor,
+    dividerType: dividerType,
+    dividerOpacity: dividerOpacity,
+    dividerWitdh: dividerWidth
   }, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
     label: "Name",
     value: "John Doe"
@@ -125,7 +155,11 @@ Default.args = {
   backgroundColor: '#33B1BA',
   iconColor: '#33B1BA',
   textColor: '#000000',
-  iconBackgroundColor: false
+  iconBackgroundColor: false,
+  dividerColor: '#33b1ba',
+  dividerType: 'dashed',
+  dividerWidth: '1px',
+  dividerOpacity: '0.2'
 };
 const ExampleSummary = () => {
   return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, null, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
@@ -173,7 +207,11 @@ const ExampleDetails = () => {
   })), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
     title: "Personal Information",
     icon: _Person.default,
-    showDivider: true
+    showDivider: true,
+    dividerColor: "#33b1ba",
+    dividerType: "dashed",
+    dividerWitdh: "1px",
+    dividerOpacity: "0.2"
   }, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
     label: "Name",
     value: formData.name

package/package.json

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

package/src/App.js

@@ -6,7 +6,7 @@ import React, { useState } from 'react';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
 // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-// import PersonIcon from '@mui/icons-material/Person';
+import PersonIcon from '@mui/icons-material/Person';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
@@ -29,7 +29,7 @@ import {
   BmProgressIndicator,
   BmLabelWithIcon,
   BmCardv2,
-  // BmInfoPanel,
+  BmInfoPanel,
   BmButton,
   BmSelectionNotice,
   BmSelector,
@@ -929,15 +929,15 @@ const Chat = () => {
   // ];
   // console.log({ selected });
 
-  // const formData = {
-  //   departmentName: 'Marketing',
-  //   resourceName: 'John Doe',
-  //   date: new Date(),
-  //   timeSlot: '09:00 - 09:30',
-  //   name: 'Jane Smith',
-  //   phone: '+1234567890',
-  //   email: 'jane.smith@example.com',
-  // };
+  const formData = {
+    departmentName: 'Marketing',
+    resourceName: 'John Doe',
+    date: new Date(),
+    timeSlot: '09:00 - 09:30',
+    name: 'Jane Smith',
+    phone: '+1234567890',
+    email: 'jane.smith@example.com',
+  };
   const slots = [
     {
       id: 'slot-1', // ⚠️ id is required
@@ -1072,6 +1072,19 @@ const Chat = () => {
                 />
               </BmInfoPanel.Section>
             </BmInfoPanel> */}
+            <BmInfoPanel.Section
+              title="Personal Information"
+              icon={PersonIcon}
+              showDivider
+              dividerColor="#33b1ba"
+              dividerWitdh="2px"
+              dividerType="solid"
+              dividerOpacity="0.5"
+            >
+              <BmInfoPanel.Row label="Name" value={formData.name} />
+              <BmInfoPanel.Row label="Phone" value={formData.phone} />
+              <BmInfoPanel.Row label="Email" value={formData.email} />
+            </BmInfoPanel.Section>
           </BmCardv2.Content>
           <BmCardv2.Footer>
             <BmButton

package/src/lib/components/BmSelector/BmSelector.js

@@ -120,11 +120,24 @@ const BmSelector = ({
   textColor,
   fontWeight,
   name = 'selection',
+  useFormik = false,
 }) => {
   return (
     <RadioGroupWrapper>
       {data.map((item) => {
         const isSelected = selectedDataId === item.id;
+        const handleChange = () => {
+          if (useFormik) {
+            onChange({
+              target: {
+                name,
+                value: item.id,
+              },
+            });
+          } else {
+            onChange(item.id);
+          }
+        };
 
         return (
           <label key={item.id} htmlFor={item.id}>
@@ -133,7 +146,7 @@ const BmSelector = ({
               name={name}
               value={item.id}
               checked={isSelected}
-              onChange={() => onChange(item.id)}
+              onChange={handleChange}
             />
             <TimeSlotCard selected={isSelected} themeColor={themeColor}>
               <CustomRadio selected={isSelected} themeColor={themeColor} />

package/src/lib/components/BmSelector/BmSelector.stories.jsx

@@ -44,6 +44,10 @@ export default {
         },
       ],
     },
+    useFormik: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
   },
 };
 
@@ -89,6 +93,7 @@ Default.args = {
       value: { startDate: '09:00 AM', endDate: '09:30 AM' },
     },
   ],
+  useFormik: false,
 
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
@@ -110,9 +115,13 @@ export const Example = () => {
     },
   ];
 
+  // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
+  // so that is works accordingly
+
   const [selectedDataId, setSelectedDataId] = useState(null);
   return (
     <BmSelector
+      name="time"
       data={slots}
       selectedDataId={selectedDataId}
       onChange={setSelectedDataId}
@@ -120,6 +129,7 @@ export const Example = () => {
       themeColor="#33B1BA"
       textColor="#33B1BA"
       fontWeight="600"
+      useFormik="false"
     />
   );
 };

package/src/lib/components/InfoPanel/InfoPanel.js

@@ -151,7 +151,20 @@ const Value = styled.span`
 
 const Divider = styled.hr`
   border: none;
-  border-top: 0.0714rem dashed rgba(51, 177, 186, 0.2);
+  border-top: ${({
+    showDivider,
+    dividerColor = '#33b1ba',
+    dividerType = 'dashed',
+    dividerWitdh = '1px',
+    dividerOpacity = '0.2',
+  }) => {
+    if (showDivider) {
+      return `${dividerWitdh} ${dividerType} ${hexToRgba(
+        dividerColor,
+        dividerOpacity
+      )}`;
+    }
+  }};
   margin: 1rem auto;
   max-width: 97%;
   @media (max-width: 42.8571rem) {
@@ -189,9 +202,21 @@ const Section = ({
   backgroundColor,
   iconColor,
   iconBackgroundColor,
+  dividerColor,
+  dividerWitdh,
+  dividerType,
+  dividerOpacity,
 }) => (
   <>
-    {showDivider && <Divider />}
+    {showDivider && (
+      <Divider
+        dividerColor={dividerColor}
+        showDivider={showDivider}
+        dividerWitdh={dividerWitdh}
+        dividerType={dividerType}
+        dividerOpacity={dividerOpacity}
+      />
+    )}
     <SectionContainer backgroundColor={backgroundColor}>
       {Icon && (
         <IconBox

package/src/lib/components/InfoPanel/InfoPanel.stories.jsx

@@ -31,6 +31,14 @@ export default {
     iconColor: { control: 'color' },
     textColor: { control: 'color' },
     iconBackgroundColor: { control: 'boolean' },
+    dividerColor: { control: 'color' },
+    dividerWidth: { control: { type: 'text' }, defaultValue: '3px' },
+    dividerOpacity: { control: { type: 'text' }, defaultValue: '0.2' },
+    dividerType: {
+      control: { type: 'select' },
+      options: ['dashed', 'solid'],
+      defaultValue: 'dashed',
+    },
   },
 };
 
@@ -41,6 +49,10 @@ const Template = ({
   iconColor,
   textColor,
   iconBackgroundColor,
+  dividerColor,
+  dividerOpacity,
+  dividerType,
+  dividerWidth,
 }) => {
   if (variant === 'summary') {
     return (
@@ -86,6 +98,10 @@ const Template = ({
         icon={PersonIcon}
         showDivider={showDivider}
         iconColor={iconColor}
+        dividerColor={dividerColor}
+        dividerType={dividerType}
+        dividerOpacity={dividerOpacity}
+        dividerWitdh={dividerWidth}
       >
         <BmInfoPanel.Row label="Name" value="John Doe" />
         <BmInfoPanel.Row label="Email" value="john@example.com" />
@@ -103,6 +119,10 @@ Default.args = {
   iconColor: '#33B1BA',
   textColor: '#000000',
   iconBackgroundColor: false,
+  dividerColor: '#33b1ba',
+  dividerType: 'dashed',
+  dividerWidth: '1px',
+  dividerOpacity: '0.2',
 };
 
 export const ExampleSummary = () => {
@@ -154,6 +174,10 @@ export const ExampleDetails = () => {
         title="Personal Information"
         icon={PersonIcon}
         showDivider
+        dividerColor="#33b1ba"
+        dividerType="dashed"
+        dividerWitdh="1px"
+        dividerOpacity="0.2"
       >
         <BmInfoPanel.Row label="Name" value={formData.name} />
         <BmInfoPanel.Row label="Phone" value={formData.phone} />