beem-component 2.1.2 → 2.1.4

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

@@ -80,25 +80,35 @@ const RowContainer = _styledComponents.default.div.withConfig({
 })(["display:flex;justify-content:space-between;font-size:0.875rem;align-items:center;@media (max-width:42.8571rem){font-size:0.8rem;}"]);
 const Label = _styledComponents.default.span.withConfig({
   displayName: "InfoPanel__Label"
-})(["color:rgba(0,0,0,0.6);@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+})(["color:", ";@media (max-width:42.8571rem){font-size:0.75rem;}"], _ref6 => {
+  let {
+    labelTextColor
+  } = _ref6;
+  return hexToRgba(labelTextColor || '#000000', 0.6);
+});
 const Value = _styledComponents.default.span.withConfig({
   displayName: "InfoPanel__Value"
-})(["font-weight:500;@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+})(["font-weight:500;color:", ";@media (max-width:42.8571rem){font-size:0.75rem;}"], _ref7 => {
+  let {
+    valueTextColor
+  } = _ref7;
+  return hexToRgba(valueTextColor || '#000000', 1);
+});
 const Divider = _styledComponents.default.hr.withConfig({
   displayName: "InfoPanel__Divider"
-})(["border:none;border-top:", ";margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"], _ref6 => {
+})(["border:none;border-top:", ";margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"], _ref8 => {
   let {
     showDivider,
     dividerColor = '#33b1ba',
     dividerType = 'dashed',
     dividerWitdh = '1px',
     dividerOpacity = '0.2'
-  } = _ref6;
+  } = _ref8;
   if (showDivider) {
     return "".concat(dividerWitdh, " ").concat(dividerType, " ").concat(hexToRgba(dividerColor, dividerOpacity));
   }
 });
-const SectionSummary = _ref7 => {
+const SectionSummary = _ref9 => {
   let {
     icon: Icon,
     title,
@@ -106,7 +116,7 @@ const SectionSummary = _ref7 => {
     textColor,
     subtitle,
     iconBackgroundColor
-  } = _ref7;
+  } = _ref9;
   return /*#__PURE__*/_react.default.createElement(SectionSummaryContainer, null, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
@@ -116,13 +126,13 @@ const SectionSummary = _ref7 => {
     textColor: textColor
   }, subtitle)));
 };
-const BmInfoPanel = _ref8 => {
+const BmInfoPanel = _ref0 => {
   let {
     children
-  } = _ref8;
+  } = _ref0;
   return /*#__PURE__*/_react.default.createElement(Panel, null, children);
 };
-const Section = _ref9 => {
+const Section = _ref1 => {
   let {
     title,
     icon: Icon,
@@ -135,7 +145,7 @@ const Section = _ref9 => {
     dividerWitdh,
     dividerType,
     dividerOpacity
-  } = _ref9;
+  } = _ref1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, {
     dividerColor: dividerColor,
     showDivider: showDivider,
@@ -149,12 +159,18 @@ const Section = _ref9 => {
     iconBackgroundColor: iconBackgroundColor
   }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(SectionTitle, null, title)), /*#__PURE__*/_react.default.createElement(SectionBody, null, children));
 };
-const Row = _ref0 => {
+const Row = _ref10 => {
   let {
     label,
-    value
-  } = _ref0;
-  return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, null, label, ":"), /*#__PURE__*/_react.default.createElement(Value, null, value));
+    value,
+    labelTextColor,
+    valueTextColor
+  } = _ref10;
+  return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, {
+    labelTextColor: labelTextColor
+  }, label, ":"), /*#__PURE__*/_react.default.createElement(Value, {
+    valueTextColor: valueTextColor
+  }, value));
 };
 BmInfoPanel.Section = Section;
 BmInfoPanel.Row = Row;

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

@@ -70,6 +70,12 @@ var _default = exports.default = {
       },
       options: ['dashed', 'solid'],
       defaultValue: 'dashed'
