Add MapPin atom — price-pill map markers with verified/unverified distinction
Airbnb-style markers: pill variant (price label + nub) and dot variant (no price). Verified = brand palette, unverified = neutral grey. Active state inverts colours + scale-up. Pure CSS for map overlay use. Keyboard accessible with role="button" and focus ring. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
217
src/components/atoms/MapPin/MapPin.tsx
Normal file
217
src/components/atoms/MapPin/MapPin.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
|
||||
// ─── Types ──────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Props for the FA MapPin atom */
|
||||
export interface MapPinProps {
|
||||
/** Price in dollars — renders a pill label. Omit for a dot marker. */
|
||||
price?: number;
|
||||
/** Custom price label (e.g. "POA") — overrides formatted price */
|
||||
priceLabel?: string;
|
||||
/** Whether this provider/venue is verified (brand colour vs neutral) */
|
||||
verified?: boolean;
|
||||
/** Whether this pin is currently active/selected */
|
||||
active?: boolean;
|
||||
/** Click handler */
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
/** MUI sx prop for the root element */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
// ─── Constants ──────────────────────────────────────────────────────────────
|
||||
|
||||
const PIN_HEIGHT = 'var(--fa-map-pin-height)';
|
||||
const PIN_PX = 'var(--fa-map-pin-padding-x)';
|
||||
const PIN_FONT_SIZE = 'var(--fa-map-pin-font-size)';
|
||||
const PIN_RADIUS = 'var(--fa-map-pin-border-radius)';
|
||||
const DOT_SIZE = 'var(--fa-map-pin-dot-size)';
|
||||
const NUB_SIZE = 'var(--fa-map-pin-nub-size)';
|
||||
|
||||
// ─── Colour sets ────────────────────────────────────────────────────────────
|
||||
|
||||
const colours = {
|
||||
verified: {
|
||||
bg: 'var(--fa-color-brand-100)',
|
||||
text: 'var(--fa-color-brand-700)',
|
||||
activeBg: 'var(--fa-color-brand-700)',
|
||||
activeText: 'var(--fa-color-white)',
|
||||
dot: 'var(--fa-color-brand-500)',
|
||||
activeDot: 'var(--fa-color-brand-700)',
|
||||
nub: 'var(--fa-color-brand-100)',
|
||||
activeNub: 'var(--fa-color-brand-700)',
|
||||
border: 'var(--fa-color-brand-300)',
|
||||
activeBorder: 'var(--fa-color-brand-700)',
|
||||
},
|
||||
unverified: {
|
||||
bg: 'var(--fa-color-neutral-100)',
|
||||
text: 'var(--fa-color-neutral-700)',
|
||||
activeBg: 'var(--fa-color-neutral-700)',
|
||||
activeText: 'var(--fa-color-white)',
|
||||
dot: 'var(--fa-color-neutral-400)',
|
||||
activeDot: 'var(--fa-color-neutral-700)',
|
||||
nub: 'var(--fa-color-neutral-100)',
|
||||
activeNub: 'var(--fa-color-neutral-700)',
|
||||
border: 'var(--fa-color-neutral-300)',
|
||||
activeBorder: 'var(--fa-color-neutral-700)',
|
||||
},
|
||||
} as const;
|
||||
|
||||
// ─── Component ──────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Map marker pin for the FA design system.
|
||||
*
|
||||
* Airbnb-style price pill that sits on a map. When a price is provided,
|
||||
* renders a rounded pill with the price label and a small downward nub
|
||||
* pointing to the exact location. Without a price, renders a small
|
||||
* dot marker.
|
||||
*
|
||||
* Visual distinction:
|
||||
* - **Verified** providers: warm brand palette (gold bg, copper text)
|
||||
* - **Unverified** providers: neutral grey palette
|
||||
* - **Active/selected**: inverted colours (dark bg, white text) + scale-up
|
||||
*
|
||||
* Designed for use as custom HTML markers in Mapbox GL / Google Maps.
|
||||
* Pure CSS — no canvas, no SVG dependency.
|
||||
*
|
||||
* Usage:
|
||||
* ```tsx
|
||||
* <MapPin price={900} verified onClick={() => selectProvider(id)} />
|
||||
* <MapPin verified={false} /> {/* Dot marker, no price *\/}
|
||||
* <MapPin price={900} verified active /> {/* Selected state *\/}
|
||||
* ```
|
||||
*/
|
||||
export const MapPin = React.forwardRef<HTMLDivElement, MapPinProps>(
|
||||
({ price, priceLabel, verified = false, active = false, onClick, sx }, ref) => {
|
||||
const palette = verified ? colours.verified : colours.unverified;
|
||||
const hasPrice = price != null || priceLabel != null;
|
||||
|
||||
const label = priceLabel ?? (price != null ? `$${price.toLocaleString('en-AU')}` : undefined);
|
||||
|
||||
// Dot variant — no price
|
||||
if (!hasPrice) {
|
||||
return (
|
||||
<Box
|
||||
ref={ref}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${verified ? 'Verified' : 'Unverified'} provider${active ? ' (selected)' : ''}`}
|
||||
onClick={onClick}
|
||||
onKeyDown={(e) => {
|
||||
if ((e.key === 'Enter' || e.key === ' ') && onClick) {
|
||||
e.preventDefault();
|
||||
onClick(e as unknown as React.MouseEvent);
|
||||
}
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
width: DOT_SIZE,
|
||||
height: DOT_SIZE,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: active ? palette.activeDot : palette.dot,
|
||||
border: '2px solid',
|
||||
borderColor: 'var(--fa-color-white)',
|
||||
boxShadow: 'var(--fa-shadow-sm)',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 150ms ease-in-out, background-color 150ms ease-in-out',
|
||||
transform: active ? 'scale(1.3)' : 'scale(1)',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.3)',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: '2px solid var(--fa-color-interactive-focus)',
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
},
|
||||
...(Array.isArray(sx) ? sx : [sx]),
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Pill variant — price label + nub
|
||||
return (
|
||||
<Box
|
||||
ref={ref}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`${label}, ${verified ? 'verified' : 'unverified'} provider${active ? ' (selected)' : ''}`}
|
||||
onClick={onClick}
|
||||
onKeyDown={(e) => {
|
||||
if ((e.key === 'Enter' || e.key === ' ') && onClick) {
|
||||
e.preventDefault();
|
||||
onClick(e as unknown as React.MouseEvent);
|
||||
}
|
||||
}}
|
||||
sx={[
|
||||
{
|
||||
display: 'inline-flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 150ms ease-in-out',
|
||||
transform: active ? 'scale(1.1)' : 'scale(1)',
|
||||
'&:hover': {
|
||||
transform: 'scale(1.1)',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: 'none',
|
||||
'& > .MapPin-pill': {
|
||||
outline: '2px solid var(--fa-color-interactive-focus)',
|
||||
outlineOffset: '2px',
|
||||
},
|
||||
},
|
||||
},
|
||||
...(Array.isArray(sx) ? sx : [sx]),
|
||||
]}
|
||||
>
|
||||
{/* Pill */}
|
||||
<Box
|
||||
className="MapPin-pill"
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: PIN_HEIGHT,
|
||||
px: PIN_PX,
|
||||
borderRadius: PIN_RADIUS,
|
||||
backgroundColor: active ? palette.activeBg : palette.bg,
|
||||
color: active ? palette.activeText : palette.text,
|
||||
border: '1px solid',
|
||||
borderColor: active ? palette.activeBorder : palette.border,
|
||||
fontSize: PIN_FONT_SIZE,
|
||||
fontWeight: 700,
|
||||
fontFamily: (t: Theme) => t.typography.fontFamily,
|
||||
lineHeight: 1,
|
||||
whiteSpace: 'nowrap',
|
||||
userSelect: 'none',
|
||||
boxShadow: active ? 'var(--fa-shadow-md)' : 'var(--fa-shadow-sm)',
|
||||
transition:
|
||||
'background-color 150ms ease-in-out, color 150ms ease-in-out, border-color 150ms ease-in-out, box-shadow 150ms ease-in-out',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Box>
|
||||
|
||||
{/* Nub — downward pointer */}
|
||||
<Box
|
||||
aria-hidden
|
||||
sx={{
|
||||
width: 0,
|
||||
height: 0,
|
||||
borderLeft: `${NUB_SIZE} solid transparent`,
|
||||
borderRight: `${NUB_SIZE} solid transparent`,
|
||||
borderTop: `${NUB_SIZE} solid`,
|
||||
borderTopColor: active ? palette.activeNub : palette.nub,
|
||||
mt: '-1px', // overlap the pill border
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
MapPin.displayName = 'MapPin';
|
||||
export default MapPin;
|
||||
Reference in New Issue
Block a user