beem-component 2.1.29 → 2.1.30

package/src/lib/components/DepartmentCard/DepartmentCard.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const CardWrapper = styled.div`
+  overflow: hidden;
+
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-top: 4px solid ${({ borderTopColor }) => borderTopColor || '#cccccc'};
+
+  background-color: #ffffff;
+  opacity: ${({ isActive }) => (isActive ? 1 : 0.5)};
+  transition: opacity 0.3s;
+`;
+
+const Header = styled.div`
+  padding: 1rem 1rem 0.5rem 1rem;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 1.125rem;
+  margin: 0;
+`;
+
+const CardDescription = styled.p`
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-top: 0.25rem;
+`;
+
+const Content = styled.div`
+  margin-top: 1rem;
+  padding: 0 1rem 0.5rem 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ResourceText = styled.span`
+  font-size: 0.875rem;
+  color: #6b7280;
+`;
+
+const StatusRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StatusDot = styled.span`
+  flex-shrink: 0;
+  width: 0.5rem;
+  height: 0.5rem;
+  margin-right: 0.5rem;
+  border-radius: 9999px;
+  background-color: ${({ isActive }) => (isActive ? '#22c55e' : '#9ca3af')};
+`;
+
+const StatusText = styled.span`
+  font-size: 0.75rem;
+  color: #6b7280;
+`;
+
+const IconButtonsContainer = styled.div`
+  display: flex;
+  gap: 0.25rem;
+`;
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: ${({ destructive }) => (destructive ? '#ef4444' : 'inherit')};
+
+  &:hover {
+    color: ${({ destructive }) => (destructive ? '#ef4444' : '#374151')};
+  }
+`;
+
+const BmDepartmentCard = ({
+  borderTopColor = '#cccccc',
+  isActive = true,
+  name,
+  description,
+  resourcesCount,
+  onEdit,
+  onDelete,
+  EditIcon,
+  DeleteIcon,
+}) => {
+  return (
+    <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
+      <Header>
+        <TitleRow>
+          <CardTitle>{name}</CardTitle>
+          <IconButtonsContainer>
+            <IconButton onClick={onEdit}>
+              {EditIcon && <EditIcon fontSize="small" />}
+            </IconButton>
+            <IconButton destructive onClick={onDelete}>
+              {DeleteIcon && <DeleteIcon fontSize="small" />}
+            </IconButton>
+          </IconButtonsContainer>
+        </TitleRow>
+        <CardDescription>{description}</CardDescription>
+      </Header>
+      <Content>
+        <ResourceText>{resourcesCount} Resources</ResourceText>
+
+        <StatusRow>
+          <StatusDot isActive={isActive} />
+          <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
+        </StatusRow>
+      </Content>
+    </CardWrapper>
+  );
+};
+
+export default BmDepartmentCard;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import BmDepartmentCard from './DepartmentCard';
+
+export default {
+  title: 'Components/BmDepartmentCard',
+  component: BmDepartmentCard,
+  argTypes: {
+    borderTopColor: { control: 'color' },
+    isActive: { control: 'boolean' },
+    name: { control: 'text' },
+    description: { control: 'text' },
+    resourcesCount: { control: 'number' },
+  },
+};
+
+const Template = (args) => (
+  <BmDepartmentCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
+);
+
+export const Active = Template.bind({});
+Active.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Radiology',
+  description: 'Handles imaging and scans for diagnosis',
+  resourcesCount: 5,
+};
+
+export const Inactive = Template.bind({});
+Inactive.args = {
+  borderTopColor: '#ef4444',
+  isActive: false,
+  name: 'Cardiology',
+  description: 'Provides heart-related care and surgeries',
+  resourcesCount: 3,
+};

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

