diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx index f7975a5edb..a08681ed15 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx @@ -1,136 +1,46 @@ -import React from 'react'; -import { SpiritNavigationActionProps } from '../../../types'; -import { Button } from '../../Button'; -import { ButtonLink } from '../../ButtonLink'; +import React, { useState } from 'react'; import { Container } from '../../Container'; -import { Dropdown, DropdownPopover, DropdownTrigger } from '../../Dropdown'; +import { Drawer, DrawerCloseButton, DrawerPanel } from '../../Drawer'; import { Flex } from '../../Flex'; -import { Icon } from '../../Icon'; -import { Item } from '../../Item'; -import { Navigation, NavigationAction, NavigationItem } from '../../Navigation'; import { ProductLogo } from '../../ProductLogo'; import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; -import { Text } from '../../Text'; -import { UNSTABLE_Avatar } from '../../UNSTABLE_Avatar'; +import { Stack } from '../../Stack'; import UNSTABLE_Header from '../UNSTABLE_Header'; import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; +import { + MainNavigation, + SecondaryHorizontalNavigation, + SecondaryVerticalNavigation, +} from './HeaderWithNavigation/index'; -const NavigationActionAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( - -); -const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( - - - - setIsAvatarDropdownOpen(!isAvatarDropdownOpen)} - placement="bottom-end" - > - - - - - - - My Account - - - - - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- - - - - - Log out - - - - Post a job - - - - - + <> + + + + + {defaultSvgLogo} + + + setDrawerOpen(true)} /> + + + + + setDrawerOpen(false)}> + + + + + + + + + ); }; -export default HeaderDefault; + +export default HeaderWithNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx new file mode 100644 index 0000000000..9b68927d24 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Direction } from '../../../../constants'; +import { SpiritNavigationProps } from '../../../../types'; +import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation'; + +export const MainNavigation = ({ direction = Direction.HORIZONTAL }: Partial) => ( + + + + Job Offers + + + + Magazine + + +); + +export default MainNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx new file mode 100644 index 0000000000..57f46e1236 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx @@ -0,0 +1,42 @@ +import React, { FunctionComponent } from 'react'; +import { ClickEvent } from '../../../../types'; +import { Button } from '../../../Button'; +import { ButtonLink } from '../../../ButtonLink'; +import { Icon } from '../../../Icon'; +import { Navigation, NavigationItem } from '../../../Navigation'; + +interface SecondaryHorizontalNavigationProps { + handleOpenDrawer: (event: ClickEvent) => void; +} + +const SecondaryHorizontalNavigation: FunctionComponent = ({ handleOpenDrawer }) => ( + + + + + + + Log In + + + + Post a Job + + + + + +); + +export default SecondaryHorizontalNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx new file mode 100644 index 0000000000..7cdecd74a4 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { ButtonLink } from '../../../ButtonLink'; +import { Navigation, NavigationItem } from '../../../Navigation'; + +const SecondaryVerticalNavigation = () => ( + + + + Log In + + + + Post a Job + + +); + +export default SecondaryVerticalNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts new file mode 100644 index 0000000000..da634a845a --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts @@ -0,0 +1,5 @@ +'use client'; + +export { default as MainNavigation } from './MainNavigation'; +export { default as SecondaryHorizontalNavigation } from './SecondaryHorizontalNavigation'; +export { default as SecondaryVerticalNavigation } from './SecondaryVerticalNavigation'; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx new file mode 100644 index 0000000000..b3a2b512dc --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx @@ -0,0 +1,48 @@ +import React, { useState } from 'react'; +import { Container } from '../../Container'; +import { Drawer, DrawerCloseButton, DrawerPanel } from '../../Drawer'; +import { Flex } from '../../Flex'; +import { ProductLogo } from '../../ProductLogo'; +import { defaultSvgLogo } from '../../ProductLogo/demo/ProductLogoDefault'; +import { Stack } from '../../Stack'; +import UNSTABLE_Header from '../UNSTABLE_Header'; +import UNSTABLE_HeaderLogo from '../UNSTABLE_HeaderLogo'; +import { + MainHorizontalNavigation, + MainVerticalNavigation, + ProfileNavigation, + SecondaryHorizontalNavigation, + SecondaryVerticalNavigation, +} from './HeaderWithNavigationAndNestedItems/index'; + +const HeaderWithNavigationAndNestedItems = () => { + const [isDrawerOpen, setDrawerOpen] = useState(false); + + return ( + <> + + + + + {defaultSvgLogo} + + + setDrawerOpen(true)} /> + + + + + setDrawerOpen(false)}> + + + + + + + + + + + ); +}; +export default HeaderWithNavigationAndNestedItems; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx new file mode 100644 index 0000000000..078747a4ef --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { Collapse } from '../../../Collapse'; +import { NavigationAction, NavigationItem } from '../../../Navigation'; + +const CollapseNavigation = ({ isOpen }: { isOpen: boolean }) => ( + +
    + + My Account + + + Settings + + + Log Out + +
