@bearmenu/ui 0.8.13 → 0.8.14

package/src/components/menu-family-block.tsx

@@ -152,6 +152,8 @@ export function MenuFamilyBlock({
   // see — the photograph is one of them, not a venue on its own.
   const venues = family.venues ?? [];
   const overflow = Math.max(family.venueCount - venues.length, 0);
+  // The corner pill: the caller's badge when it has one, else the overflow.
+  const pill = family.badge ?? (overflow > 0 ? labels.more(overflow) : undefined);
   const initial = (family.name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
 
   return (
@@ -182,19 +184,33 @@ export function MenuFamilyBlock({
             TEXT_SCRIM
           )}
         >
-          {overflow > 0 && (
+          {pill && (
             <span className="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
-              {labels.more(overflow)}
+              {pill}
             </span>
           )}
 
+          {family.kicker && (
+            <span className="mb-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-white/70">
+              {family.kicker}
+            </span>
+          )}
           <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
             {family.name}
           </h3>
-          {/* The count and the band on one line: two facts about the family,
-              read together — "96 kitchens, 14–46 lei". */}
+          {/* The count, the facts and the band on one line: a few facts about
+              the family, read together — "96 kitchens, 14–46 lei" or
+              "70 kitchens · 50 names · 8–44 lei". */}
           <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[13px] font-medium tabular-nums text-white/70">
             {labels.venueUnit(family.venueCount)}
+            {family.facts?.map((fact) => (
+              <span key={fact} className="inline-flex items-center gap-2.5">
+                <span aria-hidden className="text-white/40">
+                  ·
+                </span>
+                {fact}
+              </span>
+            ))}
             {family.priceBandLabel && (
               <span
                 className="inline-flex items-center gap-1"

package/src/components/menu-intent-hero.tsx

@@ -55,7 +55,7 @@ export type MenuIntentHeroProps = {
    * Finished CSS gradient for the ground, e.g. `linear-gradient(140deg, …)`.
    *
    * A gradient rather than a token name, for the same reason `<MenuField>` and
-   * `<MenuFamilyTiles>` take one: the hue tables are app-owned, and a component
+   * `<DoorwayTiles>` take one: the hue tables are app-owned, and a component
    * referencing `var(--h-pizza)` renders an unstyled panel in any consumer that
    * does not define it. Missing, the panel falls back to the foreground colour
    * — visibly unstyled rather than white text on white.

package/src/components/menu-mocks.ts

@@ -25,13 +25,13 @@ import type {
   MenuFilterChip,
   MenuIndexEntry,
   MenuIntentFigure,
-  MenuFamilyTile,
   MenuItemPreview,
   MenuKitchenPreview,
   MenuLoosenOption,
   MenuVenuePreview,
   QaItem,
 } from "./menu-types";
+import type { DoorwayTile } from "./doorway-tiles";
 import type { PlacePreview } from "./place-types";
 
 export const mockGradients = {
@@ -387,7 +387,7 @@ const familyPhoto = (hue: number) =>
  * venue's, never a plate's; the last one ships without, so the story shows
  * the initial fallback beside six real tiles.
  */
-export const mockFamilyTiles: MenuFamilyTile[] = [
+export const mockFamilyTiles: DoorwayTile[] = [
   { slug: "italian", label: "Italian", countLabel: "66", href: "/menu/cuisines/italian", gradient: familyGradient(38), photoUrl: familyPhoto(30) },
   { slug: "romanian", label: "Romanian", countLabel: "64", href: "/menu/cuisines/romanian", gradient: familyGradient(25), photoUrl: familyPhoto(10) },
   { slug: "breakfast-brunch", label: "Breakfast & brunch", countLabel: "64", href: "/menu/cuisines/breakfast-brunch", gradient: familyGradient(82), photoUrl: familyPhoto(45) },
@@ -398,7 +398,7 @@ export const mockFamilyTiles: MenuFamilyTile[] = [
 ];
 
 /** The closing tile: stone, so it reads as the index and not as an eighth cuisine. */
-export const mockFamilyTilesAll: MenuFamilyTile = {
+export const mockFamilyTilesAll: DoorwayTile = {
   slug: "all",
   label: "All 38 cuisines",
   countLabel: "The full index",
@@ -407,6 +407,42 @@ export const mockFamilyTilesAll: MenuFamilyTile = {
   photoUrl: familyPhoto(60),
 };
 
+/** An occasion's ground: a mood hue over a room photograph. */
+const occasionGradient = (l: number, c: number, h: number) =>
+  `linear-gradient(150deg, oklch(${l} ${c} ${h}), color-mix(in oklab, oklch(${l} ${c} ${h}) 82%, black))`;
+
+/** A room photograph stand-in with the mid-tone structure multiply needs. */
+const occasionPhoto = (hue: number) =>
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="640" height="320"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="hsl(${hue} 20% 88%)"/><stop offset="1" stop-color="hsl(${hue} 18% 52%)"/></linearGradient></defs><rect width="640" height="320" fill="url(#g)"/><circle cx="420" cy="120" r="70" fill="white" opacity=".6"/><rect x="60" y="200" width="220" height="80" fill="hsl(${hue} 15% 40%)" opacity=".5"/></svg>`
+  );
+
+/**
+ * The homepage's seven occasions in the day's order, ground treatment: the
+ * mood's hue multiplied over a room. The last one ships without a photograph
+ * so the story shows the initial on the bare hue.
+ */
+export const mockOccasionTiles: DoorwayTile[] = [
+  { slug: "brunch", label: "Brunch", countLabel: "314 places", href: "/menu/cuisines/breakfast-brunch", gradient: occasionGradient(0.62, 0.14, 82), photoUrl: occasionPhoto(40) },
+  { slug: "laptop-and-coffee", label: "Laptop and coffee", countLabel: "52 places", href: "/occasions/laptop-and-coffee", gradient: occasionGradient(0.44, 0.1, 52), photoUrl: occasionPhoto(30) },
+  { slug: "quiet", label: "Somewhere quiet", countLabel: "108 places", href: "/occasions/quiet", gradient: occasionGradient(0.38, 0.09, 255), photoUrl: occasionPhoto(210) },
+  { slug: "something-sweet", label: "Something sweet", countLabel: "120 places", href: "/occasions/something-sweet", gradient: occasionGradient(0.5, 0.08, 335), photoUrl: occasionPhoto(330) },
+  { slug: "with-friends", label: "With friends", countLabel: "158 places", href: "/occasions/with-friends", gradient: occasionGradient(0.6, 0.14, 358), photoUrl: occasionPhoto(10) },
+  { slug: "date-night", label: "Date night", countLabel: "53 places", href: "/occasions/date-night", gradient: occasionGradient(0.44, 0.15, 18), photoUrl: occasionPhoto(0) },
+  { slug: "late-night", label: "Late night", countLabel: "59 places", href: "/occasions/late-night", gradient: occasionGradient(0.34, 0.1, 300) },
+];
+
+/** The closing tile: stone, so it reads as the index and not as an eighth mood. */
+export const mockOccasionTilesAll: DoorwayTile = {
+  slug: "all",
+  label: "All occasions",
+  countLabel: "14 sets",
+  href: "/occasions",
+  gradient: "linear-gradient(150deg, oklch(0.50 0.03 70), oklch(0.40 0.028 64))",
+  photoUrl: occasionPhoto(60),
+};
+
 /** Formatters the stories pass. Real callers inject locale-aware ones. */
 export const mockFormatters = {
   price: (value: number) => `${value} lei`,

package/src/components/menu-types.ts

@@ -216,38 +216,6 @@ export type MenuVenueSignature = {
   isSignature?: boolean
 }
 
-/**
- * A family tile — a cuisine on the dishes tab, a going-out family on the
- * drinks tab — as the hub's doorway grid draws it: a hue, a name, a venue
- * count and one venue's photograph.
- *
- * `href` is required: a tile that cannot resolve to a real destination is not
- * rendered rather than linking nowhere.
- */
-export type MenuFamilyTile = {
-  slug: string
-  label: string
-  /**
-   * The venue count, already formatted by the caller — "64", "1,204" — because
-   * thousands separators are locale-dependent and the DS owns no locale.
-   */
-  countLabel?: string
-  href: string
-  /**
-   * Finished CSS gradient for the tile's ground, e.g.
-   * `linear-gradient(150deg, …)`.
-   *
-   * A gradient rather than a token name, for the same reason `<MenuField>`
-   * takes one: the hue tables are app-owned, and a component referencing
-   * `var(--h-pizza)` renders an invisible tile in any consumer that does not
-   * happen to define that variable. A missing gradient falls back to `bg-muted`
-   * — visible and obviously unstyled, rather than white text on white.
-   */
-  gradient?: string
-  /** Pre-resolved VENUE photograph. Venue photography is real; item photography is not. */
-  photoUrl?: string
-}
-
 /**
  * One figure in the intent hero — a number the reader can tap to filter by.
  *
@@ -380,7 +348,9 @@ export type MenuIndexEntry = {
 }
 
 /**
- * A family on the cuisines index — the hub's card, opened out sideways.
+ * A family on the cuisines index — the hub's card, opened out sideways — and,
+ * with `kicker` / `facts` / `badge`, a concept on the dishes index: the same
+ * card with the unit swapped, as the design draws it.
  *
  * Deliberately thin. The reader here is choosing a cuisine, not a venue, and
  * every field the block does NOT carry is a decision the next page owns.
@@ -388,7 +358,21 @@ export type MenuIndexEntry = {
 export type MenuFamilyBlockPreview = {
   slug: string
   name: string
+  /** Small caps over the name, e.g. "DESSERT CONCEPT". Composed by the caller. */
+  kicker?: string
   venueCount: number
+  /**
+   * Further pre-formatted facts on the count line, after the unit and before
+   * the price band, e.g. `["50 names"]`. Each is one fact; the block draws the
+   * separators.
+   */
+  facts?: string[]
+  /**
+   * The pill in the photo's corner, e.g. "168 mentions". When given it replaces
+   * the "+N more" overflow pill, which the concept card has no room for beside
+   * a name-chip overflow that already says it.
+   */
+  badge?: string
   /** Facet chips. Labels only — the block never prints their counts. */
   chips?: MenuFamilyChip[]
   /** Composed price band, e.g. "22–86 lei". */

package/src/components/motion-icon-actions.test.tsx

@@ -0,0 +1,115 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import * as React from "react";
+
+import {
+  MotionArrow,
+  MotionCaret,
+  MotionX,
+  MotionCircleX,
+  MotionExternalLink,
+  MotionSend,
+  MotionNavigation,
+  MotionLocate,
+  MotionMaximize,
+  MotionPhone,
+  MotionMail,
+  MotionFlag,
+  MotionLogIn,
+  MotionLogOut,
+  MotionSettings,
+} from "./motion-icon-actions";
+import {
+  MotionLayoutGrid,
+  MotionWine,
+  MotionMap,
+  MotionFlame,
+  MotionCalendarClock,
+  MotionList,
+} from "./motion-icon-set";
+import type { MotionIconProps } from "./motion-icon";
+
+/**
+ * Real framer-motion, no mock: every glyph has to mount, pose and replay
+ * without throwing, in both directions where it has one. The gestures
+ * themselves are judged in the Storybook gallery at 16px and 22px — nothing
+ * here can see whether a fold reads.
+ */
+const GLYPHS: Array<[string, React.ComponentType<MotionIconProps>]> = [
+  ["Arrow →", (p) => <MotionArrow {...p} />],
+  ["Arrow ←", (p) => <MotionArrow direction="left" {...p} />],
+  ["Caret →", (p) => <MotionCaret {...p} />],
+  ["Caret ←", (p) => <MotionCaret direction="left" {...p} />],
+  ["X", MotionX],
+  ["CircleX", MotionCircleX],
+  ["ExternalLink", MotionExternalLink],
+  ["Send", MotionSend],
+  ["Navigation", MotionNavigation],
+  ["Locate", MotionLocate],
+  ["Maximize", MotionMaximize],
+  ["Phone", MotionPhone],
+  ["Mail", MotionMail],
+  ["Flag", MotionFlag],
+  ["LogIn", MotionLogIn],
+  ["LogOut", MotionLogOut],
+  ["Settings", MotionSettings],
+  ["LayoutGrid", MotionLayoutGrid],
+  ["Wine", MotionWine],
+  ["Map", MotionMap],
+  ["Flame", MotionFlame],
+  ["CalendarClock", MotionCalendarClock],
+  ["List", MotionList],
+];
+
+describe.each(GLYPHS)("%s", (_name, Icon) => {
+  it("mounts at rest, holds, and replays without throwing", () => {
+    const { container, rerender } = render(<Icon active={false} replayToken={0} />);
+    const svg = container.querySelector("svg");
+    expect(svg).not.toBeNull();
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+    expect(svg).toHaveAttribute("viewBox", "0 0 24 24");
+
+    rerender(<Icon active replayToken={1} />);
+    rerender(<Icon active={false} replayToken={2} />);
+    expect(container.querySelector("svg")).not.toBeNull();
+  });
+});
+
+describe("MotionArrow / MotionCaret", () => {
+  it("vendor the mirrored lucide paths rather than flipping the right-hand glyph", () => {
+    const right = render(<MotionArrow />).container.innerHTML;
+    const left = render(<MotionArrow direction="left" />).container.innerHTML;
+    expect(right).toContain('d="M5 12h14"');
+    expect(left).toContain('d="M19 12H5"');
+  });
+});
+
+describe("MotionCalendarClock", () => {
+  it("draws the elapsed wedge with butt caps so it stays a pie, not a blob", () => {
+    const { container } = render(<MotionCalendarClock />);
+    const wedge = container.querySelector('circle[r="2"]');
+    expect(wedge).toHaveAttribute("stroke-linecap", "butt");
+    expect(wedge).toHaveAttribute("stroke-width", "4");
+  });
+
+  it("is empty on first paint — the frame before the pose effect runs", () => {
+    // Without these two static attributes an un-dashed r=2 / width-4 circle
+    // is a solid disc on the face for one frame on every mount.
+    const { container } = render(<MotionCalendarClock />);
+    const wedge = container.querySelector('circle[r="2"]');
+    expect(wedge).toHaveAttribute("pathLength", "1");
+    expect(wedge).toHaveAttribute("stroke-dasharray", "0 1");
+  });
+});
+
+describe("MotionLogIn / MotionLogOut", () => {
+  it("clip the reel so the arriving arrow never draws over the label beside the button", () => {
+    const { container: inn } = render(<MotionLogIn />);
+    const { container: out } = render(<MotionLogOut />);
+    expect(inn.querySelector("clipPath rect")).toHaveAttribute("width", "17");
+    expect(out.querySelector("clipPath rect")).toHaveAttribute("x", "8");
+    // Two arrows each: the departing one and the one that takes its place.
+    expect(inn.querySelectorAll('path[d="m10 17 5-5-5-5"]')).toHaveLength(2);
+    expect(out.querySelectorAll('path[d="m16 17 5-5-5-5"]')).toHaveLength(2);
+  });
+});