Complete reviews + fix Navigation from user feedback
- Promote all 11 atoms, 6 molecules, 1 organism from review → done - Navigation: grey bg (surface.subtle), real FA logo SVGs, add Provider Portal - Navigation: remove mobileTrailing prop and MobilePriceTracker story - Add staticDirs to Storybook config for brand assets Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,27 +1,30 @@
|
||||
import React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Navigation } from './Navigation';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// Placeholder logo — in production this would be an SVG or <img>
|
||||
// Real FA logo — full wordmark for desktop, short icon for mobile
|
||||
const FALogo = () => (
|
||||
<Typography
|
||||
sx={{
|
||||
fontFamily: '"Noto Serif SC", Georgia, serif',
|
||||
fontWeight: 400,
|
||||
fontSize: { xs: '1rem', md: '1.25rem' },
|
||||
color: 'var(--fa-color-brand-900)',
|
||||
letterSpacing: '-0.01em',
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
FuneralArranger
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{/* Full logo for desktop */}
|
||||
<Box
|
||||
component="img"
|
||||
src="/brandlogo/logo-full.svg"
|
||||
alt="Funeral Arranger"
|
||||
sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
|
||||
/>
|
||||
{/* Short icon for mobile */}
|
||||
<Box
|
||||
component="img"
|
||||
src="/brandlogo/logo-short.svg"
|
||||
alt="Funeral Arranger"
|
||||
sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const defaultItems = [
|
||||
{ label: 'Provider Portal', href: '/provider-portal' },
|
||||
{ label: 'FAQ', href: '/faq' },
|
||||
{ label: 'Contact Us', href: '/contact' },
|
||||
{ label: 'Log in', href: '/login' },
|
||||
@@ -46,7 +49,7 @@ const meta: Meta<typeof Navigation> = {
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Navigation>;
|
||||
|
||||
// ─── Default ────────────────────────────────────────────────────────────────
|
||||
// --- Default -----------------------------------------------------------------
|
||||
|
||||
/** Desktop — logo left, navigation links right */
|
||||
export const Default: Story = {
|
||||
@@ -56,7 +59,7 @@ export const Default: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── With CTA ───────────────────────────────────────────────────────────────
|
||||
// --- With CTA ----------------------------------------------------------------
|
||||
|
||||
/** Desktop with a primary call-to-action button */
|
||||
export const WithCTA: Story = {
|
||||
@@ -68,7 +71,7 @@ export const WithCTA: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── With Page Content ──────────────────────────────────────────────────────
|
||||
// --- With Page Content -------------------------------------------------------
|
||||
|
||||
/** Full page layout — sticky header with scrollable content */
|
||||
export const WithPageContent: Story = {
|
||||
@@ -117,7 +120,7 @@ export const WithPageContent: Story = {
|
||||
),
|
||||
};
|
||||
|
||||
// ─── Minimal ────────────────────────────────────────────────────────────────
|
||||
// --- Minimal -----------------------------------------------------------------
|
||||
|
||||
/** Minimal — logo only, no navigation items */
|
||||
export const Minimal: Story = {
|
||||
@@ -126,7 +129,7 @@ export const Minimal: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Extended Navigation ────────────────────────────────────────────────────
|
||||
// --- Extended Navigation -----------------------------------------------------
|
||||
|
||||
/** More nav items for arrangements flow context */
|
||||
export const ExtendedNavigation: Story = {
|
||||
@@ -136,6 +139,7 @@ export const ExtendedNavigation: Story = {
|
||||
{ label: 'Directors', href: '/directors' },
|
||||
{ label: 'Venues', href: '/venues' },
|
||||
{ label: 'Pricing', href: '/pricing' },
|
||||
{ label: 'Provider Portal', href: '/provider-portal' },
|
||||
{ label: 'FAQ', href: '/faq' },
|
||||
{ label: 'Contact Us', href: '/contact' },
|
||||
{ label: 'Log in', href: '/login' },
|
||||
@@ -143,32 +147,3 @@ export const ExtendedNavigation: Story = {
|
||||
ctaLabel: 'Start planning',
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Mobile Price Tracker ───────────────────────────────────────────────────
|
||||
|
||||
/** Mobile with price tracker trailing content (resize browser to see) */
|
||||
export const MobilePriceTracker: Story = {
|
||||
args: {
|
||||
logo: <FALogo />,
|
||||
items: defaultItems,
|
||||
mobileTrailing: (
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
px: 1.5,
|
||||
py: 0.5,
|
||||
borderRadius: '10px 0 0 10px',
|
||||
boxShadow: '2px 2px 3px rgba(0,0,0,0.25)',
|
||||
textAlign: 'right',
|
||||
}}
|
||||
>
|
||||
<Typography variant="captionSm" sx={{ fontWeight: 600, display: 'block' }}>
|
||||
Your plan
|
||||
</Typography>
|
||||
<Typography variant="label" sx={{ fontWeight: 600 }}>
|
||||
$3,600
|
||||
</Typography>
|
||||
</Box>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -40,8 +40,6 @@ export interface NavigationProps {
|
||||
ctaLabel?: string;
|
||||
/** Click handler for the CTA button */
|
||||
onCtaClick?: () => void;
|
||||
/** Optional right-aligned content for mobile (e.g. price tracker) */
|
||||
mobileTrailing?: React.ReactNode;
|
||||
/** MUI sx prop for the root AppBar */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
@@ -75,7 +73,7 @@ export interface NavigationProps {
|
||||
* ```
|
||||
*/
|
||||
export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
({ logo, onLogoClick, items = [], ctaLabel, onCtaClick, mobileTrailing, sx }, ref) => {
|
||||
({ logo, onLogoClick, items = [], ctaLabel, onCtaClick, sx }, ref) => {
|
||||
const [drawerOpen, setDrawerOpen] = React.useState(false);
|
||||
const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
|
||||
|
||||
@@ -89,7 +87,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
elevation={0}
|
||||
sx={[
|
||||
{
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
bgcolor: 'var(--fa-color-surface-subtle)',
|
||||
color: 'text.primary',
|
||||
borderBottom: '1px solid',
|
||||
borderColor: 'divider',
|
||||
@@ -167,13 +165,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
mobileTrailing && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{mobileTrailing}
|
||||
</Box>
|
||||
)
|
||||
)}
|
||||
) : null}
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
@@ -198,7 +190,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
bgcolor: 'var(--fa-color-surface-warm)',
|
||||
bgcolor: 'var(--fa-color-surface-subtle)',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
@@ -267,7 +259,7 @@ export const Navigation = React.forwardRef<HTMLDivElement, NavigationProps>(
|
||||
{/* Footer */}
|
||||
<Box sx={{ mt: 'auto' }}>
|
||||
<Divider />
|
||||
<Box sx={{ px: 3, py: 2, bgcolor: 'var(--fa-color-surface-warm)' }}>
|
||||
<Box sx={{ px: 3, py: 2, bgcolor: 'var(--fa-color-surface-subtle)' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Need help? Call us on
|
||||
</Typography>
|
||||
|
||||
Reference in New Issue
Block a user