Iterate MapPopup: consistent hierarchy, clickable card, icon badge

- Hierarchy now matches MiniCard: title → meta → price - Whole card is clickable (onClick prop) — removed View details link - Verified badge → icon-only circle in image (matches MiniCard) - Name truncated at 1 line with tooltip on hover - No-image fallback shows inline verified icon + text - Added keyboard support (Enter/Space) and focus ring Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 20:59:55 +10:00
parent c457ee8b0d
commit 723cdf908a
2 changed files with 131 additions and 77 deletions
--- a/src/components/molecules/MapPopup/MapPopup.stories.tsx
+++ b/src/components/molecules/MapPopup/MapPopup.stories.tsx
@@ -20,6 +20,9 @@ const meta: Meta<typeof MapPopup> = {
      values: [{ name: 'map', value: '#E5E3DF' }],
    },
  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
 };

 export default meta;
@@ -34,7 +37,6 @@ export const VerifiedProvider: Story = {
    location: 'Wollongong',
    rating: 4.8,
    verified: true,
-    onViewDetails: () => {},
  },
 };

@@ -44,7 +46,6 @@ export const UnverifiedProvider: Story = {
    name: 'Smith & Sons Funeral Services',
    price: 1200,
    location: 'Sutherland',
-    onViewDetails: () => {},
  },
 };

@@ -56,23 +57,31 @@ export const Venue: Story = {
    price: 450,
    location: 'Albany Creek',
    capacity: 120,
-    onViewDetails: () => {},
  },
 };

-/** Minimal — just name and view details */
+/** Long name — truncated at 1 line, tooltip on hover */
+export const LongName: Story = {
+  args: {
+    name: 'Botanical Funerals by Ian Allison — Sustainable & Eco-Friendly Services',
+    imageUrl: IMG_PROVIDER,
+    price: 1200,
+    location: 'Northern Beaches',
+    verified: true,
+  },
+};
+
+/** Minimal — just name */
 export const Minimal: Story = {
  args: {
    name: 'Local Funeral Provider',
-    onViewDetails: () => {},
  },
 };

-/** No view details link — display only */
-export const DisplayOnly: Story = {
+/** Verified without image — inline verified indicator */
+export const VerifiedNoImage: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
-    imageUrl: IMG_PROVIDER,
    price: 900,
    location: 'Wollongong',
    verified: true,
@@ -87,7 +96,6 @@ export const CustomPriceLabel: Story = {
    priceLabel: 'Price on application',
    location: 'Sydney CBD',
    verified: true,
-    onViewDetails: () => {},
  },
 };

@@ -122,7 +130,7 @@ export const WithPin: Story = {
        location="Wollongong"
        rating={4.8}
        verified
-        onViewDetails={() => {}}
+        onClick={() => {}}
      />
      <MapPin name="H.Parsons" price={900} verified active />
    </>
--- a/src/components/molecules/MapPopup/MapPopup.tsx
+++ b/src/components/molecules/MapPopup/MapPopup.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip';
 import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
 import StarRoundedIcon from '@mui/icons-material/StarRounded';
 import PeopleOutlinedIcon from '@mui/icons-material/PeopleOutlined';
+import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { Typography } from '../../atoms/Typography';
-import { Badge } from '../../atoms/Badge';
-import { Link } from '../../atoms/Link';
-import type { BadgeProps } from '../../atoms/Badge/Badge';

 // ─── Types ──────────────────────────────────────────────────────────────────

@@ -18,7 +17,7 @@ export interface MapPopupProps {
  name: string;
  /** Hero image URL */
  imageUrl?: string;
-  /** Price in dollars */
+  /** Price in dollars — shown as "From $X" */
  price?: number;
  /** Custom price label (e.g. "POA") — overrides formatted price */
  priceLabel?: string;
@@ -28,13 +27,11 @@ export interface MapPopupProps {
  rating?: number;
  /** Venue capacity */
  capacity?: number;
-  /** Whether this provider is verified */
+  /** Whether this provider is verified — shows icon badge in image */
  verified?: boolean;
-  /** Badge colour for the verified badge */
-  badgeColor?: BadgeProps['color'];
-  /** "View details" click handler */
-  onViewDetails?: () => void;
-  /** MUI sx prop for the root Paper */
+  /** Click handler — entire card is clickable */
+  onClick?: () => void;
+  /** MUI sx prop for the root element */
  sx?: SxProps<Theme>;
 }

@@ -50,15 +47,18 @@ const NUB_SIZE = 8;
 * Map popup card for the FA design system.
 *
 * Floating card anchored to a MapPin on click. Shows a compact
- * preview of a provider or venue — image, name, price, meta row,
- * and a "View details" link. A downward nub visually connects the
- * popup to the pin below.
+ * preview of a provider or venue — image, name, meta, and price.
+ * The entire card is clickable to navigate to the provider/venue.
+ *
+ * Content hierarchy matches MiniCard: **title → meta → price**.
+ * Truncated names show a tooltip on hover. Verified providers
+ * show an icon-only badge floating in the image.
 *
 * Designed for use as a custom popup in Mapbox GL / Google Maps.
 * The parent map container handles positioning; this component
 * handles content and styling only.
 *
- * Composes: Paper + Typography + Badge + Link.
+ * Composes: Paper + Typography + Tooltip.
 *
 * Usage:
 * ```tsx
@@ -69,7 +69,7 @@ const NUB_SIZE = 8;
 *   location="Wollongong"
 *   rating={4.8}
 *   verified
- *   onViewDetails={() => selectProvider(id)}
+ *   onClick={() => selectProvider(id)}
 * />
 * ```
 */
@@ -84,8 +84,7 @@ export const MapPopup = React.forwardRef<HTMLDivElement, MapPopupProps>(
      rating,
      capacity,
      verified = false,
-      badgeColor = 'brand',
-      onViewDetails,
+      onClick,
      sx,
    },
    ref,
@@ -93,16 +92,52 @@ export const MapPopup = React.forwardRef<HTMLDivElement, MapPopupProps>(
    const hasMeta = location != null || rating != null || capacity != null;
    const hasPrice = price != null || priceLabel != null;

+    // Detect name truncation for tooltip
+    const nameRef = React.useRef<HTMLElement>(null);
+    const [isTruncated, setIsTruncated] = React.useState(false);
+
+    React.useEffect(() => {
+      const el = nameRef.current;
+      if (el) {
+        setIsTruncated(el.scrollHeight > el.clientHeight + 1);
+      }
+    }, [name]);
+
    return (
      <Box
        ref={ref}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onClick={onClick}
+        onKeyDown={
+          onClick
+            ? (e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  onClick();
+                }
+              }
+            : undefined
+        }
+        aria-label={onClick ? `View ${name}` : undefined}
        sx={[
          {
            display: 'inline-flex',
            flexDirection: 'column',
            alignItems: 'center',
-            // Offset the popup upward so the nub sits on top of the pin
            filter: 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))',
+            cursor: onClick ? 'pointer' : 'default',
+            transition: 'transform 150ms ease-in-out',
+            '&:hover': onClick
+              ? {
+                  transform: 'scale(1.02)',
+                }
+              : undefined,
+            '&:focus-visible': {
+              outline: '2px solid var(--fa-color-interactive-focus)',
+              outlineOffset: '2px',
+              borderRadius: 'var(--fa-card-border-radius-default)',
+            },
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
@@ -130,45 +165,48 @@ export const MapPopup = React.forwardRef<HTMLDivElement, MapPopupProps>(
                backgroundColor: 'var(--fa-color-neutral-100)',
              }}
            >
-              {/* Verified badge inside image */}
+              {/* Verified icon badge — floating top-right */}
              {verified && (
-                <Box sx={{ position: 'absolute', top: 8, right: 8 }}>
-                  <Badge variant="filled" color={badgeColor} size="small">
-                    Verified
-                  </Badge>
+                <Tooltip title="Verified provider" arrow placement="top">
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      top: 8,
+                      right: 8,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      width: 24,
+                      height: 24,
+                      borderRadius: '50%',
+                      backgroundColor: 'var(--fa-color-brand-600)',
+                      color: 'var(--fa-color-white)',
+                      boxShadow: 'var(--fa-shadow-sm)',
+                    }}
+                  >
+                    <VerifiedOutlinedIcon sx={{ fontSize: 14 }} />
                  </Box>
+                </Tooltip>
              )}
            </Box>
          )}

          {/* ── Content ── */}
          <Box sx={{ p: 1.5, display: 'flex', flexDirection: 'column', gap: '4px' }}>
