Refactor Teaser link to reuse in text teaser, key numbers components #…

…2066 (#2096) * ♻️ Refactor TextTeaser to use readmorelink #2066 * ♻️ Refactor 5050hero to use readmorelink #2066 * ♻️ Refactor ReadMoreLink to a more general component #2066 * ♻️ Add variant on textteaser #2066 * ♻️ Pick type from linkprops #2066
equinor · Feb 21, 2024 · e1f5c92 · e1f5c92
1 parent ee80160
commit e1f5c92
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 127 deletions.
diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -2,10 +2,9 @@ import styled from 'styled-components'
 import Image from '../SanityImage'
 import IngressText from '../portableText/IngressText'
 import TitleText from '../portableText/TitleText'
-import type { LinkData, HeroType } from '../../../types/types'
-import { BackgroundContainer, Link, Text } from '@components'
-import { getUrlFromAction } from '../../../common/helpers/getUrlFromAction'
-import { getLocaleFromName } from '../../../lib/localization'
+import type { HeroType } from '../../../types/types'
+import { BackgroundContainer, Text } from '@components'
+import ReadMoreLink from '../ReadMoreLink'
 
 const StyledHero = styled(BackgroundContainer)`
   display: grid;
@@ -58,28 +57,6 @@ const StyledHeroTitle = styled(TitleText).attrs((props: { $isBigTitle: boolean }
   font-weight: ${(props) => (props.$isBigTitle ? 'var(--fontWeight-regular)' : 'var(--fontWeight-medium)')};
 `
 
-const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => {
-  const { label, ariaLabel, extension, type } = action
-  const url = getUrlFromAction(action)
-  if (!url) {
-    console.warn(`Missing URL on Action link with type: '${type}' and label: '${label}'`)
-    return null
-  }
-  if (action.type === 'internalUrl') {
-    const linkLocale = getLocaleFromName(action.link?.lang)
-    return (
-      <Link href={url} locale={linkLocale} variant="readMore" aria-label={ariaLabel} {...rest}>
-        {action.label}
-      </Link>
-    )
-  }
-  return (
-    <Link variant="regular" href={url} type={action.type} aria-label={ariaLabel}>
-      {action.label} {extension && `(${extension.toUpperCase()})`}
-    </Link>
-  )
-}
-
 export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBigTitle }: HeroType) => {
   return (
     <>
@@ -107,16 +84,16 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
                 components={{
                   block: {
                     normal: ({ children }) => {
-                      // eslint-disable-next-line
-                      // @ts-ignore: Still struggling with the types here :/
                       return <Text size="regular">{children}</Text>
                     },
                   },
                 }}
               />
             </StyledIngress>
           )}
-          {link && !isBigTitle && <HeroActionLink action={link} />}
+          {link && !isBigTitle && (
+            <ReadMoreLink action={link} variant={link.type === 'internalUrl' ? 'readMore' : 'regular'} />
+          )}
         </StyledContent>
       </StyledHero>
     </>

diff --git a/web/pageComponents/shared/ReadMoreLink.tsx b/web/pageComponents/shared/ReadMoreLink.tsx
@@ -1,13 +1,19 @@
 import { LinkData } from '../../types'
 import { getUrlFromAction } from '../../common/helpers'
 import { getLocaleFromName } from '../../lib/localization'
-import { Link } from '@components/Link'
+import { Link, LinkProps } from '@components/Link'
 import styled from 'styled-components'
 
 const StyledLink = styled(Link)`
   font-size: var(--typeScale-1);
 `
