fix: NavigationItem, better typing, story to check props

traefik · Mar 1, 2022 · 17e7946 · 17e7946
1 parent 3ad6121
commit 17e7946
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
@@ -147,27 +147,30 @@ const StyledLink = styled('a', baseNavItemCss, {
   textDecoration: 'none',
 });
 
-type StyledLinkVariants = VariantProps<typeof StyledLink>;
+type StyledLinkProps = VariantProps<typeof StyledLink> & Omit<React.ComponentProps<typeof StyledLink>, 'css'>;
 
 const StyledButton = styled('button', baseNavItemCss);
 
-type StyledButtonVariants = VariantProps<typeof StyledButton>;
-
-export type NavigationItemProps = {
-  as?: 'button' | 'a';
+type StyledButtonProps = VariantProps<typeof StyledButton> & Omit<React.ComponentProps<typeof StyledButton>, 'css'>;
+interface NavigationItemBaseProps {
+  css?: CSS
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
-  children: ReactNode;
-  href?: string;
-  css?: CSS
-} & StyledLinkVariants &
-  StyledButtonVariants;
+};
+
+interface NavigationItemButtonProps extends NavigationItemBaseProps, StyledButtonProps {
+  as?: 'button',
+}
+interface NavigationItemLinkProps extends NavigationItemBaseProps, StyledLinkProps {
+  as: 'a',
+}
+
+export type NavigationItemProps = NavigationItemButtonProps | NavigationItemLinkProps
 
 const NavigationItemWrapper = (props: NavigationItemProps): JSX.Element =>
   props.as === 'a' ? <StyledLink {...props} /> : <StyledButton type="button" {...props} />;
 
 export const NavigationItem = ({
-  as,
   startAdornment,
   endAdornment,
   children,
@@ -177,7 +180,7 @@ export const NavigationItem = ({
   const hasEndAdornment = useMemo(() => Boolean(endAdornment), [endAdornment]);
 
   return (
-    <NavigationItemWrapper as={as} {...restProps}>
+    <NavigationItemWrapper {...restProps}>
       {hasStartAdornment && (
         <FlexWithOpacity css={{ pr: '$2', ml: '-$1' }} active={restProps.active}>
           {startAdornment}
@@ -193,7 +196,7 @@ export const NavigationItem = ({
 
 export type NavigationItemVariants = VariantProps<typeof NavigationItem>;
 
-export const NavigationLink = (props: Omit<NavigationItemProps, 'as'>) => (
+export const NavigationLink = (props: Omit<NavigationItemLinkProps, 'as'>) => (
   <NavigationItem as="a" {...props} />
 );
 

diff --git a/components/Navigation/NavigationItem.stories.tsx b/components/Navigation/NavigationItem.stories.tsx
@@ -15,7 +15,6 @@ import {
 } from './Navigation';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 import { Badge } from '../Badge';
-import { Text } from '../Text';
 
 export default {
   title: 'Components/NavigationItem',
@@ -52,7 +51,7 @@ const NavigationItemForStory = modifyVariantsForStory<NavigationItemVariants, Na
   BaseNavigationItem
 );
 
-const Template: ComponentStory<typeof NavigationItemForStory> = (args) => (
+const Template: ComponentStory<typeof NavigationItem> = (args) => (
   <NavigationDrawer css={{ height: '200px' }}>
     <NavigationItem
       {...args}
@@ -80,9 +79,41 @@ const Template: ComponentStory<typeof NavigationItemForStory> = (args) => (
 export const Basic = Template.bind({});
 
 Basic.args = {
-  as: 'button',
+  as: 'a',
   href: '#',
   startAdornment: 'Gear',
   endAdornment: 1,
   active: false,
 };
+
+export const ButtonProps: ComponentStory<typeof NavigationItem> = (args) => {
+  const noop = () => undefined;
+  return (
+  <NavigationDrawer css={{ height: '200px' }}>
+    <NavigationItem
+      {...args}
+      onClick={noop}
+      onMouseEnter={noop}
+      onMouseLeave={noop}
+    >
+      Navigation Item
+    </NavigationItem>
+  </NavigationDrawer>
+);
+ButtonProps.args = {
+  as: 'button'
+}}
+
+export const LinkProps: ComponentStory<typeof NavigationItem> = (args) => (
+  <NavigationDrawer css={{ height: '200px' }}>
+    <NavigationItem
+      as="a"
+      href="https://traefik.io"
+    >
+      Navigation Item
+    </NavigationItem>
+  </NavigationDrawer>
+);
+LinkProps.args = {
+  as: 'a'
+}