Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(PPDSC-2336): chore-ppdse-2336-added NextLink added to site #356

Merged
merged 6 commits into from
Sep 2, 2022
Merged

docs(PPDSC-2336): chore-ppdse-2336-added NextLink added to site #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b37cc1
docs(PPDSC-2336): chore-ppdse-2336-added Link site header/mobile
baburay23 Aug 31, 2022
3fe1249
docs(PPDSC-2336): chore-ppdse-2336-added side bar link next
baburay23 Sep 1, 2022
4c17d1b
docs(PPDSC-2336): chore-ppdse-2336-added site to next eslinrt
baburay23 Sep 1, 2022
00afc74
Merge branch 'main' into docs/PPDSC-2336-update-nextlink
baburay23 Sep 1, 2022
1e38de2
docs(PPDSC-2336): chore-ppdse-2336-removed substring
baburay23 Sep 1, 2022
4468fd5
docs(PPDSC-2336): chore-ppdse-2336-updated tests
baburay23 Sep 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .eslintrc.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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