-            {/* Name */}
-            <Typography variant="body2" sx={{ fontWeight: 600 }} maxLines={2}>
+            {/* 1. Name — with tooltip when truncated */}
+            <Tooltip
+              title={isTruncated ? name : ''}
+              arrow
+              placement="top"
+              enterDelay={300}
+              disableHoverListener={!isTruncated}
+            >
+              <Typography ref={nameRef} variant="body2" sx={{ fontWeight: 600 }} maxLines={1}>
                {name}
              </Typography>
+            </Tooltip>

-            {/* Price */}
-            {hasPrice && (
-              <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
-                {priceLabel ? (
-                  <Typography variant="caption" color="primary" sx={{ fontStyle: 'italic' }}>
-                    {priceLabel}
-                  </Typography>
-                ) : (
-                  <>
-                    <Typography variant="caption" color="text.secondary">
-                      From
-                    </Typography>
-                    <Typography variant="caption" color="primary" sx={{ fontWeight: 600 }}>
-                      ${price!.toLocaleString('en-AU')}
-                    </Typography>
-                  </>
-                )}
-              </Box>
-            )}
-
-            {/* Meta row */}
+            {/* 2. Meta row */}
            {hasMeta && (
              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
                {location && (
@@ -209,26 +247,34 @@ export const MapPopup = React.forwardRef<HTMLDivElement, MapPopupProps>(
              </Box>
            )}

-            {/* Verified badge (no image fallback) */}
-            {verified && !imageUrl && (
-              <Badge variant="filled" color={badgeColor} size="small">
-                Verified
-              </Badge>
+            {/* 3. Price */}
+            {hasPrice && (
+              <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
+                {priceLabel ? (
+                  <Typography variant="caption" color="primary" sx={{ fontStyle: 'italic' }}>
+                    {priceLabel}
+                  </Typography>
+                ) : (
+                  <>
+                    <Typography variant="caption" color="text.secondary">
+                      From
+                    </Typography>
+                    <Typography variant="caption" color="primary" sx={{ fontWeight: 600 }}>
+                      ${price!.toLocaleString('en-AU')}
+                    </Typography>
+                  </>
+                )}
+              </Box>
            )}

-            {/* View details link */}
-            {onViewDetails && (
-              <Link
-                component="button"
-                variant="caption"
-                onClick={(e: React.MouseEvent) => {
-                  e.stopPropagation();
-                  onViewDetails();
-                }}
-                sx={{ mt: 0.5, alignSelf: 'flex-start' }}
-              >
-                View details
-              </Link>
+            {/* Verified indicator (no-image fallback) */}
+            {verified && !imageUrl && (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                <VerifiedOutlinedIcon sx={{ fontSize: 14, color: 'var(--fa-color-brand-600)' }} />
+                <Typography variant="caption" color="text.secondary" sx={{ fontSize: 11 }}>
+                  Verified
+                </Typography>
+              </Box>
            )}
          </Box>
        </Paper>