beem-component 2.1.7 → 2.1.9

package/src/App.js

@@ -4,11 +4,14 @@
 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 EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
@@ -36,6 +39,8 @@ import {
   BmSelectionNotice,
   BmSelector,
   BmCustomCardTitle,
+  BmDepartmentCard,
+  BmResourceCard,
 } from './lib/components';
 import AlertBox from './lib/components/Alert/Alert';
 // import ProgressIndicator from './lib/components/newProgress';
@@ -1011,6 +1016,54 @@ const Chat = () => {
     <>
       <GlobalStyle />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
+          <div style={{ maxWidth: 400, margin: '2rem auto' }}>
+            <BmDepartmentCard
+              borderTopColor="#3b82f6" // blue
+              isActive="true"
+              name="Radiology Department"
+              description="Handles imaging and diagnostic scans"
+              // resourcesCount={8}
+              onEdit={() => alert('Edit department')}
+              onDelete={() => alert('Delete department')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+
+            <BmDepartmentCard
+              borderTopColor="#f97316" // orange
+              isActive={false}
+              name="Cardiology Department"
+              description="Heart and blood vessel treatments"
+              resourcesCount={5}
+              onEdit={() => alert('Edit department')}
+              onDelete={() => alert('Delete department')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+            <BmResourceCard
+              borderTopColor="#10b981"
+              isActive="true"
+              name="Dr. Jane Smith"
+              type="staff"
+              resourceBadges={[
+                {
+                  label: 'Google Synced',
+                  color: '#10b981',
+                  icon: CalendarTodayIcon,
+                },
+              ]}
+              departmentName="Radiology"
+              email="jane.smith@example.com"
+              phone="+123456789"
+              availability="Mon-Fri 9am-5pm"
+              onEdit={() => alert('Edit resource')}
+              onDelete={() => alert('Delete resource')}
+              EditIcon={EditIcon}
+              DeleteIcon={DeleteIcon}
+            />
+          </div>
+        </div>
         <div>
           <BmInfoPanel.SectionSummary
             iconColor="#33B1BA"
@@ -1030,12 +1083,18 @@ const Chat = () => {
             icon={CalendarTodayOutlinedIcon}
             themeColor="#33B1BA"
             title="Book Your Medical Appointment"
-            description="Schedule a 30-minute consultation with our healthcare specialists"
+            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"
@@ -1090,12 +1149,12 @@ const Chat = () => {
               themeColor="#33B1BA"
             />
             {/* <BmInfoPanel>
-              <BmInfoPanel.Section
-                title="Appointment Details"
-                icon={CalendarTodayIcon}
-                backgroundColor="#fcba03"
-                iconColor="#fcba03"
-              >
+              // <BmInfoPanel.Section
+              //   title="Appointment Details"
+              //   icon={CalendarTodayIcon}
+              //   backgroundColor="#fcba03"
+              //   iconColor="#fcba03"
+              // >
                 <BmInfoPanel.SectionSummary
                   iconColor="#33B1BA"
                   textColor="#fcba03"

package/src/fonts.scss

@@ -25,4 +25,7 @@
 @font-face {
     font-family: 'OpenSans';
     src: url('../src/fonts/OpenSans-Regular.ttf');
-}
+}
+
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.js

@@ -52,7 +52,6 @@ const CardContainer = styled.div`
 
 const IconWrapper = styled.div`
   background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
-  border: 2px solid ${({ themeColor }) => themeColor};
   height: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
   width: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
   border-radius: 9999px;
@@ -88,6 +87,7 @@ const IconWrapper = styled.div`
 const Title = styled.h2`
   text-align: center;
   font-size: 1.125rem;
+  color: ${({ themeColor }) => themeColor};
   margin-bottom: ${({ variant }) =>
     variant === 'confirmation' ? '0.25rem' : '0.5rem'};
 

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

@@ -0,0 +1,131 @@
+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>
+        {resourcesCount && (
+          <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/InfoPanel/InfoPanel.js

@@ -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;

package/src/lib/components/ResourceCard/ResourceCard.js

@@ -0,0 +1,209 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import styled from 'styled-components';
+
+const CardWrapper = styled.div`
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  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 TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const CardTitle = styled.h3`
+  font-size: 1.125rem;
+  margin: 0;
+`;
+
+const BadgeRow = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  flex-wrap: wrap;
+`;
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  background-color: #f9fafb;
+  color: ${({ color }) => color || 'inherit'};
+`;
+
+const IconsContainer = 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 Content = styled.div`
+  padding: 0 1rem 0.5rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+`;
+
+const Label = styled.span`
+  color: #6b7280;
+`;
+
+const Value = styled.span`
+  color: #374151;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 1rem 0.75rem 1rem;
+`;
+
+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 BmResourceCard = ({
+  borderTopColor = '#cccccc',
+  isActive = true,
+  name,
+  type,
+  resourceBadges = [],
+  departmentName,
+  email,
+  phone,
+  capacity,
+  features,
+  availability,
+  onEdit,
+  onDelete,
+  EditIcon,
+  DeleteIcon,
+}) => {
+  return (
+    <CardWrapper borderTopColor={borderTopColor} isActive={isActive}>
+      <Header>
+        <TitleRow>
+          <TitleContainer>
+            <CardTitle>{name}</CardTitle>
+            <BadgeRow>
+              <Badge>{type}</Badge>
+              {resourceBadges.map((badge, index) => (
+                <Badge key={index} color={badge.color}>
+                  {badge.icon && (
+                    <badge.icon style={{ fontSize: 14, marginRight: 4 }} />
+                  )}
+                  {badge.label}
+                </Badge>
+              ))}
+            </BadgeRow>
+          </TitleContainer>
+          <IconsContainer>
+            <IconButton onClick={onEdit}>
+              {EditIcon && <EditIcon fontSize="small" />}
+            </IconButton>
+            <IconButton destructive onClick={onDelete}>
+              {DeleteIcon && <DeleteIcon fontSize="small" />}
+            </IconButton>
+          </IconsContainer>
+        </TitleRow>
+      </Header>
+      <Content>
+        {departmentName && (
+          <InfoRow>
+            <Label>Department:</Label>
+            <Value>{departmentName}</Value>
+          </InfoRow>
+        )}
+        {type === 'staff' && email && (
+          <InfoRow>
+            <Label>Email:</Label>
+            <Value>{email}</Value>
+          </InfoRow>
+        )}
+        {type === 'staff' && phone && (
+          <InfoRow>
+            <Label>Phone:</Label>
+            <Value>{phone}</Value>
+          </InfoRow>
+        )}
+        {type === 'room' && capacity && (
+          <InfoRow>
+            <Label>Capacity:</Label>
+            <Value>{capacity}</Value>
+          </InfoRow>
+        )}
+        {type === 'room' && features && features.length > 0 && (
+          <InfoRow>
+            <Label>Features:</Label>
+            <Value>{features.join(', ')}</Value>
+          </InfoRow>
+        )}
+        {availability && (
+          <InfoRow>
+            <Label>Availability:</Label>
+            <Value>{availability}</Value>
+          </InfoRow>
+        )}
+      </Content>
+      <Footer>
+        <StatusDot isActive={isActive} />
+        <StatusText>{isActive ? 'Active' : 'Inactive'}</StatusText>
+      </Footer>
+    </CardWrapper>
+  );
+};
+
+export default BmResourceCard;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import BmResourceCard from './ResourceCard';
+
+export default {
+  title: 'Components/BmResourceCard',
+  component: BmResourceCard,
+  argTypes: {
+    borderTopColor: { control: 'color' },
+    isActive: { control: 'boolean' },
+    name: { control: 'text' },
+    type: { control: 'text' },
+    departmentName: { control: 'text' },
+    email: { control: 'text' },
+    phone: { control: 'text' },
+    capacity: { control: 'number' },
+    availability: { control: 'text' },
+  },
+};
+
+const Template = (args) => (
+  <BmResourceCard {...args} EditIcon={EditIcon} DeleteIcon={DeleteIcon} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Room 101',
+  type: 'room',
+  resourceBadges: [
+    { label: 'Synced', icon: CalendarTodayIcon, color: '#10b981' },
+  ],
+  departmentName: 'Radiology',
+  capacity: 12,
+  features: ['Projector', 'Whiteboard'],
+  availability: 'Weekdays 9am - 5pm',
+};
+
+export const StaffExample = Template.bind({});
+StaffExample.args = {
+  borderTopColor: '#10b981',
+  isActive: true,
+  name: 'Dr. Sarah Johnson',
+  type: 'staff',
+  resourceBadges: [
+    { label: 'Google Synced', icon: CalendarTodayIcon, color: '#3b82f6' },
+  ],
+  departmentName: 'Cardiology',
+  email: 'sarah.johnson@hospital.com',
+  phone: '+1 555 123 4567',
+  availability: 'Mon - Fri, 9am - 3pm',
+};
+
+export const RoomExample = Template.bind({});
+RoomExample.args = {
+  borderTopColor: '#f59e0b',
+  isActive: false,
+  name: 'Conference Room B',
+  type: 'room',
+  resourceBadges: [],
+  departmentName: 'Oncology',
+  capacity: 20,
+  features: ['Video Conferencing', 'AC', 'Whiteboard'],
+  availability: 'Available on demand',
+};

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

package/src/lib/components/index.js

@@ -83,6 +83,8 @@ import BmInfoPanel from './InfoPanel/InfoPanel';
 import BmSelector from './BmSelector/BmSelector';
 import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
 import BmAlertBox from './Alert/Alert';
+import BmDepartmentCard from './DepartmentCard/DepartmentCard';
+import BmResourceCard from './ResourceCard/ResourceCard';
 
 export {
   BmAccordion,
@@ -163,4 +165,6 @@ export {
   BmSelector,
   BmCustomCardTitle,
   BmAlertBox,
+  BmDepartmentCard,
+  BmResourceCard,
 };