FA Design System

`). Override via `sx` if needed. + * + * Related: row layout mirrors `ClusterPopup` (the anchored on-map variant); + * future consolidation possible if both container contracts converge. + */ +export const MapProviderDrawer = React.forwardRef( + ({ active, onClose, onSelectProvider, onDrillIntoProvider, sx }, ref) => { + const provider = active?.provider ?? null; + const cluster = active?.cluster ?? null; + const isOpen = !!(active && !active.exiting && (provider || cluster)); + const isExiting = !!active?.exiting; + + const ariaLabel = provider + ? `${provider.name} details` + : cluster + ? `${cluster.providers.length} providers in this area` + : undefined; + + return ( + + ); + }, +); + +MapProviderDrawer.displayName = 'MapProviderDrawer'; +export default MapProviderDrawer; diff --git a/src/components/molecules/MapProviderDrawer/index.ts b/src/components/molecules/MapProviderDrawer/index.ts new file mode 100644 index 0000000..89a232a --- /dev/null +++ b/src/components/molecules/MapProviderDrawer/index.ts @@ -0,0 +1 @@ +export { MapProviderDrawer, type MapProviderDrawerProps } from './MapProviderDrawer'; diff --git a/src/components/molecules/MiniCard/MiniCard.stories.tsx b/src/components/molecules/MiniCard/MiniCard.stories.tsx new file mode 100644 index 0000000..0c9d999 --- /dev/null +++ b/src/components/molecules/MiniCard/MiniCard.stories.tsx @@ -0,0 +1,166 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import Box from '@mui/material/Box'; +import { MiniCard } from './MiniCard'; + +// Placeholder images for stories +const IMG_PROVIDER = + 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=240&fit=crop&auto=format'; +const IMG_VENUE = + 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=400&h=240&fit=crop&auto=format'; +const IMG_CHAPEL = + 'https://images.unsplash.com/photo-1548625149-fc4a29cf7092?w=400&h=240&fit=crop&auto=format'; +const IMG_GARDEN = + 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=400&h=240&fit=crop&auto=format'; + +const meta: Meta = { + title: 'Molecules/MiniCard', + component: MiniCard, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +/** Default — verified provider with image, location, and price */ +export const Default: Story = { + args: { + title: 'H.Parsons Funeral Directors', + imageUrl: IMG_PROVIDER, + verified: true, + price: 900, + location: 'Wollongong', + }, +}; + +/** With all optional fields populated */ +export const FullyLoaded: Story = { + args: { + title: 'H.Parsons Funeral Directors', + imageUrl: IMG_PROVIDER, + verified: true, + location: 'Wollongong', + rating: 4.8, + price: 900, + badges: [{ label: 'Online Arrangement', color: 'success' }], + chips: ['Burial', 'Cremation'], + }, +}; + +/** Unverified provider — no badge in image */ +export const Unverified: Story = { + args: { + title: 'Smith & Sons Funeral Services', + imageUrl: IMG_VENUE, + price: 1200, + location: 'Sutherland', + }, +}; + +/** Venue card usage — capacity instead of rating */ +export const Venue: Story = { + args: { + title: 'Albany Creek Memorial Park', + imageUrl: IMG_CHAPEL, + price: 450, + location: 'Albany Creek', + capacity: 120, + }, +}; + +/** Package card usage — custom price label */ +export const Package: Story = { + args: { + title: 'Essential Cremation Package', + imageUrl: IMG_GARDEN, + priceLabel: 'From $2,800', + badges: [{ label: 'Most Popular', color: 'brand' }], + }, +}; + +/** Minimal — just title and image */ +export const Minimal: Story = { + args: { + title: 'Lady Anne Funerals', + imageUrl: IMG_VENUE, + }, +}; + +/** Selected state — brand border + warm background */ +export const Selected: Story = { + args: { + title: 'H.Parsons Funeral Directors', + imageUrl: IMG_PROVIDER, + verified: true, + price: 900, + location: 'Wollongong', + selected: true, + }, +}; + +/** Long title — truncated at 2 lines, hover tooltip shows full text */ +export const LongTitle: Story = { + args: { + title: 'Botanical Funerals by Ian Allison — Sustainable & Eco-Friendly Services', + imageUrl: IMG_GARDEN, + verified: true, + location: 'Northern Beaches', + rating: 4.9, + price: 1200, + }, +}; + +/** Multiple cards in a responsive grid — mix of verified and unverified */ +export const Grid: Story = { + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + <> + {}} + /> + {}} + /> + {}} + /> + + ), +}; diff --git a/src/components/molecules/MiniCard/MiniCard.tsx b/src/components/molecules/MiniCard/MiniCard.tsx new file mode 100644 index 0000000..6fcae4b --- /dev/null +++ b/src/components/molecules/MiniCard/MiniCard.tsx @@ -0,0 +1,311 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import Tooltip from '@mui/material/Tooltip'; +import type { SxProps, Theme } from '@mui/material/styles'; +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import StarRoundedIcon from '@mui/icons-material/StarRounded'; +import PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined'; +import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined'; +import { Card } from '../../atoms/Card'; +import { Typography } from '../../atoms/Typography'; +import { Badge } from '../../atoms/Badge'; +import type { BadgeProps } from '../../atoms/Badge/Badge'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** A badge to render inside the MiniCard content area */ +export interface MiniCardBadge { + /** Label text */ + label: string; + /** Badge colour intent */ + color?: BadgeProps['color']; + /** Badge variant */ + variant?: BadgeProps['variant']; + /** Optional leading icon */ + icon?: React.ReactNode; +} + +/** Props for the FA MiniCard molecule */ +export interface MiniCardProps { + /** Card title — provider name, venue name, package name, etc. */ + title: string; + /** Hero image URL */ + imageUrl: string; + /** Alt text for the image — defaults to title */ + imageAlt?: string; + /** Whether this provider/venue is verified — shows icon badge in image */ + verified?: boolean; + /** Price in dollars — shown as "From $X" */ + price?: number; + /** Custom price label (e.g. "POA", "Included") — overrides formatted price */ + priceLabel?: string; + /** Location text (suburb, city) */ + location?: string; + /** Average rating (e.g. 4.8) */ + rating?: number; + /** Venue capacity (e.g. 120) */ + capacity?: number; + /** Badge items rendered after the price row */ + badges?: MiniCardBadge[]; + /** Chip labels rendered as small soft badges (after badges) */ + chips?: string[]; + /** Whether this card is currently selected */ + selected?: boolean; + /** Click handler — entire card is clickable */ + onClick?: () => void; + /** MUI sx prop for style overrides */ + sx?: SxProps; +} + +// ─── Constants ────────────────────────────────────────────────────────────── + +const IMAGE_HEIGHT = 'var(--fa-mini-card-image-height)'; +const CONTENT_PADDING = 'var(--fa-mini-card-content-padding)'; +const CONTENT_GAP = 'var(--fa-mini-card-content-gap)'; + +// ─── Component ────────────────────────────────────────────────────────────── + +/** + * Compact vertical card for the FA design system. + * + * A smaller, flexible card for displaying providers, venues, or packages + * in grids, recommendation rows, and map popups. Shows an image with + * a title and optional meta, price, badges, and chips. + * + * Content hierarchy: **title → meta → price → chips/badges**. + * + * Verified providers show a small icon-only badge floating in the + * image (top-right). Truncated titles show a tooltip on hover with + * the full text. + * + * Composes: Card + Typography + Badge + Tooltip. + * + * Usage: + * ```tsx + * navigate('/providers/parsons')} + * /> + * ``` + */ +export const MiniCard = React.forwardRef( + ( + { + title, + imageUrl, + imageAlt, + verified = false, + price, + priceLabel, + location, + rating, + capacity, + badges, + chips, + selected = false, + onClick, + sx, + }, + ref, + ) => { + const hasMeta = location != null || rating != null || capacity != null; + const hasPrice = price != null || priceLabel != null; + + // Detect title truncation for tooltip + const titleRef = React.useRef(null); + const [isTruncated, setIsTruncated] = React.useState(false); + + React.useEffect(() => { + const el = titleRef.current; + if (el) { + setIsTruncated(el.scrollHeight > el.clientHeight + 1); + } + }, [title]); + + return ( + + {/* ── Image ── */} + + {/* Verified icon badge — floating top-right */} + {verified && ( + + + + + + )} + + + {/* ── Content ── */} + + {/* 1. Title — with tooltip when truncated */} + + + {title} + + + + {/* 2. Meta row: location / rating / capacity */} + {hasMeta && ( + + {location && ( + + + + {location} + + + )} + + {rating != null && ( + + + + {rating} + + + )} + + {capacity != null && ( + + + + {capacity} guests + + + )} + + )} + + {/* 3. Price */} + {hasPrice && ( + + {priceLabel ? ( + + {priceLabel} + + ) : ( + <> + + From + + + ${price!.toLocaleString('en-AU')} + + + )} + + )} + + {/* 4. Badges */} + {badges && badges.length > 0 && ( + + {badges.map((badge) => ( + + {badge.label} + + ))} + + )} + + {/* 5. Chips */} + {chips && chips.length > 0 && ( + + {chips.map((chip) => ( + + {chip} + + ))} + + )} + + + ); + }, +); + +MiniCard.displayName = 'MiniCard'; +export default MiniCard; diff --git a/src/components/molecules/MiniCard/index.ts b/src/components/molecules/MiniCard/index.ts new file mode 100644 index 0000000..48261c3 --- /dev/null +++ b/src/components/molecules/MiniCard/index.ts @@ -0,0 +1,2 @@ +export { MiniCard, default } from './MiniCard'; +export type { MiniCardProps, MiniCardBadge } from './MiniCard'; diff --git a/src/components/molecules/ProviderCard/ProviderCard.stories.tsx b/src/components/molecules/ProviderCard/ProviderCard.stories.tsx new file mode 100644 index 0000000..d2f6502 --- /dev/null +++ b/src/components/molecules/ProviderCard/ProviderCard.stories.tsx @@ -0,0 +1,439 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ProviderCard } from './ProviderCard'; +import Box from '@mui/material/Box'; + +// Placeholder images for stories +const HERO_PLACEHOLDER = + 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&h=300&fit=crop&auto=format'; +const HERO_PLACEHOLDER_2 = + 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&h=300&fit=crop&auto=format'; +const HERO_PLACEHOLDER_3 = + 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=300&fit=crop&auto=format'; +// Rounded-rect logo placeholder (matches new logo shape) +const LOGO_PLACEHOLDER = + 'data:image/svg+xml,' + + encodeURIComponent( + '', + ); + +const meta: Meta = { + title: 'Molecules/ProviderCard', + component: ProviderCard, + tags: ['autodocs'], + parameters: { + layout: 'centered', + design: { + type: 'figma', + url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=5369-140263', + }, + }, + argTypes: { + name: { control: 'text' }, + location: { control: 'text' }, + verified: { control: 'boolean' }, + rating: { control: { type: 'number', min: 0, max: 5, step: 0.1 } }, + reviewCount: { control: 'number' }, + capabilityLabel: { control: 'text' }, + capabilityColor: { + control: 'select', + options: ['default', 'success', 'warning', 'error', 'info'], + }, + capabilityDescription: { control: 'text' }, + startingPrice: { control: 'number' }, + onClick: { action: 'clicked' }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +// ─── Default ──────────────────────────────────────────────────────────────── + +/** Default — verified provider with all fields */ +export const Default: Story = { + args: { + name: 'H.Parsons Funeral Directors', + location: 'Wollongong', + verified: true, + imageUrl: HERO_PLACEHOLDER, + logoUrl: LOGO_PLACEHOLDER, + rating: 4.8, + reviewCount: 127, + capabilityLabel: 'Online Arrangement', + capabilityColor: 'success', + capabilityDescription: + 'Complete your arrangement entirely online — no in-person visit required.', + startingPrice: 900, + }, +}; + +// ─── Verified Provider ────────────────────────────────────────────────────── + +/** Full verified provider card with all elements */ +export const VerifiedProvider: Story = { + name: 'Verified Provider', + render: () => ( + {}} + /> + ), +}; + +// ─── Unverified Provider ──────────────────────────────────────────────────── + +/** Unverified provider — text only with top accent bar, no image/logo/trusted badge */ +export const UnverifiedProvider: Story = { + name: 'Unverified Provider', + render: () => ( + {}} + /> + ), +}; + +// ─── List Layout ──────────────────────────────────────────────────────────── + +/** + * Mixed verified and unverified providers in a scrollable list on + * neutral.50 background. This is the primary use case — text alignment + * should be consistent across both card types for scan readability. + * Unverified cards have a top accent bar for visibility. + */ +export const ListLayout: Story = { + name: 'List Layout — Mixed', + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + {}} + /> + {}} + /> + {}} + /> + {}} + /> + {}} + /> + + ), +}; + +// ─── Capability Variants ──────────────────────────────────────────────────── + +/** Three capability badge colours with hover tooltips */ +export const CapabilityVariants: Story = { + name: 'Capability Variants', + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + {}} + /> + {}} + /> + {}} + /> + + ), +}; + +// ─── Edge Cases ───────────────────────────────────────────────────────────── + +/** Edge cases: long name, missing fields, extremes */ +export const EdgeCases: Story = { + name: 'Edge Cases', + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + {/* Long name — tests maxLines truncation */} + {}} + /> + {/* No reviews */} + {}} + /> + {/* No capability badge */} + {}} + /> + {/* No price */} + {}} + /> + {/* Minimal — just name and location */} + {}} /> + + ), +}; + +// ─── Responsive ───────────────────────────────────────────────────────────── + +/** Cards at different viewport widths */ +export const Responsive: Story = { + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + {[280, 340, 420].map((width) => ( + + {width}px + {}} + /> + + ))} + + ), +}; + +// ─── On Different Backgrounds ─────────────────────────────────────────────── + +/** Cards on white vs grey surfaces — unverified on grey is the expected usage */ +export const OnDifferentBackgrounds: Story = { + name: 'On Different Backgrounds', + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + + White surface + {}} + /> + + + Grey surface (neutral.50) + {}} + /> + + + ), +}; + +// ─── Interactive Demo ─────────────────────────────────────────────────────── + +/** Click any card — fires onClick in Storybook actions panel */ +export const InteractiveDemo: Story = { + name: 'Interactive — Click to Navigate', + decorators: [ + (Story) => ( + + + + ), + ], + render: () => ( + + alert('Navigate to Parsons Ladies packages')} + /> + alert('Navigate to Rankins packages')} + /> + + ), +}; diff --git a/src/components/molecules/ProviderCard/ProviderCard.tsx b/src/components/molecules/ProviderCard/ProviderCard.tsx new file mode 100644 index 0000000..463cf5c --- /dev/null +++ b/src/components/molecules/ProviderCard/ProviderCard.tsx @@ -0,0 +1,276 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import Tooltip from '@mui/material/Tooltip'; +import type { SxProps, Theme } from '@mui/material/styles'; +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import StarRoundedIcon from '@mui/icons-material/StarRounded'; +import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined'; +import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import { Card } from '../../atoms/Card'; +import { Badge } from '../../atoms/Badge'; +import type { BadgeColor } from '../../atoms/Badge/Badge'; +import { Typography } from '../../atoms/Typography'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** Own props for the FA ProviderCard molecule (excludes HTML/Card passthrough) */ +export interface ProviderCardOwnProps { + /** 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 — rounded rectangle 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; + /** Tooltip description for the capability badge (shown on hover/focus) */ + capabilityDescription?: string; + /** Starting price in dollars (shown as "From $X") */ + startingPrice?: number; + /** Whether this card is the currently selected provider */ + selected?: boolean; + /** Click handler — entire card is clickable */ + onClick?: () => void; + /** MUI sx prop for style overrides */ + sx?: SxProps; +} + +/** Props for the FA ProviderCard molecule — includes HTML/ARIA passthrough to Card */ +export type ProviderCardProps = ProviderCardOwnProps & + Omit, keyof ProviderCardOwnProps>; + +// ─── Constants ─────────────────────────────────────────────────────────────── + +const LOGO_SIZE = 'var(--fa-provider-card-logo-size)'; +const LOGO_BORDER_RADIUS = 'var(--fa-provider-card-logo-border-radius)'; +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)'; + +// ─── 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 (rounded rectangle inside + * image area), and "Verified" badge. **Unverified providers** show text + * content only with a subtle top accent bar for visibility in mixed lists. + * + * Composes: Card (interactive, padding="none"), Badge, Typography. + * + * Usage: + * ```tsx + * navigate(`/providers/parsons`)} + * /> + * ``` + */ +export const ProviderCard = React.forwardRef( + ( + { + name, + location, + verified = false, + imageUrl, + logoUrl, + rating, + reviewCount, + capabilityLabel, + capabilityColor = 'default', + capabilityDescription, + selected = false, + startingPrice, + onClick, + sx, + ...rest + }, + ref, + ) => { + const showImage = verified && imageUrl; + const showLogo = verified && logoUrl; + + return ( + + {/* ── Image area (verified only) ── */} + {showImage && ( + + {/* Verified badge */} + + }> + Verified + + + + {/* Logo — fully inside image area, bottom-left */} + {showLogo && ( + + )} + + )} + + {/* ── Content area ── */} + + {/* Provider name — full width, no logo competition */} + + {name} + + + {/* Price — "Packages from $X" with subtle size differentiation */} + {startingPrice != null && ( + + + Packages from + + + ${startingPrice.toLocaleString('en-AU')} + + + )} + + {/* Meta row: location + reviews */} + + {/* Location */} + + + + {location} + + + + {/* Reviews */} + {rating != null && ( + + + + {rating} + {reviewCount != null && ` (${reviewCount.toLocaleString('en-AU')})`} + + + )} + + + {/* Capability badge — trailing info icon signals hover-for-definition */} + {capabilityLabel && ( + + {capabilityDescription ? ( + + + {capabilityLabel} + + + + ) : ( + + {capabilityLabel} + + + )} + + )} + + + ); + }, +); + +ProviderCard.displayName = 'ProviderCard'; +export default ProviderCard; diff --git a/src/components/molecules/ProviderCard/index.ts b/src/components/molecules/ProviderCard/index.ts new file mode 100644 index 0000000..dcea37d --- /dev/null +++ b/src/components/molecules/ProviderCard/index.ts @@ -0,0 +1,2 @@ +export { ProviderCard, default } from './ProviderCard'; +export type { ProviderCardProps } from './ProviderCard'; diff --git a/src/components/molecules/ProviderCardCompact/ProviderCardCompact.stories.tsx b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.stories.tsx new file mode 100644 index 0000000..3930453 --- /dev/null +++ b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.stories.tsx @@ -0,0 +1,114 @@ +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 = { + title: 'Molecules/ProviderCardCompact', + component: ProviderCardCompact, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +// --- 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: () => ( + + {}} + 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 + + Select a package + alert('View provider')} + /> + + ), +}; diff --git a/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx new file mode 100644 index 0000000..ef605c7 --- /dev/null +++ b/src/components/molecules/ProviderCardCompact/ProviderCardCompact.tsx @@ -0,0 +1,129 @@ +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; +} + +// ─── 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 + * + * ``` + */ +export const ProviderCardCompact = React.forwardRef( + ({ name, location, imageUrl, rating, reviewCount, onClick, sx }, ref) => { + return ( + + {/* Image */} + {imageUrl && ( + + )} + + {/* Content */} + + + {name} + + + {/* Location */} + + + + {location} + + + + {/* Rating */} + {rating != null && ( + + + + {rating} Rating + {reviewCount != null + ? ` (${reviewCount} ${reviewCount === 1 ? 'Review' : 'Reviews'})` + : ''} + + + )} + + + ); + }, +); + +ProviderCardCompact.displayName = 'ProviderCardCompact'; +export default ProviderCardCompact; diff --git a/src/components/molecules/ProviderCardCompact/index.ts b/src/components/molecules/ProviderCardCompact/index.ts new file mode 100644 index 0000000..0f93e23 --- /dev/null +++ b/src/components/molecules/ProviderCardCompact/index.ts @@ -0,0 +1 @@ +export { ProviderCardCompact, type ProviderCardCompactProps } from './ProviderCardCompact'; diff --git a/src/components/molecules/SearchBar/SearchBar.stories.tsx b/src/components/molecules/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000..af015ea --- /dev/null +++ b/src/components/molecules/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,255 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { SearchBar } from './SearchBar'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; + +const meta: Meta = { + title: 'Molecules/SearchBar', + component: SearchBar, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, + argTypes: { + value: { control: 'text' }, + placeholder: { control: 'text' }, + size: { control: 'select', options: ['medium', 'small'] }, + showButton: { control: 'boolean' }, + buttonLabel: { control: 'text' }, + disabled: { control: 'boolean' }, + loading: { control: 'boolean' }, + fullWidth: { control: 'boolean' }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +// ─── Default ──────────────────────────────────────────────────────────────── + +/** Default — input-only search bar with Enter to submit */ +export const Default: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + const [submitted, setSubmitted] = React.useState(''); + + return ( + + + {submitted && ( + + Searched for: “{submitted}” + + )} + + ); + }, +}; + +// ─── With Button ──────────────────────────────────────────────────────────── + +/** Search bar with an explicit submit button */ +export const WithButton: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + const [submitted, setSubmitted] = React.useState(''); + + return ( + + + {submitted && ( + + Searched for: “{submitted}” + + )} + + ); + }, +}; + +// ─── Small Size ───────────────────────────────────────────────────────────── + +/** Small size (40px) — for compact layouts like sidebar filters */ +export const SmallSize: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + + return ( + + + + Medium (48px) — default + + + + + + Small (40px) — compact + + + + + ); + }, +}; + +// ─── With Preloaded Value ─────────────────────────────────────────────────── + +/** Pre-filled value with clear button visible */ +export const WithPreloadedValue: Story = { + render: function Render() { + const [value, setValue] = React.useState('Melbourne funeral directors'); + + return ( + + ); + }, +}; + +// ─── Loading State ────────────────────────────────────────────────────────── + +/** Loading — search in progress, button shows spinner */ +export const Loading: Story = { + render: function Render() { + const [value, setValue] = React.useState('Parsons funeral'); + + return ( + + ); + }, +}; + +// ─── Disabled ─────────────────────────────────────────────────────────────── + +/** Disabled — entire search bar is non-interactive */ +export const Disabled: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + + return ( + + ); + }, +}; + +// ─── Provider Search ──────────────────────────────────────────────────────── + +/** Realistic — provider search on listing page */ +export const ProviderSearch: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + const [results, setResults] = React.useState([]); + + const providers = [ + 'H. Parsons Funeral Directors', + 'Peaceful Rest Funerals', + 'Heritage Memorials', + 'Garden of Memories', + 'Bayside Funeral Services', + ]; + + const handleSearch = (query: string) => { + if (!query.trim()) { + setResults([]); + return; + } + setResults(providers.filter((p) => p.toLowerCase().includes(query.toLowerCase()))); + }; + + return ( + + Find a funeral director + { + setValue(v); + handleSearch(v); + }} + onSearch={handleSearch} + placeholder="Search by name or suburb..." + showButton + buttonLabel="Find" + /> + {results.length > 0 && ( + + {results.map((name) => ( + + {name} + + ))} + + )} + {value && results.length === 0 && ( + + No providers match “{value}” + + )} + + ); + }, +}; + +// ─── Venue Search ─────────────────────────────────────────────────────────── + +/** Realistic — venue search with compact size */ +export const VenueSearch: Story = { + render: function Render() { + const [value, setValue] = React.useState(''); + + return ( + + Find a venue + + Search chapels, gardens, churches, and function venues near you. + + + + ); + }, +}; diff --git a/src/components/molecules/SearchBar/SearchBar.tsx b/src/components/molecules/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..855b956 --- /dev/null +++ b/src/components/molecules/SearchBar/SearchBar.tsx @@ -0,0 +1,181 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import InputAdornment from '@mui/material/InputAdornment'; +import CircularProgress from '@mui/material/CircularProgress'; +import SearchIcon from '@mui/icons-material/Search'; +import ClearIcon from '@mui/icons-material/Clear'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { Input } from '../../atoms/Input'; +import { IconButton } from '../../atoms/IconButton'; +import { Button } from '../../atoms/Button'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** Props for the FA SearchBar molecule */ +export interface SearchBarProps { + /** Current search value (controlled) */ + value: string; + /** Called when the search value changes */ + onChange: (value: string) => void; + /** Called when the user submits a search (Enter key or button click) */ + onSearch?: (value: string) => void; + /** Placeholder text */ + placeholder?: string; + /** Input size — `medium` (48px) or `small` (40px) */ + size?: 'medium' | 'small'; + /** Whether to show a submit button alongside the input */ + showButton?: boolean; + /** Label for the submit button (default: "Search") */ + buttonLabel?: string; + /** Whether the search bar is disabled */ + disabled?: boolean; + /** Whether a search is in progress (shows loading on button) */ + loading?: boolean; + /** Whether the input takes full width of its container */ + fullWidth?: boolean; + /** Accessible label for the search input */ + 'aria-label'?: string; + /** MUI sx prop for the root container */ + sx?: SxProps; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +/** + * Search bar for the FA design system. + * + * Composes Input (with search icon) + optional Button for provider and + * venue search screens. Supports controlled input, Enter-to-submit, + * clear button, and a loading state for async searches. + * + * Sizes align with Input + Button for visual harmony: + * - `medium` — Input medium (48px) + Button large (48px) + * - `small` — Input small (40px) + Button medium (40px) + * + * Usage: + * ```tsx + * + * ``` + */ +export const SearchBar = React.forwardRef( + ( + { + value, + onChange, + onSearch, + placeholder = 'Search...', + size = 'medium', + showButton = false, + buttonLabel = 'Search', + disabled = false, + loading = false, + fullWidth = true, + 'aria-label': ariaLabel = 'Search', + sx, + }, + ref, + ) => { + const inputRef = React.useRef(null); + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && onSearch && value.trim()) { + onSearch(value.trim()); + } + }; + + const handleClear = () => { + onChange(''); + // Refocus the input after clearing so the user can resume typing + inputRef.current?.focus(); + }; + + const handleSubmit = () => { + if (onSearch && value.trim()) { + onSearch(value.trim()); + } + }; + + // Button size aligns with input: medium input → large button (both 48px) + const buttonSize = size === 'medium' ? 'large' : 'medium'; + + return ( + + ); + }, +); + +SearchBar.displayName = 'SearchBar'; +export default SearchBar; diff --git a/src/components/molecules/SearchBar/index.ts b/src/components/molecules/SearchBar/index.ts new file mode 100644 index 0000000..8785990 --- /dev/null +++ b/src/components/molecules/SearchBar/index.ts @@ -0,0 +1,2 @@ +export { SearchBar } from './SearchBar'; +export type { SearchBarProps } from './SearchBar'; diff --git a/src/components/molecules/ServiceOption/ServiceOption.stories.tsx b/src/components/molecules/ServiceOption/ServiceOption.stories.tsx new file mode 100644 index 0000000..a5a4339 --- /dev/null +++ b/src/components/molecules/ServiceOption/ServiceOption.stories.tsx @@ -0,0 +1,260 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { ServiceOption } from './ServiceOption'; +import Box from '@mui/material/Box'; + +const meta: Meta = { + title: 'Molecules/ServiceOption', + component: ServiceOption, + tags: ['autodocs'], + parameters: { + layout: 'centered', + design: { + type: 'figma', + url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2349-39505', + }, + }, + argTypes: { + name: { control: 'text' }, + description: { control: 'text' }, + price: { control: 'number' }, + selected: { control: 'boolean' }, + disabled: { control: 'boolean' }, + onClick: { action: 'clicked' }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +// ─── Default ──────────────────────────────────────────────────────────────── + +export const Default: Story = { + args: { + name: 'Traditional Burial', + description: + 'Full service with chapel ceremony and graveside committal. Includes hearse, pallbearers, and flowers.', + price: 4200, + }, +}; + +// ─── Selected ─────────────────────────────────────────────────────────────── + +export const Selected: Story = { + args: { + name: 'Traditional Burial', + description: + 'Full service with chapel ceremony and graveside committal. Includes hearse, pallbearers, and flowers.', + price: 4200, + selected: true, + }, +}; + +// ─── Service Type Selection ───────────────────────────────────────────────── + +/** + * Interactive single-select group — click to choose a service type. + * Only one option is active at a time (radio semantics). + */ +export const ServiceTypeSelection: Story = { + name: 'Service Type Selection', + render: () => { + const [selected, setSelected] = useState('burial'); + + return ( + + setSelected('burial')} + /> + setSelected('cremation')} + /> + setSelected('direct')} + /> + + ); + }, +}; + +// ─── Coffin Selection ─────────────────────────────────────────────────────── + +/** Coffin/casket options with varied pricing */ +export const CoffinSelection: Story = { + name: 'Coffin Selection', + render: () => { + const [selected, setSelected] = useState(''); + + return ( + + setSelected('chipboard')} + /> + setSelected('timber')} + /> + setSelected('premium')} + /> + setSelected('eco')} + /> + + ); + }, +}; + +// ─── Without Price ────────────────────────────────────────────────────────── + +/** Options without prices — used when pricing varies or is bundled */ +export const WithoutPrice: Story = { + name: 'Without Price', + render: () => ( + + {}} + /> + {}} + /> + {}} + /> + + ), +}; + +// ─── Disabled ─────────────────────────────────────────────────────────────── + +/** Disabled option — unavailable service */ +export const Disabled: Story = { + render: () => ( + + {}} + /> + + {}} + /> + + ), +}; + +// ─── With Line Limit ──────────────────────────────────────────────────────── + +/** Clamped descriptions with "View more" toggle */ +export const WithLineLimit: Story = { + name: 'With Line Limit', + render: () => { + const [selected, setSelected] = useState(''); + + return ( + + setSelected('complete')} + /> + setSelected('cremation')} + /> + + ); + }, +}; + +// ─── Edge Cases ───────────────────────────────────────────────────────────── + +/** Edge cases: long text, no description, high price */ +export const EdgeCases: Story = { + name: 'Edge Cases', + render: () => ( + + {/* Long name + description */} + {}} + /> + {/* No description */} + {}} /> + {/* No price, no description */} + {}} /> + + ), +}; diff --git a/src/components/molecules/ServiceOption/ServiceOption.tsx b/src/components/molecules/ServiceOption/ServiceOption.tsx new file mode 100644 index 0000000..9a2b5e1 --- /dev/null +++ b/src/components/molecules/ServiceOption/ServiceOption.tsx @@ -0,0 +1,170 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { Card } from '../../atoms/Card'; +import { Typography } from '../../atoms/Typography'; +import { Link } from '../../atoms/Link'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** Props for the FA ServiceOption molecule */ +export interface ServiceOptionProps { + /** Option name/heading */ + name: string; + /** Description text explaining the option */ + description?: string; + /** Price in dollars — shown to the right of the heading */ + price?: number; + /** Whether this option is currently selected */ + selected?: boolean; + /** Whether this option is disabled/unavailable */ + disabled?: boolean; + /** Click handler — toggles selection */ + onClick?: () => void; + /** Max visible lines for description before "View more" toggle. Omit for no limit. */ + maxDescriptionLines?: number; + /** MUI sx prop for style overrides */ + sx?: SxProps; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +/** + * Selectable service option for the FA design system. + * + * Used in the arrangement flow for choosing between mutually exclusive + * options — coffin type, service style, transport method, etc. + * Users click to select; only one option is active at a time within + * a group (managed by parent). + * + * Composes Card (interactive, selected) + Typography. Maps to the + * Figma "ListItemPurchaseOption" component (4 states × 2 viewports). + * + * For add-on toggles (multi-select with Switch), use a future + * AddOnOption molecule or compose Card + Switch directly. + * + * Usage: + * ```tsx + * setSelected('burial')} + * /> + * ``` + */ +export const ServiceOption = React.forwardRef( + ( + { + name, + description, + price, + selected = false, + disabled = false, + onClick, + maxDescriptionLines, + sx, + }, + ref, + ) => { + const [expanded, setExpanded] = React.useState(false); + const [isClamped, setIsClamped] = React.useState(false); + const descRef = React.useRef(null); + + // Detect whether the description is actually truncated + React.useEffect(() => { + const el = descRef.current; + if (el && maxDescriptionLines) { + setIsClamped(el.scrollHeight > el.clientHeight + 1); + } + }, [description, maxDescriptionLines]); + + return ( + + {/* Heading row: name + optional price */} + + + {name} + + {price != null && ( + + ${price.toLocaleString('en-AU')} + + )} + + + {/* Description with optional line clamping */} + {description && ( + <> + + {description} + + {maxDescriptionLines && isClamped && ( + { + e.stopPropagation(); + setExpanded((prev) => !prev); + }} + sx={{ mt: 0.5, color: 'text.secondary', fontWeight: 400 }} + > + {expanded ? 'View less' : 'View more'} + + )} + + )} + + ); + }, +); + +ServiceOption.displayName = 'ServiceOption'; +export default ServiceOption; diff --git a/src/components/molecules/ServiceOption/index.ts b/src/components/molecules/ServiceOption/index.ts new file mode 100644 index 0000000..3225ff2 --- /dev/null +++ b/src/components/molecules/ServiceOption/index.ts @@ -0,0 +1,2 @@ +export { ServiceOption, default } from './ServiceOption'; +export type { ServiceOptionProps } from './ServiceOption'; diff --git a/src/components/molecules/SortMenu/SortMenu.stories.tsx b/src/components/molecules/SortMenu/SortMenu.stories.tsx new file mode 100644 index 0000000..6d6e2e4 --- /dev/null +++ b/src/components/molecules/SortMenu/SortMenu.stories.tsx @@ -0,0 +1,104 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { useState } from 'react'; +import Box from '@mui/material/Box'; +import { SortMenu } from './SortMenu'; + +const meta: Meta = { + title: 'Molecules/SortMenu', + component: SortMenu, + tags: ['autodocs'], + parameters: { layout: 'centered' }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +const providerSortOptions = [ + { value: 'recommended', label: 'Recommended' }, + { value: 'nearest', label: 'Nearest' }, + { value: 'price_low', label: 'Price low to high' }, + { value: 'price_high', label: 'Price high to low' }, +]; + +// Caller-provided chrome mirroring ProvidersStep's chip strip. +const controlChromeSx = { + height: 32, + bgcolor: 'background.paper', + borderColor: 'var(--fa-color-neutral-300)', + borderRadius: 'var(--fa-button-border-radius-default)', + boxShadow: 'var(--fa-shadow-sm)', + textTransform: 'none', + '&:hover': { + bgcolor: 'background.paper', + borderColor: 'var(--fa-color-neutral-300)', + }, + '&:focus-visible': { outline: 'none' }, +} as const; + +// ─── Stories ──────────────────────────────────────────────────────────────── + +/** Compact variant — the trigger reads "Sort by" regardless of current + * value. Current value surfaces in the menu's selected state. Best for + * narrow layouts (mobile). */ +export const Compact: Story = { + render: (args) => { + const [value, setValue] = useState('recommended'); + return ; + }, + args: { + options: providerSortOptions, + variant: 'compact', + sx: controlChromeSx, + }, +}; + +/** Verbose variant — trigger reads "Sort: " with a + * swap-vertical icon. Best for desktop where horizontal space is cheap. */ +export const Verbose: Story = { + render: (args) => { + const [value, setValue] = useState('price_low'); + return ; + }, + args: { + options: providerSortOptions, + variant: 'verbose', + sx: controlChromeSx, + }, +}; + +/** No chrome — raw output. Useful for checking the molecule's default + * Button atom appearance before any caller sx. */ +export const Bare: Story = { + render: (args) => { + const [value, setValue] = useState('recommended'); + return ; + }, + args: { + options: providerSortOptions, + variant: 'compact', + }, +}; + +/** Smaller option set — demonstrating that the component adapts to any + * options array, not just the provider-sort defaults. */ +export const TwoOptions: Story = { + render: (args) => { + const [value, setValue] = useState('newest'); + return ; + }, + args: { + options: [ + { value: 'newest', label: 'Newest first' }, + { value: 'oldest', label: 'Oldest first' }, + ], + variant: 'verbose', + sx: controlChromeSx, + }, +}; diff --git a/src/components/molecules/SortMenu/SortMenu.tsx b/src/components/molecules/SortMenu/SortMenu.tsx new file mode 100644 index 0000000..763072a --- /dev/null +++ b/src/components/molecules/SortMenu/SortMenu.tsx @@ -0,0 +1,118 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import Menu from '@mui/material/Menu'; +import MenuItem from '@mui/material/MenuItem'; +import SwapVertIcon from '@mui/icons-material/SwapVert'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { Button } from '../../atoms/Button'; + +// ─── Types ────────────────────────────────────────────────────────────────── + +/** A sort option shown in the menu */ +export interface SortOption { + /** Machine-readable value (e.g. 'price_low'). Passed back via `onChange`. */ + value: string; + /** Human-readable label (e.g. 'Price low to high'). Shown in the menu and, + * in the `verbose` variant, on the trigger button. */ + label: string; +} + +/** Props for the FA SortMenu molecule */ +export interface SortMenuProps { + /** Current sort value (controlled). Must match one of the options' values. */ + value: string; + /** Fires when the user picks a different sort option. */ + onChange: (value: string) => void; + /** Sort options to surface in the menu, in display order. */ + options: SortOption[]; + /** Trigger label variant: + * - `compact` (default): button reads just "Sort by"; current value + * surfaces only in the menu's selected item and in the aria-label. + * Best for narrow surfaces (mobile, chip-strip floating controls). + * - `verbose`: button reads "Sort: " with a leading + * swap-vertical icon. Best for desktop where horizontal space is + * cheap and the current value is worth surfacing inline. */ + variant?: 'compact' | 'verbose'; + /** MUI sx prop — applied to the trigger Button. Callers pass chrome + * (bgcolor, border, shadow, radius, height) here. */ + sx?: SxProps; +} + +// ─── Component ────────────────────────────────────────────────────────────── + +/** + * Dropdown sort control — a trigger Button + anchored Menu. + * + * Tap the button → menu opens anchored to the button's bottom-right; pick + * an option → menu closes and `onChange` fires with the new value. The + * currently-selected option is visually marked in the menu (MUI's + * `selected` state on MenuItem). + * + * **Accessibility:** trigger button has `aria-haspopup="listbox"` and an + * `aria-label` that spells out the current sort ("Sort by Recommended"), + * so screen-reader users get the state regardless of which label variant + * is rendered. Selected MenuItem has `aria-selected="true"` via MUI. + * + * Originally extracted from ProvidersStep (which had the same Button + + * Menu pattern inline in two places with a minor "Sort by" vs + * "Sort: " difference). Intended for reuse on VenueStep, + * CoffinsStep, or anywhere a sort menu is needed. + */ +export const SortMenu = React.forwardRef( + ({ value, onChange, options, variant = 'compact', sx }, ref) => { + const [anchor, setAnchor] = React.useState(null); + const current = options.find((o) => o.value === value); + const ariaLabel = `Sort by ${current?.label ?? 'default'}`; + + return ( + <> + + setAnchor(null)} + anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} + transformOrigin={{ vertical: 'top', horizontal: 'right' }} + > + {options.map((opt) => ( + { + onChange(opt.value); + setAnchor(null); + }} + sx={{ fontSize: '0.813rem' }} + > + {opt.label} + + ))} + + + ); + }, +); + +SortMenu.displayName = 'SortMenu'; +export default SortMenu; diff --git a/src/components/molecules/SortMenu/index.ts b/src/components/molecules/SortMenu/index.ts new file mode 100644 index 0000000..dbe7bd8 --- /dev/null +++ b/src/components/molecules/SortMenu/index.ts @@ -0,0 +1 @@ +export { SortMenu, type SortMenuProps, type SortOption } from './SortMenu'; diff --git a/src/components/molecules/StepIndicator/StepIndicator.stories.tsx b/src/components/molecules/StepIndicator/StepIndicator.stories.tsx new file mode 100644 index 0000000..b375a10 --- /dev/null +++ b/src/components/molecules/StepIndicator/StepIndicator.stories.tsx @@ -0,0 +1,173 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { StepIndicator } from './StepIndicator'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import Button from '@mui/material/Button'; + +const meta: Meta = { + title: 'Molecules/StepIndicator', + component: StepIndicator, + tags: ['autodocs'], + parameters: { + layout: 'centered', + design: { + type: 'figma', + url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2375-47468', + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +// ─── Arrangement Flow Steps ───────────────────────────────────────────────── + +const arrangementSteps = [ + { label: 'Details' }, + { label: 'Venue' }, + { label: 'Service' }, + { label: 'Extras' }, + { label: 'Review' }, +]; + +// ─── Default ──────────────────────────────────────────────────────────────── + +/** Default — 5-step arrangement flow, currently on step 3 */ +export const Default: Story = { + args: { + steps: arrangementSteps, + currentStep: 2, + }, +}; + +// ─── All States ───────────────────────────────────────────────────────────── + +/** Shows progression through every step position */ +export const AllStates: Story = { + render: () => ( + + {arrangementSteps.map((_, index) => ( + + + Step {index + 1} of {arrangementSteps.length} + + + + ))} + + ), +}; + +// ─── Two Steps ────────────────────────────────────────────────────────────── + +/** Minimal — 2-step flow (e.g. choose + confirm) */ +export const TwoSteps: Story = { + args: { + steps: [{ label: 'Choose' }, { label: 'Confirm' }], + currentStep: 0, + }, +}; + +// ─── Many Steps ───────────────────────────────────────────────────────────── + +/** Maximum — 8-step flow showing label truncation */ +export const ManySteps: Story = { + args: { + steps: [ + { label: 'Details' }, + { label: 'Director' }, + { label: 'Venue' }, + { label: 'Service' }, + { label: 'Coffin' }, + { label: 'Extras' }, + { label: 'Payment' }, + { label: 'Review' }, + ], + currentStep: 3, + }, +}; + +// ─── Interactive ──────────────────────────────────────────────────────────── + +/** Interactive — navigate forward and back through steps */ +export const Interactive: Story = { + render: function Render() { + const [step, setStep] = React.useState(0); + + return ( + + + + + + {arrangementSteps[step].label} + + + Step {step + 1} of {arrangementSteps.length} — content for this step would appear here. + + + + + + + + + ); + }, +}; + +// ─── Completed ────────────────────────────────────────────────────────────── + +/** All steps completed — final step active, all bars filled */ +export const Completed: Story = { + args: { + steps: arrangementSteps, + currentStep: arrangementSteps.length - 1, + }, +}; + +// ─── Narrow Container ─────────────────────────────────────────────────────── + +/** Mobile-width container showing responsive sizing */ +export const NarrowContainer: Story = { + decorators: [ + (Story) => ( + + + + ), + ], + args: { + steps: arrangementSteps, + currentStep: 2, + }, +}; diff --git a/src/components/molecules/StepIndicator/StepIndicator.tsx b/src/components/molecules/StepIndicator/StepIndicator.tsx new file mode 100644 index 0000000..62da7ce --- /dev/null +++ b/src/components/molecules/StepIndicator/StepIndicator.tsx @@ -0,0 +1,113 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { Typography } from '../../atoms/Typography'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** A single step in the progress indicator */ +export interface Step { + /** Step label displayed below the bar segment */ + label: string; +} + +/** Props for the FA StepIndicator molecule */ +export interface StepIndicatorProps { + /** Array of steps in order */ + steps: Step[]; + /** Zero-indexed current step (this step and all before it are filled) */ + currentStep: number; + /** MUI sx prop for style overrides */ + sx?: SxProps; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +/** + * Horizontal progress bar for multi-step flows in the FA design system. + * + * Shows a segmented bar where completed and current steps are filled with + * the brand colour, and upcoming steps are grey. Each segment has a label + * below it. The current step label is bold for emphasis. + * + * Maps to Figma "Progress Bar - Steps" (2375:47468). Supports 2-8 steps. + * + * Bar height: 10px desktop, 6px mobile (via responsive styles). + * Labels: body2 desktop, caption mobile. + * + * Usage: + * ```tsx + * + * ``` + */ +export const StepIndicator = React.forwardRef( + ({ steps, currentStep, sx }, ref) => { + return ( +