beem-component 2.1.8 → 2.1.29

package/src/App.js

@@ -4,14 +4,12 @@
 import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import PersonIcon from '@mui/icons-material/Person';
-import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import CheckIcon from '@mui/icons-material/Check';
+// 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';
+import BusinessIcon from '@mui/icons-material/Business';
 
 import {
   BmChat,
@@ -35,9 +33,7 @@ import {
   BmButton,
   BmSelectionNotice,
   BmSelector,
-  BmCustomCardTitle,
 } from './lib/components';
-import AlertBox from './lib/components/Alert/Alert';
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -944,7 +940,7 @@ const Chat = () => {
   };
   const slots = [
     {
-      id: 'slot-1', // ⚠️ id is required
+      id: 'slot-1',
       label: '10:00 AM - 10:30 AM',
       value: { startDate: '10:00 AM', endDate: '10:30 AM' },
     },
@@ -953,56 +949,6 @@ const Chat = () => {
       label: '10:30 AM - 11:10 AM',
       value: { startDate: '10:30 AM', endDate: '11:10 AM' },
     },
-    {
-      id: 'slot-3',
-      label: '11:10 AM - 11:50 AM',
-      value: { startDate: '11:10 AM', endDate: '11:50 AM' },
-    },
-    {
-      id: 'slot-4',
-      label: '11:50 AM - 12:30 PM',
-      value: { startDate: '11:50 AM', endDate: '12:30 PM' },
-    },
-    {
-      id: 'slot-5',
-      label: '12:30 PM - 1:10 PM',
-      value: { startDate: '12:30 PM', endDate: '1:10 PM' },
-    },
-    {
-      id: 'slot-6',
-      label: '1:10 PM - 1:50 PM',
-      value: { startDate: '1:10 PM', endDate: '1:50 PM' },
-    },
-    {
-      id: 'slot-7',
-      label: '1:50 PM - 2:30 PM',
-      value: { startDate: '1:50 PM', endDate: '2:30 PM' },
-    },
-    {
-      id: 'slot-8',
-      label: '2:30 PM - 3:10 PM',
-      value: { startDate: '2:30 PM', endDate: '3:10 PM' },
-    },
-    {
-      id: 'slot-9',
-      label: '3:10 PM - 3:50 PM',
-      value: { startDate: '3:10 PM', endDate: '3:50 PM' },
-    },
-    {
-      id: 'slot-10',
-      label: '3:50 PM - 4:30 PM',
-      value: { startDate: '3:50 PM', endDate: '4:30 PM' },
-    },
-    {
-      id: 'slot-11',
-      label: '4:30 PM - 5:10 PM',
-      value: { startDate: '4:30 PM', endDate: '5:10 PM' },
-    },
-    {
-      id: 'slot-12',
-      label: '5:10 PM - 5:50 PM',
-      value: { startDate: '5:10 PM', endDate: '5:50 PM' },
-    },
   ];
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
@@ -1010,48 +956,14 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-        <div>
-          <BmInfoPanel.SectionSummary
-            iconColor="#33B1BA"
-            textColor="#fcba03"
-            icon={CalendarTodayOutlinedIcon}
-            title={formData.departmentName}
-            subtitle="Department"
-            // iconBackgroundColor
-          />
-          <AlertBox
-            icon={AccessTimeIcon}
-            themeColor="#DC2626"
-            title="Payment Error"
-            description="We couldn't process your payment. Please try again later or contact support."
-          />
-          <BmCustomCardTitle
-            icon={CalendarTodayOutlinedIcon}
-            themeColor="#33B1BA"
-            title="Book Your Medical Appointment"
-            description="Schedule a 30-minute consultation with our healThcare specialists"
-            variant="booking"
-            withStripe
-          />
-        </div>
-        <div>
-          <BmInfoPanel.Section
-            title="Appointment Details"
-            icon={CalendarTodayOutlinedIcon}
-            backgroundColor="#fcba03"
-            iconColor="#fcba03"
-          />
-          <BmCustomCardTitle
-            icon={CheckIcon}
-            themeColor="#33B1BA"
-            title="Appointment Confirmed!"
-            description="Your booking has been successfully scheduled"
-            variant="confirmation"
-            withStripe
-          />
-        </div>
-      </div>
+      <BmSelector
+        data={slots}
+        selectedDataId={selectedSlotId}
+        onChange={setSelectedSlotId}
+        icon={AccessTimeIcon}
+        themeColor="#33B1BA"
+      />
+
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <div style={{ padding: '2rem' }}>
           <h1>Progress Indicator Demo</h1>
@@ -1088,20 +1000,13 @@ const Chat = () => {
             </BmCardv2.Description>
           </BmCardv2.Header>
           <BmCardv2.Content>
-            <BmSelector
-              data={slots}
-              selectedDataId={selectedSlotId}
-              onChange={setSelectedSlotId}
-              icon={AccessTimeIcon}
-              themeColor="#33B1BA"
-            />
-            {/* <BmInfoPanel>
-              // <BmInfoPanel.Section
-              //   title="Appointment Details"
-              //   icon={CalendarTodayIcon}
-              //   backgroundColor="#fcba03"
-              //   iconColor="#fcba03"
-              // >
+            <BmInfoPanel>
+              <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                backgroundColor="#fcba03"
+                iconColor="#fcba03"
+              >
                 <BmInfoPanel.SectionSummary
                   iconColor="#33B1BA"
                   textColor="#fcba03"
@@ -1116,20 +1021,52 @@ const Chat = () => {
                   subtitle="Department"
                 />
               </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>
+            </BmInfoPanel>
+            <BmInfoPanel>
+              {/* <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                background_color="rgba(51, 177, 186, 0.05)"
+              >
+                <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
+                  label="Date"
+                  value={formData.date.toDateString()}
+                />
+                <BmInfoPanel.Row
+                  label="Time"
+                  value={formData.timeSlot.split(' - ')[1]}
+                />
+              </BmInfoPanel.Section> */}
+
+              {/* <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section>
+              <BmInfoPanel.Section
+                title="Personal Information"
+                icon={PersonIcon}
+                showDivider
+              >
+                <BmInfoPanel.Row label="Name" value={formData.name} />
+                <BmInfoPanel.Row label="Phone" value={formData.phone} />
+                <BmInfoPanel.Row label="Email" value={formData.email} />
+              </BmInfoPanel.Section> */}
+            </BmInfoPanel>
           </BmCardv2.Content>
           <BmCardv2.Footer>
             <BmButton

package/src/fonts.scss

@@ -25,10 +25,4 @@
 @font-face {
     font-family: 'OpenSans';
     src: url('../src/fonts/OpenSans-Regular.ttf');
-}
-
-
-@font-face {
-    font-family: 'Inter';
-    src: url('../src/fonts/Inter-regular.woff2')format('woff2'),url('../src/fonts/Inter-Bold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraBold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraLight.woff2')format('woff2'),url('../src/fonts/Inter-medium.woff2')format('woff2'),url('../src/fonts/Inter-SemiBold.woff2')format('woff2');
 }

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

@@ -120,24 +120,11 @@ 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}>
@@ -146,7 +133,7 @@ const BmSelector = ({
               name={name}
               value={item.id}
               checked={isSelected}
-              onChange={handleChange}
+              onChange={() => onChange(item.id)}
             />
             <TimeSlotCard selected={isSelected} themeColor={themeColor}>
               <CustomRadio selected={isSelected} themeColor={themeColor} />

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

@@ -44,10 +44,6 @@ export default {
         },
       ],
     },
-    useFormik: {
-      control: { type: 'boolean' },
-      defaultValue: false,
-    },
   },
 };
 
