fix: Make anchor links change the URL. (#356)

* Fix: Make anchor links change url when scrolling to target. * Add pageTitle to Styleguide layout. * Fix activePath in Styleguide layout. * Remove duplicate headline from documentation. * Simplify SearchBar inside Styleguide layout. * Update Documentation.tsx * Slightly change title. * Bring back tags in search results. Co-authored-by: Golo Roden <[email protected]>
thenativeweb · Mar 4, 2020 · 2fd240c · 2fd240c
1 parent 59ef05e
commit 2fd240c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 26 deletions.
diff --git a/lib/components/input/Link/Documentation.tsx b/lib/components/input/Link/Documentation.tsx
@@ -20,7 +20,22 @@ const Documentation = (): ReactElement => (
       </Link>
     </ComponentPreview>
 
-    <Headline level='2'>External links</Headline>
+    <Headline level='2'>Anchor links</Headline>
+
+    <Paragraph>
+      When linking to anchors on the current page, the <code>Link</code> component
+      will smoothly scroll to the target.
+    </Paragraph>
+
+    <ComponentPreview>
+      <Link
+        href='#intercepting-click-events'
+      >
+        This a link to #intercepting-click-events
+      </Link>
+    </ComponentPreview>
+
+    <Headline level='2'>Intercepting click events</Headline>
 
     <Paragraph>
       When linking to external websites, the <code>rel</code> and <code>target</code> attributes

diff --git a/lib/components/navigation/PageNavigation/index.tsx b/lib/components/navigation/PageNavigation/index.tsx
@@ -3,9 +3,7 @@ import { Page } from './Page';
 import { PageGroup } from './PageGroup';
 import { PageSearch } from '../PageTree/PageSearch';
 import { SearchResults } from './SearchResults';
-import {
-  HorizontalBar, PageTree, PageTreeItemWithMetadata, TextBox, Theme
-} from '../../..';
+import { HorizontalBar, Icon, PageTree, PageTreeItemWithMetadata, TextBox, Theme } from '../../..';
 import { PageNavigationClassNames, styles } from './styles';
 import React, { ChangeEvent, FunctionComponent, ReactElement, ReactNode, useEffect, useState } from 'react';
 
@@ -96,6 +94,7 @@ const PageNavigation: FunctionComponent<PageNavigationProps> = ({
         showSearchBar ?
           (
             <HorizontalBar className={ classes.SearchBar }>
+              <Icon className={ classes.SearchBarIcon } name='search' size='sm' color='current' />
               <TextBox
                 className={ classes.SearchField }
                 value={ query }

diff --git a/lib/components/navigation/PageNavigation/styles.ts b/lib/components/navigation/PageNavigation/styles.ts
@@ -3,6 +3,7 @@ import { ComponentClassNames, Theme } from '../../..';
 export type PageNavigationClassNames =
   'PageNavigation' |
   'SearchBar' |
+  'SearchBarIcon' |
   'SearchField' |
   'Content';
 
@@ -12,21 +13,42 @@ const getStyles = (theme: Theme): ComponentClassNames<PageNavigationClassNames>
     width: '100%',
     height: '100%',
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+
+    '& $SearchBarIcon': {
+      position: 'absolute',
+      left: `${theme.space(3)}px`,
+      pointerEvents: 'none'
+    },
+
+    '& $SearchField': {
+      padding: `${theme.space(1)}px ${theme.space(1)}px`,
+      paddingLeft: `${theme.space(4)}px`,
+      flexGrow: 1
+    },
+
+    '& $Content': {
+      flexGrow: 1,
+      overflow: 'auto',
+      '-webkit-overflow-scrolling': 'touch',
+      paddingTop: theme.space(1.5)
+    }
   },
 
   SearchBar: {},
 
-  SearchField: {
-    padding: `${theme.space(0.5)}px ${theme.space(1)}px`,
-    flexGrow: 1
-  },
+  SearchBarIcon: {},
+
+  SearchField: {},
+
+  Content: {},
 
-  Content: {
-    flexGrow: 1,
-    overflow: 'auto',
-    '-webkit-overflow-scrolling': 'touch',
-    paddingTop: theme.space(1.5)
+  [theme.breakpoints.down('xs')]: {
+    PageNavigation: {
+      '& $SearchField': {
+        marginRight: theme.space(5)
+      }
+    }
   }
 });
 

diff --git a/lib/components/navigation/PageTree/index.ts b/lib/components/navigation/PageTree/index.ts
@@ -42,7 +42,8 @@ class PageTree {
         path: `${path}/${slug}`,
         breadcrumbs: breadcrumbsForItem,
         breadcrumbsAsString,
-        keywordsAsString
+        keywordsAsString,
+        keywords: item.keywords
       };
     });
 

diff --git a/lib/utils/scrollToAnchor.ts b/lib/utils/scrollToAnchor.ts
@@ -13,9 +13,11 @@ const scrollToAnchor = function (event: MouseEvent<HTMLElement>): void {
     return;
   }
 
-  event.preventDefault();
+  window.history.pushState(null, '', href);
 
   targetToScrollTo.scrollIntoView({ behavior: 'smooth' });
+
+  event.preventDefault();
 };
 
 export { scrollToAnchor };
