Add ProviderCard molecule — first molecule in design system
First molecule component. Listing card for funeral providers on the provider select screen (map + scrollable list layout). - Verified providers: hero image, 48px logo overlay, "Trusted Partner" badge, name, location, reviews, capability badge, footer with price - Unverified providers: text-only with same content alignment - 7 component tokens (image height, logo size, footer/content spacing) - Composes Card (interactive, padding="none") + Badge + Typography - Capability badges accept arbitrary label + colour (categories may change) - Footer bar with warm brand.100 bg, "Packages from $X >" - 9 Storybook stories including mixed list layout demo - Decisions D026-D030 logged Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
260
src/components/molecules/ProviderCard/ProviderCard.tsx
Normal file
260
src/components/molecules/ProviderCard/ProviderCard.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
|
||||
import StarRoundedIcon from '@mui/icons-material/StarRounded';
|
||||
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
||||
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
|
||||
import { Card } from '../../atoms/Card';
|
||||
import { Badge } from '../../atoms/Badge';
|
||||
import type { BadgeColor } from '../../atoms/Badge/Badge';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Props for the FA ProviderCard molecule */
|
||||
export interface ProviderCardProps {
|
||||
/** Provider display name */
|
||||
name: string;
|
||||
/** Location text (suburb, city) */
|
||||
location: string;
|
||||
/** Whether this provider is a verified/trusted partner */
|
||||
verified?: boolean;
|
||||
/** Hero image URL — only rendered when verified */
|
||||
imageUrl?: string;
|
||||
/** Provider logo URL — circular overlay on image, only rendered when verified */
|
||||
logoUrl?: string;
|
||||
/** Average rating (e.g. 4.8). Omit to hide reviews. */
|
||||
rating?: number;
|
||||
/** Number of reviews (e.g. 127). Omit to hide review count. */
|
||||
reviewCount?: number;
|
||||
/** Capability badge label (e.g. "Online Arrangement") */
|
||||
capabilityLabel?: string;
|
||||
/** Capability badge colour intent — maps to Badge colour */
|
||||
capabilityColor?: BadgeColor;
|
||||
/** Starting price in dollars (shown in footer as "Packages from $X") */
|
||||
startingPrice?: number;
|
||||
/** Click handler — entire card is clickable */
|
||||
onClick?: () => void;
|
||||
/** MUI sx prop for style overrides */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
// ─── Constants ───────────────────────────────────────────────────────────────
|
||||
|
||||
const LOGO_SIZE = 'var(--fa-provider-card-logo-size)';
|
||||
const LOGO_OVERLAP = 24; // half of 48px logo, in px
|
||||
const IMAGE_HEIGHT = 'var(--fa-provider-card-image-height)';
|
||||
const CONTENT_PADDING = 'var(--fa-provider-card-content-padding)';
|
||||
const CONTENT_GAP = 'var(--fa-provider-card-content-gap)';
|
||||
const FOOTER_BG = 'var(--fa-provider-card-footer-background)';
|
||||
const FOOTER_PX = 'var(--fa-provider-card-footer-padding-x)';
|
||||
const FOOTER_PY = 'var(--fa-provider-card-footer-padding-y)';
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Provider listing card for the FA design system.
|
||||
*
|
||||
* Displays a funeral provider in the provider select screen's scrollable
|
||||
* list. Supports verified (paid partner) and unverified (scraped listing)
|
||||
* providers with consistent text alignment for scan readability.
|
||||
*
|
||||
* **Verified providers** get a hero image, logo overlay, and "Trusted Partner"
|
||||
* badge. **Unverified providers** show text content only — no image, logo,
|
||||
* or verification badge.
|
||||
*
|
||||
* Composes: Card (interactive, padding="none"), Badge, Typography.
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* <ProviderCard
|
||||
* name="H.Parsons Funeral Directors"
|
||||
* location="Wollongong"
|
||||
* verified
|
||||
* imageUrl="/images/parsons-hero.jpg"
|
||||
* logoUrl="/images/parsons-logo.png"
|
||||
* rating={4.8}
|
||||
* reviewCount={127}
|
||||
* capabilityLabel="Online Arrangement"
|
||||
* capabilityColor="success"
|
||||
* startingPrice={900}
|
||||
* onClick={() => navigate(`/providers/parsons`)}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderCard = React.forwardRef<HTMLDivElement, ProviderCardProps>(
|
||||
(
|
||||
{
|
||||
name,
|
||||
location,
|
||||
verified = false,
|
||||
imageUrl,
|
||||
logoUrl,
|
||||
rating,
|
||||
reviewCount,
|
||||
capabilityLabel,
|
||||
capabilityColor = 'default',
|
||||
startingPrice,
|
||||
onClick,
|
||||
sx,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
const showImage = verified && imageUrl;
|
||||
const showLogo = verified && logoUrl;
|
||||
|
||||
return (
|
||||
<Card
|
||||
ref={ref}
|
||||
interactive
|
||||
padding="none"
|
||||
onClick={onClick}
|
||||
sx={[
|
||||
{ overflow: 'hidden' },
|
||||
...(Array.isArray(sx) ? sx : [sx]),
|
||||
]}
|
||||
>
|
||||
{/* ── Image area (verified only) ── */}
|
||||
{showImage && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height: IMAGE_HEIGHT,
|
||||
backgroundImage: `url(${imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'action.hover', // fallback if image fails
|
||||
}}
|
||||
>
|
||||
{/* Trusted Partner badge */}
|
||||
<Box sx={{ position: 'absolute', top: 12, right: 12 }}>
|
||||
<Badge
|
||||
variant="filled"
|
||||
color="brand"
|
||||
size="small"
|
||||
icon={<VerifiedOutlinedIcon />}
|
||||
>
|
||||
Trusted Partner
|
||||
</Badge>
|
||||
</Box>
|
||||
|
||||
{/* Logo overlay */}
|
||||
{showLogo && (
|
||||
<Box
|
||||
component="img"
|
||||
src={logoUrl}
|
||||
alt={`${name} logo`}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: -LOGO_OVERLAP,
|
||||
left: CONTENT_PADDING,
|
||||
width: LOGO_SIZE,
|
||||
height: LOGO_SIZE,
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover',
|
||||
backgroundColor: 'background.paper',
|
||||
boxShadow: 1,
|
||||
border: '2px solid',
|
||||
borderColor: 'background.paper',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* ── Content area ── */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: CONTENT_GAP,
|
||||
p: CONTENT_PADDING,
|
||||
// Extra top padding when logo overlaps into content
|
||||
...(showLogo && { pt: `calc(${CONTENT_PADDING} + ${LOGO_OVERLAP}px)` }),
|
||||
}}
|
||||
>
|
||||
{/* Provider name */}
|
||||
<Typography variant="h5" maxLines={1}>
|
||||
{name}
|
||||
</Typography>
|
||||
|
||||
{/* Meta row: location + reviews */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
{/* Location */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<LocationOnOutlinedIcon
|
||||
sx={{ fontSize: 16, color: 'text.secondary' }}
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{location}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Reviews */}
|
||||
{rating != null && (
|
||||
<Box
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}
|
||||
aria-label={`Rated ${rating} out of 5${reviewCount != null ? `, ${reviewCount} reviews` : ''}`}
|
||||
>
|
||||
<StarRoundedIcon
|
||||
sx={{ fontSize: 16, color: 'warning.main' }}
|
||||
aria-hidden
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{rating}
|
||||
{reviewCount != null && ` (${reviewCount.toLocaleString('en-AU')})`}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Capability badge */}
|
||||
{capabilityLabel && (
|
||||
<Box>
|
||||
<Badge color={capabilityColor} size="small">
|
||||
{capabilityLabel}
|
||||
</Badge>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* ── Footer bar ── */}
|
||||
{startingPrice != null && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 0.5,
|
||||
backgroundColor: FOOTER_BG,
|
||||
px: FOOTER_PX,
|
||||
py: FOOTER_PY,
|
||||
}}
|
||||
>
|
||||
<Typography variant="label" color="text.secondary">
|
||||
Packages from
|
||||
</Typography>
|
||||
<Typography variant="label" sx={{ fontWeight: 700 }}>
|
||||
${startingPrice.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
<ChevronRightIcon
|
||||
sx={{ fontSize: 20, color: 'text.secondary' }}
|
||||
aria-hidden
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ProviderCard.displayName = 'ProviderCard';
|
||||
export default ProviderCard;
|
||||
Reference in New Issue
Block a user