refactor(core): change items prop to link in Header (bigcommerce#1225)

zackangelo · Aug 5, 2024 · 127f3b6 · 127f3b6
1 parent 0661e53
commit 127f3b6
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 24 deletions.
diff --git a/.changeset/afraid-drinks-worry.md b/.changeset/afraid-drinks-worry.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Change prop `items` to `links` in Header.
diff --git a/core/components/header/index.tsx b/core/components/header/index.tsx
@@ -62,7 +62,7 @@ export const Header = async ({ cart, data }: Props) => {
   const logo = data.settings && <StoreLogo data={data.settings} />;
 
   return (
-    <ComponentsHeader items={categoryTree} logo={logo}>
+    <ComponentsHeader links={categoryTree} logo={logo}>
       <QuickSearch>
         <Link className="overflow-hidden text-ellipsis py-3" href="/">
           {logo}

diff --git a/core/components/ui/header/header.tsx b/core/components/ui/header/header.tsx
@@ -14,11 +14,11 @@ interface Children {
 }
 
 interface Props extends ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> {
-  items: Array<{ name: string; path: string; children?: Children[] }>;
+  links: Array<{ name: string; path: string; children?: Children[] }>;
   logo: ReactNode;
 }
 
-const Header = ({ children, className, items, logo }: Props) => (
+const Header = ({ children, className, links, logo }: Props) => (
   <div className={cn('relative', className)}>
     <header className="flex h-[92px] items-center justify-between gap-1 overflow-y-visible bg-white px-4 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0">
       <Link className="overflow-hidden text-ellipsis py-3" href="/">
@@ -27,20 +27,20 @@ const Header = ({ children, className, items, logo }: Props) => (
 
       <NavigationMenuPrimitive.Root className="hidden lg:block">
         <NavigationMenuPrimitive.List className="flex items-center gap-2 lg:gap-4">
-          {items.map((item) =>
-            item.children && item.children.length > 0 ? (
-              <NavigationMenuPrimitive.Item key={item.path}>
+          {links.map((link) =>
+            link.children && link.children.length > 0 ? (
+              <NavigationMenuPrimitive.Item key={link.path}>
                 <NavigationMenuPrimitive.Trigger className="group/button flex items-center font-semibold hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20">
-                  <Link className="p-3 font-semibold" href={item.path}>
-                    {item.name}
+                  <Link className="p-3 font-semibold" href={link.path}>
+                    {link.name}
                   </Link>
                   <ChevronDown
                     aria-hidden="true"
                     className="cursor-pointer transition duration-200 group-data-[state=open]/button:-rotate-180"
                   />
                 </NavigationMenuPrimitive.Trigger>
                 <NavigationMenuPrimitive.Content className="flex gap-20 2xl:container data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0">
-                  {item.children.map((child) => (
+                  {link.children.map((child) => (
                     <ul className="flex flex-col" key={child.path}>
                       <li>
                         <NavigationMenuPrimitive.Link asChild>
@@ -65,10 +65,10 @@ const Header = ({ children, className, items, logo }: Props) => (
                 </NavigationMenuPrimitive.Content>
               </NavigationMenuPrimitive.Item>
             ) : (
-              <NavigationMenuPrimitive.Item key={item.path}>
+              <NavigationMenuPrimitive.Item key={link.path}>
                 <NavigationMenuPrimitive.Link asChild>
-                  <Link className="p-3 font-semibold" href={item.path}>
-                    {item.name}
+                  <Link className="p-3 font-semibold" href={link.path}>
+                    {link.name}
                   </Link>
                 </NavigationMenuPrimitive.Link>
               </NavigationMenuPrimitive.Item>
@@ -82,7 +82,7 @@ const Header = ({ children, className, items, logo }: Props) => (
       <div className="flex items-center gap-2 lg:gap-4">
         <nav className="flex gap-2 lg:gap-4">{children}</nav>
 
-        <MobileNav items={items} logo={logo} />
+        <MobileNav links={links} logo={logo} />
       </div>
     </header>
   </div>

diff --git a/core/components/ui/header/mobile-nav.tsx b/core/components/ui/header/mobile-nav.tsx
@@ -16,11 +16,11 @@ interface Children {
 }
 
 interface Props {
-  items: Array<{ name: string; path: string; children?: Children[] }>;
+  links: Array<{ name: string; path: string; children?: Children[] }>;
   logo: ReactNode;
 }
 
-export const MobileNav = ({ items, logo }: Props) => {
+export const MobileNav = ({ links, logo }: Props) => {
   const [open, setOpen] = useState(false);
 
   return (
@@ -54,24 +54,24 @@ export const MobileNav = ({ items, logo }: Props) => {
           </div>
           <NavigationMenuPrimitive.Root orientation="vertical">
             <NavigationMenuPrimitive.List className="flex flex-col gap-2 pb-6 lg:gap-4">
-              {items.map((item) =>
-                item.children && item.children.length > 0 ? (
-                  <NavigationMenuPrimitive.Item key={item.path}>
+              {links.map((link) =>
+                link.children && link.children.length > 0 ? (
+                  <NavigationMenuPrimitive.Item key={link.path}>
                     <NavigationMenuPrimitive.Trigger className="group/button flex w-full items-center justify-between p-3 ps-0 font-semibold hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20">
                       <Link
                         className="font-semibold"
-                        href={item.path}
+                        href={link.path}
                         onClick={() => setOpen(false)}
                       >
-                        {item.name}
+                        {link.name}
                       </Link>
                       <ChevronDown
                         aria-hidden="true"
                         className="cursor-pointer transition duration-200 group-data-[state=open]/button:-rotate-180"
                       />
                     </NavigationMenuPrimitive.Trigger>
                     <NavigationMenuPrimitive.Content className="flex flex-col gap-4 py-2 ps-2 duration-200 animate-in slide-in-from-top-2">
-                      {item.children.map((child) => (
+                      {link.children.map((child) => (
                         <ul className="flex flex-col" key={child.path}>
                           <li>
                             <NavigationMenuPrimitive.Link asChild>
@@ -104,14 +104,14 @@ export const MobileNav = ({ items, logo }: Props) => {
                     </NavigationMenuPrimitive.Content>
                   </NavigationMenuPrimitive.Item>
                 ) : (
-                  <NavigationMenuPrimitive.Item key={item.path}>
+                  <NavigationMenuPrimitive.Item key={link.path}>
                     <NavigationMenuPrimitive.Link asChild>
                       <Link
                         className="block w-full p-3 ps-0 font-semibold"
-                        href={item.path}
+                        href={link.path}
                         onClick={() => setOpen(false)}
                       >
-                        {item.name}
+                        {link.name}
                       </Link>
                     </NavigationMenuPrimitive.Link>
                   </NavigationMenuPrimitive.Item>