Initial commit: FA Design System source files

Copy of the Funeral Arranger design system components, theme, tokens,
and Storybook config from the original Parsons project. Pre-upgrade
baseline with React 18, MUI v5, Storybook 8.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/molecules/HelpBar/HelpBar.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Box from '@mui/material/Box';
+import { HelpBar } from './HelpBar';
+
+const meta: Meta<typeof HelpBar> = {
+  title: 'Molecules/HelpBar',
+  component: HelpBar,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+  decorators: [
+    (Story) => (
+      // Fake page content so the sticky footer has something to sit under.
+      <Box sx={{ minHeight: 400, display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ flex: 1, p: 4, bgcolor: 'background.default' }}>
+          Page content scrolls above the help bar.
+        </Box>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof HelpBar>;
+
+/** Default — uses FA's standard support number. */
+export const Default: Story = {};
+
+/** Custom number — spaces preserved in the label, stripped in the tel link. */
+export const CustomNumber: Story = {
+  args: { phone: '1300 000 000' },
+};

src/components/molecules/HelpBar/HelpBar.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import PhoneIcon from '@mui/icons-material/Phone';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { Typography } from '../../atoms/Typography';
+import { Link } from '../../atoms/Link';
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+/** Props for the FA HelpBar molecule */
+export interface HelpBarProps {
+  /** Phone number shown in the bar. Spaces preserved in the label,
+   *  stripped in the `tel:` href. Defaults to FA's support number. */
+  phone?: string;
+  /** MUI sx prop — merged onto the default footer chrome. */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+/**
+ * Sticky help footer used at the bottom of every wizard page. Shows a
+ * phone-icon prefix + "Need help? Call us on" + the support number as a
+ * tel-link. White fill, top border, sticky to the viewport bottom.
+ *
+ * Used by `WizardLayout` (for all variants that don't set `hideHelpBar`)
+ * and by pages that bypass WizardLayout's chrome (e.g. the mobile-map-first
+ * layout on `ProvidersStep`). Promoted from a WizardLayout-internal
+ * component so both sources render an identical footer — preventing drift
+ * if the phone number or styling ever changes.
+ */
+export const HelpBar = React.forwardRef<HTMLDivElement, HelpBarProps>(
+  ({ phone = '1800 987 888', sx }, ref) => (
+    <Box
+      ref={ref}
+      component="footer"
+      sx={[
+        {
+          position: 'sticky',
+          bottom: 0,
+          zIndex: 10,
+          bgcolor: 'background.paper',
+          borderTop: '1px solid',
+          borderColor: 'divider',
+          py: 1.5,
+          px: { xs: 2, md: 4 },
+          textAlign: 'center',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Typography variant="body2" color="text.secondary" component="span">
+        <PhoneIcon sx={{ fontSize: 16, verticalAlign: 'text-bottom', mr: 0.5 }} />
+        Need help? Call us on{' '}
+        <Link href={`tel:${phone.replace(/\s/g, '')}`} sx={{ fontWeight: 600 }}>
+          {phone}
+        </Link>
+      </Typography>
+    </Box>
+  ),
+);
+
+HelpBar.displayName = 'HelpBar';
+export default HelpBar;

src/components/molecules/HelpBar/index.ts

@@ -0,0 +1 @@
+export { HelpBar, type HelpBarProps } from './HelpBar';