From 621b72e0c710867ccc57aea88dc23f7e60f86e7e Mon Sep 17 00:00:00 2001 From: Malin J Date: Tue, 25 Jul 2023 15:26:57 +0200 Subject: [PATCH 01/48] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20nextlinks?= =?UTF-8?q?=20#1369?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/components/src/Card/Card.stories.tsx | 4 +- web/components/src/Card/Card.tsx | 3 +- web/components/src/Link/ButtonLink.tsx | 13 +- web/components/src/Link/Link.tsx | 14 ++- web/components/stories/helpers/styles.ts | 2 +- web/pageComponents/cards/EventsCard.tsx | 9 +- .../cards/FeaturedEventCard.tsx | 94 +++++++------- web/pageComponents/cards/MagazineCard.tsx | 56 ++++----- web/pageComponents/cards/NewsCard.tsx | 106 ++++++++-------- web/pageComponents/cards/PeopleCard/CV.tsx | 7 +- web/pageComponents/cards/SimpleCard.tsx | 67 +++++----- web/pageComponents/cards/TopicPageCard.tsx | 64 +++++----- web/pageComponents/icons/Index.tsx | 5 + .../pageTemplates/newsroom/Hit.tsx | 22 ++-- web/pageComponents/search/EventHit.tsx | 29 ++--- web/pageComponents/search/MagazineHit.tsx | 45 ++++--- web/pageComponents/search/NewsHit.tsx | 37 +++--- web/pageComponents/search/TopicHit.tsx | 45 ++++--- web/pageComponents/search/hit/HitLink.tsx | 3 +- web/pageComponents/shared/ButtonLink.tsx | 13 +- web/pageComponents/shared/Footer.tsx | 117 +++++++----------- web/pageComponents/shared/Header.tsx | 14 +-- .../shared/Hero/FiftyFiftyHero.tsx | 15 ++- .../shared/LocalizationSwitch.tsx | 8 +- web/pageComponents/shared/LogoLink.tsx | 11 +- web/pageComponents/shared/RelatedContent.tsx | 9 +- web/pageComponents/shared/Teaser.tsx | 5 +- .../portableText/components/InternalLink.tsx | 7 +- .../shared/siteMenu/MenuGroup.tsx | 12 +- .../shared/siteMenu/SiteMenu.tsx | 5 +- .../shared/siteMenu/simple/SimpleMenuItem.tsx | 13 +- .../shared/siteMenu/simple/SimpleSiteMenu.tsx | 13 +- web/pageComponents/topicPages/Breadcrumbs.tsx | 9 +- .../topicPages/CallToActions.tsx | 9 +- .../topicPages/PromoTileButton.tsx | 33 +++-- web/pageComponents/topicPages/Table.tsx | 13 +- 36 files changed, 423 insertions(+), 508 deletions(-) create mode 100644 web/pageComponents/icons/Index.tsx diff --git a/web/components/src/Card/Card.stories.tsx b/web/components/src/Card/Card.stories.tsx index 81fe55c3d..e7af0fdee 100644 --- a/web/components/src/Card/Card.stories.tsx +++ b/web/components/src/Card/Card.stories.tsx @@ -55,7 +55,7 @@ Default.storyName = 'Default' export const NewsCard: StoryFn = () => ( - + @@ -78,7 +78,7 @@ export const NewsCard: StoryFn = () => ( - + diff --git a/web/components/src/Card/Card.tsx b/web/components/src/Card/Card.tsx index 9dcf37589..7549254f9 100644 --- a/web/components/src/Card/Card.tsx +++ b/web/components/src/Card/Card.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import { outlineTemplate, Tokens } from '@utils' import { LandscapeCard } from './LandscapeCard' import { PortraitCard } from './PortraitCard' +import { default as NextLink } from 'next/link' const { outline } = Tokens @@ -13,7 +14,7 @@ export type CardProps = { orientation?: 'landscape' | 'portrait' } & HTMLAttributes -export const CardLink = styled.a` +export const CardLink = styled(NextLink)` text-decoration: none; color: inherit; &:hover { diff --git a/web/components/src/Link/ButtonLink.tsx b/web/components/src/Link/ButtonLink.tsx index a0bf87e29..bbe904450 100644 --- a/web/components/src/Link/ButtonLink.tsx +++ b/web/components/src/Link/ButtonLink.tsx @@ -1,6 +1,7 @@ import { forwardRef } from 'react' import { Button, ButtonProps } from '@equinor/eds-core-react' import styled from 'styled-components' +import { default as NextLink } from 'next/link' const StyledButtonLink = styled(Button)` --eds_button__height: auto; @@ -26,15 +27,17 @@ const StyledButtonLink = styled(Button)` } ` -export type ButtonLinkProps = ButtonProps +export type ButtonLinkProps = { locale?: string } & ButtonProps export const ButtonLink = forwardRef(function ButtonLink( - { children, ...rest }, + { children, href, locale, ...rest }, ref, ) { return ( - - {children} - + + + {children} + + ) }) diff --git a/web/components/src/Link/Link.tsx b/web/components/src/Link/Link.tsx index 3b3716040..7739ca303 100644 --- a/web/components/src/Link/Link.tsx +++ b/web/components/src/Link/Link.tsx @@ -6,14 +6,15 @@ import { arrow_forward, external_link, arrow_down } from '@equinor/eds-icons' import styled from 'styled-components' import { outlineTemplate, Tokens } from '@utils' import type { LinkType } from '../../../types/types' +import { default as NextLink } from 'next/link' const { outline } = Tokens -export const BaseLink = styled.a` +export const BaseLink = styled(NextLink)` display: inline-flex; align-items: center; color: var(--slate-blue-95); - text-decoration: var(--textDecoration); + text-decoration: none; &[data-focus-visible-added]:focus { ${outlineTemplate(outline)} } @@ -114,21 +115,23 @@ export type LinkProps = { type?: LinkType /** Some links don't have an underline, like the menu links */ underline?: boolean + /** The locale for the link, required for internal URLs */ + locale?: string } & AnchorHTMLAttributes export const Link = forwardRef(function Link( - { children, variant = 'regular', type = 'internalUrl', underline = true, style, ...rest }, + { children, variant = 'regular', type = 'internalUrl', underline = true, style, href, ...rest }, ref, ) { if (variant === 'contentLink') { return ( - + {children} ) } else if (variant === 'readMore') { return ( - + {children} ) @@ -138,6 +141,7 @@ export const Link = forwardRef(function Link( return ( - - {/* @TODO: Language string for Details */} - {details} - + {/* @TODO: Language string for Details */} + + {details} + ) } diff --git a/web/pageComponents/cards/FeaturedEventCard.tsx b/web/pageComponents/cards/FeaturedEventCard.tsx index 64e9a9317..18217894a 100644 --- a/web/pageComponents/cards/FeaturedEventCard.tsx +++ b/web/pageComponents/cards/FeaturedEventCard.tsx @@ -1,5 +1,4 @@ import { Card, FormattedDate, FormattedTime } from '@components' -import { default as NextLink } from 'next/link' import { FormattedMessage } from 'react-intl' import styled from 'styled-components' import { toPlainText } from '@portabletext/react' @@ -59,54 +58,51 @@ const FeaturedEventCard = ({ data, fitToContent = false, ...rest }: FeaturedEven const plainTitle = title ? toPlainText(title as PortableTextBlock[]) : '' return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - -
- {plainTitle} -
- - {start && ( - - - - )} - {location && ( - -
- {location} -
- - )} - {start && end ? ( - - - - - - - ) : ( - - - - - - - )} - - - - - - - + + + +
+ {plainTitle} +
+ + {start && ( + + + + )} + {location && ( + +
+ {location} +
+ + )} + {start && end ? ( + + + - + + + ) : ( + + + + + + + )} + + + + + + ) } diff --git a/web/pageComponents/cards/MagazineCard.tsx b/web/pageComponents/cards/MagazineCard.tsx index 495c9ce04..1c8b4224e 100644 --- a/web/pageComponents/cards/MagazineCard.tsx +++ b/web/pageComponents/cards/MagazineCard.tsx @@ -1,5 +1,4 @@ import { Card } from '@components' -import { default as NextLink } from 'next/link' import { CSSProperties } from 'react' import styled from 'styled-components' import { Flags } from '../../common/helpers/datasetHelpers' @@ -72,35 +71,32 @@ const MagazineCard = ({ data, fitToContent = false, ...rest }: MagazineCardProp) if (!thumbnail) return null return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - {thumbnail} -
- - <>{title}</> - -
- - - - {tags && tags.length > 0 && ( - - {tags.map((tag: string) => ( - {tag} - ))} - - )} - - - + + + {thumbnail} +
+ + <>{title}</> + +
+ + + + {tags && tags.length > 0 && ( + + {tags.map((tag: string) => ( + {tag} + ))} + + )} + + ) } diff --git a/web/pageComponents/cards/NewsCard.tsx b/web/pageComponents/cards/NewsCard.tsx index 915a7f4d5..0b2901348 100644 --- a/web/pageComponents/cards/NewsCard.tsx +++ b/web/pageComponents/cards/NewsCard.tsx @@ -1,5 +1,4 @@ import { Card, FormattedDate } from '@components' -import { default as NextLink } from 'next/link' import { CSSProperties } from 'react' import styled from 'styled-components' import type { CardData } from '../../types/types' @@ -53,62 +52,59 @@ const NewsCard = ({ data, fitToContent = false, ...rest }: NewsCardProp) => { if (!heroImage) return null return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - - {heroImage && ( - + + + {heroImage && ( + + )} + +
+ {publishDateTime && ( + + - )} - -
- {publishDateTime && ( - - - - )} - - <>{title} - -
- {ingress && ( - - { - return {children} - }, - smallText: ({ children }) => { - return {children} - }, - }, - }} - > - + )} - - - - - - + + <>{title} + +
+ {ingress && ( + + { + return {children} + }, + smallText: ({ children }) => { + return {children} + }, + }, + }} + > + + )} + + + + + ) } diff --git a/web/pageComponents/cards/PeopleCard/CV.tsx b/web/pageComponents/cards/PeopleCard/CV.tsx index 80c4cee49..1b87123af 100644 --- a/web/pageComponents/cards/PeopleCard/CV.tsx +++ b/web/pageComponents/cards/PeopleCard/CV.tsx @@ -1,4 +1,3 @@ -import { default as NextLink } from 'next/link' import { ButtonLink } from '@components' import type { LinkData } from '../../../types/types' import { getUrlFromAction } from '../../../common/helpers/getUrlFromAction' @@ -16,9 +15,9 @@ const CV = ({ data }: CVProps) => { return ( <> {type === 'internalUrl' ? ( - - {label} - + + {label} + ) : ( {label} diff --git a/web/pageComponents/cards/SimpleCard.tsx b/web/pageComponents/cards/SimpleCard.tsx index 854c5ba0c..45bbb53ce 100644 --- a/web/pageComponents/cards/SimpleCard.tsx +++ b/web/pageComponents/cards/SimpleCard.tsx @@ -1,4 +1,3 @@ -import { default as NextLink } from 'next/link' import { CSSProperties } from 'react' import styled from 'styled-components' import Image, { Ratios } from '../shared/SanityImage' @@ -51,40 +50,38 @@ function getLink(linkData: MenuLinkData, label: string) { const SimpleCard = ({ data }: SimpleCardData) => { const { id, label, image } = data return ( - - - - - {/* If this i static content, we don't have an image so we will just add an empty placeholder instead */} - {image ? ( - - ) : ( - - - - )} - -
- {label} -
- - - - - - + + + + {/* If this i static content, we don't have an image so we will just add an empty placeholder instead */} + {image ? ( + + ) : ( + + + + )} + +
+ {label} +
+ + + + + ) } diff --git a/web/pageComponents/cards/TopicPageCard.tsx b/web/pageComponents/cards/TopicPageCard.tsx index 88243f125..141e9a63b 100644 --- a/web/pageComponents/cards/TopicPageCard.tsx +++ b/web/pageComponents/cards/TopicPageCard.tsx @@ -1,6 +1,5 @@ import { Card } from '@components' import { toPlainText } from '@portabletext/react' -import { default as NextLink } from 'next/link' import { CSSProperties } from 'react' import styled from 'styled-components' import Image, { Ratios } from '../shared/SanityImage' @@ -35,40 +34,37 @@ const TopicPageCard = ({ data, fitToContent = false, ...rest }: TopicPageCardPro const pageTitle = title ? toPlainText(title as PortableTextBlock[]) : '' return ( - - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - - {thumbnail && ( - - )} - -
- {pageTitle} -
- {ingress && ( - - - + + + + {thumbnail && ( + )} - - - - - - + +
+ {pageTitle} +
+ {ingress && ( + + + + )} + + + + + ) } diff --git a/web/pageComponents/icons/Index.tsx b/web/pageComponents/icons/Index.tsx new file mode 100644 index 000000000..8fa25b01a --- /dev/null +++ b/web/pageComponents/icons/Index.tsx @@ -0,0 +1,5 @@ +export { default as Facebook } from './Facebook'; +export { default as Instagram } from './Instagram'; +export { default as Linkedin } from './Linkedin'; +export { default as Twitter } from './Twitter'; +export { default as Youtube } from './Youtube'; \ No newline at end of file diff --git a/web/pageComponents/pageTemplates/newsroom/Hit.tsx b/web/pageComponents/pageTemplates/newsroom/Hit.tsx index 5274e39be..1029a2583 100644 --- a/web/pageComponents/pageTemplates/newsroom/Hit.tsx +++ b/web/pageComponents/pageTemplates/newsroom/Hit.tsx @@ -7,7 +7,7 @@ import { PortableTextBlock } from '@portabletext/types' const { outline } = Tokens -const StyledHitLink = styled.a` +const StyledHitLink = styled(NextLink)` padding: var(--space-small) 0; display: block; color: var(--default-text); @@ -47,17 +47,15 @@ const Hit = ({ hit }: { hit: any }) => { const pageTitle = Array.isArray(hit.pageTitle) ? toPlainText(hit.pageTitle as PortableTextBlock[]) : hit.pageTitle return ( - - -
- {hit.publishDateTime && } - - {pageTitle} - - {/* {hit.text} */} -
- - + +
+ {hit.publishDateTime && } + + {pageTitle} + + {/* {hit.text} */} +
+ ) } diff --git a/web/pageComponents/search/EventHit.tsx b/web/pageComponents/search/EventHit.tsx index 3f9a1727e..3b3f56ba1 100644 --- a/web/pageComponents/search/EventHit.tsx +++ b/web/pageComponents/search/EventHit.tsx @@ -1,5 +1,4 @@ import { Highlight } from './Highlight' -import { default as NextLink } from 'next/link' import getConfig from 'next/config' import styled from 'styled-components' import type { Hit as AlgoliaHit } from '@algolia/client-search' @@ -47,21 +46,19 @@ const EventHit = ({ hit }: HitProps) => { // @TODO: A more generic Hit component for more than events. Or multiple components??? return (
- - - {eventDate && } - - - - - - - - - - {fullUrl} - - + + {eventDate && } + + + + + + + + + + {fullUrl} +
) } diff --git a/web/pageComponents/search/MagazineHit.tsx b/web/pageComponents/search/MagazineHit.tsx index ea9726646..e146e265e 100644 --- a/web/pageComponents/search/MagazineHit.tsx +++ b/web/pageComponents/search/MagazineHit.tsx @@ -1,5 +1,4 @@ import { Highlight } from './Highlight' -import { default as NextLink } from 'next/link' import styled from 'styled-components' import type { Hit as AlgoliaHit } from '@algolia/client-search' import getConfig from 'next/config' @@ -53,29 +52,27 @@ const MagazineHit = ({ hit }: HitProps) => { return (
- - - - - - {hit.title && ( - - - - )} - {hit.ingress && ( - - - - )} - {hit.text && ( - - - - )} - {fullUrl} - - + + + + + {hit.title && ( + + + + )} + {hit.ingress && ( + + + + )} + {hit.text && ( + + + + )} + {fullUrl} +
) } diff --git a/web/pageComponents/search/NewsHit.tsx b/web/pageComponents/search/NewsHit.tsx index fdefab58d..707ebbafb 100644 --- a/web/pageComponents/search/NewsHit.tsx +++ b/web/pageComponents/search/NewsHit.tsx @@ -1,5 +1,4 @@ import { Highlight } from './Highlight' -import { default as NextLink } from 'next/link' import styled from 'styled-components' import type { Hit as AlgoliaHit } from '@algolia/client-search' import getConfig from 'next/config' @@ -60,25 +59,23 @@ const NewsHit = ({ hit }: HitProps) => { return (
- - - {hit.publishDateTime && } - - - - {hit.ingress && ( - - - - )} - {hit.text && ( - - - - )} - {fullUrl} - - + + {hit.publishDateTime && } + + + + {hit.ingress && ( + + + + )} + {hit.text && ( + + + + )} + {fullUrl} +
) } diff --git a/web/pageComponents/search/TopicHit.tsx b/web/pageComponents/search/TopicHit.tsx index 0073596bf..c1a574ea8 100644 --- a/web/pageComponents/search/TopicHit.tsx +++ b/web/pageComponents/search/TopicHit.tsx @@ -1,5 +1,4 @@ import { Highlight } from './Highlight' -import { default as NextLink } from 'next/link' import styled from 'styled-components' import type { Hit as AlgoliaHit } from '@algolia/client-search' import getConfig from 'next/config' @@ -38,29 +37,27 @@ const TopicHit = ({ hit }: HitProps) => { // @TODO: A more generic Hit component for more than events. Or multiple components??? return (
- - - - - - {hit.title && ( - - - - )} - {hit.ingress && ( - - - - )} - {hit.text && ( - - - - )} - {fullUrl} - - + + + + + {hit.title && ( + + + + )} + {hit.ingress && ( + + + + )} + {hit.text && ( + + + + )} + {fullUrl} +
) } diff --git a/web/pageComponents/search/hit/HitLink.tsx b/web/pageComponents/search/hit/HitLink.tsx index 44c4893e5..15fadaeb8 100644 --- a/web/pageComponents/search/hit/HitLink.tsx +++ b/web/pageComponents/search/hit/HitLink.tsx @@ -1,11 +1,12 @@ import styled from 'styled-components' +import { default as NextLink } from 'next/link' // This is just the shared styles and not the // component itself. This is because we had some issues with // Next.js and error message in the console. When we tried the // suggested workaround, next/link didn't work // properly with client side navigation using forwardRef. See issue #892 -export const StyledHitLink = styled.a` +export const StyledHitLink = styled(NextLink)` padding: var(--space-medium) 0; display: block; color: var(--inverted-text); diff --git a/web/pageComponents/shared/ButtonLink.tsx b/web/pageComponents/shared/ButtonLink.tsx index 436550207..7f4a88367 100644 --- a/web/pageComponents/shared/ButtonLink.tsx +++ b/web/pageComponents/shared/ButtonLink.tsx @@ -22,23 +22,18 @@ export const ButtonLink = ({ action, children, ...rest }: Props) => { if (type === 'internalUrl') { const locale = getLocaleFromName(action.link?.lang) return ( - + <> {children || ( - + {label} )} - + ) } return children ? ( - )} - > + )}> {children} ) : ( diff --git a/web/pageComponents/shared/Footer.tsx b/web/pageComponents/shared/Footer.tsx index bc4c1f13c..0b53616c5 100644 --- a/web/pageComponents/shared/Footer.tsx +++ b/web/pageComponents/shared/Footer.tsx @@ -1,15 +1,9 @@ import styled from 'styled-components' -import { Link } from '@components' import { forwardRef } from 'react' import { Typography } from '@equinor/eds-core-react' -import NextLink from 'next/link' -import Facebook from '../icons/Facebook' -import Instagram from '../icons/Instagram' -import Linkedin from '../icons/Linkedin' -import Twitter from '../icons/Twitter' -import Youtube from '../icons/Youtube' - +import { Facebook, Instagram, Linkedin, Twitter, Youtube } from '../icons/Index' import type { FooterLinkData, SomeType, FooterColumns } from '../../types/types' +import { default as NextLink } from 'next/link' const StyledFooter = styled.footer` min-height: var(--space-4xLarge); @@ -18,6 +12,7 @@ const StyledFooter = styled.footer` background-color: var(--slate-blue-95); padding: var(--space-medium) 0; ` + const FooterTop = styled.div` display: flex; flex-direction: row; @@ -30,6 +25,15 @@ const FooterTop = styled.div` flex-direction: column; } ` + +const CompanyName = styled(Typography)` + text-align: center; + font-size: var(--typeScale-small); + color: white; + @media (max-width: 750px) { + text-align: left; + } +` const LinkHeader = styled.h3` font-size: var(--typeScale-2); color: var(--white-100); @@ -37,6 +41,7 @@ const LinkHeader = styled.h3` font-weight: var(--fontWeight-medium); line-height: var(--lineHeight-1); ` + const LinkWrapper = styled.section` display: flex; flex-direction: column; @@ -59,13 +64,14 @@ const LinksList = styled.div` } ` -const FooterLink = styled(Link)` +const FooterLink = styled(NextLink)` font-size: var(--typeScale-05); padding: var(--space-xSmall) 0; color: var(--white-100); text-decoration: none; display: flex; flex-direction: row; + align-items: center; height: var(--space-xLarge); @media (hover: hover) and (pointer: fine) { &:hover { @@ -87,15 +93,6 @@ const FooterBottom = styled.div` padding: var(--space-xLarge) var(--layout-paddingHorizontal-small) var(--space-small); ` -const CompanyName = styled(Typography)` - text-align: center; - font-size: var(--typeScale-small); - color: white; - @media (max-width: 750px) { - text-align: left; - } -` - const SomeIcon = styled.span` display: inline-block; text-align: center; @@ -110,30 +107,22 @@ const SomeIcon = styled.span` ` function getSomeSvg(someType: SomeType) { - switch (someType) { - case 'facebook': - return - case 'instagram': - return - case 'linkedin': - return - case 'twitter': - return - case 'youtube': - return - default: - console.warn('Unable to get social icon for footer: Unknown SoMe type passed') + const iconMap = { + facebook: , + instagram: , + linkedin: , + twitter: , + youtube: , } + + if (!(someType in iconMap)) console.warn('Unable to get social icon for footer: Unknown SoMe type passed') + + return iconMap[someType] || null } function getLink(linkData: FooterLinkData) { - // Fallback to home page, if this happens it is an error somewhere - // Sanity should take care of the validation here, and this is temp. until - // the static pages are migrated {link.image && } - if (!linkData) return 'something-wrong' - const { link } = linkData - - return (link && link.slug) || '/' + const { link } = linkData || {} + return link?.slug ?? '/' } type FooterProps = { @@ -141,44 +130,30 @@ type FooterProps = { } const Footer = forwardRef(function Footer({ footerData, ...rest }, ref) { - const dt = new Date() return ( - {footerData?.footerColumns?.map(({ header, linkList }) => { - return ( - - {header} - - {linkList?.map((link: FooterLinkData) => { - const { id, type, someType, label, url } = link - if (url) - return ( - - {type === 'someLink' && someType && ( - {getSomeSvg(someType)} - )} - {label} - - ) - return ( - - - {type === 'someLink' && someType && ( - {getSomeSvg(someType)} - )} - {label} - - - ) - })} - - - ) - })} + {footerData?.footerColumns?.map(({ header, linkList }) => ( + + {header} + + {linkList?.map((link: FooterLinkData) => { + const { id, type, someType, label, url } = link + const icon = type === 'someLink' && someType ? getSomeSvg(someType) : null + + return ( + + {icon && {icon}} + {label} + + ) + })} + + + ))} - Copyright {dt.getFullYear()} Equinor ASA + Copyright {new Date().getFullYear()} Equinor ASA ) diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx index 7a5298381..e024ccc13 100644 --- a/web/pageComponents/shared/Header.tsx +++ b/web/pageComponents/shared/Header.tsx @@ -3,7 +3,7 @@ import styled, { createGlobalStyle } from 'styled-components' import { CSSProperties } from 'react' import { useRouter } from 'next/router' import { default as NextLink } from 'next/link' -import { Topbar, Link, Button } from '@components' +import { Topbar, Button } from '@components' import { AllSlugsType, LocalizationSwitch } from './LocalizationSwitch' import type { MenuData, SimpleMenuData } from '../../types/types' import SiteMenu from './siteMenu/SiteMenu' @@ -65,7 +65,7 @@ const ControlsContainer = styled.div` } ` -const StyledAllSites = styled(Link)` +const StyledAllSites = styled(NextLink)` cursor: pointer; font-size: var(--typeScale-1); text-decoration: none; @@ -129,11 +129,9 @@ const HeadTags = ({ slugs }: { slugs: AllSlugsType }) => { const AllSites = () => { const allSitesURL = getAllSitesLink('external') return ( - - - - - + + + ) } @@ -172,7 +170,7 @@ const Header = ({ slugs, menuData }: HeaderProps) => { > {hasSearch && ( - + diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx index 5a7963262..3ae93d8e0 100644 --- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx +++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components' -import { default as NextLink } from 'next/link' import Image from '../SanityImage' import IngressText from '../portableText/IngressText' import TitleText from '../portableText/TitleText' @@ -70,11 +69,15 @@ const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => { if (action.type === 'internalUrl') { const linkLocale = getLocaleFromName(action.link?.lang) return ( - - - {action.label} - - + + {action.label} + ) } return ( diff --git a/web/pageComponents/shared/LocalizationSwitch.tsx b/web/pageComponents/shared/LocalizationSwitch.tsx index c9d36362f..850d6338d 100644 --- a/web/pageComponents/shared/LocalizationSwitch.tsx +++ b/web/pageComponents/shared/LocalizationSwitch.tsx @@ -46,7 +46,7 @@ const ActiveLocale = styled.span` } ` -const StyledLink = styled.a` +const StyledLink = styled(NextLink)` ${SharedStyle} text-decoration: none; color: var(--grey-60); @@ -97,9 +97,9 @@ type LocaleLinkProps = { const LocaleLink: React.FC> = ({ href, title, locale, active, children }) => { if (!active) { return ( - - {children} - + + {children} + ) } diff --git a/web/pageComponents/shared/LogoLink.tsx b/web/pageComponents/shared/LogoLink.tsx index c011f1b9c..b21f13b2b 100644 --- a/web/pageComponents/shared/LogoLink.tsx +++ b/web/pageComponents/shared/LogoLink.tsx @@ -6,7 +6,7 @@ import NextLink from 'next/link' const { outline } = Tokens -const StyledLogoLink = styled.a` +const StyledLogoLink = styled(NextLink)` justify-self: left; display: flex; align-items: center; @@ -36,11 +36,8 @@ type LogoLinkProps = { export const LogoLink = ({ inverted = false, ...rest }: LogoLinkProps) => { return ( - - {/* Localize text */} - - - - + + + ) } diff --git a/web/pageComponents/shared/RelatedContent.tsx b/web/pageComponents/shared/RelatedContent.tsx index 1d0b313ee..acbde0fdc 100644 --- a/web/pageComponents/shared/RelatedContent.tsx +++ b/web/pageComponents/shared/RelatedContent.tsx @@ -1,7 +1,6 @@ import { Fragment } from 'react' import { Heading, Link, List } from '@components' import type { RelatedLinksData, LinkData } from '../../types/types' -import { default as NextLink } from 'next/link' import { getUrlFromAction } from '../../common/helpers/getUrlFromAction' import styled from 'styled-components' import { getLocaleFromName } from '../../lib/localization' @@ -39,11 +38,9 @@ const RelatedContent = ({ data, ...rest }: RelatedContentProps) => { {type === 'internalUrl' ? ( - - - {label} - - + + {label} + ) : ( diff --git a/web/pageComponents/shared/Teaser.tsx b/web/pageComponents/shared/Teaser.tsx index 42abed98b..6b59b094e 100644 --- a/web/pageComponents/shared/Teaser.tsx +++ b/web/pageComponents/shared/Teaser.tsx @@ -1,6 +1,5 @@ import { Teaser as EnvisTeaser, Link, Eyebrow, BackgroundContainer } from '@components' import styled from 'styled-components' -import { default as NextLink } from 'next/link' import IngressText from './portableText/IngressText' import TitleText from './portableText/TitleText' import { urlFor } from '../../common/helpers' @@ -56,11 +55,9 @@ const TeaserAction = ({ action }: { action: LinkData }) => { if (action.type === 'internalUrl') { const locale = getLocaleFromName(action.link?.lang) return ( - - + {action.label} - ) } diff --git a/web/pageComponents/shared/portableText/components/InternalLink.tsx b/web/pageComponents/shared/portableText/components/InternalLink.tsx index 9f593f613..3b082e211 100644 --- a/web/pageComponents/shared/portableText/components/InternalLink.tsx +++ b/web/pageComponents/shared/portableText/components/InternalLink.tsx @@ -1,5 +1,4 @@ import { Link } from '@components' -import { default as NextLink } from 'next/link' import { getLocaleFromName } from '../../../../lib/localization' type InternalLinkProps = { @@ -31,9 +30,9 @@ export const InternalLink = ({ value, children }: { value?: InternalLinkProps; c } return ( - - {children} - + + {children} + ) } catch (e) { console.error('Could not render internal link', children, e) diff --git a/web/pageComponents/shared/siteMenu/MenuGroup.tsx b/web/pageComponents/shared/siteMenu/MenuGroup.tsx index dabeadb18..418219b62 100644 --- a/web/pageComponents/shared/siteMenu/MenuGroup.tsx +++ b/web/pageComponents/shared/siteMenu/MenuGroup.tsx @@ -1,6 +1,5 @@ import { Fragment } from 'react' import styled from 'styled-components' -import NextLink from 'next/link' import RichText from '../portableText/RichText' import { Link, List, Menu } from '@components' import type { MenuLinkData, SubMenuData, SubMenuGroupData } from '../../../types/types' @@ -94,10 +93,9 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => { )} - - - {topLevelLink?.label} - + + {topLevelLink?.label} + {groups && groups.length > 0 && ( @@ -112,9 +110,7 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => { {groupItem.links?.map((link: MenuLinkData) => ( - - {link.label} - + {link.label} ))} diff --git a/web/pageComponents/shared/siteMenu/SiteMenu.tsx b/web/pageComponents/shared/siteMenu/SiteMenu.tsx index 759c9df3d..c6cab8676 100644 --- a/web/pageComponents/shared/siteMenu/SiteMenu.tsx +++ b/web/pageComponents/shared/siteMenu/SiteMenu.tsx @@ -4,7 +4,6 @@ import { useRouter } from 'next/router' import useWindowDimensions from '../../../lib/hooks/useWindowSize' import { RemoveScroll } from 'react-remove-scroll' import FocusLock from 'react-focus-lock' -import NextLink from 'next/link' import { Menu, MenuButton, Link } from '@components' import { MenuGroup } from './MenuGroup' import { TopbarDropdown } from './TopbarDropdown' @@ -120,11 +119,9 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => { return })} - - + - )} diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx index 553431a1b..2e70d2e2a 100644 --- a/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx +++ b/web/pageComponents/shared/siteMenu/simple/SimpleMenuItem.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components' -import NextLink from 'next/link' import { Link, List, Menu } from '@components' import { SimplePanel } from './SimplePanel' @@ -44,16 +43,16 @@ export const SimpleMenuItem = ({ item, index }: MenuGroupType) => { {!!readMoreLink?.link?.slug && ( - - {readMoreLink.label} - + + {readMoreLink.label} + )} {links?.map((link) => ( - - {link.label} - + + {link.label} + ))} diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx index bdd96d29f..161fafd08 100644 --- a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx +++ b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx @@ -9,7 +9,6 @@ import { FormattedMessage, useIntl } from 'react-intl' import { SimpleMenuWrapper } from './SimpleMenuWrapper' import { MenuButton, Link } from '@components' import { SimpleMenuItem } from './SimpleMenuItem' -import NextLink from 'next/link' import { getAllSitesLink } from '../../../../common/helpers/getAllSitesLink' import type { SimpleMenuData, SimpleGroupData } from '../../../../types/types' @@ -103,18 +102,14 @@ const SimpleSiteMenu = ({ data, ...rest }: MenuProps) => { } return (
  • - - {item.label} - + {item.label}
    • ) } })} - - - - - + + + diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx index 0eacdbbcd..568d524a5 100644 --- a/web/pageComponents/topicPages/Breadcrumbs.tsx +++ b/web/pageComponents/topicPages/Breadcrumbs.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components' -import { default as NextLink } from 'next/link' import { BreadcrumbsList, getBackgroundByColorName, Link } from '@components' import { BreadcrumbJsonLd } from 'next-seo' import { useRouter } from 'next/router' @@ -92,11 +91,9 @@ export const Breadcrumbs = ({ return ( - - - {item.label} - - + + {item.label} + ) })} diff --git a/web/pageComponents/topicPages/CallToActions.tsx b/web/pageComponents/topicPages/CallToActions.tsx index fd70244d2..e55fdb28a 100644 --- a/web/pageComponents/topicPages/CallToActions.tsx +++ b/web/pageComponents/topicPages/CallToActions.tsx @@ -1,7 +1,6 @@ import { Fragment } from 'react' import { List, Link } from '@components' import type { LinkData } from '../../types/types' -import { default as NextLink } from 'next/link' import { ButtonLink } from '../shared/ButtonLink' import { getUrlFromAction } from '../../common/helpers/getUrlFromAction' import { getLocaleFromName } from '../../lib/localization' @@ -38,11 +37,9 @@ const CallToActions = ({ callToActions, overrideButtonStyle, splitList }: CallTo {/* If the URL is a static AEM page it should behave as an internal link in the web */} {type === 'internalUrl' ? ( - - - {label} - - + + {label} + ) : ( diff --git a/web/pageComponents/topicPages/PromoTileButton.tsx b/web/pageComponents/topicPages/PromoTileButton.tsx index 54f4de9da..965901d8f 100644 --- a/web/pageComponents/topicPages/PromoTileButton.tsx +++ b/web/pageComponents/topicPages/PromoTileButton.tsx @@ -1,6 +1,6 @@ import { LinkData } from '../../types/types' import { ButtonLink } from '../shared/ButtonLink' -import { Card, Link } from '@components' +import { Card } from '@components' import { CSSProperties } from 'react' import styled from 'styled-components' @@ -10,13 +10,10 @@ type Props = { template?: 'default' | 'icon' } -const StyledLink = styled(Link)` - gap: var(--space-medium); - border-bottom: none; -` - const StyledButtonLink = styled(ButtonLink)` text-decoration: none; + gap: var(--space-medium); + border-bottom: none; ` const Wrapper = styled.div` padding: 0 var(--space-medium); @@ -25,19 +22,17 @@ const Wrapper = styled.div` const IconButtonLink = ({ action, hasImage }: { action: LinkData; hasImage: boolean }) => { return ( - - - - {action.label} - - + + + {action.label} + ) diff --git a/web/pageComponents/topicPages/Table.tsx b/web/pageComponents/topicPages/Table.tsx index 93c891a2c..7189a1023 100644 --- a/web/pageComponents/topicPages/Table.tsx +++ b/web/pageComponents/topicPages/Table.tsx @@ -1,5 +1,4 @@ import { BackgroundContainer, FormattedDate, Link, Table as EnvisTable, Text } from '@components' -import { default as NextLink } from 'next/link' import styled from 'styled-components' import isEmpty from '../shared/portableText/helpers/isEmpty' import IngressText from '../shared/portableText/IngressText' @@ -74,17 +73,17 @@ const renderCellByType = (cellData: CellData) => { return ( <> {cellData.href ? ( - - {cellData.filename} - + + {cellData.filename} + ) : null} ) case 'linkSelector': return ( - - {cellData.label} - + + {cellData.label} + ) default: return <>default From 2d414bb614b57189ee20d12468be5c5d5f4d3cbe Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Wed, 16 Aug 2023 14:00:11 +0530 Subject: [PATCH 02/48] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20After=20review=20#13?= =?UTF-8?q?69?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/components/src/Link/ButtonLink.tsx | 4 ++-- web/components/src/Link/Link.tsx | 8 ++++---- web/pageComponents/cards/PeopleCard/CV.tsx | 14 +++----------- web/pageComponents/icons/Index.tsx | 5 ----- web/pageComponents/icons/index.ts | 5 +++++ web/pageComponents/shared/Footer.tsx | 2 +- web/pageComponents/shared/Hero/FiftyFiftyHero.tsx | 8 +------- 7 files changed, 16 insertions(+), 30 deletions(-) delete mode 100644 web/pageComponents/icons/Index.tsx create mode 100644 web/pageComponents/icons/index.ts diff --git a/web/components/src/Link/ButtonLink.tsx b/web/components/src/Link/ButtonLink.tsx index bbe904450..e59fac164 100644 --- a/web/components/src/Link/ButtonLink.tsx +++ b/web/components/src/Link/ButtonLink.tsx @@ -30,11 +30,11 @@ const StyledButtonLink = styled(Button)` export type ButtonLinkProps = { locale?: string } & ButtonProps export const ButtonLink = forwardRef(function ButtonLink( - { children, href, locale, ...rest }, + { children, href = '', locale, ...rest }, ref, ) { return ( - + {children} diff --git a/web/components/src/Link/Link.tsx b/web/components/src/Link/Link.tsx index 7739ca303..292c6bec9 100644 --- a/web/components/src/Link/Link.tsx +++ b/web/components/src/Link/Link.tsx @@ -120,18 +120,18 @@ export type LinkProps = { } & AnchorHTMLAttributes export const Link = forwardRef(function Link( - { children, variant = 'regular', type = 'internalUrl', underline = true, style, href, ...rest }, + { children, variant = 'regular', type = 'internalUrl', underline = true, style, href = '', ...rest }, ref, ) { if (variant === 'contentLink') { return ( - + {children} ) } else if (variant === 'readMore') { return ( - + {children} ) @@ -141,7 +141,7 @@ export const Link = forwardRef(function Link( return ( { const url = getUrlFromAction(data) || '' return ( - <> - {type === 'internalUrl' ? ( - - {label} - - ) : ( - - {label} - - )} - + + {label} + ) } diff --git a/web/pageComponents/icons/Index.tsx b/web/pageComponents/icons/Index.tsx deleted file mode 100644 index 8fa25b01a..000000000 --- a/web/pageComponents/icons/Index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export { default as Facebook } from './Facebook'; -export { default as Instagram } from './Instagram'; -export { default as Linkedin } from './Linkedin'; -export { default as Twitter } from './Twitter'; -export { default as Youtube } from './Youtube'; \ No newline at end of file diff --git a/web/pageComponents/icons/index.ts b/web/pageComponents/icons/index.ts new file mode 100644 index 000000000..b6a524254 --- /dev/null +++ b/web/pageComponents/icons/index.ts @@ -0,0 +1,5 @@ +export { default as Facebook } from './Facebook' +export { default as Instagram } from './Instagram' +export { default as Linkedin } from './Linkedin' +export { default as Twitter } from './Twitter' +export { default as Youtube } from './Youtube' diff --git a/web/pageComponents/shared/Footer.tsx b/web/pageComponents/shared/Footer.tsx index 0b53616c5..a04fd8e32 100644 --- a/web/pageComponents/shared/Footer.tsx +++ b/web/pageComponents/shared/Footer.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components' import { forwardRef } from 'react' import { Typography } from '@equinor/eds-core-react' -import { Facebook, Instagram, Linkedin, Twitter, Youtube } from '../icons/Index' +import { Facebook, Instagram, Linkedin, Twitter, Youtube } from '../icons' import type { FooterLinkData, SomeType, FooterColumns } from '../../types/types' import { default as NextLink } from 'next/link' diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx index 3ae93d8e0..878695907 100644 --- a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx +++ b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx @@ -69,13 +69,7 @@ const HeroActionLink = ({ action, ...rest }: { action: LinkData }) => { if (action.type === 'internalUrl') { const linkLocale = getLocaleFromName(action.link?.lang) return ( - + {action.label} ) From a44c9b766c2b5477f0cd72e67480747e9858efd5 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Thu, 17 Aug 2023 14:25:56 +0530 Subject: [PATCH 03/48] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20Add=20to=20calendar?= =?UTF-8?q?=20aria-lable=20#1816?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pageComponents/topicPages/AddToCalendar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/web/pageComponents/topicPages/AddToCalendar.tsx b/web/pageComponents/topicPages/AddToCalendar.tsx index dfd1e7eb8..1260748af 100644 --- a/web/pageComponents/topicPages/AddToCalendar.tsx +++ b/web/pageComponents/topicPages/AddToCalendar.tsx @@ -88,7 +88,11 @@ const AddToCalendar = ({ eventDate, title, location }: AddToCalendarProps) => { if (!fileData) return null const atc = intl.formatMessage({ id: 'add_to_calendar_event', defaultMessage: 'Add to Calendar' }) return ( - From 94d5ff05ab4e32795d5ccc163b43bc8c5dca6621 Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Thu, 17 Aug 2023 14:30:45 +0530 Subject: [PATCH 04/48] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20No=20string=20concat?= =?UTF-8?q?enation=20#1816?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pageComponents/topicPages/AddToCalendar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/pageComponents/topicPages/AddToCalendar.tsx b/web/pageComponents/topicPages/AddToCalendar.tsx index 1260748af..e25a0484b 100644 --- a/web/pageComponents/topicPages/AddToCalendar.tsx +++ b/web/pageComponents/topicPages/AddToCalendar.tsx @@ -89,7 +89,7 @@ const AddToCalendar = ({ eventDate, title, location }: AddToCalendarProps) => { const atc = intl.formatMessage({ id: 'add_to_calendar_event', defaultMessage: 'Add to Calendar' }) return (