Add LineItem, ProviderCardCompact, PackageDetail for Package Select page
LineItem (molecule): - Name + optional info tooltip + optional price - Allowance asterisk, total variant (bold + top border) - Reusable for package contents, order summaries, invoices ProviderCardCompact (molecule): - Horizontal layout: image left, name + location + rating right - Used at top of Package Select page to show selected provider PackageDetail (organism): - Right-side detail panel for Package Select page - Name/price header, Make Arrangement + Compare CTAs - Grouped LineItem sections, total row, T&C footer - PackageSelectPage story: full page with filter chips, package list (ServiceOption), sticky detail panel, and Navigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,113 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import Box from '@mui/material/Box';
|
||||
import { ProviderCardCompact } from './ProviderCardCompact';
|
||||
|
||||
const DEMO_IMAGE = 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop';
|
||||
|
||||
const meta: Meta<typeof ProviderCardCompact> = {
|
||||
title: 'Molecules/ProviderCardCompact',
|
||||
component: ProviderCardCompact,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<Box sx={{ maxWidth: 480, width: '100%' }}>
|
||||
<Story />
|
||||
</Box>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ProviderCardCompact>;
|
||||
|
||||
// --- Default -----------------------------------------------------------------
|
||||
|
||||
/** Compact provider card with image, name, location, and rating */
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
name: 'H.Parsons',
|
||||
location: 'Wentworth',
|
||||
imageUrl: DEMO_IMAGE,
|
||||
rating: 4.5,
|
||||
reviewCount: 11,
|
||||
},
|
||||
};
|
||||
|
||||
// --- Without Image -----------------------------------------------------------
|
||||
|
||||
/** Provider without a photo — text only */
|
||||
export const WithoutImage: Story = {
|
||||
args: {
|
||||
name: 'Smith & Sons Funerals',
|
||||
location: 'Parramatta',
|
||||
rating: 4.2,
|
||||
reviewCount: 38,
|
||||
},
|
||||
};
|
||||
|
||||
// --- Without Rating ----------------------------------------------------------
|
||||
|
||||
/** Provider without reviews */
|
||||
export const WithoutRating: Story = {
|
||||
args: {
|
||||
name: 'Peaceful Rest Funerals',
|
||||
location: 'Mildura',
|
||||
imageUrl: DEMO_IMAGE,
|
||||
},
|
||||
};
|
||||
|
||||
// --- Interactive -------------------------------------------------------------
|
||||
|
||||
/** Clickable — navigates back to provider details */
|
||||
export const Interactive: Story = {
|
||||
args: {
|
||||
name: 'H.Parsons',
|
||||
location: 'Wentworth',
|
||||
imageUrl: DEMO_IMAGE,
|
||||
rating: 4.5,
|
||||
reviewCount: 11,
|
||||
onClick: () => alert('Navigate to provider details'),
|
||||
},
|
||||
};
|
||||
|
||||
// --- In Context --------------------------------------------------------------
|
||||
|
||||
/** As it appears at the top of the Package Select page */
|
||||
export const InContext: Story = {
|
||||
render: () => (
|
||||
<Box>
|
||||
<Box
|
||||
component="button"
|
||||
onClick={() => {}}
|
||||
sx={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
mb: 3,
|
||||
p: 0,
|
||||
color: 'text.secondary',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: '1rem',
|
||||
'&:hover': { color: 'text.primary' },
|
||||
}}
|
||||
>
|
||||
← Back
|
||||
</Box>
|
||||
<Box sx={{ typography: 'h3', mb: 3 }}>Select a package</Box>
|
||||
<ProviderCardCompact
|
||||
name="H.Parsons"
|
||||
location="Wentworth"
|
||||
imageUrl={DEMO_IMAGE}
|
||||
rating={4.5}
|
||||
reviewCount={11}
|
||||
onClick={() => alert('View provider')}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,132 @@
|
||||
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 { Card } from '../../atoms/Card';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Props for the FA ProviderCardCompact molecule */
|
||||
export interface ProviderCardCompactProps {
|
||||
/** Provider display name */
|
||||
name: string;
|
||||
/** Location text (suburb, city) */
|
||||
location: string;
|
||||
/** Hero image URL — shown on the left */
|
||||
imageUrl?: string;
|
||||
/** Average rating (e.g. 4.5). Omit to hide. */
|
||||
rating?: number;
|
||||
/** Number of reviews. Omit to hide review count. */
|
||||
reviewCount?: number;
|
||||
/** Click handler — makes the card interactive */
|
||||
onClick?: () => void;
|
||||
/** MUI sx prop for the root element */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Compact horizontal provider card for the FA design system.
|
||||
*
|
||||
* Used at the top of the Package Select page to show which provider
|
||||
* the user has selected. Horizontal layout with image on the left,
|
||||
* name + meta on the right.
|
||||
*
|
||||
* For the full vertical listing card, use ProviderCard instead.
|
||||
*
|
||||
* Composes Card + Typography.
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* <ProviderCardCompact
|
||||
* name="H.Parsons"
|
||||
* location="Wentworth"
|
||||
* imageUrl="/images/parsons.jpg"
|
||||
* rating={4.5}
|
||||
* reviewCount={11}
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export const ProviderCardCompact = React.forwardRef<HTMLDivElement, ProviderCardCompactProps>(
|
||||
({ name, location, imageUrl, rating, reviewCount, onClick, sx }, ref) => {
|
||||
return (
|
||||
<Card
|
||||
ref={ref}
|
||||
variant="outlined"
|
||||
interactive={!!onClick}
|
||||
padding="none"
|
||||
onClick={onClick}
|
||||
sx={[
|
||||
{
|
||||
display: 'flex',
|
||||
overflow: 'hidden',
|
||||
minHeight: 110,
|
||||
},
|
||||
...(Array.isArray(sx) ? sx : [sx]),
|
||||
]}
|
||||
>
|
||||
{/* Image */}
|
||||
{imageUrl && (
|
||||
<Box
|
||||
role="img"
|
||||
aria-label={`${name} photo`}
|
||||
sx={{
|
||||
width: { xs: 120, sm: 160 },
|
||||
flexShrink: 0,
|
||||
backgroundImage: `url(${imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<Box
|
||||
sx={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
gap: 0.5,
|
||||
p: 2,
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" component="span">
|
||||
{name}
|
||||
</Typography>
|
||||
|
||||
{/* Location */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<LocationOnOutlinedIcon
|
||||
sx={{ fontSize: 16, color: 'text.secondary' }}
|
||||
aria-hidden
|
||||
/>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{location}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Rating */}
|
||||
{rating != null && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<StarRoundedIcon
|
||||
sx={{ fontSize: 16, color: 'var(--fa-color-brand-500)' }}
|
||||
aria-hidden
|
||||
/>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{rating} Rating{reviewCount != null ? ` (${reviewCount} ${reviewCount === 1 ? 'Review' : 'Reviews'})` : ''}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
ProviderCardCompact.displayName = 'ProviderCardCompact';
|
||||
export default ProviderCardCompact;
|
||||
1
src/components/molecules/ProviderCardCompact/index.ts
Normal file
1
src/components/molecules/ProviderCardCompact/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { ProviderCardCompact, type ProviderCardCompactProps } from './ProviderCardCompact';
|
||||
Reference in New Issue
Block a user