- New molecule: ComparisonColumnCard — desktop column header card extracted
from ComparisonTable (~150 lines removed from organism)
- New molecule: ComparisonTabCard — mobile tab rail card extracted from
ComparisonPage (shared by V1 and V2)
- CellValue "unknown" restyled: icon+text in neutral grey (was Badge),
InfoOutlinedIcon on right at 14px matching item info icons
- Unverified provider story data: all items set to unknown across all
story files (no dashes in essentials)
- Mobile tab rail: recommended badge (replaces star), package price,
shadow/glow, center-on-select scroll, overflow clipping fixed
- ComparisonPackageCard: added shadow, reduced CTA button to medium
- ComparisonTable first column: inline info icon pattern (non-breaking
space + nowrap span) prevents icon orphaning on line wrap
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The mobile package card was previously duplicated inline in both
ComparisonPage (V2) and ComparisonPageV1 — same ~250-line component
pasted twice. Extract it as a proper molecule so card-level tweaks
land in one file and both pages stay in sync.
New molecule: src/components/molecules/ComparisonPackageCard/ with
component, stories (Verified, Unverified, Recommended,
ItemizedUnavailable), and index. API reuses the existing
ComparisonPackage type from ComparisonTable.
Both pages drop their inline MobilePackageCard + MobileCellValue
helpers and a handful of now-unused imports (Tooltip, Badge, Divider,
several icons, ComparisonCellValue type).
The desktop column header inside ComparisonTable is left inline —
it's tightly coupled to the grid/sticky behaviour and has a floating
verified badge + Remove link that differ meaningfully from the mobile
card. Extracting both variants into one molecule would need an
awkward variant prop for marginal gain.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Archive the current ComparisonPage as V1 (viewable under Archive/ in
Storybook) and build V2 as the new production version. In V2, the
recommended package is prepended instead of appended: it appears as the
first column on desktop and the first tab in the mobile rail. On mobile
the initially active tab is the first user-selected package, not the
recommendation — the recommended tab is surfaced as a visible suggestion
rather than the default view, which felt too upsell-y for the audience.
Both V1 and V2 now use a StarRoundedIcon (brand-600) in the mobile tab
label instead of a text star, so the "recommended" marker reads cleanly
against both selected and unselected tab backgrounds.
See decisions-log D040 for rationale.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
