richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine LineItem + PackageDetail from review feedback

Browse Source 
LineItem:
- Bump font weight 400 → 500 (D019: Montserrat Regular too light)
- Price text now text.secondary for readability hierarchy (name primary, price quieter)
- Total row stays fully prominent (primary colour)
- Item gap increased 12px → 16px in stories

PackageDetail:
- Restructure: sections (before total) + extras (after total)
  Essentials + Complimentary → Total → Extras (additional cost)
- Add compareLoading prop — loading spinner on Compare button
- Add CompareLoading story with simulated 1.5s load
- T&C line height reduced 1.5 → 1.3
- Section gap increased for breathing room
- Complimentary items now correctly shown before total
- Default story includes onArrange + onCompare handlers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-26 08:42:16 +11:00
parent cd44f0c992
commit 0ed0adc835
4 changed files with 112 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/molecules/LineItem/LineItem.stories.tsx
View File

@@ -80,14 +80,14 @@ export const Total: Story = {
// --- Package Contents --------------------------------------------------------
/** Realistic package breakdown as seen on the Package Select page */
/** Realistic package breakdown — Essentials, Complimentary, Total, then Extras */
export const PackageContents: Story = {
render: () => (
<Box>
<Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
<Typography variant="label" sx={{ mb: 2, display: 'block' }}>
Essentials
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<LineItem name="Accommodation" price={1500} info="Refrigerated holding of the deceased prior to the funeral service." />
<LineItem name="Death Registration Certificate" price={1500} info="Lodgement of death registration with NSW Registry of Births, Deaths & Marriages." />
<LineItem name="Doctor Fee for Cremation" price={1500} info="Statutory medical referee fee required for all cremations in NSW." />
@@ -99,24 +99,24 @@ export const PackageContents: Story = {
<LineItem name="Allowance for Hearse" price={1500} isAllowance info="Allowance for hearse transfer — distance surcharges may apply." />
</Box>
<Divider sx={{ my: 2 }} />
<Divider sx={{ my: 3 }} />
<Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
<Typography variant="label" sx={{ mb: 2, display: 'block' }}>
Complimentary Items
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<LineItem name="Dressing Fee" info="Dressing and preparation of the deceased — included at no charge." />
<LineItem name="Viewing Fee" info="One private family viewing — included at no charge." />
</Box>
<LineItem name="Total" price={13500} variant="total" />
<Divider sx={{ my: 2 }} />
<Divider sx={{ my: 3 }} />
<Typography variant="label" sx={{ mb: 1.5, display: 'block' }}>
<Typography variant="label" sx={{ mb: 2, display: 'block' }}>
Extras
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<LineItem name="Allowance for Flowers" price={1500} isAllowance info="Seasonal floral arrangements for the service." />
<LineItem name="Allowance for Master of Ceremonies" price={1500} isAllowance info="Professional celebrant or MC for the funeral service." />
<LineItem name="After Business Hours Service Surcharge" price={1500} info="Additional fee for services held outside standard business hours." />

6
src/components/molecules/LineItem/LineItem.tsx
View File

@@ -75,7 +75,7 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
<Typography
variant={isTotal ? 'h6' : 'body2'}
sx={{
fontWeight: isTotal ? 600 : 400,
fontWeight: isTotal ? 600 : 500,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
@@ -103,11 +103,11 @@ export const LineItem = React.forwardRef<HTMLDivElement, LineItemProps>(
{formattedPrice && (
<Typography
variant={isTotal ? 'h6' : 'body2'}
color={isTotal ? 'primary' : 'text.secondary'}
sx={{
fontWeight: isTotal ? 600 : 400,
fontWeight: isTotal ? 600 : 500,
whiteSpace: 'nowrap',
flexShrink: 0,
...(isTotal && { color: 'primary.main' }),
}}
>
{formattedPrice}

59
src/components/organisms/PackageDetail/PackageDetail.stories.tsx
View File

@@ -29,14 +29,17 @@ const complimentary = [
{ name: 'Viewing Fee', info: 'One private family viewing — included at no charge.' },
];
const extras = [
{ name: 'Allowance for Flowers', price: 1500, isAllowance: true, info: 'Seasonal floral arrangements for the service.' },
{ name: 'Allowance for Master of Ceremonies', price: 1500, isAllowance: true, info: 'Professional celebrant or MC for the funeral service.' },
{ name: 'After Business Hours Service Surcharge', price: 1500, info: 'Additional fee for services held outside standard business hours.' },
{ name: 'After Hours Prayers', price: 1500, info: 'Evening prayer service at the funeral home.' },
{ name: 'Coffin Bearing by Funeral Directors', price: 1500, info: 'Professional pallbearing by funeral directors.' },
{ name: 'Digital Recording', price: 1500, info: 'Professional video recording of the funeral service.' },
];
const extras = {
heading: 'Extras',
items: [
{ name: 'Allowance for Flowers', price: 1500, isAllowance: true, info: 'Seasonal floral arrangements for the service.' },
{ name: 'Allowance for Master of Ceremonies', price: 1500, isAllowance: true, info: 'Professional celebrant or MC for the funeral service.' },
{ name: 'After Business Hours Service Surcharge', price: 1500, info: 'Additional fee for services held outside standard business hours.' },
{ name: 'After Hours Prayers', price: 1500, info: 'Evening prayer service at the funeral home.' },
{ name: 'Coffin Bearing by Funeral Directors', price: 1500, info: 'Professional pallbearing by funeral directors.' },
{ name: 'Digital Recording', price: 1500, info: 'Professional video recording of the funeral service.' },
],
};
const termsText = '* This package includes a funeral service at a chapel or a church with a funeral procession following to the crematorium. It includes many of the most commonly selected funeral options preselected for you. Many people choose this package for the extended funeral rituals — of course, you can tailor the funeral service to meet your needs and budget as you go through the selections.';
@@ -74,7 +77,7 @@ type Story = StoryObj<typeof PackageDetail>;
// --- Default -----------------------------------------------------------------
/** Full package detail panel with all sections */
/** Full package detail panel — Essentials, Complimentary, Total, then Extras */
export const Default: Story = {
args: {
name: 'Everyday Funeral Package',
@@ -82,16 +85,35 @@ export const Default: Story = {
sections: [
{ heading: 'Essentials', items: essentials },
{ heading: 'Complimentary Items', items: complimentary },
{ heading: 'Extras', items: extras },
],
total: 2700,
extras,
terms: termsText,
onArrange: () => alert('Make Arrangement clicked'),
onCompare: () => alert('Compare clicked'),
},
};
// --- Compare Loading ---------------------------------------------------------
/** Compare button in loading state — adding to comparison cart */
export const CompareLoading: Story = {
args: {
name: 'Everyday Funeral Package',
price: 900,
sections: [
{ heading: 'Essentials', items: essentials.slice(0, 4) },
],
total: 6000,
onArrange: () => alert('Make Arrangement'),
onCompare: () => {},
compareLoading: true,
},
};
// --- Without Extras ----------------------------------------------------------
/** Simpler package with essentials only */
/** Simpler package with essentials and complimentary only */
export const WithoutExtras: Story = {
args: {
name: 'Essential Funeral Package',
@@ -102,6 +124,8 @@ export const WithoutExtras: Story = {
],
total: 9000,
terms: termsText,
onArrange: () => alert('Make Arrangement'),
onCompare: () => alert('Compare'),
},
};
@@ -119,6 +143,12 @@ export const PackageSelectPage: Story = {
render: () => {
const [selectedPkg, setSelectedPkg] = useState('everyday');
const [activeFilter, setActiveFilter] = useState('Cremation');
const [comparing, setComparing] = useState(false);
const handleCompare = () => {
setComparing(true);
setTimeout(() => setComparing(false), 1500);
};
return (
<Box>
@@ -144,7 +174,7 @@ export const PackageSelectPage: Story = {
alignItems: 'start',
}}
>
{/* Left column: back, heading, provider, filter, packages */}
{/* Left column */}
<Box>
<Button
variant="text"
@@ -213,12 +243,13 @@ export const PackageSelectPage: Story = {
sections={[
{ heading: 'Essentials', items: essentials },
{ heading: 'Complimentary Items', items: complimentary },
{ heading: 'Extras', items: extras },
]}
total={2700}
extras={extras}
terms={termsText}
onArrange={() => alert(`Making arrangement for: ${selectedPkg}`)}
onCompare={() => alert(`Added ${selectedPkg} to compare`)}
onCompare={handleCompare}
compareLoading={comparing}
/>
</Box>
</Box>

95
src/components/organisms/PackageDetail/PackageDetail.tsx
View File

@@ -20,7 +20,7 @@ export interface PackageLineItem {
isAllowance?: boolean;
}
/** A section of items within a package (e.g. "Essentials", "Extras") */
/** A section of items within a package (e.g. "Essentials", "Complimentary Items") */
export interface PackageSection {
/** Section heading */
heading: string;
@@ -34,10 +34,12 @@ export interface PackageDetailProps {
name: string;
/** Package price in dollars */
price: number;
/** Grouped sections of package contents */
/** Main package sections shown BEFORE the total (Essentials, Complimentary Items) */
sections: PackageSection[];
/** Package total — usually the sum of priced essentials */
/** Package total — shown between main sections and extras */
total?: number;
/** Additional-cost extras shown AFTER the total — these can be added at extra cost */
extras?: PackageSection;
/** Terms and conditions text — required by providers */
terms?: string;
/** Called when user clicks "Make Arrangement" */
@@ -46,17 +48,49 @@ export interface PackageDetailProps {
onCompare?: () => void;
/** Whether the arrange button is disabled */
arrangeDisabled?: boolean;
/** Whether the compare button is in loading state */
compareLoading?: boolean;
/** MUI sx prop for the root element */
sx?: SxProps<Theme>;
}
// ─── Helpers ─────────────────────────────────────────────────────────────────
/** Renders a section heading + list of LineItems */
function SectionBlock({ section }: { section: PackageSection }) {
return (
<Box>
<Typography variant="label" component="h3" sx={{ display: 'block', mb: 2 }}>
{section.heading}
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
{section.items.map((item) => (
<LineItem
key={item.name}
name={item.name}
info={item.info}
price={item.price}
isAllowance={item.isAllowance}
/>
))}
</Box>
</Box>
);
}
// ─── Component ───────────────────────────────────────────────────────────────
/**
* Package detail panel for the FA design system.
*
* Displays the full contents of a funeral package — name, price, CTA buttons,
* grouped line items (Essentials, Complimentary, Extras), total, and T&Cs.
* grouped line items, total, optional extras, and T&Cs.
*
* Structure:
* - **sections** (before total): What's included in the package price
* (Essentials, Complimentary Items)
* - **total**: The package price
* - **extras** (after total): Additional items that can be added at extra cost
*
* Used as the right-side panel on the Package Select page. The contents and
* T&Cs are provider-authored and must be displayed in full.
@@ -64,22 +98,6 @@ export interface PackageDetailProps {
* "Make Arrangement" is the FA term for selecting/committing to a package.
*
* Composes Typography + Button + Divider + LineItem.
*
* Usage:
* ```tsx
* <PackageDetail
* name="Everyday Funeral Package"
* price={2700}
* sections={[
* { heading: 'Essentials', items: [...] },
* { heading: 'Complimentary Items', items: [...] },
* ]}
* total={2700}
* terms="* This package includes a funeral service at a chapel..."
* onArrange={() => startArrangement(pkg.id)}
* onCompare={() => addToCompare(pkg.id)}
* />
* ```
*/
export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps>(
(
@@ -88,10 +106,12 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
price,
sections,
total,
extras,
terms,
onArrange,
onCompare,
arrangeDisabled = false,
compareLoading = false,
sx,
},
ref,
@@ -137,6 +157,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
variant="soft"
color="secondary"
size="large"
loading={compareLoading}
onClick={onCompare}
sx={{ flexShrink: 0 }}
>
@@ -145,32 +166,26 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
)}
</Box>
<Divider sx={{ mb: 2 }} />
<Divider sx={{ mb: 3 }} />
{/* Sections */}
{sections.map((section, sectionIdx) => (
<Box key={section.heading} sx={{ mb: sectionIdx < sections.length - 1 ? 2 : 0 }}>
<Typography variant="label" component="h3" sx={{ display: 'block', mb: 1.5 }}>
{section.heading}
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
{section.items.map((item) => (
<LineItem
key={item.name}
name={item.name}
info={item.info}
price={item.price}
isAllowance={item.isAllowance}
/>
))}
</Box>
{/* Main sections — included in the package price */}
{sections.map((section, idx) => (
<Box key={section.heading} sx={{ mb: idx < sections.length - 1 ? 3 : 0 }}>
<SectionBlock section={section} />
</Box>
))}
{/* Total */}
{/* Total — separates included content from extras */}
{total != null && (
<LineItem name="Total" price={total} variant="total" />
)}
{/* Extras — additional cost items after the total */}
{extras && extras.items.length > 0 && (
<Box sx={{ mt: 3 }}>
<SectionBlock section={extras} />
</Box>
)}
</Box>
{/* Terms & Conditions footer */}
@@ -182,7 +197,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
py: 2,
}}
>
<Typography variant="captionSm" color="text.secondary" sx={{ lineHeight: 1.5 }}>
<Typography variant="captionSm" color="text.secondary" sx={{ lineHeight: 1.3 }}>
{terms}
</Typography>
</Box>