♻️ refactor(people): add info icon to employee card

src/components/molecules/EmplyeeCard/index.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react'
 import { vi } from 'vitest'
 
-import EmplyeeCard from './index'
+import EmployeeCard from './index'
 
 describe('EmplyeeCard', () => {
   const name = 'John Doe'
@@ -9,7 +9,7 @@ describe('EmplyeeCard', () => {
   const position = 'Blacksmith'
 
   it('renders name, image and optional position', () => {
-    render(<EmplyeeCard name={name} image={image} position={position} />)
+    render(<EmployeeCard name={name} image={image} position={position} />)
 
     expect(screen.getByText(name)).toBeInTheDocument()
     expect(screen.getByText(position)).toBeInTheDocument()
@@ -22,7 +22,7 @@ describe('EmplyeeCard', () => {
   it('calls onClick with (event, description) payload', () => {
     const description = { body: ['this is a description for John Doe'] }
     const handleClick = vi.fn()
-    render(<EmplyeeCard name={name} image={image} position={position} description={description} onClick={handleClick} />)
+    render(<EmployeeCard name={name} image={image} position={position} description={description} onClick={handleClick} />)
 
     fireEvent.click(screen.getByText(name))
 
@@ -43,7 +43,7 @@ describe('EmplyeeCard', () => {
       body: ['this is a description for Jane Doe'],
     }
     const handleClick = vi.fn()
-    render(<EmplyeeCard name={name} image={image} position={position} description={description} onClick={handleClick} />)
+    render(<EmployeeCard name={name} image={image} position={position} description={description} onClick={handleClick} />)
 
     fireEvent.click(screen.getByText(name))
 

src/components/molecules/EmplyeeCard/index.tsx

@@ -1,5 +1,6 @@
 import { FC, useMemo } from 'react'
 import { Card, CardActionArea, CardContent, CardMedia, CardProps, Typography } from '@mui/material'
+import InfoOutline from '@mui/icons-material/InfoOutline'
 
 import { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
 
@@ -11,9 +12,9 @@ export type EmployeeCardProps = Omit<CardProps, 'onClick'> & {
   onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, description: EmployeeDescription) => void
 }
 
-export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, description = {}, sx, onClick, ...props }) => {
+export const EmployeeCard: FC<EmployeeCardProps> = ({ name, position, image, description = {}, sx, onClick, ...props }) => {
   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    onClick(event, {
+    onClick?.(event, {
       title: name,
       image: image,
       position: position,
@@ -22,7 +23,7 @@ export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, desc
   }
   const content = useMemo(
     () => [
-      <CardMedia component="img" sx={{ minHeight: '140' }} image={image} alt={`${name} image`} />,
+      <CardMedia component="img" sx={{ minHeight: '140px' }} image={image} alt={`${name} image`} />,
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
           {name}
@@ -32,9 +33,12 @@ export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, desc
             {position}
           </Typography>
         )}
+        {typeof onClick !== 'undefined' && (
+          <InfoOutline fontSize="small" sx={{ color: 'text.disabled', position: 'absolute', bottom: 8, right: 8 }} />
+        )}
       </CardContent>,
     ],
-    [name, position, image]
+    [name, position, image, onClick]
   )
   return (
     <Card sx={{ flexShrink: 0, width: 270, height: 360, ...sx }} {...props} onClick={handleClick}>
@@ -43,4 +47,4 @@ export const EmplyeeCard: FC<EmployeeCardProps> = ({ name, position, image, desc
   )
 }
 
-export default EmplyeeCard
+export default EmployeeCard

src/components/molecules/EmplyeeStack/index.tsx

@@ -2,7 +2,7 @@ import { FC, useState } from 'react'
 import { Box, IconButton } from '@mui/material'
 import ShuffleIcon from '@mui/icons-material/NextPlan'
 
-import { EmplyeeCard, EmployeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
+import { EmployeeCard, EmployeeCardProps } from 'components/molecules/EmplyeeCard/index.js'
 import { EmployeeDescription } from 'components/molecules/EmployeeDescription/index.js'
 
 interface Props {
@@ -35,7 +35,7 @@ const EmplyeeStack: FC<Props> = ({
   }
 
   if (items.length === 0) return null
-  if (items.length === 1) return <EmplyeeCard {...items[0]} onClick={onClick} />
+  if (items.length === 1) return <EmployeeCard {...items[0]} onClick={onClick} />
 
   return (
     <Box
@@ -45,7 +45,7 @@ const EmplyeeStack: FC<Props> = ({
         height: 360 + offsetStep * Math.min(initialItems.length - 1, maxVisible),
       }}>
       {items.slice(0, maxVisible).map((props, idx) => (
-        <EmplyeeCard
+        <EmployeeCard
           {...props}
           onClick={onClick}
           key={idx}