admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract ExpandableCardShell from WorkExperience and TimelineInterventions subsections

Browse Source 
Single source of truth for expand/collapse card interaction pattern:
container styling, keyboard handling, chevron rotation, AnimatePresence
animation, and expanded content wrapper. Each consumer retains unique
header and body content via render props.
This commit is contained in:
Andy Charlwood
2026-02-17 02:03:13 +00:00
parent 8f4ddc454a
commit 7528935d2b
3 changed files with 374 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ExpandableCardShell.tsx
+147
View File
@@ -0,0 +1,147 @@
import React, { useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronRight } from 'lucide-react'
import { hexToRgba, motionSafeTransition } from '@/lib/utils'
interface ExpandableCardShellProps {
isExpanded: boolean
isHighlighted: boolean
accentColor: string
onToggle: () => void
ariaLabel: string
headerPadding?: string
className?: string
dataTileId?: string
onMouseEnter?: () => void
onMouseLeave?: () => void
renderHeader: () => React.ReactNode
renderBody: () => React.ReactNode
}
export function ExpandableCardShell({
isExpanded,
isHighlighted,
accentColor,
onToggle,
ariaLabel,
headerPadding = '12px 14px',
className,
dataTileId,
onMouseEnter,
onMouseLeave,
renderHeader,
renderBody,
}: ExpandableCardShellProps) {
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
onToggle()
}
if (e.key === 'Escape' && isExpanded) {
e.preventDefault()
onToggle()
}
},
[onToggle, isExpanded],
)
return (
<div
data-tile-id={dataTileId}
className={className}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
>
<div
style={{
background: isHighlighted ? hexToRgba(accentColor, 0.03) : 'var(--bg-dashboard)',
borderRadius: 'var(--radius-sm)',
border: `1px solid ${isExpanded || isHighlighted ? hexToRgba(accentColor, 0.2) : 'var(--border-light)'}`,
transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
overflow: 'hidden',
}}
>
<div
role="button"
tabIndex={0}
onClick={onToggle}
onKeyDown={handleKeyDown}
aria-expanded={isExpanded}
aria-label={ariaLabel}
style={{
display: 'flex',
gap: '10px',
padding: headerPadding,
cursor: 'pointer',
minHeight: '44px',
alignItems: 'flex-start',
}}
onMouseEnter={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = hexToRgba(accentColor, 0.2)
e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
}
}}
onMouseLeave={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
e.currentTarget.parentElement!.style.boxShadow = 'none'
}
}}
>
<div
aria-hidden="true"
style={{
width: '9px',
height: '9px',
borderRadius: '50%',
background: accentColor,
flexShrink: 0,
marginTop: '4px',
}}
/>
<div style={{ flex: 1, minWidth: 0 }}>
{renderHeader()}
</div>
<ChevronRight
size={14}
style={{
color: 'var(--text-tertiary)',
flexShrink: 0,
marginTop: '2px',
transform: isExpanded ? 'rotate(90deg)' : 'none',
transition: 'transform 0.15s ease-out',
}}
/>
</div>
<AnimatePresence>
{isExpanded && (
<motion.div
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: 0 }}
transition={motionSafeTransition(0.2)}
style={{ overflow: 'hidden' }}
>
<div
style={{
padding: '0 12px 12px 30px',
borderTop: '1px solid var(--border-light)',
paddingTop: '12px',
borderLeft: `2px solid ${accentColor}`,
marginLeft: '12px',
}}
>
{renderBody()}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
</div>
)
}
src/components/TimelineInterventionsSubsection.tsx
+120 -215
View File
@@ -1,11 +1,11 @@
import React, { useMemo, useState, useCallback } from 'react' import { useMemo, useState, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronRight } from 'lucide-react' import { ChevronRight } from 'lucide-react'
import { ExpandableCardShell } from './ExpandableCardShell'
import { useDetailPanel } from '@/contexts/DetailPanelContext' import { useDetailPanel } from '@/contexts/DetailPanelContext'
import { timelineEntities, timelineConsultations } from '@/data/timeline' import { timelineEntities, timelineConsultations } from '@/data/timeline'
import { getExperienceEducationUICopy } from '@/lib/profile-content' import { getExperienceEducationUICopy } from '@/lib/profile-content'
import type { TimelineEntity } from '@/types/pmr' import type { TimelineEntity } from '@/types/pmr'
import { hexToRgba, motionSafeTransition } from '@/lib/utils' import { hexToRgba } from '@/lib/utils'
interface TimelineInterventionItemProps { interface TimelineInterventionItemProps {
entity: TimelineEntity entity: TimelineEntity
@@ -30,90 +30,32 @@ function TimelineInterventionItem({
const isEducation = entity.kind === 'education' const isEducation = entity.kind === 'education'
const interventionLabel = isEducation ? experienceEducationCopy.educationLabel : experienceEducationCopy.employmentLabel const interventionLabel = isEducation ? experienceEducationCopy.educationLabel : experienceEducationCopy.employmentLabel
const handleKeyDown = useCallback(
(e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
onToggle()
}
if (e.key === 'Escape' && isExpanded) {
e.preventDefault()
onToggle()
}
},
[isExpanded, onToggle],
)
return ( return (
<div <ExpandableCardShell
data-tile-id={isEducationAnchor ? 'section-education' : undefined} isExpanded={isExpanded}
isHighlighted={isHighlightedFromGraph}
accentColor={entity.orgColor}
onToggle={onToggle}
ariaLabel={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
headerPadding="8px 8px"
className={isEducation ? 'timeline-intervention-item timeline-intervention-item--education' : 'timeline-intervention-item'} className={isEducation ? 'timeline-intervention-item timeline-intervention-item--education' : 'timeline-intervention-item'}
dataTileId={isEducationAnchor ? 'section-education' : undefined}
onMouseEnter={() => onHighlight?.(entity.id)} onMouseEnter={() => onHighlight?.(entity.id)}
onMouseLeave={() => onHighlight?.(null)} onMouseLeave={() => onHighlight?.(null)}
> renderHeader={() => (
<div <>
style={{
background: isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.03) : 'var(--bg-dashboard)',
borderRadius: 'var(--radius-sm)',
border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(entity.orgColor, 0.2) : 'var(--border-light)'}`,
transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s',
overflow: 'hidden',
}}
>
<div
role="button"
tabIndex={0}
onClick={onToggle}
onKeyDown={handleKeyDown}
aria-expanded={isExpanded}
aria-label={`${entity.title} at ${entity.organization}, ${entity.dateRange.display}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
style={{
display: 'flex',
gap: '10px',
padding: '8px 8px',
cursor: 'pointer',
alignItems: 'flex-start',
}}
onMouseEnter={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = hexToRgba(entity.orgColor, 0.2)
e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
}
}}
onMouseLeave={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
e.currentTarget.parentElement!.style.boxShadow = 'none'
}
}}
>
<div <div
aria-hidden="true"
style={{ style={{
width: '9px', display: 'flex',
height: '9px', flexWrap: 'wrap',
borderRadius: '50%', alignItems: 'center',
background: entity.orgColor, gap: '6px',
flexShrink: 0,
marginTop: '4px',
}} }}
/> >
<span className={isEducation ? 'timeline-intervention-pill timeline-intervention-pill--education' : 'timeline-intervention-pill'}>
<div style={{ flex: 1, minWidth: 0 }}> {interventionLabel}
</span>
<div <div
style={{
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
gap: '6px',
}}
>
<span className={isEducation ? 'timeline-intervention-pill timeline-intervention-pill--education' : 'timeline-intervention-pill'}>
{interventionLabel}
</span>
<div
style={{ style={{
fontSize: '14px', fontSize: '14px',
fontWeight: 600, fontWeight: 600,
@@ -123,17 +65,16 @@ function TimelineInterventionItem({
> >
{entity.title} {entity.title}
</div> </div>
</div> </div>
<div <div
style={{ style={{
fontSize: '12px', fontSize: '12px',
color: 'var(--text-secondary)', color: 'var(--text-secondary)',
marginTop: '2px', marginTop: '2px',
}} }}
> >
{entity.organization} {entity.organization}
<span
<span
style={{ style={{
fontSize: '11px', fontSize: '11px',
paddingLeft: '6px', paddingLeft: '6px',
@@ -144,145 +85,109 @@ function TimelineInterventionItem({
> >
{entity.dateRange.display} {entity.dateRange.display}
</span> </span>
</div>
</div> </div>
</>
<ChevronRight )}
size={14} renderBody={() => (
<>
<ul
style={{ style={{
color: 'var(--text-tertiary)', listStyle: 'none',
flexShrink: 0, padding: 0,
marginTop: '2px', margin: '0 0 10px 0',
transform: isExpanded ? 'rotate(90deg)' : 'none', display: 'flex',
transition: 'transform 0.15s ease-out', flexDirection: 'column',
gap: '5px',
}} }}
/> >
</div> {entity.details.map((detail, i) => (
<li
<AnimatePresence> key={i}
{isExpanded && (
<motion.div
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: 0 }}
transition={motionSafeTransition(0.2)}
style={{ overflow: 'hidden' }}
>
<div
style={{ style={{
padding: '0 12px 12px 30px', fontSize: '13px',
borderTop: '1px solid var(--border-light)', color: 'var(--text-primary)',
paddingTop: '12px', lineHeight: 1.5,
borderLeft: `2px solid ${entity.orgColor}`, paddingLeft: '12px',
marginLeft: '12px', position: 'relative',
}} }}
> >
<ul <span
aria-hidden="true"
style={{ style={{
listStyle: 'none', position: 'absolute',
padding: 0, left: 0,
margin: '0 0 10px 0', top: '6px',
display: 'flex', width: '4px',
flexDirection: 'column', height: '4px',
gap: '5px', borderRadius: '50%',
background: entity.orgColor,
opacity: 0.5,
}} }}
> />
{entity.details.map((detail, i) => ( {detail}
<li </li>
key={i} ))}
style={{ </ul>
fontSize: '13px',
color: 'var(--text-primary)',
lineHeight: 1.5,
paddingLeft: '12px',
position: 'relative',
}}
>
<span
aria-hidden="true"
style={{
position: 'absolute',
left: 0,
top: '6px',
width: '4px',
height: '4px',
borderRadius: '50%',
background: entity.orgColor,
opacity: 0.5,
}}
/>
{detail}
</li>
))}
</ul>
{!!entity.codedEntries?.length && ( {!!entity.codedEntries?.length && (
<div <div
style={{ style={{
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: '6px', gap: '6px',
marginBottom: '10px', marginBottom: '10px',
}} }}
> >
{entity.codedEntries.map((entry) => ( {entity.codedEntries.map((entry) => (
<span <span
key={entry.code} key={entry.code}
style={{
fontSize: '11px',
fontFamily: 'var(--font-geist-mono)',
padding: '3px 8px',
borderRadius: '4px',
background: hexToRgba(entity.orgColor, 0.08),
color: entity.orgColor,
border: `1px solid ${hexToRgba(entity.orgColor, 0.2)}`,
}}
>
{entry.code}: {entry.description}
</span>
))}
</div>
)}
<button
onClick={(e) => {
e.stopPropagation()
onViewFull()
}}
style={{ style={{
display: 'flex', fontSize: '11px',
alignItems: 'center', fontFamily: 'var(--font-geist-mono)',
gap: '4px', padding: '3px 8px',
fontSize: '12px', borderRadius: '4px',
fontWeight: 500, background: hexToRgba(entity.orgColor, 0.08),
color: entity.orgColor, color: entity.orgColor,
background: 'transparent', border: `1px solid ${hexToRgba(entity.orgColor, 0.2)}`,
border: 'none',
padding: '4px 0',
cursor: 'pointer',
fontFamily: 'inherit',
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.7'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
}} }}
> >
{experienceEducationCopy.viewFullRecordLabel} {entry.code}: {entry.description}
<ChevronRight size={12} /> </span>
</button> ))}
</div> </div>
</motion.div>
)} )}
</AnimatePresence>
</div> <button
</div> onClick={(e) => {
e.stopPropagation()
onViewFull()
}}
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '12px',
fontWeight: 500,
color: entity.orgColor,
background: 'transparent',
border: 'none',
padding: '4px 0',
cursor: 'pointer',
fontFamily: 'inherit',
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.7'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
}}
>
{experienceEducationCopy.viewFullRecordLabel}
<ChevronRight size={12} />
</button>
</>
)}
/>
) )
} }
src/components/WorkExperienceSubsection.tsx
+107 -195
View File
@@ -1,10 +1,10 @@
import React, { useState, useCallback } from 'react' import { useState, useCallback } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { ChevronRight } from 'lucide-react' import { ChevronRight } from 'lucide-react'
import { CardHeader } from './Card' import { CardHeader } from './Card'
import { ExpandableCardShell } from './ExpandableCardShell'
import { timelineConsultations } from '@/data/timeline' import { timelineConsultations } from '@/data/timeline'
import { useDetailPanel } from '@/contexts/DetailPanelContext' import { useDetailPanel } from '@/contexts/DetailPanelContext'
import { hexToRgba, motionSafeTransition } from '@/lib/utils' import { hexToRgba } from '@/lib/utils'
import { DEFAULT_ORG_COLOR } from '@/lib/theme-colors' import { DEFAULT_ORG_COLOR } from '@/lib/theme-colors'
interface RoleItemProps { interface RoleItemProps {
@@ -17,76 +17,20 @@ interface RoleItemProps {
} }
function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle, onViewFull, onHighlight }: RoleItemProps) { function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle, onViewFull, onHighlight }: RoleItemProps) {
const handleKeyDown = useCallback( const orgColor = consultation.orgColor ?? DEFAULT_ORG_COLOR
(e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
onToggle()
}
if (e.key === 'Escape' && isExpanded) {
e.preventDefault()
onToggle()
}
},
[onToggle, isExpanded],
)
return ( return (
<div <ExpandableCardShell
style={{ isExpanded={isExpanded}
background: isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.03) : 'var(--bg-dashboard)', isHighlighted={isHighlightedFromGraph}
borderRadius: 'var(--radius-sm)', accentColor={orgColor}
border: `1px solid ${isExpanded || isHighlightedFromGraph ? hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2) : 'var(--border-light)'}`, onToggle={onToggle}
transition: 'border-color 0.15s, box-shadow 0.15s, background-color 0.15s', ariaLabel={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
overflow: 'hidden', headerPadding="12px 14px"
}}
onMouseEnter={() => onHighlight?.(consultation.id)} onMouseEnter={() => onHighlight?.(consultation.id)}
onMouseLeave={() => onHighlight?.(null)} onMouseLeave={() => onHighlight?.(null)}
> renderHeader={() => (
{/* Clickable header */} <>
<div
role="button"
tabIndex={0}
onClick={onToggle}
onKeyDown={handleKeyDown}
aria-expanded={isExpanded}
aria-label={`${consultation.role} at ${consultation.organization}, ${consultation.duration}. Click to ${isExpanded ? 'collapse' : 'expand'} details.`}
style={{
display: 'flex',
gap: '10px',
padding: '12px 14px',
cursor: 'pointer',
minHeight: '44px',
alignItems: 'flex-start',
}}
onMouseEnter={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)
e.currentTarget.parentElement!.style.boxShadow = 'var(--shadow-md)'
}
}}
onMouseLeave={(e) => {
if (!isExpanded) {
e.currentTarget.parentElement!.style.borderColor = 'var(--border-light)'
e.currentTarget.parentElement!.style.boxShadow = 'none'
}
}}
>
{/* Org colour dot */}
<div
aria-hidden="true"
style={{
width: '9px',
height: '9px',
borderRadius: '50%',
background: consultation.orgColor ?? DEFAULT_ORG_COLOR,
flexShrink: 0,
marginTop: '4px',
}}
/>
{/* Text content */}
<div style={{ flex: 1, minWidth: 0 }}>
<div <div
style={{ style={{
fontSize: '14px', fontSize: '14px',
@@ -116,141 +60,109 @@ function RoleItem({ consultation, isExpanded, isHighlightedFromGraph, onToggle,
> >
{consultation.duration} {consultation.duration}
</div> </div>
</div> </>
)}
{/* Chevron */} renderBody={() => (
<ChevronRight <>
size={14} {/* Examination bullets */}
style={{ <ul
color: 'var(--text-tertiary)', style={{
flexShrink: 0, listStyle: 'none',
marginTop: '2px', padding: 0,
transform: isExpanded ? 'rotate(90deg)' : 'none', margin: '0 0 10px 0',
transition: 'transform 0.15s ease-out', display: 'flex',
}} flexDirection: 'column',
/> gap: '5px',
</div> }}
{/* Expandable detail content */}
<AnimatePresence>
{isExpanded && (
<motion.div
initial={{ height: 0 }}
animate={{ height: 'auto' }}
exit={{ height: 0 }}
transition={motionSafeTransition(0.2)}
style={{ overflow: 'hidden' }}
> >
<div {consultation.examination.map((bullet, i) => (
style={{ <li
padding: '0 12px 12px 30px', key={i}
borderTop: '1px solid var(--border-light)',
paddingTop: '12px',
borderLeft: `2px solid ${consultation.orgColor ?? 'var(--accent)'}`,
marginLeft: '12px',
}}
>
{/* Examination bullets */}
<ul
style={{ style={{
listStyle: 'none', fontSize: '13px',
padding: 0, color: 'var(--text-primary)',
margin: '0 0 10px 0', lineHeight: 1.5,
display: 'flex', paddingLeft: '12px',
flexDirection: 'column', position: 'relative',
gap: '5px',
}} }}
> >
{consultation.examination.map((bullet, i) => ( <span
<li aria-hidden="true"
key={i} style={{
style={{ position: 'absolute',
fontSize: '13px', left: 0,
color: 'var(--text-primary)', top: '6px',
lineHeight: 1.5, width: '4px',
paddingLeft: '12px', height: '4px',
position: 'relative', borderRadius: '50%',
}} background: consultation.orgColor ?? 'var(--accent)',
> opacity: 0.5,
<span }}
aria-hidden="true" />
style={{ {bullet}
position: 'absolute', </li>
left: 0, ))}
top: '6px', </ul>
width: '4px',
height: '4px',
borderRadius: '50%',
background: consultation.orgColor ?? 'var(--accent)',
opacity: 0.5,
}}
/>
{bullet}
</li>
))}
</ul>
{/* Coded entries */} {/* Coded entries */}
<div <div
style={{
display: 'flex',
flexWrap: 'wrap',
gap: '6px',
marginBottom: '10px',
}}
>
{consultation.codedEntries.map((entry) => (
<span
key={entry.code}
style={{ style={{
display: 'flex', fontSize: '11px',
flexWrap: 'wrap', fontFamily: 'var(--font-geist-mono)',
gap: '6px', padding: '3px 8px',
marginBottom: '10px', borderRadius: '4px',
}} background: hexToRgba(orgColor, 0.08),
>
{consultation.codedEntries.map((entry) => (
<span
key={entry.code}
style={{
fontSize: '11px',
fontFamily: 'var(--font-geist-mono)',
padding: '3px 8px',
borderRadius: '4px',
background: hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.08),
color: consultation.orgColor ?? 'var(--accent)',
border: `1px solid ${hexToRgba(consultation.orgColor ?? DEFAULT_ORG_COLOR, 0.2)}`,
}}
>
{entry.code}: {entry.description}
</span>
))}
</div>
{/* View full record link */}
<button
onClick={(e) => {
e.stopPropagation()
onViewFull()
}}
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '12px',
fontWeight: 500,
color: consultation.orgColor ?? 'var(--accent)', color: consultation.orgColor ?? 'var(--accent)',
background: 'transparent', border: `1px solid ${hexToRgba(orgColor, 0.2)}`,
border: 'none',
padding: '4px 0',
cursor: 'pointer',
fontFamily: 'inherit',
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.7'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
}} }}
> >
View full record {entry.code}: {entry.description}
<ChevronRight size={12} /> </span>
</button> ))}
</div> </div>
</motion.div>
)} {/* View full record link */}
</AnimatePresence> <button
</div> onClick={(e) => {
e.stopPropagation()
onViewFull()
}}
style={{
display: 'flex',
alignItems: 'center',
gap: '4px',
fontSize: '12px',
fontWeight: 500,
color: consultation.orgColor ?? 'var(--accent)',
background: 'transparent',
border: 'none',
padding: '4px 0',
cursor: 'pointer',
fontFamily: 'inherit',
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '0.7'
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '1'
}}
>
View full record
<ChevronRight size={12} />
</button>
</>
)}
/>
) )
} }