Actually, add a isLinkExternal prop instead of only relying on url ch…

…ecking
NASA-IMPACT · Oct 14, 2024 · 218f651 · 218f651
1 parent 8819981
commit 218f651
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 17 deletions.
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
@@ -16,7 +16,6 @@ import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
 import { ElementInteractive } from '$components/common/element-interactive';
 import { Figure } from '$components/common/figure';
-import { isExternalLink } from '$utils/url';
 
 type CardType = 'classic' | 'cover' | 'featured' | 'horizontal-info';
 
@@ -228,6 +227,7 @@ export interface LinkProperties {
 
 export interface LinkWithPathProperties extends LinkProperties {
   linkTo: string;
+  isLinkExternal?: boolean;
 }
 
 export interface CardComponentBaseProps {
@@ -251,6 +251,7 @@ export interface CardComponentBaseProps {
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
   onLinkClick?: MouseEventHandler;
+  isLinkExternal?: boolean;
 }
 export interface CardComponentProps extends CardComponentBaseProps {
   linkProperties: LinkWithPathProperties;
@@ -288,15 +289,18 @@ function CardComponent(props: CardComponentPropsType) {
     const { linkProperties: linkPropertiesProps } = props;
     linkProperties = linkPropertiesProps;
   } else {
-    const { linkTo, onLinkClick,  } = props;
+    const { linkTo, onLinkClick, isLinkExternal } = props;
     linkProperties = {
       linkTo,
       onLinkClick,
       pathAttributeKeyName: 'to',
-      LinkElement: SmartLink
+      LinkElement: SmartLink,
+      isLinkExternal
     };
   }
 
+  const isExternalLink = linkProperties.isLinkExternal ?? /^https?:\/\//.test(linkProperties.linkTo);
+
   return (
     <ElementInteractive
       linkProps={{
@@ -317,8 +321,8 @@ function CardComponent(props: CardComponentPropsType) {
               <CardHeadline>
                 <CardTitle>{title}</CardTitle>
                 <CardOverline as='div'>
-                  {isExternalLink(linkProperties.linkTo) && <ExternalLinkFlag />}
-                  {!isExternalLink(linkProperties.linkTo) && tagLabels && parentTo && (
+                  {isExternalLink && <ExternalLinkFlag />}
+                  {!isExternalLink && tagLabels && parentTo && (
                     tagLabels.map((label) => (
                       <CardLabel as={linkProperties.LinkElement} to={parentTo} key={label}>
                         {label}

diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx
@@ -110,7 +110,8 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) {
                       linkProperties={{
                         linkTo: `${d.asLink?.url ?? getItemPath(d)}`,
                         pathAttributeKeyName: 'to',
-                        LinkElement: SmartLink
+                        LinkElement: SmartLink,
+                        isLinkExternal: d.isLinkExternal
                       }}
                       title={d.name}
                       overline={

diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx
@@ -52,6 +52,7 @@ interface FormatBlock {
   date: string;
   link: string;
   asLink?: LinkContentData;
+  isLinkExternal?: boolean;
   parentLink: string;
   media: Media;
   parent: RelatedContentData['type'];
@@ -151,7 +152,8 @@ export default function RelatedContent(props: RelatedContentProps) {
                 linkProperties={{
                   linkTo: `${t.asLink?.url ?? t.link}`,
                   LinkElement: SmartLink,
-                  pathAttributeKeyName: 'to'
+                  pathAttributeKeyName: 'to',
+                  isLinkExternal: t.isLinkExternal
                 }}
                 title={t.name}
                 date={

diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx
@@ -1,10 +1,11 @@
 import React, { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
-import { getLinkProps, isExternalLink } from '$utils/url';
+import { getLinkProps } from '$utils/url';
 
 interface SmartLinkProps {
   to: string;
+  isLinkExternal?: boolean;
   onLinkClick?: ()=> void;
   children?: ReactNode;
 }
@@ -13,10 +14,11 @@ interface SmartLinkProps {
  * Switches between a `a` and a `Link` depending on the url.
  */
 export default function SmartLink(props: SmartLinkProps) {
-  const { to, onLinkClick, children, ...rest } = props;
-  const linkProps = getLinkProps(to, undefined, onLinkClick);
+  const { to, isLinkExternal, onLinkClick, children, ...rest } = props;
+  const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(to);
+  const linkProps = getLinkProps(to, isLinkExternal, undefined, onLinkClick);
 
-  return isExternalLink(to) ? (
+  return isExternalLink ? (
     <a {...linkProps} {...rest}> {children} </a>
     ) : (
       <Link {...linkProps} {...rest}> {children} </Link>
@@ -33,8 +35,9 @@ interface CustomLinkProps {
  */
 export function CustomLink(props: CustomLinkProps) {
   const { href, ...rest } = props;
+  const isExternalLink = /^https?:\/\//.test(href);
   const linkProps = getLinkProps(href);
-  return isExternalLink(href) ? (
+  return isExternalLink ? (
       <a {...linkProps} {...rest} />
   ) : (
     <Link {...linkProps} {...rest} />

diff --git a/app/scripts/components/home/featured-stories.tsx b/app/scripts/components/home/featured-stories.tsx
@@ -82,7 +82,8 @@ function FeaturedStories() {
                     linkProperties={{
                       linkTo: `${d.asLink?.url ?? getStoryPath(d)}`,
                       LinkElement: SmartLink,
-                      pathAttributeKeyName: 'to'
+                      pathAttributeKeyName: 'to',
+                      isLinkExternal: d.isLinkExternal
                     }}
                     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
@@ -13,6 +13,7 @@ function SandboxCards() {
           <Card
             linkLabel='View more'
             linkTo='/'
+            isLinkExternal={false}
             title='Cities Experiencing Clearer Air During Lockdowns'
             description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
             date={new Date('2021-10-26')}
@@ -28,6 +29,7 @@ function SandboxCards() {
             cardType='cover'
             linkLabel='View more'
             linkTo='/'
+            isLinkExternal={false}
             title='Nitrogen Dioxide (NO₂)'
             description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce varius erat in vulputate.'
             tagLabels={['Dataset']}

diff --git a/app/scripts/components/stories/hub/hub-content.tsx b/app/scripts/components/stories/hub/hub-content.tsx
@@ -168,7 +168,8 @@ export default function HubContent(props:HubContentProps) {
                 linkProperties={{
                   linkTo: `${d.asLink?.url ?? d.path}`,
                   LinkElement,
-                  pathAttributeKeyName
+                  pathAttributeKeyName,
+                  isLinkExternal: d.isLinkExternal
                 }}
                 title={
                   <TextHighlight

diff --git a/app/scripts/types/veda.ts b/app/scripts/types/veda.ts
@@ -206,6 +206,7 @@ export interface StoryData {
   taxonomy: Taxonomy[];
   related?: RelatedContentData[];
   asLink?: LinkContentData;
+  isLinkExternal?: boolean;
   isHidden?: boolean;
 }
 

diff --git a/app/scripts/utils/url.ts b/app/scripts/utils/url.ts
@@ -7,13 +7,15 @@ export function isExternalLink(link: string): boolean {
 
 export const getLinkProps = (
   linkTo: string,
+  isLinkExternal?: boolean,
   as?: React.ForwardRefExoticComponent<
     LinkProps & React.RefAttributes<HTMLAnchorElement>
   >,
   onClick?: (() => void) | MouseEventHandler
 ) => {
   // Open the link in a new tab when link is external
-  return isExternalLink(linkTo)
+  const isExternalLink = isLinkExternal ?? /^https?:\/\//.test(linkTo);
+  return isExternalLink
     ? {
         href: linkTo,
         to: linkTo,

diff --git a/mock/stories/external-link-example.stories.mdx b/mock/stories/external-link-example.stories.mdx
@@ -1,7 +1,7 @@
 ---
 featured: true
 id: 'external-link-test'
-name: External Link Test 
+name: External Link Test
 description: Story to test external link
 media:
   src: ::file ./img-placeholder-6.jpg
@@ -24,4 +24,5 @@ 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
@@ -207,6 +207,7 @@ declare module 'veda' {
     taxonomy: Taxonomy[];
     related?: RelatedContentData[];
     asLink?: LinkContentData;
+    isLinkExternal?: boolean;
     isHidden?: boolean;
   }
 
@@ -339,7 +340,9 @@ declare module 'veda' {
   export const getBoolean: (variable: string) => boolean;
 
   export const getBannerFromVedaConfig: () => BannerData | undefined;
-  export const getCookieConsentFromVedaConfig: () => CookieConsentData| undefined;
+  export const getCookieConsentFromVedaConfig: () =>
+    | CookieConsentData
+    | undefined;
 
   export const getNavItemsFromVedaConfig: () =>
     | {