✨ Replace Tabs and skipnav ReachUI with ChakraUI components (#1378)

web/components/src/Tabs/Tab.tsx

@@ -1,10 +1,42 @@
 import { forwardRef, CSSProperties } from 'react'
-import { Tab as RTab, TabProps as RTabProps } from '@reach/tabs'
 import styled from 'styled-components'
 import { outlineTemplate, Tokens } from '@utils'
+import { Tab as CTab } from '@chakra-ui/react'
+import { Tab as RTab, TabProps as RTabProps } from '@reach/tabs'
+import { Flags } from '../../../common/helpers/datasetHelpers'
 
 const { outline } = Tokens
 
+const StyledCTab = styled(CTab)`
+  color: var(--font-color);
+  background: transparent;
+  border: none;
+
+  padding: var(--space-xSmall) 0;
+  /* Not sure about this one, but some spaces for tab components that wrap multiple lines */
+  margin-bottom: var(--space-small);
+  :not(:last-child) {
+    margin-right: var(--space-medium);
+  }
+  &:hover {
+    cursor: pointer;
+  }
+  /* If the text is used inside a inverted component, the text colour must also be inverted */
+  .inverted-background & {
+    color: var(--inverted-text);
+  }
+
+  &:focus-visible {
+    outline: none;
+    ${outlineTemplate(outline)}
+    outline-color: var(--mist-blue-100);
+  }
+
+  &[data-selected] {
+    border-bottom: 2px solid;
+  }
+`
+
 const StyledTab = styled(RTab)`
   color: var(--font-color);
   background: transparent;
@@ -37,20 +69,46 @@ const StyledTab = styled(RTab)`
 
 export type TabProps = RTabProps & {
   inverted?: boolean
+  variant?: string
 }
 
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab({ inverted = false, children, ...rest }, ref) {
-  return (
-    <StyledTab
-      ref={ref}
-      {...rest}
-      style={
-        {
-          '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-        } as CSSProperties
-      }
-    >
-      {children}
-    </StyledTab>
-  )
-})
+export const Tab = Flags.IS_DEV
+  ? forwardRef<HTMLButtonElement, TabProps>(function CTab(
+      { inverted = false, children, variant = 'line', ...rest },
+      ref,
+    ) {
+      return (
+        <StyledCTab
+          ref={ref}
+          _selected={{
+            '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+            borderColor: inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+            borderBottom: '2px solid',
+          }}
+          variant={variant}
+          {...rest}
+          style={
+            {
+              '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+            } as CSSProperties
+          }
+        >
+          {children}
+        </StyledCTab>
+      )
+    })
+  : forwardRef<HTMLButtonElement, TabProps>(function Tab({ inverted = false, children, ...rest }, ref) {
+      return (
+        <StyledTab
+          ref={ref}
+          {...rest}
+          style={
+            {
+              '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+            } as CSSProperties
+          }
+        >
+          {children}
+        </StyledTab>
+      )
+    })

web/components/src/Tabs/TabList.tsx

@@ -1,12 +1,27 @@
 import { forwardRef } from 'react'
+import { TabList as CTabList } from '@chakra-ui/react'
 import { TabList as RTabList, TabListProps as RTabListProps } from '@reach/tabs'
+import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabListProps = RTabListProps
 
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList({ children, ...rest }, ref) {
-  return (
-    <RTabList ref={ref} {...rest}>
-      {children}
-    </RTabList>
-  )
-})
+export type ChakraTabListProps = {
+  inverted?: boolean
+  children: React.ReactNode
+  variant?: string
+}
+export const TabList = Flags.IS_DEV
+  ? forwardRef<HTMLDivElement, ChakraTabListProps>(function TabList({ children, ...rest }, ref) {
+      return (
+        <CTabList ref={ref} {...rest} style={{ border: 'none' }}>
+          {children}
+        </CTabList>
+      )
+    })
+  : forwardRef<HTMLDivElement, TabListProps>(function TabList({ children, ...rest }, ref) {
+      return (
+        <RTabList ref={ref} {...rest}>
+          {children}
+        </RTabList>
+      )
+    })

web/components/src/Tabs/TabPanel.tsx

@@ -1,12 +1,26 @@
 import { forwardRef } from 'react'
 import { TabPanel as RTabPanel, TabPanelProps as RTabPanelProps } from '@reach/tabs'
+import { TabPanel as CTabPanel } from '@chakra-ui/react'
+import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabPanelProps = RTabPanelProps
 
-export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel({ children, ...rest }, ref) {
-  return (
-    <RTabPanel ref={ref} {...rest}>
-      {children}
-    </RTabPanel>
-  )
-})
+export type ChakraTabPanelProps = {
+  inverted?: boolean
+  children: React.ReactNode
+}
+export const TabPanel = Flags.IS_DEV
+  ? forwardRef<HTMLDivElement, ChakraTabPanelProps>(function TabPanel({ children, ...rest }, ref) {
+      return (
+        <CTabPanel ref={ref} {...rest}>
+          {children}
+        </CTabPanel>
+      )
+    })
+  : forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel({ children, ...rest }, ref) {
+      return (
+        <RTabPanel ref={ref} {...rest}>
+          {children}
+        </RTabPanel>
+      )
+    })

web/components/src/Tabs/TabPanels.tsx

@@ -1,12 +1,26 @@
 import { forwardRef } from 'react'
 import { TabPanels as RTabPanels, TabPanelsProps as RTabPanelsProps } from '@reach/tabs'
