Merge pull request #128 from abusix/gops-237-add-prop-to-navigation-b…

…utton-to-add-tag feat(components): add tag prop to main disclosure button
abusix · Jun 19, 2024 · 841683d · 841683d
2 parents cac465c + 2775873
commit 841683d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/src/components/navigation/navigation-disclosure.tsx b/src/components/navigation/navigation-disclosure.tsx
@@ -1,17 +1,20 @@
 import { Disclosure } from "@headlessui/react";
 import React from "react";
 import { NavigationDisclosurePanel } from "./navigation-disclosure-panel";
+import { NavigationGroupItemTag } from "./navigation-group-item-tag";
 
 export interface NavigationDisclosureButtonProps {
     children: React.ReactNode;
     LeftIcon?: React.ElementType;
     onClick?: () => void;
+    tag?: string;
 }
 
 const NavigationDisclosureButton = ({
     children,
     LeftIcon,
     onClick,
+    tag,
 }: NavigationDisclosureButtonProps) => {
     return (
         <Disclosure.Button
@@ -20,6 +23,7 @@ const NavigationDisclosureButton = ({
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
+            {tag ? <NavigationGroupItemTag>{tag}</NavigationGroupItemTag> : null}
         </Disclosure.Button>
     );
 };

diff --git a/src/components/navigation/navigation-group-item-tag.tsx b/src/components/navigation/navigation-group-item-tag.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+interface NavigationGroupItemTagProps {
+    children: React.ReactNode;
+}
+
+const NavigationGroupItemTag = ({ children }: NavigationGroupItemTagProps) => {
+    return (
+        <div className="ml-auto rounded border border-neutral-0 px-1.5 text-xs font-semibold uppercase text-neutral-0">
+            {children}
+        </div>
+    );
+};
+
+export { NavigationGroupItemTag };
diff --git a/src/components/navigation/navigation-group.tsx b/src/components/navigation/navigation-group.tsx
@@ -1,15 +1,18 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
+import { NavigationGroupItemTag } from "./navigation-group-item-tag";
 
 export interface NavigationGroupItemProps extends React.ComponentPropsWithoutRef<"div"> {
     isActive?: boolean;
     LeftIcon?: React.ElementType;
+    tag?: string;
 }
 
 const NavigationGroupItem = ({
     children,
     isActive,
     LeftIcon,
+    tag,
     ...props
 }: NavigationGroupItemProps) => {
     return (
@@ -22,6 +25,7 @@ const NavigationGroupItem = ({
         >
             {LeftIcon ? <LeftIcon className="h-4 w-4" /> : null}
             {children}
+            {tag ? <NavigationGroupItemTag>{tag}</NavigationGroupItemTag> : null}
             {isActive && (
                 <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
             )}

diff --git a/src/components/navigation/navigation.stories.tsx b/src/components/navigation/navigation.stories.tsx
@@ -26,13 +26,17 @@ export const Default: Story = {
                 <nav className="flex flex-1 flex-col">
                     <Navigation.Group>
                         <Navigation.Group.Item>Home</Navigation.Group.Item>
-                        <Navigation.Group.Item isActive>Dashboard</Navigation.Group.Item>
+                        <Navigation.Group.Item isActive tag="Beta">
+                            Dashboard
+                        </Navigation.Group.Item>
                     </Navigation.Group>
                     <Navigation.Group>
                         <Navigation.Group.Item>Lookup & Delist</Navigation.Group.Item>
                         <Navigation.Group.Item>Mail Intelligence</Navigation.Group.Item>
                         <Navigation.Disclosure>
-                            <Navigation.Disclosure.Button>AbuseHQ</Navigation.Disclosure.Button>
+                            <Navigation.Disclosure.Button tag="Beta">
+                                AbuseHQ 2
+                            </Navigation.Disclosure.Button>
                             <Navigation.Disclosure.Panel>
                                 <Navigation.Disclosure.Panel.Item>
                                     Cases