-const ReadMoreLink = ({ action }: { action: LinkData }) => {
+
+const ReadMoreLink = ({
+  action,
+  variant = 'regular',
+}: {
+  action: LinkData
+} & Pick<LinkProps, 'variant'>) => {
   const { type, label, extension } = action
   const url = getUrlFromAction(action)
   if (!url) {
@@ -18,14 +24,14 @@ const ReadMoreLink = ({ action }: { action: LinkData }) => {
   if (action.type === 'internalUrl') {
     const locale = getLocaleFromName(action.link?.lang)
     return (
-      <StyledLink href={url} locale={locale} variant="readMore" aria-label={action.ariaLabel}>
+      <StyledLink href={url} locale={locale} variant={variant} aria-label={action.ariaLabel}>
         {action.label}
       </StyledLink>
     )
   }
 
   return (
-    <StyledLink variant="readMore" href={url} type={action.type} aria-label={action.ariaLabel}>
+    <StyledLink variant={variant} href={url} type={action.type} aria-label={action.ariaLabel}>
       {action.label} {extension && `(${extension.toUpperCase()})`}
     </StyledLink>
   )

diff --git a/web/pageComponents/shared/RelatedContent.tsx b/web/pageComponents/shared/RelatedContent.tsx
@@ -1,9 +1,8 @@
 import { Fragment } from 'react'
-import { Heading, Link, List } from '@components'
+import { Heading, List } from '@components'
 import type { RelatedLinksData, LinkData } from '../../types/types'
-import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
 import styled from 'styled-components'
-import { getLocaleFromName } from '../../lib/localization'
+import ReadMoreLink from '../shared/ReadMoreLink'
 
 const StyledHeading = styled(Heading)`
   margin: var(--related-titleMargin, 0 0 var(--space-xLarge) 0);
@@ -25,30 +24,11 @@ const RelatedContent = ({ data, ...rest }: RelatedContentProps) => {
       <List unstyled>
         {data.links.length > 0 &&
           data.links.map((item: LinkData) => {
-            const { id, label, type, extension, ariaLabel } = item
-
-            const url = getUrlFromAction(item)
-            const linkLocale = getLocaleFromName(item.link?.lang)
-            if (!url) {
-              console.warn(`Missing URL on 'RelatedContent' link with type: '${type}' and label: '${label}'`)
-              return null
-            }
-
             return (
-              <Fragment key={id}>
-                {type === 'internalUrl' ? (
-                  <Item>
-                    <Link href={url} locale={linkLocale} variant="contentLink" type={type} aria-label={ariaLabel}>
-                      {label}
-                    </Link>
-                  </Item>
-                ) : (
-                  <Item>
-                    <Link variant="contentLink" type={type} href={url} aria-label={ariaLabel}>
-                      {label} {extension && `(${extension.toUpperCase()})`}
-                    </Link>
-                  </Item>
-                )}
+              <Fragment key={item.id}>
+                <Item>
+                  <ReadMoreLink action={item} variant="contentLink" />
+                </Item>
               </Fragment>
             )
           })}

diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx
@@ -99,7 +99,7 @@ const Teaser = ({ data, anchor }: TeaserProps) => {
               {text && <IngressText value={text} />}
             </ContentWrapper>
           )}
-          {action && <ReadMoreLink action={action} />}
+          {action && <ReadMoreLink action={action} variant="readMore" />}
         </Content>
       </StyledEnvisTeaser>
     </BackgroundContainer>

diff --git a/web/pageComponents/shared/textTeaser/TextTeaser.tsx b/web/pageComponents/shared/textTeaser/TextTeaser.tsx
@@ -2,11 +2,10 @@ import { Teaser as EnvisTeaser, Link, BackgroundContainer } from '@components'
 import styled from 'styled-components'
 import IngressText from '../portableText/IngressText'
 import TitleText from '../portableText/TitleText'
-import { getUrlFromAction } from '../../../common/helpers/getUrlFromAction'
-import type { TextTeaserData, LinkData } from '../../../types/types'
-import { getLocaleFromName } from '../../../lib/localization'
+import type { TextTeaserData } from '../../../types/types'
 import { getColorForTheme } from './theme'
 import { CSSProperties } from 'react'
+import ReadMoreLink from '../../../pageComponents/shared/ReadMoreLink'
 
 const { Content } = EnvisTeaser
 
@@ -73,30 +72,6 @@ const TeaserWrapper = styled.div<{ titlePosition: TitlePostion }>`
   }
 `
 
-const TeaserAction = ({ action }: { action: LinkData }) => {
-  const { type, label, extension } = action
-  const url = getUrlFromAction(action)
-  if (!url) {
-    console.warn(`Missing URL on 'TeaserAction' link with type: '${type}' and label: '${label}'`)
-    return null
-  }
-
-  if (action.type === 'internalUrl') {
-    const locale = getLocaleFromName(action.link?.lang)
-    return (
-      <StyledLink href={url} locale={locale} variant="readMore" aria-label={action.ariaLabel}>
-        {action.label}
-      </StyledLink>
-    )
-  }
-
-  return (
-    <StyledLink variant="readMore" href={url} type={action.type} aria-label={action.ariaLabel}>
-      {action.label} {extension && `(${extension.toUpperCase()})`}
-    </StyledLink>
-  )
-}
-
 const TextTeaser = ({ data, anchor }: TextTeaserProps) => {
   const { title, text, action, designOptions } = data
   const { theme, titlePosition } = designOptions
@@ -116,7 +91,7 @@ const TextTeaser = ({ data, anchor }: TextTeaserProps) => {
               <IngressText value={text} />
             </IngressWrapper>
           )}
-          {action && <TeaserAction action={action} />}
+          {action && <ReadMoreLink action={action} variant="readMore" />}
         </StyledContent>
       </TeaserWrapper>
     </BackgroundContainer>

diff --git a/web/pageComponents/topicPages/CallToActions.tsx b/web/pageComponents/topicPages/CallToActions.tsx
@@ -1,9 +1,8 @@
 import { Fragment } from 'react'
-import { List, Link } from '@components'
+import { List } from '@components'
 import type { LinkData } from '../../types/types'
 import { ButtonLink } from '../shared/ButtonLink'
-import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
-import { getLocaleFromName } from '../../lib/localization'
+import ReadMoreLink from '../shared/ReadMoreLink'
 
 const { Item } = List
 
@@ -23,31 +22,12 @@ const CallToActions = ({ callToActions, overrideButtonStyle, splitList }: CallTo
   ) : (
     <List unstyled splitList={splitList}>
       {callToActions.map((callToAction: LinkData) => {
-        const { id, type, label, ariaLabel, extension } = callToAction
-
-        const url = getUrlFromAction(callToAction)
-        const linkLocale = getLocaleFromName(callToAction.link?.lang)
-        if (!url) {
-          console.warn(`Missing URL on 'CallToActions' link with type: '${type}' and label: '${label}'`)
-          return null
-        }
-
         return (
-          <Fragment key={id}>
+          <Fragment key={callToAction.id}>
             {/*  If the URL is a static AEM page it should behave as an internal link in the web */}
-            {type === 'internalUrl' ? (
-              <Item>
-                <Link href={url} locale={linkLocale} variant="contentLink" type={type} aria-label={ariaLabel}>
-                  {label}
-                </Link>
-              </Item>
-            ) : (
-              <Item>
-                <Link variant="contentLink" type={type} href={url} aria-label={ariaLabel}>
-                  {label} {extension && `(${extension.toUpperCase()})`}
-                </Link>
-              </Item>
-            )}
+            <Item>
+              <ReadMoreLink action={callToAction} variant="contentLink" />
+            </Item>
           </Fragment>
         )
       })}

diff --git a/web/pageComponents/topicPages/Form/Form.tsx b/web/pageComponents/topicPages/Form/Form.tsx
@@ -5,8 +5,9 @@ import ContactEquinorForm from './ContactEquinorForm'
 import SubscribeForm from './SubscribeForm'
 import CareerFairForm from './CareerFairForm'
 import OrderReportsForm from './OrderReportsForm'
-import { Link, BackgroundContainer } from '@components'
+import { BackgroundContainer } from '@components'
 import CareersContactForm from './CareersContactForm'
+import ReadMoreLink from '../../shared/ReadMoreLink'
 
 import type { LinkData, FormData } from '../../../types/types'
 
@@ -44,18 +45,7 @@ const Form = ({ data, anchor }: { data: FormData; anchor?: string }) => {
                 <ListStyled>
                   {downloads.length > 0 &&
                     downloads.map((item: LinkData) => {
-                      const { id, label, type, extension, ariaLabel } = item
-                      const url = item.href + '?' + item.fileName?.replace(/ /g, '-')
-                      if (!url) {
-                        console.warn(`Missing URL on 'Download' link with type: '${type}' and label: '${label}'`)
-                        return null
-                      }
-
-                      return (
-                        <Link key={id} variant="contentLink" type={type} href={url} aria-label={ariaLabel}>
-                          {label} {extension && `(${extension.toUpperCase()})`}
-                        </Link>
-                      )
+                      return <ReadMoreLink key={item.id} action={item} variant="contentLink" />
                     })}
                 </ListStyled>
               )}