fix: adds missing legacyBehavior prop

This commit is contained in:
Nicolás Quiroz 2022-12-07 17:09:43 -03:00
parent 11035bf0c4
commit d8996d1c95
12 changed files with 52 additions and 35 deletions

View file

@ -18,7 +18,7 @@ export const ButtonLinkSecondary: React.FC<Props> = ({ href, children, ...restPr
<Text textStyle='home-section-link-label'>{children}</Text> <Text textStyle='home-section-link-label'>{children}</Text>
</Link> </Link>
) : ( ) : (
<NextLink href={href.toString()} passHref {...restProps}> <NextLink href={href.toString()} passHref legacyBehavior {...restProps}>
<Link variant='button-link-secondary'> <Link variant='button-link-secondary'>
<Text textStyle='home-section-link-label'>{children}</Text> <Text textStyle='home-section-link-label'>{children}</Text>
</Link> </Link>

View file

@ -27,9 +27,11 @@ export const Header: FC = () => {
borderColor='primary' borderColor='primary'
flexGrow={2} flexGrow={2}
> >
<NextLink href={'/'} passHref> <NextLink href={'/'} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='header-font' whiteSpace='nowrap'>go-ethereum</Text> <Text textStyle='header-font' whiteSpace='nowrap'>
go-ethereum
</Text>
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Stack>

View file

@ -25,7 +25,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
return ( return (
<Flex direction={{ base: 'column', md: 'row' }}> <Flex direction={{ base: 'column', md: 'row' }}>
{/* DOWNLOADS */} {/* DOWNLOADS */}
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }} onClick={close}> <Link _hover={{ textDecoration: 'none' }} onClick={close}>
<Stack {...menuItemStyles}> <Stack {...menuItemStyles}>
<Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>downloads</Text> <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>downloads</Text>
@ -34,7 +34,7 @@ export const HeaderButtons: FC<Props> = ({ close }) => {
</NextLink> </NextLink>
{/* DOCUMENTATION */} {/* DOCUMENTATION */}
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }} onClick={close}> <Link _hover={{ textDecoration: 'none' }} onClick={close}>
<Stack {...menuItemStyles}> <Stack {...menuItemStyles}>
<Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}> <Text textStyle={{ base: 'header-mobile-button', md: 'header-button' }}>

View file

@ -16,7 +16,11 @@ export const Breadcrumbs: FC = () => {
{pathSplit.map((path: string, idx: number) => { {pathSplit.map((path: string, idx: number) => {
return ( return (
<BreadcrumbItem key={path}> <BreadcrumbItem key={path}>
<NextLink href={`/${pathSplit.slice(0, idx + 1).join('/')}`} passHref> <NextLink
href={`/${pathSplit.slice(0, idx + 1).join('/')}`}
passHref
legacyBehavior
>
<BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}> <BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}>
{path} {path}
</BreadcrumbLink> </BreadcrumbLink>

View file

@ -9,7 +9,7 @@ import {
Stack, Stack,
Text Text
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { AddIcon, MinusIcon } from '../svgs/' import { AddIcon, MinusIcon } from '../svgs/';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -27,7 +27,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
return ( return (
<Stack border='2px' borderColor='primary'> <Stack border='2px' borderColor='primary'>
{navLinks.map(({ id, to, items }, idx) => { {navLinks.map(({ id, to, items }, idx) => {
const split = to?.split('/') const split = to?.split('/');
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
return ( return (
<Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}> <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
@ -52,7 +52,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
_groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }} _groupHover={{ background: 'primary', color: 'bg', textDecoration: 'none' }}
> >
{to ? ( {to ? (
<NextLink href={to} passHref> <NextLink href={to} passHref legacyBehavior>
<Link textDecoration='none !important'> <Link textDecoration='none !important'>
<Text <Text
textStyle='docs-nav-dropdown' textStyle='docs-nav-dropdown'
@ -62,7 +62,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
verticalAlign: '-1.25px', verticalAlign: '-1.25px',
marginInlineEnd: 2, marginInlineEnd: 2,
fontSize: 'lg', fontSize: 'lg',
display: isActive ? 'unset' : 'none', display: isActive ? 'unset' : 'none'
}} }}
_groupHover={{ color: 'bg' }} _groupHover={{ color: 'bg' }}
> >
@ -100,4 +100,4 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
})} })}
</Stack> </Stack>
); );
} };

View file

@ -27,7 +27,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
<Divider borderColor='primary' my={`4 !important`} /> <Divider borderColor='primary' my={`4 !important`} />
{parsedHeadings.map((heading, idx) => { {parsedHeadings.map((heading, idx) => {
return ( return (
<NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`}> <NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior>
<Link m={0} textDecoration='none !important'> <Link m={0} textDecoration='none !important'>
<Text <Text
color={activeHash === heading?.headingId ? 'body' : 'primary'} color={activeHash === heading?.headingId ? 'body' : 'primary'}
@ -36,19 +36,19 @@ export const DocumentNav: FC<Props> = ({ content }) => {
_hover={{ _hover={{
background: 'primary', background: 'primary',
boxShadow: '0 0 0 6px var(--chakra-colors-primary)', boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
color: 'bg', color: 'bg'
}} }}
_focus={{ _focus={{
background: 'primary', background: 'primary',
boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important',
color: 'bg', color: 'bg',
outline: '2px solid var(--chakra-colors-secondary) !important', outline: '2px solid var(--chakra-colors-secondary) !important',
outlineOffset: '4px', outlineOffset: '4px'
}} }}
_active={{ _active={{
background: 'secondary', background: 'secondary',
boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
color: 'bg', color: 'bg'
}} }}
> >
{heading?.title} {heading?.title}

View file

@ -15,11 +15,16 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
return ( return (
<Stack px={4}> <Stack px={4}>
{links.map(({ id, to, items }) => { {links.map(({ id, to, items }) => {
const split = to?.split('/') const split = to?.split('/');
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
return to ? ( return to ? (
<Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group> <Stack
<NextLink href={to} passHref key={id}> key={id}
pb={items ? 6 : 0}
_hover={{ background: 'primary', color: 'bg' }}
data-group
>
<NextLink href={to} passHref key={id} legacyBehavior>
<Link textDecoration='none !important'> <Link textDecoration='none !important'>
<Text <Text
textStyle='docs-nav-links' textStyle='docs-nav-links'
@ -29,12 +34,11 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
verticalAlign: '-1.25px', verticalAlign: '-1.25px',
marginInlineEnd: 2, marginInlineEnd: 2,
fontSize: 'lg', fontSize: 'lg',
display: isActive ? 'unset' : 'none', display: isActive ? 'unset' : 'none'
}} }}
_groupHover={{ _groupHover={{
color: 'bg', color: 'bg',
boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)', boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)'
}} }}
> >
{id} {id}

View file

@ -35,14 +35,14 @@ const MDComponents = {
{children} {children}
</Link> </Link>
) : ( ) : (
<NextLink href={href} passHref> <NextLink href={href} passHref legacyBehavior>
<Link variant='light'>{children}</Link> <Link variant='light'>{children}</Link>
</NextLink> </NextLink>
); );
}, },
// headings // headings
h1: ({ children }: any) => { h1: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}> <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
@ -51,16 +51,23 @@ const MDComponents = {
); );
}, },
h2: ({ children }: any) => { h2: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}> <Heading
as='h2'
textAlign='start'
mt={{ base: '12 !important', md: '16 !important' }}
mb='4 !important'
{...header2}
id={headingId}
>
{parsedChildren} {parsedChildren}
</Heading> </Heading>
); );
}, },
h3: ({ children }: any) => { h3: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}> <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
{parsedChildren} {parsedChildren}
@ -68,7 +75,7 @@ const MDComponents = {
); );
}, },
h4: ({ children }: any) => { h4: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h4' mb='2.5 !important' {...header4} id={headingId}> <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>

View file

@ -81,7 +81,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
return ( return (
<NextLink key={key} href={buildURL} passHref> <NextLink key={key} href={buildURL} passHref legacyBehavior>
<Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}> <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
<HStack spacing={4}> <HStack spacing={4}>
<Stack alignItems='center'> <Stack alignItems='center'>

View file

@ -36,7 +36,7 @@ export const HomeHero: FC = () => {
alignItems={{ base: 'center', md: 'flex-start' }} alignItems={{ base: 'center', md: 'flex-start' }}
> >
<Flex direction='column' alignItems='center' mr={{ md: 6 }}> <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
<Button variant='primary' as='a' mb={1}> <Button variant='primary' as='a' mb={1}>
<Text textStyle='homepage-primary-label'>Download</Text> <Text textStyle='homepage-primary-label'>Download</Text>
</Button> </Button>
@ -48,7 +48,7 @@ export const HomeHero: FC = () => {
</Flex> </Flex>
<Flex direction='column' alignItems='center'> <Flex direction='column' alignItems='center'>
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref legacyBehavior>
<Button variant='primary' as='a' mb={1}> <Button variant='primary' as='a' mb={1}>
<Text textStyle='homepage-primary-label'>Documentation</Text> <Text textStyle='homepage-primary-label'>Documentation</Text>
</Button> </Button>

View file

@ -28,7 +28,7 @@ export const QuickLinks: FC = () => {
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem borderBottom='2px solid' borderColor='primary'> <GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref> <NextLink href={`${DOCS_PAGE}/getting-started`} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group
@ -66,7 +66,7 @@ export const QuickLinks: FC = () => {
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem borderBottom='2px solid' borderColor='primary'> <GridItem borderBottom='2px solid' borderColor='primary'>
<NextLink href={FAQ_PAGE} passHref> <NextLink href={FAQ_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group
@ -104,7 +104,7 @@ export const QuickLinks: FC = () => {
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem> <GridItem>
<NextLink href={CONTRIBUTING_PAGE} passHref> <NextLink href={CONTRIBUTING_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Stack <Stack
data-group data-group

View file

@ -43,7 +43,7 @@ export const Footer: FC = () => {
borderColor='primary' borderColor='primary'
p={4} p={4}
> >
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='footer-link-label'>DOWNLOADS</Text> <Text textStyle='footer-link-label'>DOWNLOADS</Text>
</Link> </Link>
@ -61,7 +61,7 @@ export const Footer: FC = () => {
borderColor='primary' borderColor='primary'
p={4} p={4}
> >
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref legacyBehavior>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='footer-link-label'>DOCUMENTATION</Text> <Text textStyle='footer-link-label'>DOCUMENTATION</Text>
</Link> </Link>