Add onClick and compact props to NavTab

Nuvotion-Visuals · Apr 29, 2024 · a44edfa · a44edfa
1 parent cad218e
commit a44edfa
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.114",
+  "version": "1.0.115",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

diff --git a/src/components/NavSpaces/NavSpaces.stories.tsx b/src/components/NavSpaces/NavSpaces.stories.tsx
@@ -261,6 +261,7 @@ const Template: ComponentStory<typeof NavSpaces> = args => {
         <NavTabs
           navs={(args as any).secondaryTopNav}
           borderBottom={true}
+          compact
         />
         <Placeholders />
         <Placeholders />

diff --git a/src/components/NavSpaces/NavTab.tsx b/src/components/NavSpaces/NavTab.tsx
@@ -5,13 +5,14 @@ import { Icon, Badge, LinkContext, Link as IntLink } from '../../internal'
 import { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types'
 
 interface Props {
-  icon?: IconName,
-  iconPrefix?: IconPrefix,
-  title: string,
-  href: string,
-  active?: boolean,
-  count?: number,
+  icon?: IconName
+  iconPrefix?: IconPrefix
+  title: string
+  href?: string
+  active?: boolean
+  count?: number
   vertical?: boolean
+  onClick?: (e: any) => void
 }
 
 export const NavTab = ({
@@ -21,7 +22,8 @@ export const NavTab = ({
   href,
   active,
   count,
-  vertical
+  vertical,
+  onClick
 } : Props) => {
 
   const Link: any = useContext(LinkContext) || IntLink;
@@ -40,33 +42,45 @@ export const NavTab = ({
         : null
     }
   </>
-
-  return (
-    <Link href={href}>
-      <S.NavTab vertical={vertical} active={active}>
-        {
-          count
-            ? <Badge labelColor='red' count={count}>
-                {
-                  renderIcon()
-                }
-              </Badge>
-            : renderIcon()
-        }
-
-        <S.Title vertical={vertical} active={active}>
-          { 
-            title 
-          }
-        </S.Title>
 
-        {
-          active
-            ? <S.Active />
-            : null
-        }
-      </S.NavTab>
-    </Link>
+  const Content = () => <S.NavTab 
+    vertical={vertical} 
+    active={active} 
+    onClick={onClick}
+  >
+    {
+      count
+        ? <Badge labelColor='red' count={count}>
+            {
+              renderIcon()
+            }
+          </Badge>
+        : renderIcon()
+    }
+
+    <S.Title vertical={vertical} active={active}>
+      { 
+        title 
+      }
+    </S.Title>
+
+    {
+      active
+        ? <S.Active />
+        : null
+    }
+  </S.NavTab>
+
+  return (<>
+    {
+      href
+        ? <Link href={href}>
+            <Content />
+          </Link>
+        : <Content />
+    }
+  </>
+
   )
 }
 

diff --git a/src/components/NavSpaces/NavTabs.tsx b/src/components/NavSpaces/NavTabs.tsx
@@ -10,17 +10,19 @@ interface Props {
     icon?: IconName,
     iconPrefix?: IconPrefix,
     title: string,
-    href: string,
+    href?: string,
     active?: boolean,
     count?: number
+    onClick?: (e: any) => void
   }[],
   borderBottom?: boolean,
-  vertical?: boolean
+  vertical?: boolean,
+  compact?: boolean
 }
 
-export const NavTabs = ({ navs, borderBottom, vertical } : Props) => {
+export const NavTabs = ({ navs, borderBottom, vertical, compact } : Props) => {
   return (
-    <S.NavTabs borderBottom={borderBottom}>
+    <S.NavTabs borderBottom={borderBottom} compact={compact}>
       {
         navs.map((nav) =>
           <S.NavContainer width={100 / navs.length}>
@@ -38,8 +40,9 @@ export const NavTabs = ({ navs, borderBottom, vertical } : Props) => {
 const S = {
   NavTabs: styled.div<{
     borderBottom?: boolean
+    compact?: boolean
   }>`
-    height: var(--F_Header_Height);
+    height: ${props => props.compact ? 'var(--F_Input_Height)' : 'var(--F_Header_Height)'};
     display: flex;
     align-items: center;
     width: 100%;