Hotfix to hide the external link badge from cards

NASA-IMPACT · Oct 31, 2024 · dcb5fdf · dcb5fdf
1 parent 0cc5f82
commit dcb5fdf
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 34 deletions.
diff --git 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 (
     <ElementInteractive
       linkProps={{
         as: linkProperties.LinkElement,
         [linkProperties.pathAttributeKeyName]: linkProperties.linkTo,
-        onLinkClick: linkProperties.onLinkClick,
-        isLinkExternal: isExternalLink
+        onLinkClick: linkProperties.onLinkClick
       }}
       as={CardItem}
       cardType={cardType}
@@ -322,7 +320,7 @@ function CardComponent(props: CardComponentPropsType) {
               <CardHeadline>
                 <CardTitle>{title}</CardTitle>
                 <CardOverline as='div'>
-                  {isExternalLink && <ExternalLinkFlag />}
+                  {(hideExternalLinkBadge !== true && isExternalLink) && <ExternalLinkFlag />}
                   {!isExternalLink && tagLabels && parentTo && (
                     tagLabels.map((label) => (
                       <CardLabel as={linkProperties.LinkElement} to={parentTo} key={label}>

diff --git 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
@@ -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
@@ -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 ? (
     <a {...linkProps} {...rest}> {children} </a>
@@ -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 ? (
       <a {...linkProps} {...rest} />

diff --git 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
@@ -13,7 +13,6 @@ 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')}
@@ -29,7 +28,6 @@ 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,8 +168,7 @@ export default function HubContent(props:HubContentProps) {
                 linkProperties={{
                   linkTo: `${d.asLink?.url ?? d.path}`,
                   LinkElement,
-                  pathAttributeKeyName,
-                  isLinkExternal: d.isLinkExternal
+                  pathAttributeKeyName
                 }}
                 title={
                   <TextHighlight
@@ -187,6 +186,7 @@ export default function HubContent(props:HubContentProps) {
                     {d.description}
                   </TextHighlight>
                 }
+                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
@@ -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
@@ -7,14 +7,13 @@ 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
-  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
@@ -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
@@ -207,7 +207,7 @@ declare module 'veda' {
     taxonomy: Taxonomy[];
     related?: RelatedContentData[];
     asLink?: LinkContentData;
-    isLinkExternal?: boolean;
+    hideExternalLinkBadge?: boolean;
     isHidden?: boolean;
   }