diff --git a/src/blocks/Icons/Icons.tsx b/src/blocks/Icons/Icons.tsx index d2bf3b679..33fb08cab 100644 --- a/src/blocks/Icons/Icons.tsx +++ b/src/blocks/Icons/Icons.tsx @@ -1,6 +1,6 @@ import React, {useContext} from 'react'; -import {BlockHeader, Image} from '../../components'; +import {BlockHeader, Image, RouterLink} from '../../components'; import {LocationContext} from '../../context/locationContext'; import {IconsBlockProps} from '../../models'; import {block, getLinkProps} from '../../utils'; @@ -16,7 +16,7 @@ const Icons = ({title, size = 's', items}: IconsBlockProps) => {
{title && } {items.map((item) => ( - { >

{item.text}

-
+ ))}
); diff --git a/src/components/FileLink/FileLink.tsx b/src/components/FileLink/FileLink.tsx index 9e4e0a48b..fa2df4b03 100644 --- a/src/components/FileLink/FileLink.tsx +++ b/src/components/FileLink/FileLink.tsx @@ -3,6 +3,7 @@ import React, {useContext} from 'react'; import {LocationContext} from '../../context/locationContext'; import {FileLinkProps, WithChildren} from '../../models'; import {block, getLinkProps} from '../../utils'; +import RouterLink from '../RouterLink/RouterLink'; import './FileLink.scss'; @@ -46,9 +47,14 @@ const FileLink = (props: WithChildren) => {
{fileExt}
)}
- + {text} - +
); diff --git a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx index c1e2a4bcc..f6c721ba7 100644 --- a/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx +++ b/src/components/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx @@ -4,6 +4,7 @@ import {useAnalytics} from '../../hooks'; import {useMetrika} from '../../hooks/useMetrika'; import {DefaultEventNames, HeaderBreadCrumbsProps} from '../../models'; import {block} from '../../utils'; +import RouterLink from '../RouterLink/RouterLink'; import './HeaderBreadcrumbs.scss'; @@ -23,9 +24,9 @@ export default function HeaderBreadcrumbs(props: HeaderBreadCrumbsProps) {
{items.map((item) => (
- + {item.text} - +
))}
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index a5dfb81c1..94a6bdece 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -11,6 +11,7 @@ import {ClassNameProps, DefaultEventNames, LinkProps, TextSize, WithChildren} fr import {block, getLinkProps, setUrlTld} from '../../utils'; import BackLink from '../BackLink/BackLink'; import FileLink from '../FileLink/FileLink'; +import RouterLink from '../RouterLink/RouterLink'; import './Link.scss'; @@ -80,7 +81,7 @@ const LinkBlock = (props: WithChildren) => { const content = children || text; return ( - ) => { ) : ( content )} - + ); } default: diff --git a/src/components/RouterLink/RouterLink.tsx b/src/components/RouterLink/RouterLink.tsx index b0359ae2b..60b866b01 100644 --- a/src/components/RouterLink/RouterLink.tsx +++ b/src/components/RouterLink/RouterLink.tsx @@ -2,6 +2,7 @@ import React, {useContext} from 'react'; import {LocationContext} from '../../context/locationContext'; import {WithChildren} from '../../models'; +import {EXTERNAL_LINK_PROPS, isLinkExternal} from '../../utils'; export interface RouterLinkProps { href: string; @@ -14,16 +15,18 @@ export interface RouterLinkProps { const RouterLink = ({ href, - target = '_blank', rel, - forceAnchor = false, children, + target, + forceAnchor = false, ...commonProps }: WithChildren) => { - const {Link} = useContext(LocationContext); + const {Link, hostname} = useContext(LocationContext); - const isExternal = href?.startsWith('http://') || href?.startsWith('https://'); - const shouldAnchorTag = typeof href === 'string' && (!Link || isExternal || forceAnchor); + const isExternal = isLinkExternal(href, hostname); + const shouldAnchorTag = + typeof href === 'string' && + (!Link || isExternal || forceAnchor || target === EXTERNAL_LINK_PROPS.target); const component = shouldAnchorTag ? 'a' : Link; if (!component) { @@ -33,7 +36,7 @@ const RouterLink = ({ const linkProps = { href, target, - rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel, + rel: target === EXTERNAL_LINK_PROPS.target && !rel ? EXTERNAL_LINK_PROPS.rel : rel, }; return React.createElement( @@ -42,7 +45,6 @@ const RouterLink = ({ href, ...(shouldAnchorTag ? linkProps : {}), ...commonProps, - area: shouldAnchorTag ? '1' : '2', }, children, ); diff --git a/src/components/Title/Title.tsx b/src/components/Title/Title.tsx index ac9a0e0f1..59dea1f95 100644 --- a/src/components/Title/Title.tsx +++ b/src/components/Title/Title.tsx @@ -1,6 +1,6 @@ import React, {Fragment, ReactNode, useContext} from 'react'; -import {HTML, ToggleArrow} from '../'; +import {HTML, RouterLink, ToggleArrow} from '../'; import {LocationContext} from '../../context/locationContext'; import {MobileContext} from '../../context/mobileContext'; import {TextSize, TitleProps} from '../../models'; @@ -81,9 +81,14 @@ const Title = (props: TitleFullProps) => { content = textMarkup; } else if (url) { content = ( - + {insideClickableContent} - + ); } else if (onClick) { content = ( diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx index 0c95a5866..a6b2e4a3a 100644 --- a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx +++ b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx @@ -16,7 +16,7 @@ const b = block('navigation-link'); type NavigationLinkProps = NavigationItemProps & NavigationLinkItem; export const NavigationLink: React.FC = (props) => { - const {hostname, Link} = useContext(LocationContext); + const {hostname} = useContext(LocationContext); const {url, text, icon, arrow, target, className, iconSize, ...rest} = props; const linkExtraProps = getLinkProps(url, hostname, target); const iconData = icon && getMediaImage(icon); @@ -29,19 +29,9 @@ export const NavigationLink: React.FC = (props) => { ); - if (linkExtraProps?.target || !Link) { - return ( - - {content} - - ); - } else { - return ( - - - {content} - - - ); - } + return ( + + {content} + + ); }; diff --git a/src/navigation/components/SocialIcon/SocialIcon.tsx b/src/navigation/components/SocialIcon/SocialIcon.tsx index 6004d39b8..bfbfe137c 100644 --- a/src/navigation/components/SocialIcon/SocialIcon.tsx +++ b/src/navigation/components/SocialIcon/SocialIcon.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Image} from '../../../components'; +import {Image, RouterLink} from '../../../components'; import {getMediaImage} from '../../../components/Media/Image/utils'; import {NavigationSocialItem} from '../../../models'; import {block} from '../../../utils'; @@ -17,9 +17,9 @@ const SocialIcon: React.FC = ({icon, url, classNam const iconData = getMediaImage(icon); return ( - + - + ); };