Richie
eb6cf6a185
- FuneralFinder V4: 3 numbered steps (48px circles), ungated location, no heading, inline copper errors, "Search" CTA. Archived. - FuneralFinderV3: heading weight 600, "Find your local providers", "Search Local Providers" CTA, optional subheading - HomePage V1/V2: split into separate archived stories - HomePage V3: hero-3.png, updated copy, venue photos, map placeholder, scrolling partner logo bar, warm gradient CTA, increased spacing - HomePage V4: same as V3 with FuneralFinderV4 via new finderSlot prop - Footer: surface.subtle bg (matches header), dark-on-light text - All versions archived in Storybook Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import Box from '@mui/material/Box';
|
|
import { FuneralFinderV4 } from './FuneralFinderV4';
|
|
|
|
const meta: Meta<typeof FuneralFinderV4> = {
|
|
title: 'Archive/FuneralFinder V4',
|
|
component: FuneralFinderV4,
|
|
parameters: {
|
|
layout: 'padded',
|
|
},
|
|
args: {
|
|
onSearch: (params) => {
|
|
console.log('Search params:', params);
|
|
},
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof FuneralFinderV4>;
|
|
|
|
/** Default empty state — 3 steps + location ready for input */
|
|
export const Default: Story = {};
|
|
|
|
/** Loading state — CTA shows spinner */
|
|
export const Loading: Story = {
|
|
args: { loading: true },
|
|
};
|
|
|
|
/** Placed inside a dark hero section to preview in context */
|
|
export const InsideHero: Story = {
|
|
decorators: [
|
|
(Story) => (
|
|
<Box>
|
|
<Box
|
|
sx={{
|
|
bgcolor: 'var(--fa-color-sage-800, #4c5459)',
|
|
color: '#fff',
|
|
py: 8,
|
|
px: 4,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
<Box sx={{ fontSize: '2.5rem', fontWeight: 700, mb: 1 }}>Funeral Arranger</Box>
|
|
<Box sx={{ opacity: 0.8, mb: 4 }}>Find trusted funeral directors near you</Box>
|
|
<Box sx={{ maxWidth: 480, mx: 'auto' }}>
|
|
<Story />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
),
|
|
],
|
|
};
|
|
|
|
/** Constrained width — typical sidebar or narrow column */
|
|
export const Narrow: Story = {
|
|
decorators: [
|
|
(Story) => (
|
|
<Box sx={{ maxWidth: 380, mx: 'auto' }}>
|
|
<Story />
|
|
</Box>
|
|
),
|
|
],
|
|
};
|