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/ComparisonPackageCard/ComparisonPackageCard.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Box from '@mui/material/Box';
+import { ComparisonPackageCard } from './ComparisonPackageCard';
+import type { ComparisonPackage } from '../../organisms/ComparisonTable';
+
+// ─── Mock data ──────────────────────────────────────────────────────────────
+
+const basePackage: ComparisonPackage = {
+  id: 'wollongong-everyday',
+  name: 'Everyday Funeral Package',
+  price: 6966,
+  provider: {
+    name: 'Wollongong City Funerals',
+    location: 'Wollongong',
+    rating: 4.8,
+    reviewCount: 122,
+    verified: true,
+  },
+  sections: [
+    {
+      heading: 'Essentials',
+      items: [
+        {
+          name: 'Allowance for Coffin',
+          info: 'Allowance amount — upgrade options available.',
+          value: { type: 'allowance', amount: 1750 },
+        },
+        {
+          name: 'Cremation Certificate/Permit',
+          info: 'Statutory medical referee fee.',
+          value: { type: 'price', amount: 350 },
+        },
+        {
+          name: 'Crematorium',
+          info: 'Cremation facility fees.',
+          value: { type: 'price', amount: 660 },
+        },
+        {
+          name: 'Professional Service Fee',
+          info: 'Coordination of arrangements.',
+          value: { type: 'price', amount: 3650.9 },
+        },
+        {
+          name: 'Transportation Service Fee',
+          info: 'Transfer of the deceased.',
+          value: { type: 'complimentary' },
+        },
+      ],
+    },
+    {
+      heading: 'Optionals',
+      items: [
+        {
+          name: 'Digital Recording',
+          info: 'Professional video recording.',
+          value: { type: 'complimentary' },
+        },
+        { name: 'Online Notice', info: 'Online death notice.', value: { type: 'complimentary' } },
+        { name: 'Viewing Fee', info: 'One private family viewing.', value: { type: 'included' } },
+      ],
+    },
+    {
+      heading: 'Extras',
+      items: [
+        {
+          name: 'Allowance for Celebrant',
+          info: 'Professional celebrant or MC.',
+          value: { type: 'allowance', amount: 550 },
+        },
+        { name: 'Catering', info: 'Post-service catering.', value: { type: 'poa' } },
+        {
+          name: 'Saturday Service Fee',
+          info: 'Additional fee for Saturday services.',
+          value: { type: 'price', amount: 880 },
+        },
+      ],
+    },
+  ],
+};
+
+const unverifiedPackage: ComparisonPackage = {
+  ...basePackage,
+  id: 'inglewood-everyday',
+  name: 'Everyday Funeral Package',
+  price: 7200,
+  provider: {
+    name: 'Inglewood Chapel',
+    location: 'Inglewood',
+    rating: 4.2,
+    reviewCount: 45,
+    verified: false,
+  },
+};
+
+const recommendedPackage: ComparisonPackage = {
+  ...basePackage,
+  id: 'recommended-premium',
+  name: 'Premium Cremation Service',
+  price: 8450,
+  provider: {
+    name: 'H. Parsons Funeral Directors',
+    location: 'Wentworth',
+    rating: 4.9,
+    reviewCount: 203,
+    verified: true,
+  },
+  isRecommended: true,
+};
+
+// ─── Meta ───────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof ComparisonPackageCard> = {
+  title: 'Molecules/ComparisonPackageCard',
+  component: ComparisonPackageCard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ maxWidth: 400, mx: 'auto' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    onArrange: (id) => alert(`Arrange: ${id}`),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComparisonPackageCard>;
+
+/** Verified provider — default appearance used in ComparisonPage mobile tab panel */
+export const Verified: Story = {
+  args: {
+    pkg: basePackage,
+  },
+};
+
+/** Unverified provider — "Make Enquiry" CTA + soft button variant, no verified badge */
+export const Unverified: Story = {
+  args: {
+    pkg: unverifiedPackage,
+  },
+};
+
+/** Recommended package — warm banner, selected card state, warm header background */
+export const Recommended: Story = {
+  args: {
+    pkg: recommendedPackage,
+  },
+};
+
+/** Itemisation unavailable — used when a provider hasn't submitted an itemised breakdown */
+export const ItemizedUnavailable: Story = {
+  args: {
+    pkg: {
+      ...unverifiedPackage,
+      itemizedAvailable: false,
+    },
+  },
+};