-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
656 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import { GearIcon, PersonIcon } from '@radix-ui/react-icons'; | ||
| import { Meta, StoryFn } from '@storybook/react'; | ||
| import React from 'react'; | ||
|
|
||
| import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory'; | ||
| import { Container } from '../Container'; | ||
| import { Link } from '../Link'; | ||
| import { NavigationItem } from '../Navigation'; | ||
| import { Text } from '../Text'; | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuContent, | ||
| NavigationMenuItem, | ||
| NavigationMenuLink, | ||
| NavigationMenuList, | ||
| NavigationMenuProps, | ||
| NavigationMenuTrigger, | ||
| NavigationMenuVariants, | ||
| } from './NavigationMenu'; | ||
|
|
||
| const BaseNavigationMenu = (props: NavigationMenuProps): JSX.Element => ( | ||
| <NavigationMenu {...props} /> | ||
| ); | ||
|
|
||
| const NavigationMenuForStory = modifyVariantsForStory<NavigationMenuVariants, NavigationMenuProps>( | ||
| BaseNavigationMenu, | ||
| ); | ||
|
|
||
| const Component: Meta<typeof NavigationMenuForStory> = { | ||
| title: 'Components/NavigationMenu', | ||
| component: NavigationMenuForStory, | ||
| }; | ||
|
|
||
| const Template: StoryFn<typeof NavigationMenuForStory> = (args) => ( | ||
| <Container> | ||
| <NavigationMenuForStory {...args}> | ||
| <NavigationMenuList> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuTrigger> | ||
| <Text css={{ cursor: 'pointer' }}>Links</Text> | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent css={{ display: 'flex', flexDirection: 'column', gap: '$1' }}> | ||
| <NavigationMenuLink asChild> | ||
| <Link href="#">A link</Link> | ||
| </NavigationMenuLink> | ||
| <NavigationMenuLink asChild> | ||
| <Link href="#">Another link</Link> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuContent> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavigationMenuTrigger> | ||
| <Text css={{ cursor: 'pointer' }}>Navigation items</Text> | ||
| </NavigationMenuTrigger> | ||
| <NavigationMenuContent> | ||
| <NavigationMenuLink> | ||
| <NavigationItem startAdornment={<PersonIcon />}>Profile</NavigationItem> | ||
| </NavigationMenuLink> | ||
| <NavigationMenuLink> | ||
| <NavigationItem startAdornment={<GearIcon />}>Settings</NavigationItem> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuContent> | ||
| </NavigationMenuItem> | ||
| </NavigationMenuList> | ||
| </NavigationMenuForStory> | ||
| </Container> | ||
| ); | ||
|
|
||
| export const Basic: StoryFn<typeof NavigationMenuForStory> = Template.bind({}); | ||
|
|
||
| export default Component; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; | ||
| import React from 'react'; | ||
|
|
||
| import { CSS, styled, VariantProps } from '../../stitches.config'; | ||
| import { elevationVariants } from '../Elevation'; | ||
| import { panelStyles } from '../Panel'; | ||
|
|
||
| // #region Root | ||
|
|
||
| const StyledRoot = styled(NavigationMenuPrimitive.Root, { | ||
| ul: { | ||
| m: 0, | ||
| p: 0, | ||
| listStyleType: 'none', | ||
| li: { | ||
| position: 'relative', | ||
| display: 'inline', | ||
| }, | ||
| }, | ||
| }); | ||
|
|
||
| export type NavigationMenuProps = React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { | ||
| children: React.ReactNode; | ||
| css?: CSS; | ||
| }; | ||
|
|
||
| export type NavigationMenuVariants = VariantProps<typeof NavigationMenu>; | ||
|
|
||
| export const NavigationMenu = React.forwardRef< | ||
| React.ElementRef<typeof StyledRoot>, | ||
| NavigationMenuProps | ||
| >(({ children, ...props }, fowardedRef) => ( | ||
| <StyledRoot {...props} ref={fowardedRef}> | ||
| {children} | ||
| </StyledRoot> | ||
| )); | ||
|
|
||
| // #endregion Root | ||
|
|
||
| // #region Content | ||
|
|
||
| const StyledContent = styled(NavigationMenuPrimitive.Content, panelStyles, { | ||
| position: 'absolute', | ||
| left: 0, | ||
| zIndex: 1, | ||
| p: '$2', | ||
| color: '$hiContrast', | ||
| '&:focus': { | ||
| outline: 'none', | ||
| }, | ||
| variants: { | ||
| elevation: elevationVariants, | ||
| }, | ||
| defaultVariants: { | ||
| elevation: 2, | ||
| }, | ||
| }); | ||
|
|
||
| type NavigationMenuPrimitiveContentProps = Omit< | ||
| React.ComponentProps<typeof NavigationMenuPrimitive.Content>, | ||
| 'as' | ||
| >; | ||
|
|
||
| export type NavigationMenuContentProps = NavigationMenuPrimitiveContentProps & | ||
| VariantProps<typeof StyledContent> & { | ||
| css?: CSS; | ||
| }; | ||
|
|
||
| export const NavigationMenuContent = React.forwardRef< | ||
| React.ElementRef<typeof StyledContent>, | ||
| NavigationMenuContentProps | ||
| >(({ children, elevation, ...props }, fowardedRef) => ( | ||
| <StyledContent elevation={elevation} {...props} ref={fowardedRef}> | ||
| {children} | ||
| </StyledContent> | ||
| )); | ||
|
|
||
| // #endregion Content | ||
|
|
||
| // #region Trigger | ||
|
|
||
| const StyledTrigger = styled(NavigationMenuPrimitive.Trigger, { | ||
| backgroundColor: 'transparent', | ||
| border: 'none', | ||
| }); | ||
|
|
||
| export type NavigationMenuTriggerProps = React.ComponentProps< | ||
| typeof NavigationMenuPrimitive.Trigger | ||
| > & | ||
| VariantProps<typeof StyledContent> & { | ||
| css?: CSS; | ||
| }; | ||
|
|
||
| export const NavigationMenuTrigger = ({ children, ...props }: NavigationMenuTriggerProps) => ( | ||
| <StyledTrigger {...props}>{children}</StyledTrigger> | ||
| ); | ||
|
|
||
| // #endregion Trigger | ||
|
|
||
| export const NavigationMenuIndicator = NavigationMenuPrimitive.Indicator; | ||
| export const NavigationMenuItem = NavigationMenuPrimitive.Item; | ||
| export const NavigationMenuLink = NavigationMenuPrimitive.Link; | ||
| export const NavigationMenuList = NavigationMenuPrimitive.List; | ||
| export const NavigationMenuViewport = NavigationMenuPrimitive.Viewport; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './NavigationMenu'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.