@bearmenu/ui 0.8.48 → 0.8.50

package/src/components/place-card.stories.tsx

@@ -10,6 +10,7 @@ const labels: PlaceCardLabels = {
   closed: "Closed",
   viewDetails: (name) => `View details for ${name}`,
   priceLevel: (level) => `Price level ${level} of 4`,
+  established: (year) => String(year),
   grade: {
     soft: "Worth exploring",
     bands: {
@@ -35,6 +36,7 @@ const basePlace: PlacePreview = {
   price_dishes: { price_range_low: 35, price_range_high: 90, price_score: 2 },
   reviews_digest: { grade: { overall: 8.4 } },
   cover_url: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&q=80",
+  launched_at: "2020-02",
 };
 
 const meta = {
@@ -101,6 +103,40 @@ export const WithFooter: Story = {
   },
 };
 
+/**
+ * The launch year closes the meta line, bare — fe's copy; `labels.established`
+ * may spell it out ("Est. 2020") where there is room. It is the backend's
+ * earliest-review estimate (`launched_at`, `YYYY-MM`). No year without the
+ * label or without a well-formed `launched_at`.
+ */
+export const Established: Story = {
+  args: { place: { ...basePlace, launched_at: "2012-09" } },
+};
+
+/** 220px rail with a long cuisine and full price: the cuisine gives way, price and year never do. */
+export const EstablishedNarrowRail: Story = {
+  args: {
+    place: { ...basePlace, cuisines: ["mediterranean"], price_dishes: { price_score: 4 } },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[220px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** Spelled out by the label, for a consumer with room for the word. */
+export const EstablishedWithLabel: Story = {
+  args: { labels: { ...labels, established: (year) => `Est. ${year}` } },
+};
+
+/** The year alone still gets a meta line: no cuisine, no price signal. */
+export const EstablishedOnly: Story = {
+  args: { place: { ...basePlace, cuisines: undefined, price_dishes: undefined } },
+};
+
 export const Minimal: Story = {
   args: { place: { id: "2", slug: "tiny", name: "The Tiny Spot" } },
 };

package/src/components/place-card.test.tsx

@@ -9,6 +9,7 @@ const LABELS: PlaceCardLabels = {
   closed: "Closed",
   viewDetails: (name) => `View details for ${name}`,
   priceLevel: (level) => `Price level ${level} of 4`,
+  established: (year) => `Est. ${year}`,
   grade: {
     soft: "Worth exploring",
     bands: {
@@ -104,6 +105,34 @@ describe("PlaceCard", () => {
     expect(screen.getByLabelText("Price level 2 of 4")).toBeInTheDocument();
   });
 
+  it("closes the meta line with the launch year", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ cuisines: ["italian"], launched_at: "2020-02" })}
+        labels={LABELS}
+      />
+    );
+    expect(screen.getByText("Est. 2020")).toBeInTheDocument();
+  });
+
+  it("shows the launch year on its own when there is no cuisine or price", () => {
+    const { container } = render(
+      <PlaceCard place={makePlace({ launched_at: "2012-09" })} labels={LABELS} />
+    );
+    expect(screen.getByText("Est. 2012")).toBeInTheDocument();
+    expect(container).not.toHaveTextContent("·");
+  });
+
+  it("shows no year without the label or a well-formed launched_at", () => {
+    const { established: _omit, ...withoutEstablished } = LABELS;
+    const { rerender } = render(
+      <PlaceCard place={makePlace({ launched_at: "2020-02" })} labels={withoutEstablished} />
+    );
+    expect(screen.queryByText(/2020/)).not.toBeInTheDocument();
+    rerender(<PlaceCard place={makePlace({ launched_at: "2020" })} labels={LABELS} />);
+    expect(screen.queryByText(/Est\./)).not.toBeInTheDocument();
+  });
+
   it("clamps an out-of-range price level instead of throwing", () => {
     render(<PlaceCard place={makePlace({ price_drinks: { price_score: 7 } })} labels={LABELS} />);
     expect(screen.getByLabelText("Price level 7 of 4")).toHaveTextContent("$$$$");

package/src/components/place-card.tsx

@@ -169,6 +169,12 @@ function PriceLevel({ level, label }: { level: number; label: string }) {
   );
 }
 
+/** The year out of the schema's `YYYY-MM`; anything else shows no year. */
+function launchYear(launchedAt: string | undefined): number | undefined {
+  const match = launchedAt ? /^(\d{4})-\d{2}$/.exec(launchedAt) : null;
+  return match ? Number(match[1]) : undefined;
+}
+
 const STATIC_ROOT_CLASSES = `group relative flex w-full select-none flex-col ${HOVER_MOTION} ${HOVER_LIFT_GRID_GROUP}`;
 const ROOT_CLASSES = `${STATIC_ROOT_CLASSES} cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:rounded-xl`;
 
@@ -202,6 +208,8 @@ export const PlaceCard = memo(function PlaceCard({
   const neighbourhood = place.areas?.[0]?.name;
   const priceLevel = place.price_dishes?.price_score ?? place.price_drinks?.price_score;
   const showPrice = priceLevel !== undefined && priceLevel > 0;
+  const year = labels.established ? launchYear(place.launched_at) : undefined;
+  const established = year !== undefined ? labels.established?.(year) : undefined;
   const ariaLabel = labels.viewDetails(place.name);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
@@ -277,11 +285,22 @@ export const PlaceCard = memo(function PlaceCard({
         </div>
 
         <div className="flex flex-col gap-0.5">
-          {(cuisine || showPrice) && (
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              {cuisine && <span className="capitalize">{cuisine}</span>}
-              {cuisine && showPrice && <span className="text-border">·</span>}
-              {showPrice && <PriceLevel level={priceLevel} label={labels.priceLevel(priceLevel)} />}
+          {/* Cuisine · price · launch year. At rail width the three can
+              outrun the card, so the cuisine is the part that gives way: the
+              price glyphs and the year are short and fixed. */}
+          {(cuisine || showPrice || established) && (
+            <div className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+              {cuisine && <span className="min-w-0 truncate capitalize">{cuisine}</span>}
+              {cuisine && showPrice && <span className="shrink-0 text-border">·</span>}
+              {showPrice && (
+                <span className="shrink-0">
+                  <PriceLevel level={priceLevel} label={labels.priceLevel(priceLevel)} />
+                </span>
+              )}
+              {established && (cuisine || showPrice) && (
+                <span className="shrink-0 text-border">·</span>
+              )}
+              {established && <span className="shrink-0 whitespace-nowrap">{established}</span>}
             </div>
           )}
 

package/src/components/place-types.ts

@@ -58,6 +58,12 @@ export type PlacePreview = {
    * bare storage key straight to `next/image`'s loader).
    */
   cover_url?: string
+  /**
+   * Year and month the place launched (`YYYY-MM`), as the schema ships it.
+   * The backend approximates it from the earliest review it holds, so it is a
+   * floor rather than a founding date. `<PlaceCard>` shows the year only.
+   */
+  launched_at?: string
 }
 
 export type PlaceHourBlock = { opens_at: number; closes_at: number }
@@ -193,6 +199,11 @@ export type PlaceCardLabels = {
   viewDetails: (name: string) => string
   /** Accessible name of the `$` price glyphs, e.g. "Price level 2 of 4". */
   priceLevel: (level: number) => string
+  /**
+   * The launch year on the meta line, e.g. "Est. 2020" / "Din 2020". Optional:
+   * without it the card shows no year even when `launched_at` is set.
+   */
+  established?: (year: number) => string
   grade: GradeAtomLabels
 }