feat(admin-ui): Add new feature badge for categories and inventory (#3657)

* Add new feature badge for categories and inventory

* Add changeset

.changeset/four-rings-admire.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+feat(admin-ui): Add new feature badge for categories and inventory

packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx

@@ -10,6 +10,7 @@ type BadgeProps = {
     | "ghost"
     | "default"
     | "disabled"
+    | "new-feature"
 } & React.HTMLAttributes<HTMLDivElement>
 
 const Badge: React.FC<BadgeProps> = ({
@@ -27,6 +28,8 @@ const Badge: React.FC<BadgeProps> = ({
     ["badge-ghost"]: variant === "ghost",
     ["badge-default"]: variant === "default",
     ["badge-disabled"]: variant === "disabled",
+    ["bg-blue-10 border-blue-30 border font-normal text-blue-50"]:
+      variant === "new-feature",
   })
 
   return (

packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react"
 import Collapsible from "react-collapsible"
 import { NavLink } from "react-router-dom"
+import Badge from "../../fundamentals/badge"
 
 type SidebarMenuSubitemProps = {
   pageLink: string
@@ -13,6 +14,7 @@ type SidebarMenuItemProps = {
   icon: JSX.Element
   triggerHandler: () => any
   subItems?: SidebarMenuSubitemProps[]
+  isNew?: boolean
 }
 
 const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
@@ -23,6 +25,7 @@ const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
   text,
   triggerHandler,
   subItems = [],
+  isNew,
 }: SidebarMenuItemProps) => {
   const styles =
     "group py-1.5 my-0.5 rounded-rounded flex text-grey-50 hover:bg-grey-10 items-center px-2"
@@ -41,6 +44,11 @@ const SidebarMenuItem: React.FC<SidebarMenuItemProps> & {
         <NavLink className={classNameFn} to={pageLink}>
           <span className="items-start">{icon}</span>
           <span className="group-[.is-active]:text-grey-90 ml-3">{text}</span>
+          {isNew && (
+            <Badge variant={"new-feature"} className="ml-auto">
+              New
+            </Badge>
+          )}
         </NavLink>
       }
     >

packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx

@@ -70,6 +70,7 @@ const Sidebar: React.FC = () => {
               icon={<SwatchIcon size={ICON_SIZE} />}
               text={"Categories"}
               triggerHandler={triggerHandler}
+              isNew
             />
           )}
           <SidebarMenuItem
@@ -84,6 +85,7 @@ const Sidebar: React.FC = () => {
               icon={<BuildingsIcon size={ICON_SIZE} />}
               triggerHandler={triggerHandler}
               text={"Inventory"}
+              isNew
             />
           )}
           <SidebarMenuItem