@@ -0,0 +1,276 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
+import LinkIcon from '@mui/icons-material/Link';
+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;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  cursor: pointer;
+  gap: 12px;
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
+  ${({ isActive }) =>
+    !isActive &&
+    css`
+      opacity: 0.7;
+    `}
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+
+const ColorBar = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  background-color: ${(props) => props.color || '#ccc'};
+`;
+
+const InfoContainer = styled.div`
+  flex: 1;
+  padding-left: 12px;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const Name = styled.h3`
+  margin: 0;
+  font-weight: 500;
+`;
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  ${({ variant }) =>
+    variant === 'outline'
+      ? css`
+          border: 1px solid #d1d5db;
+          color: #4b5563;
+          background-color: rgba(0, 0, 0, 0.04);
+        `
+      : css`
+          background-color: #e6f4ea;
+          color: #166534;
+          border: none;
+        `}
+`;
+
+const Description = styled.p`
+  margin-top: 4px;
+  font-size: 0.9rem;
+  color: #6b7280;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+`;
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 12px;
+`;
+
+const MetaItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: #374151;
+
+  svg {
+    margin-right: 4px;
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const ActionButtons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  ${RowContainer}:hover & {
+    opacity: 1;
+  }
+`;
+
+const IconButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: ${({ iconColor }) => iconColor || '#111827'};
+  transition: color 0.2s;
+
+  &:hover {
+    color: #111827;
+  }
+
+  &.danger:hover {
+    color: #dc2626;
+  }
+
+  @media (max-width: 600px) {
+    padding: 2px;
+  }
+`;
+const formatDuration = (duration) => {
+  if (duration > 60) {
+    const hours = Math.floor(duration / 60);
+    const mins = duration % 60;
+    return `${hours}h ${mins > 0 ? `${mins}m` : ''}`;
+  }
+  return `${duration}m`;
+};
+const BmHorizontalCard = ({
+  onView,
+  onDelete,
+  onCopyLink,
+  name,
+  description,
+  price,
+  color,
+  isActive,
+  location,
+  paymentRequired,
+  selectedResources,
+  address,
+  duration,
+  guest_limit,
+  deleteToolTip,
+  editToolTip,
+  copyToolTip,
+}) => {
+  return (
+    <RowContainer isActive={isActive}>
+      <ColorBar color={color} />
+
+      <InfoContainer>
+        <TitleRow>
+          <Name>{name}</Name>
+
+          {!isActive && <Badge variant="outline">Inactive</Badge>}
+
+          {paymentRequired && (
+            <Badge>
+              <AttachMoneyIcon fontSize="small" />
+              Payment Required
+            </Badge>
+          )}
+        </TitleRow>
+
+        <Description>{description}</Description>
+
+        <MetaRow>
+          {duration && (
+            <MetaItem>
+              <AccessTimeIcon fontSize="small" />
+              <span>{formatDuration(duration)}</span>
+            </MetaItem>
+          )}
+          {price && (
+            <MetaItem>
+              <AttachMoneyIcon fontSize="small" />
+              <span>{price === 0 ? 'Free' : `${price}`}</span>
+            </MetaItem>
+          )}
+          <MetaItem>
+            <LocationOnOutlinedIcon fontSize="small" />
+            <span>
+              {location}
+              {lowerCase(location) === 'physical' && address
+                ? ` (${address.split(',')[0]}...)`
+                : ''}
+            </span>
+          </MetaItem>
+          {guest_limit && (
+            <MetaItem>
+              <Groups2OutlinedIcon fontSize="small" />
+              <span>
+                Max {guest_limit} attendee{guest_limit > 1 ? 's' : ''}
+              </span>
+            </MetaItem>
+          )}
+          {selectedResources && selectedResources.length > 0 && (
+            <MetaItem>
+              <PeopleAltOutlinedIcon fontSize="small" />
+              <span>
+                {selectedResources.length} resource
+                {selectedResources.length > 1 ? 's' : ''}
+              </span>
+            </MetaItem>
+          )}
+        </MetaRow>
+      </InfoContainer>
+
+      <ActionButtons>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopyLink();
+          }}
+          title={copyToolTip || ''}
+        >
+          <LinkIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onView();
+          }}
+          title={editToolTip || ''}
+        >
+          <EditIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          iconColor="#dc2626"
+          className="danger"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          title={deleteToolTip || ''}
+        >
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+      </ActionButtons>
+    </RowContainer>
+  );
+};
+
+export default BmHorizontalCard;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import BmHorizontalCard from './HorizontalCard';
+
+export default {
+  title: 'Components/BmHorizontalCard',
+  component: BmHorizontalCard,
+  tags: ['autodocs'],
+};
+
+const sampleResources = [{ id: 1 }, { id: 2 }];
+
+export const Example = () => (
+  <BmHorizontalCard
+    onView={action('View clicked')}
+    onDelete={action('Delete clicked')}
+    onCopyLink={action('Copy link clicked')}
+    name="Strategy Session"
+    description="Deep dive on your business strategy and next steps."
+    price={150}
+    color="#10b981"
+    isActive
+    location="physical"
+    paymentRequired="true"
+    selectedResources={sampleResources}
+    address="456 Innovation Avenue, Tech City"
+    duration={60}
+    guest_limit={10}
+    editToolTip="edit appointment type"
+    deleteToolTip="delete appointment type"
+    copyToolTip="copy appointment type link"
+  />
+);

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.5rem;
-      width: 1.5rem;
+      height: 1.4rem;
+      width: 1.4rem;
     }
   }
 `;
@@ -81,7 +81,7 @@ const SummarySubtitle = styled.p`
 `;
 
 const SectionContainer = styled.div`
-  padding: 0.75rem 1rem;
+  padding: 0.6rem 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -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;
   }
@@ -151,7 +150,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 +201,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
@@ -207,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

@@ -31,6 +31,16 @@ 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' },
   },
 };
 
@@ -41,6 +51,12 @@ const Template = ({
   iconColor,
   textColor,
   iconBackgroundColor,
+  dividerColor,
+  dividerOpacity,
+  dividerType,
+  dividerWidth,
+  labelTextColor,
+  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -78,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
@@ -86,6 +107,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 +128,12 @@ Default.args = {
   iconColor: '#33B1BA',
   textColor: '#000000',
   iconBackgroundColor: false,
+  dividerColor: '#33b1ba',
+  dividerType: 'dashed',
+  dividerWidth: '1px',
+  dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -142,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"
@@ -154,6 +190,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} />

package/src/lib/components/Modals/modal.js

@@ -15,7 +15,7 @@ export const Overlay = styled.div`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 9999;
+  z-index: ${({ zIndex }) => zIndex || 20};
   width: 100vw;
   height: 100vh;
   background-color: ${BmBgGrey45};
@@ -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';
+    }};
   }
 `;
 
@@ -53,7 +58,15 @@ export const ModalWrapper = styled.div`
   overflow-y: auto;
 `;
 
-const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
+const BmModal = ({
+  children,
+  show,
+  size,
+  zIndex,
+  onHide,
+  centered,
+  ...rest
+}) => {
   const [toggle, setToggle] = useState(show);
   useEffect(() => {
     setToggle(show);
@@ -77,7 +90,7 @@ const BmModal = ({ children, show, size, onHide, centered, ...rest }) => {
     <>
       {toggle && (
         <>
-          <Overlay />
+          <Overlay zIndex={zIndex} />
           <ModalWrapper showModal={show} centered={centered} onHide={onHide}>
             <Provider value={{ toggle, setToggle, size, show, onHide }}>
               <ModalContent size={size} {...rest}>