-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web-react): Add Drawer with Navigation to Header demo #DS-1627
- Loading branch information
Showing
16 changed files
with
455 additions
and
125 deletions.
There are no files selected for viewing
160 changes: 35 additions & 125 deletions
160
packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation.tsx
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 |
|---|---|---|
| @@ -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) => ( | ||
| <NavigationAction {...props} elementType="button" /> | ||
| ); | ||
| const AvatarButtonAsDropdownTrigger = (props: SpiritNavigationActionProps) => ( | ||
| <button {...props} className="button-unstyled" type="button" /> | ||
| ); | ||
|
|
||
| const HeaderDefault = () => { | ||
| const [isNavigationActionDropdownOpen, setIsNavigationActionDropdownOpen] = React.useState(false); | ||
| const [isAvatarDropdownOpen, setIsAvatarDropdownOpen] = React.useState(false); | ||
| const HeaderWithNavigation = () => { | ||
| const [isDrawerOpen, setDrawerOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <UNSTABLE_Header> | ||
| <Container> | ||
| <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000"> | ||
| <UNSTABLE_HeaderLogo href="#"> | ||
| <ProductLogo>{defaultSvgLogo}</ProductLogo> | ||
| </UNSTABLE_HeaderLogo> | ||
| <Navigation aria-label="Main Navigation"> | ||
| <NavigationItem> | ||
| <NavigationAction href="#">Link</NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="#" isSelected> | ||
| Selected | ||
| </NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <Dropdown | ||
| alignmentX="stretch" | ||
| alignmentY="stretch" | ||
| id="navigation-action-dropdown" | ||
| isOpen={isNavigationActionDropdownOpen} | ||
| onToggle={() => setIsNavigationActionDropdownOpen(!isNavigationActionDropdownOpen)} | ||
| placement="bottom-end" | ||
| > | ||
| <DropdownTrigger elementType={NavigationActionAsDropdownTrigger as unknown as HTMLButtonElement}> | ||
| Dropdown | ||
| <Icon name="chevron-up" boxSize={20} UNSAFE_className="accessibility-open" /> | ||
| <Icon name="chevron-down" boxSize={20} UNSAFE_className="accessibility-closed" /> | ||
| </DropdownTrigger> | ||
| <DropdownPopover> | ||
| <ul className="list-unstyled"> | ||
| <li> | ||
| <Item label="My Account" href="https://www.example.com" /> | ||
| </li> | ||
| <li> | ||
| <Item label="Settings" href="https://www.example.com" /> | ||
| </li> | ||
| <li> | ||
| <Item label="Log Out" href="https://www.example.com" /> | ||
| </li> | ||
| </ul> | ||
| </DropdownPopover> | ||
| </Dropdown> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="#" isDisabled> | ||
| Disabled | ||
| </NavigationAction> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| <Navigation marginLeft="auto" aria-label="Secondary Navigation"> | ||
| <NavigationItem> | ||
| <Button color="tertiary" isSymmetrical> | ||
| <Icon name="search" /> | ||
| </Button> | ||
| </NavigationItem> | ||
| <NavigationItem alignmentY="stretch"> | ||
| <Dropdown | ||
| alignmentX="stretch" | ||
| alignmentY="stretch" | ||
| id="avatar-dropdown" | ||
| isOpen={isAvatarDropdownOpen} | ||
| onToggle={() => setIsAvatarDropdownOpen(!isAvatarDropdownOpen)} | ||
| placement="bottom-end" | ||
| > | ||
| <DropdownTrigger elementType={AvatarButtonAsDropdownTrigger as unknown as HTMLButtonElement}> | ||
| <Flex spacingX="space-500" alignmentX="stretch" alignmentY="center"> | ||
| <UNSTABLE_Avatar isSquare aria-label="Profile of Jiří Bárta"> | ||
| <Icon name="profile" boxSize={20} /> | ||
| </UNSTABLE_Avatar> | ||
| <Text elementType="span" size="small" emphasis="semibold" UNSAFE_className="text-primary"> | ||
| My Account | ||
| </Text> | ||
| <Icon name="chevron-up" boxSize={20} UNSAFE_className="accessibility-open" /> | ||
| <Icon name="chevron-down" boxSize={20} UNSAFE_className="accessibility-closed" /> | ||
| </Flex> | ||
| </DropdownTrigger> | ||
| <DropdownPopover> | ||
| <ul className="list-unstyled"> | ||
| <li> | ||
| <Item label="My Account" href="https://www.example.com" /> | ||
| </li> | ||
| <li> | ||
| <Item label="Settings" href="https://www.example.com" /> | ||
| </li> | ||
| <li> | ||
| <Item label="Log Out" href="https://www.example.com" /> | ||
| </li> | ||
| </ul> | ||
| </DropdownPopover> | ||
| </Dropdown> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <ButtonLink href="#" color="secondary"> | ||
| Log out | ||
| </ButtonLink> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <ButtonLink href="#">Post a job</ButtonLink> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| </Flex> | ||
| </Container> | ||
| </UNSTABLE_Header> | ||
| <> | ||
| <UNSTABLE_Header> | ||
| <Container> | ||
| <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000"> | ||
| <UNSTABLE_HeaderLogo href="#"> | ||
| <ProductLogo>{defaultSvgLogo}</ProductLogo> | ||
| </UNSTABLE_HeaderLogo> | ||
| <MainNavigation /> | ||
| <SecondaryHorizontalNavigation handleOpenDrawer={() => setDrawerOpen(true)} /> | ||
| </Flex> | ||
| </Container> | ||
| </UNSTABLE_Header> | ||
|
|
||
| <Drawer id="drawer-navigation" isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}> | ||
| <DrawerPanel> | ||
| <DrawerCloseButton /> | ||
| <Stack hasIntermediateDividers hasSpacing UNSAFE_className="mt-900" spacing="space-900"> | ||
| <MainNavigation direction="vertical" /> | ||
| <SecondaryVerticalNavigation /> | ||
| </Stack> | ||
| </DrawerPanel> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
| export default HeaderDefault; | ||
|
|
||
| export default HeaderWithNavigation; |
23 changes: 23 additions & 0 deletions
23
...ges/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/MainNavigation.tsx
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,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<SpiritNavigationProps>) => ( | ||
| <Navigation | ||
| aria-label="Main Navigation" | ||
| direction={direction} | ||
| UNSAFE_className={direction === Direction.HORIZONTAL ? 'd-none d-desktop-flex' : undefined} | ||
| > | ||
| <NavigationItem> | ||
| <NavigationAction href="#" isSelected> | ||
| Job Offers | ||
| </NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="#">Magazine</NavigationAction> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| ); | ||
|
|
||
| export default MainNavigation; |
42 changes: 42 additions & 0 deletions
42
...rc/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryHorizontalNavigation.tsx
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,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<SecondaryHorizontalNavigationProps> = ({ handleOpenDrawer }) => ( | ||
| <Navigation marginLeft="auto" aria-label="Secondary Navigation"> | ||
| <NavigationItem> | ||
| <Button color="tertiary" isSymmetrical> | ||
| <Icon name="search" /> | ||
| </Button> | ||
| </NavigationItem> | ||
| <NavigationItem UNSAFE_className="d-none d-desktop-flex"> | ||
| <ButtonLink href="#" color="secondary"> | ||
| Log In | ||
| </ButtonLink> | ||
| </NavigationItem> | ||
| <NavigationItem UNSAFE_className="d-none d-desktop-flex"> | ||
| <ButtonLink href="#">Post a Job</ButtonLink> | ||
| </NavigationItem> | ||
| <NavigationItem UNSAFE_className="d-desktop-none"> | ||
| <Button | ||
| color="tertiary" | ||
| aria-label="Toggle Menu" | ||
| aria-controls="drawer-navigation" | ||
| aria-expanded="false" | ||
| onClick={handleOpenDrawer} | ||
| isSymmetrical | ||
| > | ||
| <Icon name="hamburger" /> | ||
| </Button> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| ); | ||
|
|
||
| export default SecondaryHorizontalNavigation; |
18 changes: 18 additions & 0 deletions
18
.../src/components/UNSTABLE_Header/demo/HeaderWithNavigation/SecondaryVerticalNavigation.tsx
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,18 @@ | ||
| import React from 'react'; | ||
| import { ButtonLink } from '../../../ButtonLink'; | ||
| import { Navigation, NavigationItem } from '../../../Navigation'; | ||
|
|
||
| const SecondaryVerticalNavigation = () => ( | ||
| <Navigation aria-label="Secondary Navigation" direction="vertical"> | ||
| <NavigationItem> | ||
| <ButtonLink href="#" color="secondary"> | ||
| Log In | ||
| </ButtonLink> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <ButtonLink href="#">Post a Job</ButtonLink> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| ); | ||
|
|
||
| export default SecondaryVerticalNavigation; |
5 changes: 5 additions & 0 deletions
5
packages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigation/index.ts
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,5 @@ | ||
| 'use client'; | ||
|
|
||
| export { default as MainNavigation } from './MainNavigation'; | ||
| export { default as SecondaryHorizontalNavigation } from './SecondaryHorizontalNavigation'; | ||
| export { default as SecondaryVerticalNavigation } from './SecondaryVerticalNavigation'; |
48 changes: 48 additions & 0 deletions
48
...ages/web-react/src/components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems.tsx
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,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 ( | ||
| <> | ||
| <UNSTABLE_Header> | ||
| <Container> | ||
| <Flex alignmentX="left" alignmentY="stretch" spacing="space-1000"> | ||
| <UNSTABLE_HeaderLogo href="#"> | ||
| <ProductLogo>{defaultSvgLogo}</ProductLogo> | ||
| </UNSTABLE_HeaderLogo> | ||
| <MainHorizontalNavigation /> | ||
| <SecondaryHorizontalNavigation handleOpenDrawer={() => setDrawerOpen(true)} /> | ||
| </Flex> | ||
| </Container> | ||
| </UNSTABLE_Header> | ||
|
|
||
| <Drawer id="drawer-navigation" isOpen={isDrawerOpen} onClose={() => setDrawerOpen(false)}> | ||
| <DrawerPanel> | ||
| <DrawerCloseButton /> | ||
| <Stack hasIntermediateDividers hasSpacing UNSAFE_className="mt-900" spacing="space-900"> | ||
| <ProfileNavigation /> | ||
| <MainVerticalNavigation /> | ||
| <SecondaryVerticalNavigation /> | ||
| </Stack> | ||
| </DrawerPanel> | ||
| </Drawer> | ||
| </> | ||
| ); | ||
| }; | ||
| export default HeaderWithNavigationAndNestedItems; |
21 changes: 21 additions & 0 deletions
21
...components/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/CollapseNavigation.tsx
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,21 @@ | ||
| import React from 'react'; | ||
| import { Collapse } from '../../../Collapse'; | ||
| import { NavigationAction, NavigationItem } from '../../../Navigation'; | ||
|
|
||
| const CollapseNavigation = ({ isOpen }: { isOpen: boolean }) => ( | ||
| <Collapse id="collapse-navigation" isOpen={isOpen}> | ||
| <ul> | ||
| <NavigationItem> | ||
| <NavigationAction href="https://www.example.com">My Account</NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="https://www.example.com">Settings</NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="https://www.example.com">Log Out</NavigationAction> | ||
| </NavigationItem> | ||
| </ul> | ||
| </Collapse> | ||
| ); | ||
|
|
||
| export default CollapseNavigation; |
26 changes: 26 additions & 0 deletions
26
...ents/UNSTABLE_Header/demo/HeaderWithNavigationAndNestedItems/MainHorizontalNavigation.tsx
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,26 @@ | ||
| import React from 'react'; | ||
| import { Navigation, NavigationAction, NavigationItem } from '../../../Navigation'; | ||
| import MainHorizontalNavigationDropdown from './MainHorizontalNavigationDropdown'; | ||
|
|
||
| export const MainHorizontalNavigation = () => ( | ||
| <Navigation aria-label="Main Navigation" UNSAFE_className="d-none d-desktop-flex"> | ||
| <NavigationItem> | ||
| <NavigationAction href="#" isSelected> | ||
| Selected | ||
| </NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="#">Link</NavigationAction> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <MainHorizontalNavigationDropdown /> | ||
| </NavigationItem> | ||
| <NavigationItem> | ||
| <NavigationAction href="#" isDisabled> | ||
| Disabled | ||
| </NavigationAction> | ||
| </NavigationItem> | ||
| </Navigation> | ||
| ); | ||
|
|
||
| export default MainHorizontalNavigation; |
Oops, something went wrong.