Richie
cd44f0c992
- LineItem: add aria-label to info icon for screen readers (P1) - PackageDetail: stack CTA buttons vertically on narrow screens (P2) - PackageDetail: section headings use component="h3" for hierarchy (P2) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
|
|
import type { SxProps, Theme } from '@mui/material/styles';
|
|
import { Typography } from '../../atoms/Typography';
|
|
|
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
|
|
|
/** Props for the FA LineItem molecule */
|
|
export interface LineItemProps {
|
|
/** Item name/label */
|
|
name: string;
|
|
/** Optional tooltip text explaining the item (shown via info icon) */
|
|
info?: string;
|
|
/** Price in dollars — omit for complimentary/included items */
|
|
price?: number;
|
|
/** Whether the price is an allowance (shows asterisk) */
|
|
isAllowance?: boolean;
|
|
/** Custom price display — overrides `price` formatting (e.g. "Included", "TBC") */
|
|
priceLabel?: string;
|
|
/** Visual weight — "default" for regular items, "total" for summary rows */
|
|
variant?: 'default' | 'total';
|
|
/** MUI sx prop for the root element */
|
|
sx?: SxProps<Theme>;
|
|
}
|
|
|
|
// ─── Component ───────────────────────────────────────────────────────────────
|
|
|
|
/**
|
|
* A single line item showing a name, optional info tooltip, and optional price.
|
|
*
|
|
* Used in package contents, order summaries, and invoices. The `info` prop
|
|
* renders a small info icon with a tooltip — used by providers to explain
|
|
* what each inclusion covers.
|
|
*
|
|
* Composes Typography + Tooltip.
|
|
*
|
|
* Usage:
|
|
* ```tsx
|
|
* <LineItem name="Professional Service Fee" info="Covers all coordination..." price={1500} />
|
|
* <LineItem name="Allowance for Coffin" price={1500} isAllowance info="Can be upgraded..." />
|
|
* <LineItem name="Dressing Fee" info="Included in this package" />
|
|
* <LineItem name="Total" price={2700} variant="total" />
|
|
* ```
|
|
*/
|
|
export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
|
|
({ name, info, price, isAllowance = false, priceLabel, variant = 'default', sx }, ref) => {
|
|
const isTotal = variant === 'total';
|
|
|
|
const formattedPrice = priceLabel
|
|
?? (price != null ? `$${price.toLocaleString('en-AU')}${isAllowance ? '*' : ''}` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
ref={ref}
|
|
sx={[
|
|
{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 2,
|
|
...(isTotal && {
|
|
pt: 1.5,
|
|
mt: 1.5,
|
|
borderTop: '1px solid',
|
|
borderColor: 'divider',
|
|
}),
|
|
},
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
]}
|
|
>
|
|
{/* Name + optional info icon */}
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, minWidth: 0 }}>
|
|
<Typography
|
|
variant={isTotal ? 'h6' : 'body2'}
|
|
sx={{
|
|
fontWeight: isTotal ? 600 : 400,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{name}
|
|
</Typography>
|
|
|
|
{info && (
|
|
<Tooltip title={info} arrow placement="top">
|
|
<InfoOutlinedIcon
|
|
aria-label="More information"
|
|
sx={{
|
|
fontSize: 16,
|
|
color: 'text.secondary',
|
|
cursor: 'help',
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Price */}
|
|
{formattedPrice && (
|
|
<Typography
|
|
variant={isTotal ? 'h6' : 'body2'}
|
|
sx={{
|
|
fontWeight: isTotal ? 600 : 400,
|
|
whiteSpace: 'nowrap',
|
|
flexShrink: 0,
|
|
...(isTotal && { color: 'primary.main' }),
|
|
}}
|
|
>
|
|
{formattedPrice}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
},
|
|
);
|
|
|
|
LineItem.displayName = 'LineItem';
|
|
export default LineItem;
|