@@ -93,7 +89,6 @@ Default.args = {
       value: { startDate: '09:00 AM', endDate: '09:30 AM' },
     },
   ],
-  useFormik: false,
 
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
@@ -115,13 +110,9 @@ 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}
@@ -129,7 +120,6 @@ export const Example = () => {
       themeColor="#33B1BA"
       textColor="#33B1BA"
       fontWeight="600"
-      useFormik="false"
     />
   );
 };

package/src/lib/components/Card_v2/Card.js

@@ -54,31 +54,11 @@ const Description = styled.p`
 `;
 
 const Content = styled.div`
-  min-height: 180px;
   padding: 0 1.5rem;
-  max-height: calc(100vh - 28.5714rem);
-  overflow-y: auto;
-
-  scrollbar-width: thin;
-  scrollbar-color: ${() => hexToRgba('#33b1ba', 0.2)} transparent;
-
-  &::-webkit-scrollbar-thumb {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-    border-radius: 0.6429rem;
-    transition: background 0.2s ease;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: ${() => hexToRgba('#33b1ba', 0.3)};
-  }
 
   &:last-child {
     padding-bottom: 1.5rem;
   }
-
-  @media (max-width: 54.8571rem) {
-    max-height: calc(100vh - 17.8572rem);
-  }
 `;
 
 const Footer = styled.div`

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

@@ -53,8 +53,8 @@ const IconBox = styled.div`
     color: ${({ iconColor }) => iconColor || '#00000'};
 
     @media (min-width: 45.7143rem) {
-      height: 1.4rem;
-      width: 1.4rem;
+      height: 1.5rem;
+      width: 1.5rem;
     }
   }
 `;
@@ -81,7 +81,7 @@ const SummarySubtitle = styled.p`
 `;
 
 const SectionContainer = styled.div`
