diff --git a/.storybook/main.ts b/.storybook/main.ts index a1af62e..5c15a20 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -13,6 +13,7 @@ const config: StorybookConfig = { docs: { autodocs: 'tag', }, + staticDirs: ['../brandassets'], viteFinal: async (config) => { // Inherit aliases from vite.config.ts automatically via react-vite framework return config; diff --git a/brandassets/brandlogo/logo-full.svg b/brandassets/brandlogo/logo-full.svg new file mode 100644 index 0000000..748f1aa --- /dev/null +++ b/brandassets/brandlogo/logo-full.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/brandassets/brandlogo/logo-short.svg b/brandassets/brandlogo/logo-short.svg new file mode 100644 index 0000000..268d0b1 --- /dev/null +++ b/brandassets/brandlogo/logo-short.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index 61d122f..2839bf1 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -17,33 +17,33 @@ duplicates) and MUST update it after completing one. | Component | Status | Variants | Tokens used | Notes | |-----------|--------|----------|-------------|-------| | Button | done | contained, soft, outlined, text × xs, small, medium, large × primary, secondary + loading, underline, fullWidth | button.height/paddingX/paddingY/fontSize/iconSize/iconGap/borderRadius, color.interactive.*, color.brand.100-300, color.neutral.200-700 | Primary interactive element. Merges Text Button from Figma. Soft variant = Figma's Secondary/Brand & Secondary/Grey. | -| IconButton | review | default, primary, secondary, error × small, medium, large | Reuses button.height/iconSize tokens, color.interactive.*, color.neutral.* | Icon-only button (close, menu, actions). Wraps MUI IconButton. Rounded rect, brand hover, focus ring. | +| IconButton | done | default, primary, secondary, error × small, medium, large | Reuses button.height/iconSize tokens, color.interactive.*, color.neutral.* | Icon-only button (close, menu, actions). Wraps MUI IconButton. Rounded rect, brand hover, focus ring. | | Typography | done | displayHero, display1-3, displaySm, h1-h6, bodyLg, body1, body2, bodyXs, labelLg, label, labelSm, caption, captionSm, overline, overlineSm + maxLines, gutterBottom | typography.* (all semantic typography tokens), fontFamily.body, fontFamily.display | Text display system. Thin MUI wrapper with maxLines truncation. | | Input | done | medium, small × default, hover, focus, error, success, disabled + startIcon, endIcon, required, multiline | input.height/paddingX/paddingY/fontSize/borderRadius/gap/iconSize, color.neutral.300-400, color.brand.500, color.feedback.error/success, color.text.secondary | External label pattern, branded focus ring, two sizes aligned with Button. Adds startIcon/endIcon and success state beyond Figma. | -| Badge | review | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. | +| Badge | done | soft, filled × default, brand, success, warning, error, info × small, medium + icon | badge.height/paddingX/fontSize/iconSize/iconGap/borderRadius, color.feedback.*, color.brand.200/700 | Status indicator pill. Soft (tonal) or filled (solid). 6 colours, 2 sizes, optional leading icon. | | Icon | planned | various sizes | | Icon wrapper component | | Avatar | planned | image, initials, icon × small, medium, large | | User/entity representation | -| Divider | review | horizontal, vertical × fullWidth, inset, middle + text, flexItem | color.border.default (via palette.divider) | Visual separator. Wraps MUI Divider. Supports text children and orientation. | -| Chip | review | filled, outlined × small, medium × clickable, deletable, selected × default, primary | chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 | Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). | +| Divider | done | horizontal, vertical × fullWidth, inset, middle + text, flexItem | color.border.default (via palette.divider) | Visual separator. Wraps MUI Divider. Supports text children and orientation. | +| Chip | done | filled, outlined × small, medium × clickable, deletable, selected × default, primary | chip.height/paddingX/fontSize/iconSize/deleteIconSize/iconGap/borderRadius, color.neutral.200-700, color.brand.200-700 | Interactive tag. Wraps MUI Chip with FA tokens. Selected state promotes to brand colour. Filled uses soft tonal bg (like Badge). | | Card | done | elevated, outlined × default, compact, none padding × interactive × selected | card.borderRadius/padding/shadow/border/background, color.surface.raised/subtle/warm, color.border.default/brand, shadow.md/lg | Content container. Elevated (shadow) or outlined (border). Interactive adds hover bg fill + shadow lift. Selected adds brand border + warm bg. Three padding presets. | -| Switch | review | bordered style × checked, unchecked, disabled | switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400 | Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One. | -| Radio | review | checked, unchecked, disabled | radio.size/dotSize, color.interactive.*, color.neutral.400 | Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma. | +| Switch | done | bordered style × checked, unchecked, disabled | switch.track.width/height/borderRadius, switch.thumb.size, color.interactive.*, color.neutral.400 | Toggle for add-ons/options. Wraps MUI Switch. Bordered pill, brand.500 fill when active. From Parsons 1.0 Figma Style One. | +| Radio | done | checked, unchecked, disabled | radio.size/dotSize, color.interactive.*, color.neutral.400 | Single-select option. Wraps MUI Radio. Brand.500 fill when selected. From Parsons 1.0 Figma. | | ColourToggle | planned | inactive, hover, active, locked × single, two-colour × desktop, mobile | | Circular colour swatch picker for products. Custom component. Deferred until product detail organisms. | | Slider | planned | single, range × desktop, mobile | | Price range filter. Wraps MUI Slider. Deferred until search/filtering molecules. | -| Link | review | underline: hover/always/none × any MUI colour | color.text.brand (copper brand.600, 4.8:1), color.interactive.active | Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring. | +| Link | done | underline: hover/always/none × any MUI colour | color.text.brand (copper brand.600, 4.8:1), color.interactive.active | Navigation text link. Wraps MUI Link. Copper default, underline on hover, focus ring. | ## Molecules | Component | Status | Composed of | Notes | |-----------|--------|-------------|-------| | FormField | planned | Input + Typography (label) + Typography (helper) | Standard form field with label and validation | -| ProviderCard | review | Card + Typography + Badge + Tooltip | Provider listing card. Verified: image + logo (64px rounded rect) + "Verified" badge. Unverified: text-only with top accent bar. Capability badges with info icon + tooltip. Price split typography. No footer. 4 component tokens. | -| VenueCard | review | Card + Typography | Venue listing card. Always has photo + location + capacity ("X guests") + price ("From $X"). No verification tiers, no logo, no badges. 3 component tokens. Critique: 33/40. | +| ProviderCard | done | Card + Typography + Badge + Tooltip | Provider listing card. Verified: image + logo (64px rounded rect) + "Verified" badge. Unverified: text-only with top accent bar. Capability badges with info icon + tooltip. Price split typography. No footer. 4 component tokens. | +| VenueCard | done | Card + Typography | Venue listing card. Always has photo + location + capacity ("X guests") + price ("From $X"). No verification tiers, no logo, no badges. 3 component tokens. Critique: 33/40. | | MapCard | planned | Card + Typography + Badge | Compact horizontal map popup card. Deferred until map integration. | -| ServiceOption | review | Card (interactive, selected) + Typography | Selectable service option for arrangement flow. Heading + optional price (right-aligned) + optional description. role="radio" + aria-checked. Disabled state with opacity token. Maps to Figma ListItemPurchaseOption. | -| SearchBar | review | Input + IconButton + Button | Search input with optional submit button. Enter-to-submit, progressive clear button, inline loading spinner. Guards empty submissions, refocuses after clear. role="search" landmark. Critique: 35/40. | -| AddOnOption | review | Card (interactive, selected) + Typography + Switch | Toggleable add-on for arrangement flow extras. Heading + optional price + description + Switch. Click-anywhere toggle. Maps to Figma ListItemAddItem (2350:40658). | -| StepIndicator | review | Typography + Box | Horizontal segmented progress bar. Brand gold for completed/current steps, grey for upcoming. Responsive bar height (10px/6px). Maps to Figma Progress Bar - Steps (2375:47468). | +| ServiceOption | done | Card (interactive, selected) + Typography | Selectable service option for arrangement flow. Heading + optional price (right-aligned) + optional description. role="radio" + aria-checked. Disabled state with opacity token. Maps to Figma ListItemPurchaseOption. | +| SearchBar | done | Input + IconButton + Button | Search input with optional submit button. Enter-to-submit, progressive clear button, inline loading spinner. Guards empty submissions, refocuses after clear. role="search" landmark. Critique: 35/40. | +| AddOnOption | done | Card (interactive, selected) + Typography + Switch | Toggleable add-on for arrangement flow extras. Heading + optional price + description + Switch. Click-anywhere toggle. Maps to Figma ListItemAddItem (2350:40658). | +| StepIndicator | done | Typography + Box | Horizontal segmented progress bar. Brand gold for completed/current steps, grey for upcoming. Responsive bar height (10px/6px). Maps to Figma Progress Bar - Steps (2375:47468). | ## Organisms @@ -52,7 +52,7 @@ duplicates) and MUST update it after completing one. | ServiceSelector | planned | ServiceOption × n + Typography + Button | Full service selection panel | | PricingTable | planned | PriceCard × n + Typography | Comparative pricing display | | ArrangementForm | planned | FormField × n + StepIndicator + Button | Multi-step arrangement flow | -| Navigation | review | AppBar + Link + IconButton + Button + Divider + Drawer | Responsive site header. Desktop: logo left, links right, optional CTA. Mobile: hamburger + drawer with nav items, CTA, help footer. Sticky, warm surface bg. Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508). | +| Navigation | done | AppBar + Link + IconButton + Button + Divider + Drawer | Responsive site header. Desktop: logo left, links right, optional CTA. Mobile: hamburger + drawer with nav items, CTA, help footer. Sticky, grey surface bg (surface.subtle). Real FA logo from brandassets/. Maps to Figma Main Nav (14:108) + Mobile Header (2391:41508). | | Footer | planned | Link × n + Typography + Divider | Site footer | ## Future enhancements @@ -65,5 +65,5 @@ be relevant to your current work. |------|-----------|---------|-------| | Destructive button colours | Button | When building delete/cancel flows | `color="error"` already works via MUI palette. May need `soft` variant styling for error/warning/success colours. | | Link-as-button | Button | When building Navigation or link-heavy pages | Use MUI's `component="a"` or `href` prop. May warrant a separate Link atom or a `Button` story showing the pattern. | -| IconButton atom | IconButton | When building Navigation, modals, toolbars | Wrap MUI IconButton with FA theme tokens. Registered as planned atom above. | +| ~~IconButton atom~~ | ~~IconButton~~ | ~~Resolved~~ | ~~Built as atom. Rounded rect, 3 sizes, 4 colours, focus ring.~~ | | ~~Google Fonts loading~~ | ~~Typography~~ | ~~Resolved~~ | ~~Added to .storybook/preview-head.html and index.html~~ | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index 06ea175..98c3adc 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -761,6 +761,40 @@ Each entry follows this structure: - AddOnOption: price moved to own row below heading, heading row centre-aligned so short headings (no description) align with switch, heading-to-price margin removed - AddOnOption + ServiceOption: added optional `maxDescriptionLines` prop with CSS line-clamp + "View more"/"View less" toggle (caption size, text.secondary, weight 400). Omit prop for no limit. +**Next steps:** +- ~~Build Footer organism~~ (next) +- ~~Build ServiceSelector organism~~ (next) +- ~~Consider FormField molecule~~ (next) +- ~~Remaining P3s~~ (next) + +### Session 2026-03-25p — Review completion + Navigation fixes + +**Agent(s):** Claude Opus (via conversation) + +**Work completed:** +- Completed review of all components — user approved all atoms + molecules with no changes +- Applied 4 Navigation fixes from user feedback: + 1. Added "Provider Portal" to default nav items + 2. Integrated real FA logo SVGs from `brandassets/brandlogo/` (full wordmark desktop, short icon mobile) + 3. Changed nav background from warm (`surface.warm` / brand.50) to grey (`surface.subtle` / neutral.50) + 4. Removed `mobileTrailing` prop and `MobilePriceTracker` story — speculative feature not in design +- Added `staticDirs: ['../brandassets']` to Storybook config for logo serving +- Updated component-registry.md: promoted 11 atoms + 6 molecules + 1 organism from "review" to "done" +- TypeScript compiles, Storybook builds + +**Decisions made:** +- Nav background is grey (neutral.50) not warm (brand.50) — per user's Figma reference +- "Log in" label kept as-is — universally understood, user confirmed +- mobileTrailing prop removed entirely — was over-reading Figma's mobile header + +**Component status at end of session:** +- **Done (11 atoms):** Button, Typography, Input, Card, Badge, Chip, Switch, Radio, IconButton, Divider, Link +- **Done (6 molecules):** ProviderCard, VenueCard, ServiceOption, SearchBar, AddOnOption, StepIndicator +- **Done (1 organism):** Navigation +- **Planned (3 atoms):** Icon, Avatar, ColourToggle, Slider +- **Planned (2 molecules):** MapCard, FormField +- **Planned (4 organisms):** ServiceSelector, PricingTable, ArrangementForm, Footer + **Next steps:** - Build Footer organism (Link + Typography + Divider — dependencies ready) - Build ServiceSelector organism (ServiceOption × n + Typography + Button) diff --git a/src/components/organisms/Navigation/Navigation.stories.tsx b/src/components/organisms/Navigation/Navigation.stories.tsx index ab1bc41..7a66154 100644 --- a/src/components/organisms/Navigation/Navigation.stories.tsx +++ b/src/components/organisms/Navigation/Navigation.stories.tsx @@ -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 +// Real FA logo — full wordmark for desktop, short icon for mobile const FALogo = () => ( - - FuneralArranger - + + {/* Full logo for desktop */} + + {/* Short icon for mobile */} + + ); 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 = { export default meta; type Story = StoryObj; -// ─── 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: , - items: defaultItems, - mobileTrailing: ( - - - Your plan - - - $3,600 - - - ), - }, -}; diff --git a/src/components/organisms/Navigation/Navigation.tsx b/src/components/organisms/Navigation/Navigation.tsx index 160e3bd..d6262f3 100644 --- a/src/components/organisms/Navigation/Navigation.tsx +++ b/src/components/organisms/Navigation/Navigation.tsx @@ -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; } @@ -75,7 +73,7 @@ export interface NavigationProps { * ``` */ export const Navigation = React.forwardRef( - ({ 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( 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( )} - ) : ( - mobileTrailing && ( - - {mobileTrailing} - - ) - )} + ) : null} @@ -198,7 +190,7 @@ export const Navigation = React.forwardRef( justifyContent: 'space-between', px: 2, py: 1.5, - bgcolor: 'var(--fa-color-surface-warm)', + bgcolor: 'var(--fa-color-surface-subtle)', }} > @@ -267,7 +259,7 @@ export const Navigation = React.forwardRef( {/* Footer */} - + Need help? Call us on