🔥 Remove Chakraproviderwrapper and restyle accordionheader #1444

equinor · Jan 13, 2023 · 4c274cb · 4c274cb
1 parent 9fbfd6e
commit 4c274cb
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 21 deletions.
diff --git a/web/components/src/Accordion/Header.tsx b/web/components/src/Accordion/Header.tsx
@@ -39,6 +39,19 @@ const StyledRAccordionButton = styled(RAccordionButton)`
   }
 `
 
+const StyledCAccordionButton = styled(CAccordionButton)`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  padding: var(--space-medium) 0;
+  border: none;
+  cursor: pointer;
+  &[data-focus-visible-added]:focus {
+    ${outlineTemplate(outline)}
+  }
+`
+
 const FilledIcon = styled(Icon)``
 
 const OutlineIcon = styled(Icon)``
@@ -99,7 +112,11 @@ export const Header = Flags.IS_DEV
 
       return (
         <StyledHeader forwardedAs={headingLevel}>
-          <CAccordionButton ref={ref} style={{ paddingLeft: 0, paddingTop: '1em', paddingBottom: '1em' }} {...rest}>
+          <StyledCAccordionButton
+            ref={ref}
+            style={{ paddingLeft: 0, paddingTop: '1em', paddingBottom: '1em' }}
+            {...rest}
+          >
             {isOpen ? (
               <StyledIcon>
                 <OutlineIcon size={iconSize} data={remove_outlined} />
@@ -114,7 +131,7 @@ export const Header = Flags.IS_DEV
             <StyledTypography isExpanded={isOpen} forwardedAs="span">
               {children}
             </StyledTypography>
-          </CAccordionButton>
+          </StyledCAccordionButton>
         </StyledHeader>
       )
     })

diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
@@ -1,7 +1,6 @@
 import type { AppProps } from 'next/app'
 import type { NextPage } from 'next'
 import type { ReactNode } from 'react'
-import { ChakraBaseProvider } from '@chakra-ui/react'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { GlobalStyle } from '../styles/globalStyles'
@@ -118,24 +117,22 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
   `
   return (
     <SWRConfig>
-      <ChakraBaseProvider>
-        <ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
-          {Flags.IS_DEV && <StyledSkipLink>Skip to Content</StyledSkipLink>}
-          <>
-            <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>
-      </ChakraBaseProvider>
+      <ErrorBoundary FallbackComponent={ErrorFallback} onError={HandleBoundaryError}>
+        {Flags.IS_DEV && <StyledSkipLink>Skip to Content</StyledSkipLink>}
+        <>
+          <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>
     </SWRConfig>
   )
 }