Merge pull request #179 from Compagnia-d-Arme-del-Santo-Luca/refactor/people/info-icon-on-card

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

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ name: Deployment (Staging)
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -20,8 +20,8 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v6
         with:
-          node-version: "lts/*"
+          node-version: 'lts/*'
-          cache: "npm"
+          cache: 'npm'
 
       - name: Set environment variables
         run: |
@@ -32,8 +32,8 @@ jobs:
           if [[ -n "${{ vars.VITE_BC_POSITION }}" ]]; then
             echo "VITE_BC_POSITION=${{ vars.VITE_BC_POSITION }}" >> .env
           fi
-          if [[ -n "${{ vars.VITE_BC_VAT }}" ]]; then
+          if [[ -n "${{ vars.VITE_BC_INSTAGRAM }}" ]]; then
-            echo "VITE_BC_VAT=${{ vars.VITE_BC_VAT }}" >> .env
+            echo "VITE_BC_INSTAGRAM=${{ vars.VITE_BC_INSTAGRAM }}" >> .env
           fi
           if [[ -n "${{ vars.VITE_BC_FACEBOOK }}" ]]; then
             echo "VITE_BC_FACEBOOK=${{ vars.VITE_BC_FACEBOOK }}" >> .env

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.test.tsx

@@ -8,7 +8,7 @@ import EmplyeeStack from './index'
 // Mock EmplyeeCard to make click handling deterministic in tests
 vi.mock('components/molecules/EmplyeeCard/index.js', () => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  EmplyeeCard: (props: any) => (
+  EmployeeCard: (props: any) => (
     <div
       data-testid="mock-card"
       onClick={e => props.onClick?.(e, { title: props.name, image: props.image, position: props.position, ...(props.description || {}) })}>

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}