+    },
+    labelTextColor: {
+      control: 'color'
+    },
+    valueTextColor: {
+      control: 'color'
     }
   }
 };
@@ -84,7 +90,9 @@ const Template = _ref => {
     dividerColor,
     dividerOpacity,
     dividerType,
-    dividerWidth
+    dividerWidth,
+    labelTextColor,
+    valueTextColor
   } = _ref;
   if (variant === 'summary') {
     return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, {
@@ -126,6 +134,8 @@ const Template = _ref => {
     label: "Date",
     value: "Monday, June 24, 2025"
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
+    labelTextColor: labelTextColor,
+    valueTextColor: valueTextColor,
     label: "Time",
     value: "09:00 AM"
   })), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
@@ -159,7 +169,9 @@ Default.args = {
   dividerColor: '#33b1ba',
   dividerType: 'dashed',
   dividerWidth: '1px',
-  dividerOpacity: '0.2'
+  dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92'
 };
 const ExampleSummary = () => {
   return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, null, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
@@ -196,6 +208,8 @@ const ExampleDetails = () => {
     label: "Resource",
     value: formData.resourceName
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
+    labelTextColor: "#e46a8e",
+    valueTextColor: "#235e92",
     label: "Duration",
     value: appointmentDetails.duration
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {

package/package.json

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

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

@@ -134,8 +134,7 @@ const RowContainer = styled.div`
 `;
 
 const Label = styled.span`
-  color: rgba(0, 0, 0, 0.6);
-
+  color: ${({ labelTextColor }) => hexToRgba(labelTextColor || '#000000', 0.6)};
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -143,7 +142,7 @@ const Label = styled.span`
 
 const Value = styled.span`
   font-weight: 500;
-
+  color: ${({ valueTextColor }) => hexToRgba(valueTextColor || '#000000', 1)};
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -232,10 +231,10 @@ const Section = ({
   </>
 );
 
-const Row = ({ label, value }) => (
+const Row = ({ label, value, labelTextColor, valueTextColor }) => (
   <RowContainer>
-    <Label>{label}:</Label>
-    <Value>{value}</Value>
+    <Label labelTextColor={labelTextColor}>{label}:</Label>
+    <Value valueTextColor={valueTextColor}>{value}</Value>
   </RowContainer>
 );
 

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

@@ -39,6 +39,8 @@ export default {
       options: ['dashed', 'solid'],
       defaultValue: 'dashed',
     },
+    labelTextColor: { control: 'color' },
+    valueTextColor: { control: 'color' },
   },
 };
 
@@ -53,6 +55,8 @@ const Template = ({
   dividerOpacity,
   dividerType,
   dividerWidth,
+  labelTextColor,
+  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -90,7 +94,12 @@ const Template = ({
         <BmInfoPanel.Row label="Resource" value="Dr. Smith" />
         <BmInfoPanel.Row label="Duration" value="30 minutes" />
         <BmInfoPanel.Row label="Date" value="Monday, June 24, 2025" />
-        <BmInfoPanel.Row label="Time" value="09:00 AM" />
+        <BmInfoPanel.Row
+          labelTextColor={labelTextColor}
+          valueTextColor={valueTextColor}
+          label="Time"
+          value="09:00 AM"
+        />
       </BmInfoPanel.Section>
 
       <BmInfoPanel.Section
@@ -123,6 +132,8 @@ Default.args = {
   dividerType: 'dashed',
   dividerWidth: '1px',
   dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -162,7 +173,12 @@ export const ExampleDetails = () => {
         <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
         <BmInfoPanel.Row label="Department" value={formData.departmentName} />
         <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
-        <BmInfoPanel.Row label="Duration" value={appointmentDetails.duration} />
+        <BmInfoPanel.Row
+          labelTextColor="#e46a8e"
+          valueTextColor="#235e92"
+          label="Duration"
+          value={appointmentDetails.duration}
+        />
         <BmInfoPanel.Row label="Date" value={formData.date.toDateString()} />
         <BmInfoPanel.Row
           label="Time"