beem-component 2.1.28 → 2.1.30

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}>

package/src/lib/components/Modals/modals.stories.js

@@ -8,12 +8,11 @@ export default {
   component: BmModal,
   title: 'components/Modals',
   argTypes: {
-    // size: {
-    //   options: ["small", "default", "large", "xlarge"],
-    //   control: { type: "select" },
-    //   description: "Size of the Modal (Optional)",
-    //   defaultValue: { summary: "default" },
-    // },
+    size: {
+      control: { type: 'text' },
+      description: 'Controls the width of the modal in Pixels',
+      defaultValue: '500px',
+    },
     closeButton: {
       description:
         'Placed on BmModal.Header component. Displays the close button (X)',
@@ -28,6 +27,11 @@ export default {
     onHide: {
       description: 'Handling the closing of the modal',
     },
+    zIndex: {
+      description:
+        'Controls the stacking order of the modal in an event you have multiple modals',
+      control: { type: 'number' },
+    },
   },
 };
 

package/src/lib/components/ProfileIcon/ProfileIcon.js

@@ -5,6 +5,7 @@ import wa from '../../assets/wa.png';
 import fb from '../../assets/fb.png';
 import insta from '../../assets/insta.png';
 import gbm from '../../assets/Google_Messages_logo.png';
+import vc from '../../assets/voiceCallIcon.svg';
 
 const handleSize = (size) => {
   if (size) {
@@ -111,6 +112,9 @@ export const BmProfileIcon = ({ img, content, channel, size, ...rest }) => {
         {channel && channel === 'google_business_messaging' && (
           <Dot size={size} src={gbm} alt="icon" />
         )}
+        {channel && channel === 'voice_call' && (
+          <Dot size={size} src={vc} alt="icon" />
+        )}
       </Profile>
     </>
   );

package/src/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -1,7 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import hexToRgba from '../../../util/convertToRGBA';
+const hexToRgba = (hex, opacity = 0.6) => {
+  try {
+    const normalizedHex = hex?.replace('#', '');
+    if (
+      !normalizedHex ||
+      normalizedHex.length !== 6 ||
+      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
+    ) {
+      throw new Error('Invalid hex');
+    }
+
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  } catch (e) {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+};
 
 const Container = styled.div`
   margin-bottom: 1rem;

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

@@ -0,0 +1,213 @@
+/* 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`
+  margin-top: 1rem;
+  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;
+  font-size: 0.875rem;
+`;
+
+const Value = styled.span`
+  color: #374151;
+  font-size: 0.875rem;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 1rem;
+  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>
+        )}
+        {email && (
+          <InfoRow>
+            <Label>Email:</Label>
+            <Value>{email}</Value>
+          </InfoRow>
+        )}
+        {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/SelectionNotice/SelectionNotice.js

@@ -1,7 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import hexToRgba from '../../../util/convertToRGBA';
+const hexToRgba = (hex, opacity = 0.6) => {
+  try {
+    const normalizedHex = hex?.replace('#', '');
+    if (
+      !normalizedHex ||
+      normalizedHex.length !== 6 ||
+      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
+    ) {
+      throw new Error('Invalid hex');
+    }
+
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  } catch (e) {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+};
 
 const Container = styled.div`
   background-color: ${({ color }) => hexToRgba(color || '#33B1BA', 0.05)};

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

@@ -81,6 +81,13 @@ 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';
+import BmDepartmentCard from './DepartmentCard/DepartmentCard';
+import BmResourceCard from './ResourceCard/ResourceCard';
+
+import BmCustomTab from './BmTabv2/BmTabv2';
+import BmHorizontalCard from './HorizontalCard/HorizontalCard';
 
 export {
   BmAccordion,
@@ -159,4 +166,10 @@ export {
   BmInfoPanel,
   BmProgressIndicator,
   BmSelector,
+  BmCustomCardTitle,
+  BmAlertBox,
+  BmDepartmentCard,
+  BmResourceCard,
+  BmCustomTab,
+  BmHorizontalCard,
 };

package/src/lib/components/text.js

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

package/src/lib/components/typography.js

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