@bearmenu/ui 0.8.52 → 0.8.54

package/src/components/menu-item.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuItem, type MenuItemLabels } from "./menu-item";
+import type { MenuItemPreview } from "./menu-types";
+import { mockGradients } from "./menu-mocks";
+
+const tagliatelle: MenuItemPreview = {
+  id: "i1",
+  slug: "truffle-tagliatelle",
+  name: "Truffle Tagliatelle",
+  kind: "dish",
+  category_slug: "pasta",
+  description: "Fresh pasta, black truffle, parmesan.",
+  mentions: 17,
+  sizes_and_prices: [{ size: 320, price: 62 }],
+};
+
+const mentionLabels: MenuItemLabels = {
+  currency: "lei",
+  mentions: (count) => `Mentioned in ${count} reviews`,
+  signature: "SIGNATURE",
+  mentioned: "MENTIONED",
+};
+
+// The label and the kind move together: "Praised in" with the thumbs-up,
+// "Mentioned in" with the quote glyph.
+const praiseLabels: MenuItemLabels = {
+  ...mentionLabels,
+  mentions: (count) => `Praised in ${count} reviews`,
+};
+
+const meta: Meta<typeof MenuItem> = {
+  title: "Menu/MenuItem",
+  component: MenuItem,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[390px] bg-background">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    item: tagliatelle,
+    labels: mentionLabels,
+    formatPrice: String,
+    markGradient: mockGradients.pasta,
+    onOpen: () => {},
+    onMentions: () => {},
+  },
+  argTypes: {
+    countKind: { control: "inline-radio", options: ["mentions", "praise"] },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "THE menu row. The count at the right edge is drawn with one of two glyphs, set by `countKind`. `\"mentions\"` (the default) counts every review that named the item, complaints included, and takes the quote glyph. `\"praise\"` counts only the reviews that praised it and takes a thumbs-up. A thumbs-up never sits on a count that includes complaints, so pass `\"praise\"` only when the number is praise.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuItem>;
+
+/** The default: every mention, complaints included. Quote glyph. */
+export const Mentions: Story = {};
+
+/** A praise-only count. Thumbs-up, in the same slot as the quote glyph. */
+export const Praise: Story = {
+  args: { countKind: "praise", labels: praiseLabels },
+};
+
+/** The two kinds stacked, so the glyphs can be compared in place. */
+export const CountKinds: Story = {
+  render: (args) => (
+    <div className="divide-y divide-border">
+      <MenuItem {...args} countKind="mentions" labels={mentionLabels} />
+      <MenuItem {...args} countKind="praise" labels={praiseLabels} />
+    </div>
+  ),
+};

package/src/components/menu-item.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MenuItem, type MenuItemLabels } from "./menu-item";
+import { MentionSignal, MenuItem, type MenuItemLabels } from "./menu-item";
 import type { MenuItemPreview } from "./menu-types";
 
 const wine: MenuItemPreview = {
@@ -55,3 +55,57 @@ describe("MenuItem external rating", () => {
     expect(screen.getByRole("img", { name: "Rated 3.9 on Vivino" })).toBeTruthy();
   });
 });
+
+describe("MenuItem count glyph", () => {
+  const praiseLabels: MenuItemLabels = {
+    ...labels,
+    mentions: (count) => `Praised in ${count} reviews`,
+  };
+
+  it("draws the quote glyph when no kind is passed, so existing callers look the same", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} />);
+    const count = screen.getByLabelText("Mentioned in 4 reviews");
+    const glyph = count.querySelector("svg");
+    expect(glyph).toHaveClass("lucide-message-square-quote", "h-3.5", "w-3.5", "opacity-60");
+    expect(count.querySelector(".lucide-thumbs-up")).toBeNull();
+  });
+
+  it("draws the quote glyph for raw mentions, which can include complaints", () => {
+    render(<MenuItem item={wine} labels={labels} formatPrice={String} countKind="mentions" />);
+    const count = screen.getByLabelText("Mentioned in 4 reviews");
+    expect(count.querySelector("svg")).toHaveClass("lucide-message-square-quote");
+    expect(count.querySelector(".lucide-thumbs-up")).toBeNull();
+  });
+
+  it("draws a thumbs-up in the quote glyph's slot when the count is praise", () => {
+    render(
+      <MenuItem
+        item={wine}
+        labels={praiseLabels}
+        formatPrice={String}
+        countKind="praise"
+        onMentions={() => {}}
+      />
+    );
+    const count = screen.getByRole("button", { name: "Praised in 4 reviews" });
+    const glyph = count.querySelector("svg");
+    expect(glyph).toHaveClass("lucide-thumbs-up", "h-3.5", "w-3.5", "opacity-60");
+    expect(glyph).toHaveAttribute("aria-hidden", "true");
+    expect(count.querySelector(".lucide-message-square-quote")).toBeNull();
+    expect(count.textContent).toBe("4");
+  });
+});
+
+describe("MentionSignal count glyph", () => {
+  it("draws the quote glyph by default and the thumbs-up only for praise", () => {
+    const { rerender } = render(<MentionSignal label="Mentioned in 9 reviews" count={9} />);
+    expect(screen.getByLabelText("Mentioned in 9 reviews").querySelector("svg")).toHaveClass(
+      "lucide-message-square-quote"
+    );
+
+    rerender(<MentionSignal label="Praised in 9 reviews" count={9} countKind="praise" />);
+    expect(screen.getByLabelText("Praised in 9 reviews").querySelector("svg")).toHaveClass(
+      "lucide-thumbs-up"
+    );
+  });
+});

