🎨 Improve focusstyling and make it more coherent #2177 (#2288)

* 🎨 update * 🎨 update focus styling * 🎨 update * 🎨 update mobile * 🎨 update * 🎨 update styling * 🎨 update * 🎨 darker tint on divider
equinor · May 13, 2024 · d75976c · d75976c
1 parent a253446
commit d75976c
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 173 deletions.
diff --git a/web/components/src/Menu/MenuButton.tsx b/web/components/src/Menu/MenuButton.tsx
@@ -1,9 +1,6 @@
 import { forwardRef, ButtonHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { MenuIcon } from './MenuIcon'
-import { outlineTemplate, Tokens } from '@utils'
-
-const { outline } = Tokens
 
 export type MenuButtonProps = {
   expanded?: boolean
@@ -31,7 +28,6 @@ const StyledMenuButton = styled.button<{ expanded: boolean }>`
   grid-gap: 13px;
   gap: 13px;
   margin: 0;
-  padding: var(--space-xSmall);
   cursor: pointer;
   background: transparent;
   border: none;
@@ -45,10 +41,6 @@ const StyledMenuButton = styled.button<{ expanded: boolean }>`
     grid-template-columns: min-content 1fr;
   }
 
-  &[data-focus-visible-added]:focus {
-    ${outlineTemplate(outline)}
-  }
-
   ${({ expanded }) =>
     !expanded &&
     `
@@ -68,7 +60,13 @@ export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(functio
   ref,
 ) {
   return (
-    <StyledMenuButton expanded={expanded} ref={ref} aria-label={title} {...rest}>
+    <StyledMenuButton
+      expanded={expanded}
+      ref={ref}
+      aria-label={title}
+      className="focus:outline-none focus-visible:envis-outline hover:bg-moss-green-60 rounded-md py-2 px-3"
+      {...rest}
+    >
       <StyledButtonText>{title}</StyledButtonText>
       <MenuIcon expanded={expanded} />
     </StyledMenuButton>

diff --git a/web/components/utils/tokens/outline.ts b/web/components/utils/tokens/outline.ts
@@ -2,7 +2,7 @@ import type { Outline } from '@equinor/eds-tokens'
 
 /* Where should this be located */
 export const outline: Outline = {
-  width: '1px',
+  width: '2px',
   //Shouldn't use color variables directly, but just for testing
   color: 'var(--moss-green-100)',
   style: 'dashed',

diff --git a/web/core/Button/index.tsx b/web/core/Button/index.tsx
@@ -12,6 +12,9 @@ focus:outline-none
 focus-visible:envis-outline
 dark:focus:outline-none
 dark:focus-visible:envis-outline-invert
+flex
+items-center
+gap-3
 `
 
 export type Variants = 'contained' | 'outlined' | 'ghost'
@@ -20,7 +23,16 @@ export type Variants = 'contained' | 'outlined' | 'ghost'
 export const getVariant = (variant: Variants): string => {
   switch (variant) {
     case 'ghost':
-      return ``
+      return `
+      hover:bg-moss-green-60
+      focus:outline-none
+      focus-visible:envis-outline
+      active:envis-outline
+      dark:text-white-100
+      dark:hover:bg-white-transparent
+      dark:focus-visible:envis-outline-invert
+      dark:active:envis-outline-invert
+      `
     case 'outlined':
       return `
       border

diff --git a/web/pageComponents/shared/Footer.tsx b/web/pageComponents/shared/Footer.tsx
@@ -70,10 +70,6 @@ const FooterLink = styled(NextLink)`
       text-decoration: underline;
     }
   }
-  &[data-focus-visible-added]:focus {
-    outline-color: var(--energy-red-90);
-    outline-style: dashed;
-  }
   @media (max-width: 750px) {
     flex: 0 0 40%;
     max-width: var(--space-4xLarge);
@@ -144,7 +140,12 @@ const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer({ footerD
                 const icon = type === 'someLink' && someType ? getSomeSvg(someType) : null
 
                 return (
-                  <FooterLink key={id} href={url || getLink(link)} prefetch={false}>
+                  <FooterLink
+                    key={id}
+                    href={url || getLink(link)}
+                    prefetch={false}
+                    className="focus:outline-none focus-visible:envis-outline-invert"
+                  >
                     {icon && <SomeIcon aria-hidden={true}>{icon}</SomeIcon>}
                     {label}
                   </FooterLink>

diff --git 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, BackgroundContainer, Button } from '@components'
+import { Topbar, BackgroundContainer } from '@components'
 import { AllSlugsType, LocalizationSwitch } from './LocalizationSwitch'
 import type { MenuData, SimpleMenuData } from '../../types/types'
 import SiteMenu from './siteMenu/SiteMenu'
@@ -18,6 +18,7 @@ import Head from 'next/head'
 import getConfig from 'next/config'
 import { getAllSitesLink } from '../../common/helpers/getAllSitesLink'
 import { Icon } from '@equinor/eds-core-react'
+import { ButtonLink } from '@core/Link'
 
 const TopbarOffset = createGlobalStyle`
   body {
@@ -169,28 +170,16 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
             >
               {hasSearch && (
                 <ControlChild>
-                  <Button
+                  <ButtonLink
                     variant="ghost"
                     aria-expanded="true"
-                    aria-label={searchLabel}
-                    forwardedAs={NextLink}
-                    prefetch={false}
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    //@ts-ignore
-                    href={{
-                      pathname: '/search',
-                    }}
-                    style={
-                      {
-                        '--eds_button__padding_x': 'var(--space-small)',
-                        color: 'var(--default-text)',
-                        fill: 'var(--default-text)',
-                      } as CSSProperties
-                    }
+                    aria-label="Search"
+                    href="/search"
+                    className="p-2 md:px-5 md:py-3"
                   >
                     <Icon size={24} data={search} />
                     <FormattedMessage id="search" />
-                  </Button>
+                  </ButtonLink>
                 </ControlChild>
               )}
               {hasMoreThanOneLanguage && (

diff --git a/web/pageComponents/shared/LocalizationSwitch.tsx b/web/pageComponents/shared/LocalizationSwitch.tsx
@@ -1,84 +1,5 @@
-import styled, { css } from 'styled-components'
-import NextLink from 'next/link'
-import { outlineTemplate, Tokens } from '@utils'
 import { languages } from '../../languages'
-
-const { outline } = Tokens
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-const StyledDiv = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-const SharedStyle = css`
-  display: flex;
-  padding: var(--space-xSmall);
-  margin: 0;
-  font-size: var(--typeScale-0);
-  font-weight: var(--fontWeight-medium);
-  line-height: 1em;
-`
-
-const ActiveLocale = styled.span`
-  ${SharedStyle}
-  color: var(--slate-blue-95);
-  position: relative;
-  display: none;
-  &:after {
-    content: '';
-    display: block;
-    width: calc(100% - (var(--space-xSmall) * 2));
-    height: 2px;
-    position: absolute;
-    bottom: calc(var(--space-xSmall) * 0.5);
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    background: var(--moss-green-100);
-  }
-  @media (min-width: 600px) {
-    display: block;
-  }
-`
-
-const StyledLink = styled(NextLink)`
-  ${SharedStyle}
-  text-decoration: none;
-  color: var(--grey-60);
-  min-width: 48px;
-  min-height: 48px;
-  align-items: center;
-  justify-content: center;
-
-  &[data-focus-visible-added]:focus {
-    ${outlineTemplate(outline)}
-  }
-
-  &:hover {
-    background: var(--moss-green-70);
-  }
-
-  &:visited {
-    color: var(--grey-60);
-  }
-
-  @media (min-width: 600px) {
-    min-width: auto;
-    min-height: auto;
-  }
-`
-
-const Divider = styled.span`
-  display: none;
-  @media (min-width: 600px) {
-    display: inline-block;
-  }
-`
+import { ButtonLink } from '@core/Link'
 
 export type AllSlugsType = { slug: string; lang: string }[]
 
@@ -87,46 +8,35 @@ export type LocalizationSwitchProps = {
   activeLocale: string
 }
 
-type LocaleLinkProps = {
-  href: string
-  title: string
-  locale: string
-  active: boolean
-}
-
-const LocaleLink: React.FC<React.PropsWithChildren<LocaleLinkProps>> = ({ href, title, locale, active, children }) => {
-  if (!active) {
-    return (
-      <StyledLink href={href} locale={locale} aria-label={title} prefetch={false}>
-        {children}
-      </StyledLink>
-    )
-  }
-
-  return <ActiveLocale>{children}</ActiveLocale>
-}
-
 export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: LocalizationSwitchProps) => {
   if (slugs.length < 1) return null
 
   return (
-    <Wrapper {...rest}>
-      {slugs.map((obj, key) => {
+    <div className="flex items-center md:divide-x md:divide-dashed md:divide-gray-400 " {...rest}>
+      {slugs.map((obj) => {
         const language = languages.find((lang) => lang.name === obj.lang)
         return (
-          <StyledDiv key={obj.lang}>
-            <LocaleLink
+          <div
+            className={`flex items-center ${activeLocale === String(language?.locale) ? 'hidden md:block' : ''} `}
+            key={obj.lang}
+          >
+            <ButtonLink
+              variant="ghost"
               href={obj.slug}
-              title={`Switch to ${language?.title}`}
               locale={`${language?.locale}`}
-              active={activeLocale === `${language?.locale}`}
+              className={`flex flex-col gap-0 items-stretch px-2 text-xs`}
             >
-              <span style={{ textTransform: 'uppercase' }}>{language?.locale}</span>
-            </LocaleLink>
-            {key + 1 < slugs.length && <Divider>|</Divider>}
-          </StyledDiv>
+              <span className="sr-only">{`Switch to ${language?.title}`}</span>
+              <span
+                aria-hidden
+                className={`uppercase ${activeLocale === String(language?.locale) ? 'font-bold' : 'font-normal'}`}
+              >
+                {language?.locale}
+              </span>
+            </ButtonLink>
+          </div>
         )
       })}
-    </Wrapper>
+    </div>
   )
 }
diff --git a/web/pageComponents/shared/LogoLink.tsx b/web/pageComponents/shared/LogoLink.tsx
@@ -1,36 +1,19 @@
 import { AnchorHTMLAttributes } from 'react'
 import { LogoSecondary } from '@components'
-import styled from 'styled-components'
-import { outlineTemplate, Tokens } from '@utils'
 import NextLink from 'next/link'
 
-const { outline } = Tokens
-
-const StyledLogoLink = styled(NextLink)<LogoLinkProps>`
-  justify-self: left;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  /* We add the focus ring manually for keyboard users */
-  outline: none;
-  &[data-focus-visible-added]:focus {
-    ${outlineTemplate(outline)}
-  }
-`
-
-const AlignedLogoSecondary = styled(LogoSecondary)`
-  /*  Magic number coming up! Need to align the logo as good as possible.
-  Since this is just a positioning things it's added here and not in the Logo component
-  */
-  margin-top: -12%;
-`
-
 type LogoLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
 
 export const LogoLink = ({ ...rest }: LogoLinkProps) => {
   return (
-    <StyledLogoLink href="/" aria-label="Equinor home page" {...rest} className="logo" prefetch={false}>
-      <AlignedLogoSecondary />
-    </StyledLogoLink>
+    <NextLink
+      href="/"
+      aria-label="Equinor home page"
+      {...rest}
+      className="flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline"
+      prefetch={false}
+    >
+      <LogoSecondary className="-mt-[12%]" />
+    </NextLink>
   )
 }
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
@@ -416,11 +416,14 @@ module.exports = {
         addUtilities({
           '.envis-outline': {
             'outline-style': 'dashed',
-            'outline-width': '1px',
-            'outline-offset': '4px',
-            'outline-color': theme('colors.slate-blue.95'),
+            'outline-width': '2px',
+            'outline-offset': '3px',
+            'outline-color': theme('colors.moss-green.100'),
           },
           '.envis-outline-invert': {
+            'outline-style': 'dashed',
+            'outline-width': '2px',
+            'outline-offset': '3px',
             'outline-color': theme('colors.white.100'),
           },
         })