+import { TabPanels as CTabPanels } from '@chakra-ui/react'
+import { Flags } from '../../../common/helpers/datasetHelpers'
 
 export type TabPanelsProps = RTabPanelsProps
 
-export const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
-  return (
-    <RTabPanels ref={ref} {...rest}>
-      {children}
-    </RTabPanels>
-  )
-})
+export type ChakraTabPanelsProps = {
+  inverted?: boolean
+  children: React.ReactNode
+}
+export const TabPanels = Flags.IS_DEV
+  ? forwardRef<HTMLDivElement, ChakraTabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
+      return (
+        <CTabPanels ref={ref} {...rest}>
+          {children}
+        </CTabPanels>
+      )
+    })
+  : forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels({ children, ...rest }, ref) {
+      return (
+        <RTabPanels ref={ref} {...rest}>
+          {children}
+        </RTabPanels>
+      )
+    })

web/components/src/Tabs/Tabs.tsx

@@ -1,13 +1,42 @@
 import { forwardRef } from 'react'
 
+import { Tabs as CTabs } from '@chakra-ui/react'
 import { Tabs as RTabs, TabsProps as RTabsProps } from '@reach/tabs'
+import { Flags } from '../../../common/helpers/datasetHelpers'
+
+export type ChakraTabsProps = {
+  align?: 'center' | 'end' | 'start'
+  colorScheme?: string
+  defaultIndex?: number
+  direction?: 'ltr' | 'rtl'
+  id?: string
+  index?: number
+  isFitted?: boolean
+  isLazy?: boolean
+  isManual?: boolean
+  lazyBehaviour?: any
+  onChange?: (index: number) => void
+  orientation?: 'horizontal' | 'vertical'
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'line' | 'enclosed' | 'enclosed-colored' | 'soft-rounded' | 'solid-rounded' | 'unstyled'
+  inverted?: boolean
+  children: React.ReactNode
+}
 
 export type TabsProps = RTabsProps
 
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
-  return (
-    <RTabs ref={ref} {...rest}>
-      {children}
-    </RTabs>
-  )
-})
+export const Tabs = Flags.IS_DEV
+  ? forwardRef<HTMLDivElement, ChakraTabsProps>(function Tabs({ children, ...rest }, ref) {
+      return (
+        <CTabs ref={ref} {...rest}>
+          {children}
+        </CTabs>
+      )
+    })
+  : forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
+      return (
+        <RTabs ref={ref} {...rest}>
+          {children}
+        </RTabs>
+      )
+    })

web/package.json

@@ -20,6 +20,10 @@
     "type-check": "tsc --project tsconfig.json --pretty --noEmit"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.4.2",
+    "@chakra-ui/skip-nav": "^2.0.12",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@equinor/eds-core-react": "0.27.0",
     "@equinor/eds-icons": "^0.16.0",
     "@equinor/eds-tokens": "^0.9.0",
@@ -43,6 +47,7 @@
     "date-fns-tz": "^1.3.4",
     "easy-soap-request": "^4.6.0",
     "focus-visible": "^5.2.0",
+    "framer-motion": "^6",
     "friendly-challenge": "^0.9.6",
     "hls.js": "^1.1.5",
     "html-entities": "^2.3.2",

web/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from 'next/app'
 import type { NextPage } from 'next'
 import type { ReactNode } from 'react'
+import { ChakraProvider } from '@chakra-ui/react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { GlobalStyle } from '../styles/globalStyles'
@@ -15,6 +16,8 @@ import useConsentState from '../lib/hooks/useConsentState'
 import { loadSiteImproveScript, cleanUpSiteImproveScript } from '../pageComponents/SiteImprove'
 import { enableDynatrace, disableDynatrace } from '../pageComponents/Dynatrace'
 import { SWRConfig } from 'swr'
+import { SkipNavLink as NewSkipNavLink, SkipNavContent } from '@chakra-ui/skip-nav'
+import { Flags } from '../common/helpers/datasetHelpers'
 
 // import archivedStyles from '@equinor/energyvision-legacy-css'
 // import { AppInsightsContext, AppInsightsErrorBoundary } from '@microsoft/applicationinsights-react-js'
@@ -103,17 +106,24 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
 
   return (
     <SWRConfig>
-      <ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
-        <>
-          <Head>
-            <meta name="viewport" content="width=device-width, initial-scale=1" />
-          </Head>
-          <GlobalStyle />
-          <SkipNavLink />
-          {IS_LIVE && <CookieBot locale={router.locale} />}
-          {getLayout(<Component {...pageProps} />)}
-        </>
-      </ErrorBoundary>
+      <ChakraProvider>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
+          {Flags.IS_DEV && <NewSkipNavLink style={{ top: '10%' }}>Skip to Content</NewSkipNavLink>}
+          <>
+            <Head>
+              <meta name="viewport" content="width=device-width, initial-scale=1" />
+            </Head>
+            <GlobalStyle />
+            <SkipNavLink />
+            {IS_LIVE && <CookieBot locale={router.locale} />}
+            {Flags.IS_DEV ? (
+              <SkipNavContent>{getLayout(<Component {...pageProps} />)}</SkipNavContent>
+            ) : (
+              <>{getLayout(<Component {...pageProps} />)}</>
+            )}
+          </>
+        </ErrorBoundary>
+      </ChakraProvider>
     </SWRConfig>
   )
 }