package/src/components/menu-item.tsx

@@ -1,5 +1,5 @@
 import { memo } from "react";
-import { MessageSquareQuote, Star } from "lucide-react";
+import { MessageSquareQuote, Star, ThumbsUp } from "lucide-react";
 import { cn } from "../lib/utils";
 import { SignatureChip } from "./signature-chip";
 import type { MenuItemPreview, MenuLinkProps, MenuLinkComponent } from "./menu-types";
@@ -71,6 +71,19 @@ export type MenuItemLabels = {
   externalRating?: (score: string) => string;
 };
 
+/**
+ * What the count beside the row counts.
+ *
+ * - `"mentions"`: every review that named the item, complaints included. Drawn
+ *   with the quote glyph.
+ * - `"praise"`: only the reviews that praised it. Drawn with a thumbs-up.
+ *
+ * The caller decides, because only the caller knows which number it passed in
+ * `item.mentions`. A thumbs-up must never sit on a count that includes
+ * complaints, so `"mentions"` is the default.
+ */
+export type MenuItemCountKind = "praise" | "mentions";
+
 export type MenuItemProps = {
   item: MenuItemPreview;
   labels: MenuItemLabels;
@@ -92,6 +105,12 @@ export type MenuItemProps = {
   onSignatureEvidence?: () => void;
   /** Opens the reviews behind the mention count. */
   onMentions?: () => void;
+  /**
+   * Whether the count is praise or every mention. Sets the glyph before the
+   * numeral: a thumbs-up for `"praise"`, the quote glyph for `"mentions"`.
+   * Defaults to `"mentions"`. Keep `labels.mentions` in step with it.
+   */
+  countKind?: MenuItemCountKind;
   /**
    * An outside aggregate score for the item (a wine's Vivino rating, a beer's
    * Untappd one), shown as a star and the score beside the mention count.
@@ -136,7 +155,9 @@ export type MenuItemProps = {
 };
 
 /**
- * The mention count: a filled quote glyph and the numeral, pinned right.
+ * The mention count: a glyph and the numeral, pinned right. The glyph is the
+ * quote glyph for every mention, or a thumbs-up when the count is praise only
+ * (see `MenuItemCountKind`).
  *
  * Deliberately NOT a badge — a chip would add a filled shape to a row that has
  * none, and would read as a status label the venue was given rather than a
@@ -147,18 +168,22 @@ export function MentionSignal({
   count,
   onMentions,
   formatCount = String,
+  countKind = "mentions",
 }: {
   label: string;
   count: number;
   onMentions?: () => void;
   formatCount?: (value: number) => string;
+  countKind?: MenuItemCountKind;
 }) {
   /* The glyph and the numeral have to read as ONE object: `gap-0.5` instead of
      4, and the glyph lighter and a step smaller than the numeral so it reads as
-     a prefix mark qualifying the value rather than a peer competing with it. */
+     a prefix mark qualifying the value rather than a peer competing with it.
+     Both glyphs take the same slot, so switching the kind moves nothing. */
+  const Glyph = countKind === "praise" ? ThumbsUp : MessageSquareQuote;
   const content = (
     <span className="inline-flex items-center gap-0.5">
-      <MessageSquareQuote className="h-3.5 w-3.5 opacity-60" aria-hidden />
+      <Glyph className="h-3.5 w-3.5 opacity-60" aria-hidden />
       <span className="tabular-nums">{formatCount(count)}</span>
     </span>
   );
@@ -233,6 +258,7 @@ export const MenuItem = memo(function MenuItem({
   signatureTier = "strong",
   onSignatureEvidence,
   onMentions,
+  countKind = "mentions",
   externalRating,
   formatRating = (score) => score.toFixed(1),
   markGradient,
@@ -455,6 +481,7 @@ export const MenuItem = memo(function MenuItem({
                     count={mentionCount}
                     onMentions={onMentions}
                     formatCount={formatCount}
+                    countKind={countKind}
                   />
                 )}
               </div>

package/src/components/popover.tsx

@@ -27,7 +27,9 @@ const PopoverContent = React.forwardRef<
       // than escape.
       collisionPadding={collisionPadding}
       className={cn(
-        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
+        // Drawers and sheets use layer 1000. A body-portalled popover must
+        // clear that layer or its visible actions cannot receive a pointer.
+        "z-[1010] w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl outline-none",
         "max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className