Richie
a7db1974c3
Lifts the sort Button + anchored Menu pattern into a reusable molecule.
ProvidersStep previously had the same trigger-button + menu-items-with-
selected-state inline twice (mobile-map floating strip + desktop sticky
bar) with a minor variant split — "Sort by" compact label on mobile vs
"Sort: <label>" verbose label on desktop with a swap-vertical icon.
API: value (controlled string) + onChange + options array +
variant ('compact' | 'verbose') + sx (trigger chrome). Non-generic
string typing keeps the forwardRef clean; callers with typed unions
cast at the boundary (trivial, one line). Anchor state is fully
internal to the molecule.
Four Storybook stories (Compact, Verbose, Bare, TwoOptions) exercise
both variants, the bare-no-chrome default, and a non-provider options
set to demonstrate reuse.
Not tied to a product-specific sort domain — intended for VenueStep,
CoffinsStep, or any future page needing a sort menu. ProvidersStep's
SORT_OPTIONS stays in the page as the caller's domain data; the
molecule just renders whatever options it's given.
ProvidersStep cleanup: drops the Button, Menu, MenuItem, SwapVertIcon
imports and the sortAnchor state that only supported the inline
version.
Verified: compact label on mobile ("Sort by"), verbose label on
desktop ("Sort: Recommended" + swap icon), menu anchoring,
selected-state, aria-label all match pre-extraction behaviour.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>