-  padding: 0.6rem 1rem;
+  padding: 0.75rem 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -134,7 +134,8 @@ const RowContainer = styled.div`
 `;
 
 const Label = styled.span`
-  color: ${({ labelTextColor }) => hexToRgba(labelTextColor || '#000000', 0.6)};
+  color: rgba(0, 0, 0, 0.6);
+
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -142,7 +143,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;
   }
@@ -150,20 +151,7 @@ const Value = styled.span`
 
 const Divider = styled.hr`
   border: none;
-  border-top: ${({
-    showDivider,
-    dividerColor = '#33b1ba',
-    dividerType = 'dashed',
-    dividerWitdh = '1px',
-    dividerOpacity = '0.2',
-  }) => {
-    if (showDivider) {
-      return `${dividerWitdh} ${dividerType} ${hexToRgba(
-        dividerColor,
-        dividerOpacity
-      )}`;
-    }
-  }};
+  border-top: 0.0714rem dashed rgba(51, 177, 186, 0.2);
   margin: 1rem auto;
   max-width: 97%;
   @media (max-width: 42.8571rem) {
@@ -201,21 +189,9 @@ const Section = ({
   backgroundColor,
   iconColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerWitdh,
-  dividerType,
-  dividerOpacity,
 }) => (
   <>
-    {showDivider && (
-      <Divider
-        dividerColor={dividerColor}
-        showDivider={showDivider}
-        dividerWitdh={dividerWitdh}
-        dividerType={dividerType}
-        dividerOpacity={dividerOpacity}
-      />
-    )}
+    {showDivider && <Divider />}
     <SectionContainer backgroundColor={backgroundColor}>
       {Icon && (
         <IconBox
@@ -231,10 +207,10 @@ const Section = ({
   </>
 );
 
-const Row = ({ label, value, labelTextColor, valueTextColor }) => (
+const Row = ({ label, value }) => (
   <RowContainer>
-    <Label labelTextColor={labelTextColor}>{label}:</Label>
-    <Value valueTextColor={valueTextColor}>{value}</Value>
+    <Label>{label}:</Label>
+    <Value>{value}</Value>
   </RowContainer>
 );
 

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

@@ -31,16 +31,6 @@ 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',
-    },
-    labelTextColor: { control: 'color' },
-    valueTextColor: { control: 'color' },
   },
 };
 
@@ -51,12 +41,6 @@ const Template = ({
   iconColor,
   textColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerOpacity,
-  dividerType,
-  dividerWidth,
-  labelTextColor,
-  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -94,12 +78,7 @@ 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
-          labelTextColor={labelTextColor}
-          valueTextColor={valueTextColor}
-          label="Time"
-          value="09:00 AM"
-        />
+        <BmInfoPanel.Row label="Time" value="09:00 AM" />
       </BmInfoPanel.Section>
 
       <BmInfoPanel.Section
@@ -107,10 +86,6 @@ 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" />
@@ -128,12 +103,6 @@ Default.args = {
   iconColor: '#33B1BA',
   textColor: '#000000',
   iconBackgroundColor: false,
-  dividerColor: '#33b1ba',
-  dividerType: 'dashed',
-  dividerWidth: '1px',
-  dividerOpacity: '0.2',
-  labelTextColor: '#e46a8e',
-  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -173,12 +142,7 @@ 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
-          labelTextColor="#e46a8e"
-          valueTextColor="#235e92"
-          label="Duration"
-          value={appointmentDetails.duration}
-        />
+        <BmInfoPanel.Row label="Duration" value={appointmentDetails.duration} />
         <BmInfoPanel.Row label="Date" value={formData.date.toDateString()} />
         <BmInfoPanel.Row
           label="Time"
@@ -190,10 +154,6 @@ 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} />

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import { h1, h2, h3, h4, h5, h6, p, input, a, span } from './text';
+import { h1, h2, h3, h4, h5, h6, p, input, a } from './text';
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}
@@ -12,5 +12,4 @@ export const GlobalStyle = createGlobalStyle`
   p  { ${p} }
   input {${input}}
   a {${a}}
