feat: allow MenuItems to be router links

nulogy · Dec 4, 2024 · 5f3139d · 5f3139d
1 parent 0436e06
commit 5f3139d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/src/TopBar/TopBar.styled.tsx b/src/TopBar/TopBar.styled.tsx
@@ -124,7 +124,7 @@ const Overlay = styled(motion(DialogOverlay))(({ theme }) => ({
   backgroundColor: transparentize(0.85, theme.colors.white),
 }));
 
-const TileLink = styled(motion.a)(({ theme }) => ({
+const TileLink = styled.a(({ theme }) => ({
   backgroundColor: transparentize(0.15)(theme.colors.blackBlue),
   borderRadius: theme.radii.large,
   display: "flex",
@@ -138,7 +138,7 @@ const TileLink = styled(motion.a)(({ theme }) => ({
   textOverflow: "hidden",
 }));
 
-const StyledMenuItem = styled.li(({ theme }) => ({
+const StyledMenuItem = styled(motion.li)(({ theme }) => ({
   "&:only-child": {
     [`@media (min-width: ${theme.breakpoints.medium})`]: {
       gridColumn: "span 2",

diff --git a/src/TopBar/components/MenuItem.tsx b/src/TopBar/components/MenuItem.tsx
@@ -39,18 +39,11 @@ interface MenuItemProps extends ComponentProps<typeof TileLink> {
 
 export function MenuItem({ description, title, icon, ...props }: MenuItemProps) {
   return (
-    <StyledMenuItem>
-      <TileLink initial="hidden" animate="visible" exit="hidden" variants={fadeInVariants} {...props}>
+    <StyledMenuItem initial="hidden" animate="visible" exit="hidden" variants={fadeInVariants}>
+      <TileLink {...props}>
         <Icon icon={icon} size="x3" />
         <Flex flexDirection="column" justifyContent="center">
-          <MotionText
-            // maxWidth="14ch"
-            // textOverflow="ellipsis"
-            // overflow="hidden"
-            fontWeight="medium"
-            fontSize="md"
-            lineHeight="base"
-          >
+          <MotionText fontWeight="medium" fontSize="md" lineHeight="base">
             {title}
           </MotionText>
           <MotionText fontSize="xs">{description}</MotionText>

diff --git a/src/TopBar/stories/TopBar.menu.story.tsx b/src/TopBar/stories/TopBar.menu.story.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
 import { menuItems } from "./fixtures";
 
@@ -56,3 +57,17 @@ export const WithThreeItems = () => (
     </TopBar.Menu>
   </TopBar.Root>
 );
+
+export const WithRouterLinks = () => (
+  <TopBar.Root>
+    <TopBar.BackLink href="#">Cycle counts</TopBar.BackLink>
+    <TopBar.PageTitle>Cycle count #3992</TopBar.PageTitle>
+    <TopBar.Menu defaultOpened>
+      <BrowserRouter>
+        {[{ ...menuItems[0], as: Link, to: "/home" }].map((props) => (
+          <TopBar.MenuItem key={props.title} {...props} />
+        ))}
+      </BrowserRouter>
+    </TopBar.Menu>
+  </TopBar.Root>
+);
diff --git a/src/TopBar/stories/fixtures.tsx b/src/TopBar/stories/fixtures.tsx
@@ -1,13 +1,11 @@
-import { ReactRouterLink } from "react-router-dom";
 import { MenuItems } from "../components/MenuItem";
 
 export const menuItems: MenuItems = [
   {
     title: "Home",
     description: "Go to the home page",
     icon: "home",
-    as: ReactRouterLink,
-    to: "/home",
+    href: "/home",
   },
   {
     title: "Historical orders",
@@ -18,13 +16,12 @@ export const menuItems: MenuItems = [
   {
     title: "Pallet inspection",
     icon: "barcode",
-    to: "/pallet-inspection",
-    as: ReactRouterLink,
+    href: "/historical-orders",
   },
   {
     title: "Pick Schedule",
     icon: "calendarToday",
-    href: "#",
+    href: "/pick-schedule",
   },
   {
     title: "Settings",