forked from WebDevN-F/thenativeweb-ux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add DocumentationPage layout. (#359)
* feat: Add DocumentationPage layout. * docs: Fix headline level.
- Loading branch information
Showing
9 changed files
with
267 additions
and
167 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
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,59 @@ | ||
| import { Code, Headline, Link, Paragraph } from '../..'; | ||
| import React, { ReactElement } from 'react'; | ||
|
|
||
| const Documentation = (): ReactElement => ( | ||
| <React.Fragment> | ||
| <Headline>DocumentationPage</Headline> | ||
|
|
||
| <Paragraph> | ||
| Use this layout to render documentation sites that feature a tree | ||
| navigation structure. It consists of a <Link href='/components/navigation/sidebar'><code>SideBar</code></Link>, | ||
| a <Link href='/components/navigation/pagenavigation'><code>PageNavigation</code></Link>, and | ||
| a content panel. | ||
| </Paragraph> | ||
|
|
||
| <Headline level='2'>Responsive behaviour</Headline> | ||
|
|
||
| <Paragraph> | ||
| On <code>xs</code> screens, the content panel will fill the whole page and | ||
| the <code>PageNavigation</code> will be rendered in a fullscreen container. | ||
| A <Link href='/components/navigation/mobiletoggle'><code>MobileToggle</code></Link> can | ||
| then be used to toggle this navigation. | ||
| </Paragraph> | ||
|
|
||
| <Headline level='2'>Defining the layout in a page</Headline> | ||
|
|
||
| <Paragraph> | ||
| Wrap your page within the layout and set the <code>navigation</code>, <code>productName</code>, <code>siteTitle</code>, and <code>yearOfCreation</code> properties. | ||
| Additionally you can pass a <code>pageTitle</code> for each page. | ||
| </Paragraph> | ||
|
|
||
| <Code>{` | ||
| const navigation: MultiLanguagePageTree = { | ||
| 'en-us': [ | ||
| { | ||
| title: 'First Section', | ||
| children: [ | ||
| { title: 'Page A' }, | ||
| { title: 'Page B' } | ||
| ] | ||
| } | ||
| ] | ||
| }; | ||
| // ... | ||
| <DocumentationPage | ||
| siteTitle='the native web UX' | ||
| productName='ux' | ||
| navigation={ navigation } | ||
| yearOfCreation={ 2017 } | ||
| > | ||
| <div>My page content goes here</div> | ||
| </DocumentationPage> | ||
| `} | ||
| </Code> | ||
| </React.Fragment> | ||
| ); | ||
|
|
||
| export { Documentation }; |
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,167 @@ | ||
| import Head from 'next/head'; | ||
| import NextLink from 'next/link'; | ||
| import { useRouter } from 'next/router'; | ||
| import { | ||
| Breadcrumbs, | ||
| Footer, | ||
| getLanguageFromUrl, | ||
| HorizontalBar, | ||
| Link, | ||
| MobileToggle, | ||
| MultiLanguagePageTree, | ||
| NonIdealState, | ||
| PageNavigation, | ||
| PageTree, | ||
| Product, | ||
| Sidebar, | ||
| SidebarBrand, | ||
| SidebarItem, | ||
| Theme, | ||
| useDevice, | ||
| useRouteChange | ||
| } from '../..'; | ||
| import { classNames, createUseStyles } from '../../styles'; | ||
| import { DocumentationPageClassNames, styles } from './styles'; | ||
| import React, { FunctionComponent, ReactElement, useCallback, useEffect, useState } from 'react'; | ||
|
|
||
| const useStyles = createUseStyles<Theme, DocumentationPageClassNames>(styles); | ||
|
|
||
| interface DocumentationPageProps { | ||
| navigation: MultiLanguagePageTree; | ||
| siteTitle: string; | ||
| pageTitle?: string; | ||
| productName: string; | ||
| yearOfCreation: number; | ||
| } | ||
|
|
||
| const DocumentationPage: FunctionComponent<DocumentationPageProps> = ({ | ||
| children, | ||
| navigation, | ||
| pageTitle, | ||
| productName, | ||
| siteTitle, | ||
| yearOfCreation | ||
| }): ReactElement | null => { | ||
| const router = useRouter(); | ||
| const classes = useStyles(); | ||
| const device = useDevice(); | ||
| const isMobile = device === 'xs'; | ||
|
|
||
| const [ isNavigationVisible, setIsNavigationVisible ] = useState(true); | ||
| const [ activePath, setActivePath ] = useState(router.pathname); | ||
|
|
||
| const language = getLanguageFromUrl(router.pathname); | ||
| const basePath = `/${language}`; | ||
| const navigationItemsForLanguage = navigation[language]; | ||
|
|
||
| if (!Array.isArray(navigationItemsForLanguage)) { | ||
| return null; | ||
| } | ||
|
|
||
| const pageTree = new PageTree({ | ||
| items: navigationItemsForLanguage, | ||
| basePath | ||
| }); | ||
|
|
||
| const currentPage = pageTree.getPageItemByPath(activePath); | ||
|
|
||
| const componentClasses = classNames(classes.DocumentationPage, { | ||
| [classes.WithNavigationVisible]: isNavigationVisible | ||
| }); | ||
|
|
||
| const hideNavigationOnMobile = useCallback((): void => { | ||
| if (isMobile) { | ||
| setIsNavigationVisible(false); | ||
| } | ||
| }, []); | ||
|
|
||
| const toggleNavigation = useCallback((): void => { | ||
| setIsNavigationVisible(!isNavigationVisible); | ||
| }, [ isNavigationVisible ]); | ||
|
|
||
| useRouteChange((newPath): void => { | ||
| setActivePath(newPath); | ||
| hideNavigationOnMobile(); | ||
| }, [ device ]); | ||
|
|
||
| useEffect(hideNavigationOnMobile, []); | ||
|
|
||
| return ( | ||
| <div className={ componentClasses }> | ||
| <Head> | ||
| { | ||
| pageTitle ? | ||
| <title>{ siteTitle } | { pageTitle }</title> : | ||
| <title>{ siteTitle }{ currentPage ? ` | ${currentPage.title}` : '' }</title> | ||
| } | ||
| <link key='favicon' rel='icon' href='/favicon.png' type='image/png' /> | ||
| <meta key='viewport' name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover' /> | ||
| </Head> | ||
| <div className={ classes.NavigationForDesktop }> | ||
| <Sidebar> | ||
| <NextLink href={ basePath }> | ||
| <Link href={ basePath }> | ||
| <SidebarBrand> | ||
| <Product name={ productName } /> | ||
| </SidebarBrand> | ||
| </Link> | ||
| </NextLink> | ||
| <SidebarItem | ||
| iconName='toggle-left-panel' | ||
| onClick={ toggleNavigation } | ||
| isActive={ isNavigationVisible } | ||
| /> | ||
| </Sidebar> | ||
| </div> | ||
|
|
||
| <HorizontalBar | ||
| background='dark' | ||
| paddingHorizontal='sm' | ||
| borderBottom={ false } | ||
| className={ classes.NavigationForMobile } | ||
| > | ||
| <NextLink href={ basePath }> | ||
| <Link href={ basePath }> | ||
| <Product name={ productName } size='sm' /> | ||
| </Link> | ||
| </NextLink> | ||
| </HorizontalBar> | ||
|
|
||
| <MobileToggle | ||
| isVisible={ isNavigationVisible } | ||
| onClick={ toggleNavigation } | ||
| /> | ||
|
|
||
| <div className={ classes.NavigationUniversal }> | ||
| <PageNavigation | ||
| nonIdealState={ | ||
| <NonIdealState cause='Sorry, no pages found.'> | ||
| <p> | ||
| Try searching for something else! | ||
| </p> | ||
| </NonIdealState> | ||
| } | ||
| pageTree={ pageTree } | ||
| showSearchBar={ true } | ||
| activePath={ activePath } | ||
| /> | ||
| </div> | ||
|
|
||
| <div className={ classes.Content }> | ||
| { | ||
| currentPage && ( | ||
| <HorizontalBar paddingHorizontal='none' className={ classes.ContentTopBar }> | ||
| <Breadcrumbs items={ currentPage.breadcrumbs } size='md' color='light' /> | ||
| </HorizontalBar> | ||
| ) | ||
| } | ||
|
|
||
| { children } | ||
|
|
||
| <Footer yearOfCreation={ yearOfCreation } /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export { DocumentationPage }; |
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,3 @@ | ||
| import { Language, PageTreeItem } from '..'; | ||
|
|
||
| export type MultiLanguagePageTree = Record<Language, PageTreeItem []>; |
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.