feat(nav-item): href optional

Wizleap-Inc · Sep 6, 2024 · 356ac28 · 356ac28
1 parent bf9aa89
commit 356ac28
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx b/packages/wiz-ui-react/src/components/base/navigation/components/navigation-item.tsx
@@ -53,7 +53,7 @@ type Props<T extends ElementType> = BaseProps & {
   onTogglePopupLocking?: (lock: boolean) => void;
 } & (
     | {
-        href: string;
+        href?: string;
         as?: never;
         asProps?: never;
       }
@@ -89,8 +89,8 @@ const NavigationItem = <T extends ElementType>({
   onTogglePopup,
   ...props
 }: Props<T>) => {
-  const isAnchor = "href" in props;
-  const LinkComponent = isAnchor ? "a" : props.as;
+  const isAnchor = "href" in props && props.as === undefined;
+  const LinkComponent = props.as || "a";
   const isExternalLink = !!props?.href?.startsWith("http");
   const linkProps = isAnchor
     ? {
@@ -101,7 +101,7 @@ const NavigationItem = <T extends ElementType>({
         ...props.asProps,
         style: {
           cursor: disabled ? "not-allowed" : "pointer",
-          ...props.asProps.style,
+          ...props.asProps?.style,
         },
       };
   const popupAnchor = useRef<HTMLDivElement>(null);

diff --git a/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx b/packages/wiz-ui-react/src/components/base/navigation/stories/navigation-item.stories.tsx
@@ -69,3 +69,12 @@ export const WithToolTip: Story = {
     </div>
   ),
 };
+
+export const WithoutHref: Story = {
+  ...Template,
+  args: {
+    icon: WizIDashboard,
+    label: "Home",
+    active: false,
+  },
+};