+ +); + +export default CollapseNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx new file mode 100644 index 0000000000..720ceabe0f --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation'; +import MainHorizontalNavigationDropdown from './MainHorizontalNavigationDropdown'; + +export const MainHorizontalNavigation = () => ( + + + + Selected + + + + Link + + + + + + + Disabled + + + +); + +export default MainHorizontalNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx new file mode 100644 index 0000000000..b7f2e4788b --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigationDropdown.tsx @@ -0,0 +1,58 @@ +import React, { ElementType, forwardRef, useState } from 'react'; +import { PolymorphicRef, SpiritNavigationActionProps } from '../../../../types'; +import { Dropdown, DropdownPopover, DropdownTrigger } from '../../../Dropdown'; +import { Icon } from '../../../Icon'; +import { Item } from '../../../Item'; +import { NavigationAction } from '../../../Navigation'; + +/* We need an exception for components exported with forwardRef */ +/* eslint no-underscore-dangle: ['error', { allow: ['_NavigationActionAsDropdownTrigger'] }] */ +const _NavigationActionAsDropdownTrigger = ( + props: SpiritNavigationActionProps, + ref: PolymorphicRef, +): JSX.Element => { + return ; +}; + +const NavigationActionAsDropdownTrigger = forwardRef>( + _NavigationActionAsDropdownTrigger, +); + +export const DropdownPopoverContent = () => ( +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+); + +const MainHorizontalNavigationDropdown = () => { + const [isNavigationActionDropdownOpen, setIsNavigationActionDropdownOpen] = useState(false); + + return ( + setIsNavigationActionDropdownOpen(!isNavigationActionDropdownOpen)} + placement="bottom-end" + > + + Menu + + + + + + + ); +}; + +export default MainHorizontalNavigationDropdown; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx new file mode 100644 index 0000000000..01ad95cd15 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainVerticalNavigation.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { useCollapse } from '../../../Collapse'; +import { Icon } from '../../../Icon'; +import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation'; +import CollapseNavigation from './CollapseNavigation'; + +const DrawerWithNavigation = () => { + const { isOpen: isCollapseOpen, toggleHandler: toggleCollapseHandler } = useCollapse(false); + + return ( + + + + Selected + + + + Link + + + + Menu + + + + + + + Disabled + + + + ); +}; +export default DrawerWithNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx new file mode 100644 index 0000000000..c80bb99939 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/ProfileNavigation.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Flex } from '../../../Flex'; +import { Icon } from '../../../Icon'; +import { Navigation, NavigationItem } from '../../../Navigation'; +import { Text } from '../../../Text'; +import { UNSTABLE_Avatar } from '../../../UNSTABLE_Avatar'; + +const ProfileNavigation = () => ( + + + + + + + + My Account + + + + +); +export default ProfileNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx new file mode 100644 index 0000000000..d3bb69d1a1 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigation.tsx @@ -0,0 +1,46 @@ +import React, { FunctionComponent } from 'react'; +import { ClickEvent } from '../../../../types'; +import { Button } from '../../../Button'; +import { ButtonLink } from '../../../ButtonLink'; +import { Icon } from '../../../Icon'; +import { Navigation, NavigationItem } from '../../../Navigation'; +import SecondaryHorizontalNavigationDropdown from './SecondaryHorizontalNavigationDropdown'; + +interface SecondaryHorizontalNavigationProps { + handleOpenDrawer: (event: ClickEvent) => void; +} + +const SecondaryHorizontalNavigation: FunctionComponent = ({ handleOpenDrawer }) => ( + + + + + + + + + + Log Out + + + + Post a Job + + + + + +); + +export default SecondaryHorizontalNavigation; diff --git a/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx new file mode 100644 index 0000000000..2837449a17 --- /dev/null +++ b/packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/SecondaryHorizontalNavigationDropdown.tsx @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; +import { SpiritNavigationActionProps } from '../../../../types'; +import { Dropdown, DropdownPopover, DropdownTrigger } from '../../../Dropdown'; +import { Flex } from '../../../Flex'; +import { Icon } from '../../../Icon'; +import { Text } from '../../../Text'; +import { UNSTABLE_Avatar } from '../../../UNSTABLE_Avatar'; +import { DropdownPopoverContent } from './MainHorizontalNavigationDropdown'; + +const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( +