-  span {${span}}
 `;

package/src/lib/components/index.js

@@ -81,8 +81,6 @@ import BmLabelWithIcon from './LabelWithIcon/LabelWithIcon';
 import { BmCardv2 } from './Card_v2/Card';
 import BmInfoPanel from './InfoPanel/InfoPanel';
 import BmSelector from './BmSelector/BmSelector';
-import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
-import BmAlertBox from './Alert/Alert';
 
 export {
   BmAccordion,
@@ -161,6 +159,4 @@ export {
   BmInfoPanel,
   BmProgressIndicator,
   BmSelector,
-  BmCustomCardTitle,
-  BmAlertBox,
 };

package/src/lib/components/text.js

@@ -1,6 +1,7 @@
-import { Inter } from './typography';
+import { OpenSans } from './typography';
+
 // 32px
-export const h1 = `font-family: ${Inter};
+export const h1 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 2.286rem;
@@ -8,7 +9,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 24px
-export const h2 = `font-family: ${Inter};
+export const h2 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.714rem;
@@ -16,7 +17,7 @@ letter-spacing: -0.02em;
 margin: 0rem;`;
 
 // 18px
-export const h3 = `font-family: ${Inter};
+export const h3 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.286rem;
@@ -24,7 +25,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 16px
-export const h4 = ` font-family: ${Inter};
+export const h4 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.143rem;
@@ -32,7 +33,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 14px
-export const h5 = ` font-family: ${Inter};
+export const h5 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1rem;
@@ -40,7 +41,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 12px
-export const h6 = ` font-family: ${Inter};
+export const h6 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: .857rem;
@@ -48,28 +49,21 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 14px
-export const p = `font-family: ${Inter};
-font-style: normal;
-font-weight: normal;
-font-size: 1rem;
-letter-spacing: -0.02rem;
-margin: 0rem;`;
-
-export const input = ` font-family: ${Inter};
+export const p = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
-export const a = `font-family: ${Inter};
+export const input = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
-export const span = `font-family: ${Inter};
+export const a = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;

package/src/lib/components/typography.js

@@ -14,4 +14,3 @@ export const Hero = '1rem';
 export const PoppinsMedium = 'PoppinsMedium';
 export const Poppins = 'Poppins';
 export const OpenSans = 'OpenSans';
-export const Inter = 'Inter';