@bearmenu/ui 0.8.49 → 0.8.51

package/src/components/menu-kitchen-list.tsx

@@ -1,5 +1,7 @@
 import { Check, ChevronRight, Clock, MessageSquare, Star } from "lucide-react";
+import { showsGradeAtom } from "../lib/grade";
 import { cn } from "../lib/utils";
+import { GradeAtom, type GradeAtomLabels } from "./grade-atom";
 import { Separator } from "./separator";
 import { Skeleton } from "./skeleton";
 import type { MenuKitchenPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
@@ -59,6 +61,13 @@ export type MenuKitchenListLabels = {
   openNow: string;
   /** Reveals the next page of rows, e.g. "Show 10 more". */
   showMore?: string;
+  /**
+   * The grade pill's labels. With them, a graded venue shows its BearMenu
+   * grade where the Google star was; the star stays only for a venue with no
+   * grade. Optional so existing callers keep compiling — without it every row
+   * shows the star, as before.
+   */
+  grade?: GradeAtomLabels;
 };
 
 /**
@@ -127,6 +136,31 @@ export function MenuKitchenList({
   );
 }
 
+function gradeShown(place: MenuKitchenPreview["place"], labels: MenuKitchenListLabels) {
+  return labels.grade !== undefined && showsGradeAtom(place.reviews_digest?.grade, "xs");
+}
+
+/** BearMenu's grade when the venue has one; Google's star only without it. */
+function KitchenRating({
+  place,
+  labels,
+}: {
+  place: MenuKitchenPreview["place"];
+  labels: MenuKitchenListLabels;
+}) {
+  const grade = place.reviews_digest?.grade;
+  if (labels.grade && showsGradeAtom(grade, "xs")) {
+    return <GradeAtom grade={grade} labels={labels.grade} size="xs" className="shrink-0" />;
+  }
+  if (!place.rating) return null;
+  return (
+    <>
+      <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
+      {place.rating.rating}
+    </>
+  );
+}
+
 function KitchenRow({
   kitchen,
   labels,
@@ -189,13 +223,8 @@ function KitchenRow({
           {place.name}
         </span>
         <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">
-          {place.rating && (
-            <>
-              <Star className="h-[11px] w-[11px] shrink-0" aria-hidden />
-              {place.rating.rating}
-              {kitchen.metaLabel && " · "}
-            </>
-          )}
+          <KitchenRating place={place} labels={labels} />
+          {kitchen.metaLabel && (gradeShown(place, labels) || place.rating) && " · "}
           {kitchen.metaLabel}
         </span>
         {kitchen.hoursLabel && (

package/src/components/sliding-panels.test.tsx

@@ -18,10 +18,7 @@ const basePanels: Panel[] = [
 const panelWrappers = () =>
   Array.from(document.querySelectorAll<HTMLElement>('[data-slot="sliding-panel"]'));
 
-// The back button is icon-only, so it is the one button in the active panel
-// with no text content.
-const backButton = () =>
-  screen.getAllByRole("button").filter((button) => button.textContent === "")[0];
+const backButton = () => screen.getByRole("button", { name: "Back" });
 
 function Controlled({ initial = "one" }: { initial?: string }) {
   const [current, setCurrent] = useState(initial);
@@ -113,4 +110,29 @@ describe("SlidingPanels", () => {
     await user.click(backButton());
     expect(onPanelChange).toHaveBeenCalledWith("root");
   });
+
+  it("names the icon-only back button with backAriaLabel", () => {
+    const panels: Panel[] = [
+      { id: "root", content: <button type="button">Root</button> },
+      {
+        id: "child",
+        showBackButton: true,
+        backButtonLabel: "Categorii",
+        backAriaLabel: "Înapoi",
+        content: <button type="button">Child</button>,
+      },
+    ];
+    render(<SlidingPanels panels={panels} currentPanel="child" onPanelChange={vi.fn()} />);
+    // The heading beside it is the panel title, not the button's name
+    expect(screen.getByRole("button", { name: "Înapoi" })).toBeInTheDocument();
+  });
+
+  it("drops the slide and height transitions under reduced motion", () => {
+    render(<Controlled initial="two" />);
+    const container = document.querySelector<HTMLElement>('[data-slot="sliding-panels"]');
+    expect(container?.className).toContain("motion-reduce:transition-none");
+    for (const panel of panelWrappers()) {
+      expect(panel.className).toContain("motion-reduce:transition-none");
+    }
+  });
 });

package/src/components/sliding-panels.tsx

@@ -10,7 +10,13 @@ export interface Panel {
   id: string;
   content: React.ReactNode;
   showBackButton?: boolean;
+  /** Heading shown next to the back button (the panel's title, not the button's name). */
   backButtonLabel?: string;
+  /**
+   * Accessible name of the icon-only back button, localized by the caller.
+   * Falls back to "Back"; without a name screen readers announce only "button".
+   */
+  backAriaLabel?: string;
   onBack?: () => void;
   // When set, the panel is treated as a child of `parentId`. Siblings (panels
   // sharing the same parent) stay off-screen on the right when not active —
@@ -84,7 +90,7 @@ export const SlidingPanels = ({
     <div
       data-slot="sliding-panels"
       className={cn(
-        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
         className
       )}
       style={{ height: containerHeight, overflowClipMargin: "8px" }}
@@ -105,7 +111,7 @@ export const SlidingPanels = ({
             data-slot="sliding-panel"
             data-state={isActive ? "active" : "inactive"}
             className={cn(
-              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
               isActive && "translate-x-0",
               isLeft && "-translate-x-[calc(100%+8px)]",
               isRight && "translate-x-[calc(100%+8px)]"
@@ -125,8 +131,13 @@ export const SlidingPanels = ({
           >
             {panel.showBackButton && (
               <div className="flex items-center gap-2 mb-4">
-                <Button variant="ghost" size="icon" onClick={handleBack}>
-                  <ChevronLeft className="h-4 w-4" />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleBack}
+                  aria-label={panel.backAriaLabel ?? "Back"}
+                >
+                  <ChevronLeft className="h-4 w-4" aria-hidden />
                 </Button>
                 {panel.backButtonLabel && (
                   <h3 className="font-semibold">{panel.backButtonLabel}</h3>