Skip to content

Commit

Permalink
docs(PPDSC-2336): chore-ppdse-2336-added NextLink added to site (#356)
Browse files Browse the repository at this point in the history 
* docs(PPDSC-2336): chore-ppdse-2336-added Link site header/mobile

* docs(PPDSC-2336): chore-ppdse-2336-added side bar link next

* docs(PPDSC-2336): chore-ppdse-2336-added site to next eslinrt

* docs(PPDSC-2336): chore-ppdse-2336-removed substring

* docs(PPDSC-2336): chore-ppdse-2336-updated tests
  • Loading branch information
@baburay23
baburay23 authored Sep 2, 2022
1 parent dbbc614 commit a1dd48d
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 50 deletions.
5 changes: 5 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ module.exports = {
'prettier',
'plugin:@next/next/recommended',
],
settings: {
next: {
rootDir: 'site/',
},
},
parserOptions: {
project: 'tsconfig.eslint.json',
},
Expand Down
30 changes: 15 additions & 15 deletions site/components/__tests__/__snapshots__/site-header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1448,7 +1448,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
aria-current="page"
class="emotion-42"
data-testid="styled-indicator"
href="about/introduction"
href="/about/introduction"
>
<span
class="emotion-5"
Expand All @@ -1472,7 +1472,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="getting-started/overview"
href="/getting-started/overview"
>
<span
class="emotion-5"
Expand All @@ -1496,7 +1496,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="theme/overview"
href="/theme/overview"
>
<span
class="emotion-5"
Expand All @@ -1520,7 +1520,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="components/overview"
href="/components/overview"
>
<span
class="emotion-5"
Expand All @@ -1544,7 +1544,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on a section wi
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="patterns/overview"
href="/patterns/overview"
>
<span
class="emotion-5"
Expand Down Expand Up @@ -3190,7 +3190,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
aria-current="page"
class="emotion-42"
data-testid="styled-indicator"
href="about/introduction"
href="/about/introduction"
>
<span
class="emotion-5"
Expand All @@ -3214,7 +3214,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="getting-started/overview"
href="/getting-started/overview"
>
<span
class="emotion-5"
Expand All @@ -3238,7 +3238,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="theme/overview"
href="/theme/overview"
>
<span
class="emotion-5"
Expand All @@ -3262,7 +3262,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="components/overview"
href="/components/overview"
>
<span
class="emotion-5"
Expand All @@ -3286,7 +3286,7 @@ exports[`SiteHeader has first item highlighted (About) if we are on the /about s
aria-current="false"
class="emotion-47"
data-testid="styled-indicator"
href="patterns/overview"
href="/patterns/overview"
>
<span
class="emotion-5"
Expand Down Expand Up @@ -4817,7 +4817,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
aria-current="false"
class="emotion-42"
data-testid="styled-indicator"
href="about/introduction"
href="/about/introduction"
>
<span
class="emotion-5"
Expand All @@ -4841,7 +4841,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
aria-current="false"
class="emotion-42"
data-testid="styled-indicator"
href="getting-started/overview"
href="/getting-started/overview"
>
<span
class="emotion-5"
Expand All @@ -4865,7 +4865,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
aria-current="false"
class="emotion-42"
data-testid="styled-indicator"
href="theme/overview"
href="/theme/overview"
>
<span
class="emotion-5"
Expand All @@ -4889,7 +4889,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
aria-current="false"
class="emotion-42"
data-testid="styled-indicator"
href="components/overview"
href="/components/overview"
>
<span
class="emotion-5"
Expand All @@ -4913,7 +4913,7 @@ exports[`SiteHeader has no highlighted items if we are on the homepage 1`] = `
aria-current="false"
class="emotion-42"
data-testid="styled-indicator"
href="patterns/overview"
href="/patterns/overview"
>
<span
class="emotion-5"
Expand Down
5 changes: 3 additions & 2 deletions site/components/menu-collapsible/menu-collapsible.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
TextBlock,
toNewsKitIcon,
} from 'newskit';
import LinkNext from 'next/link';
import {Launch as OutlinedLaunch} from '@emotion-icons/material-outlined/Launch';
import {IconExpandLess, IconExpandMore} from '../icons';
import {MenuCollapsible, MobileNavigationDivider, StyledAnchor} from './styled';
Expand Down Expand Up @@ -57,7 +58,7 @@ export const MenuMobileCollapsible = ({
list.map(({title, id, subNav, page}) => (
<React.Fragment key={id}>
{page ? (
<>
<LinkNext href={id} passHref>
<MenuItem
href={id}
selected={path.includes(id)}
Expand All @@ -78,7 +79,7 @@ export const MenuMobileCollapsible = ({
>
{title}
</MenuItem>
</>
</LinkNext>
) : (
<>
<MenuGroup
Expand Down
4 changes: 2 additions & 2 deletions site/components/sidebar/__tests__/__snapshots__/sidebar-navigation.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1015,7 +1015,7 @@ exports[`Sidebar navigation should match snapshot with active link 1`] = `
<a
aria-current="false"
class="emotion-3"
href="group1/page1"
href="/group1/page1"
>
<span
class="emotion-4"
Expand Down Expand Up @@ -2797,7 +2797,7 @@ exports[`Sidebar navigation should render only routes under current section 1`]
<a
aria-current="false"
class="emotion-3"
href="group1/page1"
href="/group1/page1"
>
<span
class="emotion-4"
Expand Down
33 changes: 18 additions & 15 deletions site/components/sidebar/sidebar-navigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {useEffect, useRef} from 'react';
import {Block, Menu, MenuDivider, MenuItem} from 'newskit';
import LinkNext from 'next/link';
import {useRouter} from 'next/router';
import routes from '../../routes';
import {Visible} from '../../../src/grid/visibility';
Expand All @@ -22,20 +23,22 @@ const MenuTitleLinks: React.FC<PageLinkProps> = ({
});

return (
<MenuItem
href={href}
data-testid={page}
selected={active}
overrides={{
stylePreset: 'sideBarNavigation',
typographyPreset: 'utilityButton020',
minHeight: '40px',
paddingInlineStart: 'space060',
}}
size="small"
>
{children} <span ref={ref} />
</MenuItem>
<LinkNext href={href} passHref>
<MenuItem
href={href}
data-testid={page}
selected={active}
overrides={{
stylePreset: 'sideBarNavigation',
typographyPreset: 'utilityButton020',
minHeight: '40px',
paddingInlineStart: 'space060',
}}
size="small"
>
{children} <span ref={ref} />
</MenuItem>
</LinkNext>
);
};
export const SiteMenuItem: React.FC<SiteMenuItemProps> = ({menuItemList}) => {
Expand All @@ -49,7 +52,7 @@ export const SiteMenuItem: React.FC<SiteMenuItemProps> = ({menuItemList}) => {
{page ? (
<>
{indexPage ? undefined : (
<MenuTitleLinks active={path === id} href={id.substring(1)}>
<MenuTitleLinks active={path === id} href={id}>
{title}
</MenuTitleLinks>
)}
Expand Down
36 changes: 20 additions & 16 deletions site/components/site-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from 'newskit';
import {Menu as FilledMenu} from '@emotion-icons/material/Menu';
import {Close as FilledClose} from '@emotion-icons/material/Close';

import LinkNext from 'next/link';
import {NewsKitLogo} from './logo';
import {ThemeSwitch} from './theme-switch';
import {handleEnterKeyPress} from '../helpers/a11y';
Expand Down Expand Up @@ -120,21 +120,25 @@ const SiteHeader = React.forwardRef<HeaderRef, HeaderProps>(

const renderNavItems = (items: NavItemProps[], currentRoute: string) =>
items.map(({title, id}) => (
<MenuItem
data-testid="styled-indicator"
key={id}
href={id.substring(1)}
size="small"
selected={currentRoute.split('/')[1].includes(id.split('/')[1])}
overrides={{
stylePreset: 'linkTopNavigation',
minHeight: '80px',
marginInline: {lg: '0', xl: '10px'},
paddingInline: {lg: '3px', xl: '16px'},
}}
>
{title}
</MenuItem>
<React.Fragment key={id}>
<LinkNext href={id} passHref>
<MenuItem
data-testid="styled-indicator"
key={id}
href={id}
size="small"
selected={currentRoute.split('/')[1].includes(id.split('/')[1])}
overrides={{
stylePreset: 'linkTopNavigation',
minHeight: '80px',
marginInline: {lg: '0', xl: '10px'},
paddingInline: {lg: '3px', xl: '16px'},
}}
>
{title}
</MenuItem>
</LinkNext>
</React.Fragment>
));

return (
Expand Down

0 comments on commit a1dd48d

Please sign in to comment.