diff --git a/.changeset/four-rings-admire.md b/.changeset/four-rings-admire.md new file mode 100644 index 0000000000..8b38b90271 --- /dev/null +++ b/.changeset/four-rings-admire.md @@ -0,0 +1,5 @@ +--- +"@medusajs/admin-ui": patch +--- + +feat(admin-ui): Add new feature badge for categories and inventory diff --git a/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx b/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx index fd445a1d75..dcd40bf75c 100644 --- a/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx +++ b/packages/admin-ui/ui/src/components/fundamentals/badge/index.tsx @@ -10,6 +10,7 @@ type BadgeProps = { | "ghost" | "default" | "disabled" + | "new-feature" } & React.HTMLAttributes const Badge: React.FC = ({ @@ -27,6 +28,8 @@ const Badge: React.FC = ({ ["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 ( diff --git a/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx b/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx index 83e16c9775..0dadd6dccd 100644 --- a/packages/admin-ui/ui/src/components/molecules/sidebar-menu-item/index.tsx +++ b/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 & { @@ -23,6 +25,7 @@ const SidebarMenuItem: React.FC & { 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 & { {icon} {text} + {isNew && ( + + New + + )} } > diff --git a/packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx b/packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx index aff6957860..cb8b9ad210 100644 --- a/packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx +++ b/packages/admin-ui/ui/src/components/organisms/sidebar/index.tsx @@ -70,6 +70,7 @@ const Sidebar: React.FC = () => { icon={} text={"Categories"} triggerHandler={triggerHandler} + isNew /> )} { icon={} triggerHandler={triggerHandler} text={"Inventory"} + isNew /> )}