💄 Fix styles of links #1910

equinor · Sep 29, 2023 · c28cf7a · c28cf7a
1 parent 9ca36d6
commit c28cf7a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/web/components/src/Link/Link.tsx b/web/components/src/Link/Link.tsx
@@ -10,10 +10,11 @@ import { default as NextLink } from 'next/link'
 
 const { outline } = Tokens
 
-export const BaseLink = styled(NextLink)`
+export const BaseLink = styled(NextLink)<{ $textDecoration?: string }>`
   display: inline-flex;
   align-items: center;
   color: var(--slate-blue-95);
+  text-decoration: ${({ $textDecoration }) => $textDecoration || 'none'};
   &[data-focus-visible-added]:focus {
     ${outlineTemplate(outline)}
   }
@@ -144,9 +145,9 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       style={
         {
           ...style,
-          textDecoration: underline ? 'underline' : 'none',
         } as CSSProperties
       }
+      $textDecoration={underline ? 'underline' : 'none'}
       {...rest}
     >
       {children} {type === 'externalUrl' ? <Icon data={external_link} size={16} /> : null}

diff --git a/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx b/web/pageComponents/shared/Hero/FiftyFiftyHero.tsx
@@ -5,7 +5,6 @@ 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 { Flags } from '../../../common/helpers/datasetHelpers'
 import { getLocaleFromName } from '../../../lib/localization'
 
 const StyledHero = styled(BackgroundContainer)`

diff --git a/web/pageComponents/shared/siteMenu/MenuGroup.tsx b/web/pageComponents/shared/siteMenu/MenuGroup.tsx
@@ -110,7 +110,9 @@ export const MenuGroup = ({ topLevelItem, index }: MenuGroupType) => {
                       <SubMenuGroupList aria-label={groupItem.label || topLevelLink?.label} unstyled>
                         {groupItem.links?.map((link: MenuLinkData) => (
                           <StyledItem key={link.id}>
-                            <StyledSubMenuGroupLink href={getLink(link)}>{link.label}</StyledSubMenuGroupLink>
+                            <StyledSubMenuGroupLink underline={false} href={getLink(link)}>
+                              {link.label}
+                            </StyledSubMenuGroupLink>
                           </StyledItem>
                         ))}
                       </SubMenuGroupList>

diff --git a/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx b/web/pageComponents/shared/siteMenu/simple/SimpleSiteMenu.tsx
@@ -90,7 +90,10 @@ const SimpleSiteMenu = ({ data, ...rest }: MenuProps) => {
                       }
                       return (
                         <li key={item.id}>
-                          <MenuLink href={(item.link && item.link.slug) || '/'}> {item.label} </MenuLink>
+                          <MenuLink variant="contentLink" href={(item.link && item.link.slug) || '/'}>
+                            {' '}
+                            {item.label}{' '}
+                          </MenuLink>
                         </li>
                       )
                     }