diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx index c3dc7e221..08e32a3bb 100644 --- a/app/scripts/components/common/card/index.tsx +++ b/app/scripts/components/common/card/index.tsx @@ -227,7 +227,6 @@ export interface LinkProperties { export interface LinkWithPathProperties extends LinkProperties { linkTo: string; - isLinkExternal?: boolean; } export interface CardComponentBaseProps { @@ -243,6 +242,7 @@ export interface CardComponentBaseProps { parentTo?: string; tagLabels?: string[]; footerContent?: JSX.Element; + hideExternalLinkBadge?: boolean; onCardClickCapture?: MouseEventHandler; } @@ -251,7 +251,6 @@ export interface CardComponentBaseProps { export interface CardComponentPropsDeprecated extends CardComponentBaseProps { linkTo: string; onLinkClick?: MouseEventHandler; - isLinkExternal?: boolean; } export interface CardComponentProps extends CardComponentBaseProps { linkProperties: LinkWithPathProperties; @@ -278,6 +277,7 @@ function CardComponent(props: CardComponentPropsType) { tagLabels, parentTo, footerContent, + hideExternalLinkBadge, onCardClickCapture } = props; // @TODO: This process is not necessary once all the instances adapt the linkProperties syntax @@ -289,25 +289,23 @@ function CardComponent(props: CardComponentPropsType) { const { linkProperties: linkPropertiesProps } = props; linkProperties = linkPropertiesProps; } else { - const { linkTo, onLinkClick, isLinkExternal } = props; + const { linkTo, onLinkClick } = props; linkProperties = { linkTo, onLinkClick, pathAttributeKeyName: 'to', - LinkElement: SmartLink, - isLinkExternal + LinkElement: SmartLink }; } - const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo); + const isExternalLink = /^https?:\/\//.test(linkProperties.linkTo); return ( {title} - {isExternalLink && } + {(hideExternalLinkBadge !== true && isExternalLink) && } {!isExternalLink && tagLabels && parentTo && ( tagLabels.map((label) => ( diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx index e70a00b15..824d1e2ce 100644 --- a/app/scripts/components/common/featured-slider-section.tsx +++ b/app/scripts/components/common/featured-slider-section.tsx @@ -110,8 +110,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) { linkProperties={{ linkTo: `${d.asLink?.url ?? getItemPath(d)}`, pathAttributeKeyName: 'to', - LinkElement: SmartLink, - isLinkExternal: d.isLinkExternal + LinkElement: SmartLink }} title={d.name} overline={ diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx index b78e0a9ca..79fcfbc99 100644 --- a/app/scripts/components/common/related-content.tsx +++ b/app/scripts/components/common/related-content.tsx @@ -52,7 +52,6 @@ interface FormatBlock { date: string; link: string; asLink?: LinkContentData; - isLinkExternal?: boolean; parentLink: string; media: Media; parent: RelatedContentData['type']; @@ -152,8 +151,7 @@ export default function RelatedContent(props: RelatedContentProps) { linkProperties={{ linkTo: `${t.asLink?.url ?? t.link}`, LinkElement: SmartLink, - pathAttributeKeyName: 'to', - isLinkExternal: t.isLinkExternal + pathAttributeKeyName: 'to' }} title={t.name} date={ diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx index 09a5a1f88..62c2d61f8 100644 --- a/app/scripts/components/common/smart-link.tsx +++ b/app/scripts/components/common/smart-link.tsx @@ -5,18 +5,17 @@ import { getLinkProps } from '$utils/url'; interface SmartLinkProps { to: string; - isLinkExternal?: boolean; onLinkClick?: ()=> void; children?: ReactNode; } /** - * Switches between a `a` and a `Link` depending on the optional `isLinkExternal` prop or the url. + * Switches between a `a` and a `Link` depending on the url. */ export default function SmartLink(props: SmartLinkProps) { - const { to, isLinkExternal, onLinkClick, children, ...rest } = props; - const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to); - const linkProps = getLinkProps(to, isLinkExternal, undefined, onLinkClick); + const { to, onLinkClick, children, ...rest } = props; + const isExternalLink = /^https?:\/\//.test(to); + const linkProps = getLinkProps(to, undefined, onLinkClick); return isExternalLink ? ( {children} @@ -28,15 +27,14 @@ export default function SmartLink(props: SmartLinkProps) { interface CustomLinkProps { href: string; - isLinkExternal?: boolean; } /** - * For links defined as markdown, this component will open the external link in a new tab depending on the optional `isLinkExternal` prop or the url. + * For links defined as markdown, this component will open the external link in a new tab. */ export function CustomLink(props: CustomLinkProps) { - const { href, isLinkExternal, ...rest } = props; - const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(href); + const { href, ...rest } = props; + const isExternalLink = /^https?:\/\//.test(href); const linkProps = getLinkProps(href); return isExternalLink ? ( diff --git a/app/scripts/components/home/featured-stories.tsx b/app/scripts/components/home/featured-stories.tsx index 23d1c1f23..a8bb557a7 100644 --- a/app/scripts/components/home/featured-stories.tsx +++ b/app/scripts/components/home/featured-stories.tsx @@ -82,8 +82,7 @@ function FeaturedStories() { linkProperties={{ linkTo: `${d.asLink?.url ?? getStoryPath(d)}`, LinkElement: SmartLink, - pathAttributeKeyName: 'to', - isLinkExternal: d.isLinkExternal + pathAttributeKeyName: 'to' }} title={d.name} tagLabels={[getString('stories').one]} diff --git a/app/scripts/components/sandbox/cards/index.js b/app/scripts/components/sandbox/cards/index.js index dbd59add9..834473e9f 100644 --- a/app/scripts/components/sandbox/cards/index.js +++ b/app/scripts/components/sandbox/cards/index.js @@ -13,7 +13,6 @@ function SandboxCards() { } + hideExternalLinkBadge={d.hideExternalLinkBadge} imgSrc={d.media?.src} imgAlt={d.media?.alt} footerContent={ diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts index b11bee858..ee2873d31 100644 --- a/app/scripts/types/veda.ts +++ b/app/scripts/types/veda.ts @@ -206,7 +206,7 @@ export interface StoryData { taxonomy: Taxonomy[]; related?: RelatedContentData[]; asLink?: LinkContentData; - isLinkExternal?: boolean; + hideExternalLinkBadge?: boolean; isHidden?: boolean; } diff --git a/app/scripts/utils/url.ts b/app/scripts/utils/url.ts index a1cda8d63..926bf23ff 100644 --- a/app/scripts/utils/url.ts +++ b/app/scripts/utils/url.ts @@ -7,14 +7,13 @@ export function isExternalLink(link: string): boolean { export const getLinkProps = ( linkTo: string, - isLinkExternal?: boolean, as?: React.ForwardRefExoticComponent< LinkProps & React.RefAttributes >, onClick?: (() => void) | MouseEventHandler ) => { // Open the link in a new tab when link is external - const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(linkTo); + const isExternalLink = /^https?:\/\//.test(linkTo); return isExternalLink ? { href: linkTo, diff --git a/mock/stories/external-link-example.stories.mdx b/mock/stories/external-link-example.stories.mdx index 51a5b85d9..c6225d964 100644 --- a/mock/stories/external-link-example.stories.mdx +++ b/mock/stories/external-link-example.stories.mdx @@ -10,6 +10,7 @@ media: name: Unsplash url: https://unsplash.com/ pubDate: 2023-02-09 +hideExternalLinkBadge: false taxonomy: - name: Topics values: @@ -24,5 +25,4 @@ related: id: air-quality-and-covid-19 asLink: url: 'https://developmentseed.org' -isLinkExternal: true --- diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index 52083c4dd..5b558b4ca 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -207,7 +207,7 @@ declare module 'veda' { taxonomy: Taxonomy[]; related?: RelatedContentData[]; asLink?: LinkContentData; - isLinkExternal?: boolean; + hideExternalLinkBadge?: boolean; isHidden?: boolean; }