diff --git a/styleguide/layouts/Styleguide/index.tsx b/styleguide/layouts/Styleguide/index.tsx
@@ -1,9 +1,9 @@
+import Head from 'next/head';
 import { navigation } from '../../configuration/navigation';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import {
   Breadcrumbs,
-  Button,
   classNames,
   createUseStyles,
   Footer,
@@ -27,7 +27,14 @@ import { StyleguideClassNames, styles } from './styles';
 
 const useStyles = createUseStyles<Theme, StyleguideClassNames>(styles);
 
-const Styleguide: FunctionComponent = ({ children }): ReactElement | null => {
+interface StyleguideProps {
+  pageTitle?: string;
+}
+
+const Styleguide: FunctionComponent<StyleguideProps> = ({
+  pageTitle,
+  children
+}): ReactElement | null => {
   const router = useRouter();
   const classes = useStyles();
   const device = useDevice();
@@ -46,8 +53,7 @@ const Styleguide: FunctionComponent = ({ children }): ReactElement | null => {
   const isMobile = device === 'xs';
 
   const [ isNavigationVisible, setIsNavigationVisible ] = useState(true);
-  const [ isSearchVisible, setIsSearchVisible ] = useState(false);
-  const [ activePath, setActivePath ] = useState(router.asPath);
+  const [ activePath, setActivePath ] = useState(router.pathname);
 
   const currentPage = pageTree.getPageItemByPath(activePath);
 
@@ -74,6 +80,15 @@ const Styleguide: FunctionComponent = ({ children }): ReactElement | null => {
 
   return (
     <div className={ componentClasses }>
+      <Head>
+        {
+          pageTitle ?
+            <title>the native web UX | { pageTitle }</title> :
+            <title>the native web UX</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 }>
@@ -111,11 +126,6 @@ const Styleguide: FunctionComponent = ({ children }): ReactElement | null => {
 
       <div className={ classes.NavigationUniversal }>
         <PageNavigation
-          header={
-            <HorizontalBar align='space-between' paddingHorizontal='none'>
-              <Button icon='search' onClick={ (): void => setIsSearchVisible(!isSearchVisible) } iconSize='sm' style={{ padding: 16 }} />
-            </HorizontalBar>
-          }
           nonIdealState={
             <NonIdealState cause='Sorry, no pages found.'>
               <p>
@@ -124,7 +134,7 @@ const Styleguide: FunctionComponent = ({ children }): ReactElement | null => {
             </NonIdealState>
           }
           pageTree={ pageTree }
-          showSearchBar={ isSearchVisible }
+          showSearchBar={ true }
           activePath={ activePath }
         />
       </div>