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}