diff --git a/package.json b/package.json index da491e3..4261cc1 100644 --- 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 index cac44c2..5d64986 100644 --- a/src/components/NavSpaces/NavSpaces.stories.tsx +++ b/src/components/NavSpaces/NavSpaces.stories.tsx @@ -261,6 +261,7 @@ const Template: ComponentStory = args => { diff --git a/src/components/NavSpaces/NavTab.tsx b/src/components/NavSpaces/NavTab.tsx index acff47b..eb672a1 100644 --- 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 ( - - - { - count - ? - { - renderIcon() - } - - : renderIcon() - } - - - { - title - } - - { - active - ? - : null - } - - + const Content = () => + { + count + ? + { + renderIcon() + } + + : renderIcon() + } + + + { + title + } + + + { + active + ? + : null + } + + + return (<> + { + href + ? + + + : + } + + ) } diff --git a/src/components/NavSpaces/NavTabs.tsx b/src/components/NavSpaces/NavTabs.tsx index e52893b..9d5401a 100644 --- 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 ( - + { navs.map((nav) => @@ -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%;