From 48500e6bf20e1b39d5791eef659200d022fb0276 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 28 Nov 2024 09:09:16 +0100
Subject: [PATCH] suppressHydrationWarning

---
 .../src/CodeSnippet/CodeSnippet.tsx           |  6 ++-
 apps/_components/src/logos/Udir.tsx           |  2 +-
 .../_components/PostLayout/PostLayout.tsx     |  2 +-
 .../for-utviklere/komposisjon/page.mdx        | 37 ++++++++-----------
 apps/storefront/app/komponenter/page.tsx      |  2 +-
 .../layouts/MenuPageLayout/MenuPageLayout.tsx |  2 +-
 6 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
index 9bb4ad2e6d..bf00ef571e 100644
--- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx
+++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -27,7 +27,7 @@ const plugins = [
 ];
 
 type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'json' | 'shell';
+  language?: 'css' | 'html' | 'ts' | 'markdown' | 'json' | 'shell' | 'tsx';
   children: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -47,7 +47,8 @@ const CodeSnippet = ({
     ) {
       try {
         const formatted = await format(children, {
-          parser: language === 'ts' ? 'babel-ts' : language,
+          parser:
+            language === 'ts' || language === 'tsx' ? 'babel-ts' : language,
           plugins,
         });
         setSnippet(formatted);
@@ -74,6 +75,7 @@ const CodeSnippet = ({
     <div
       className={cl(classes.codeSnippet, className)}
       data-color-scheme='dark'
+      suppressHydrationWarning
       {...rest}
     >
       {snippet && (
diff --git a/apps/_components/src/logos/Udir.tsx b/apps/_components/src/logos/Udir.tsx
index f2bc095722..33348d08d6 100644
--- a/apps/_components/src/logos/Udir.tsx
+++ b/apps/_components/src/logos/Udir.tsx
@@ -10,7 +10,7 @@ export function Udir(rest: UdirProps) {
     >
       <title>Utdanningsdirektoratet logo</title>
       <defs>
-        <style>
+        <style suppressHydrationWarning>
           {`
             .cls-1 {
               fill: #fdfeff;
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
index 9ca96326d3..8a19f78f3f 100644
--- a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
+++ b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -86,7 +86,7 @@ function PostLayout({
           </MdxContent>
         </main>
       </Container>
-      <style>
+      <style suppressHydrationWarning>
         {`
           header {
             [data-color-scheme='dark'] &,
diff --git a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx
index d7cdbc8135..371db753cb 100644
--- a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx
+++ b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx
@@ -23,9 +23,8 @@ export default ({ children }) => (
 Nokre gonger må du kanskje byte ut ein komponent med ein anna, for eksempel `Button` skulle vore ein `Link`.
 Det er her `asChild` kjem inn i biletet.
 
-<CodeSnippet language='ts' data-unstyled>
-  {`
-  import { Button, Link } from '@digdir/designsystemet-react';
+<CodeSnippet language='tsx' data-unstyled>
+{`  import { Button, Link } from '@digdir/designsystemet-react';
 
   <Button asChild>
     <Link href='https://www.digdir.no'>Lenke til digdir.no</Link>
@@ -39,9 +38,8 @@ Dette skjer ved hjelp av Radix sin `Slot`-komponent. <sup>1</sup>
 `Slot` mergar sine props ned på komponenten som ligg som underordna element. I tilfellet over vert `Button` sine props lagt til på `Link`-komponenten, og ein `a`-tagg vert rendra ut.
 Når du brukar `asChild` kan du ikkje ha meir enn eit underordna element, men du kan ha så mange du vil inne i det elementet.
 
-<CodeSnippet language='ts'>
-  {`
-  <>
+<CodeSnippet language='tsx'>
+{`  <>
     /* Dette kaster ein error */
     <Button asChild>
       <Icon />
@@ -55,7 +53,6 @@ Når du brukar `asChild` kan du ikkje ha meir enn eit underordna element, men du
         Din lenke
       </Link>
     </Button>
-
   </>
 `}
 </CodeSnippet>
@@ -65,15 +62,13 @@ Når du brukar `asChild` kan du ikkje ha meir enn eit underordna element, men du
 Vi har tidlegare brukt ein `as` prop for å rendre som andre element. Men når du brukar denne, får du ikkje typesafety eller korrekte typar iht. elementet du har endret til med `as`.
 `Slot` ordnar dette ved at du legg til alle props på det underordna elementet av komponenten, og dermed får typesafety.
 
-<CodeSnippet language='ts'>
-  {`
-  <Button asChild>
+<CodeSnippet language='tsx'>
+{`  <Button asChild>
     <Link href='https://www.digdir.no' onClick={() => {}}>
       <Icon />
       Di lenke
     </Link>
-  </Button>
-`}
+  </Button>`}
 </CodeSnippet>
 
 Alt av klassenavn, aria-attributt og andre props som `Button` har, vil bli lagt til på `Link`-komponenten.
@@ -87,9 +82,8 @@ Dette betyr at dersom du stoppar eit event på din komponent, vil eventet på `S
 
 Dersom ein av event handlerane er avhengig av `event.defaultPrevented`, så må du passe på at rekkefølgja er rett. <sup>2</sup>
 
-<CodeSnippet language='ts'>
-  {`
-  <Button
+<CodeSnippet language='tsx'>
+{`  <Button
     asChild
     onClick={(event) => {
       if (!event.defaultPrevented)
@@ -109,9 +103,9 @@ Ynskjer du å bruke ein eigen komponent må du passe på å spre alle props, og
 
 Komponentane dine vil då sjå slik ut:
 
-<CodeSnippet language='ts'>
+<CodeSnippet language='tsx'>
 {`// uten props og ref
-  const MinKnapp = () => <button />
+const MinKnapp = () => <button />
 
 // med props
 const MinKnapp = (props) => <button {...props} />
@@ -119,10 +113,11 @@ const MinKnapp = (props) => <button {...props} />
 // med props og ref
 const MinKnapp = React.forwardRef((props, forwardedRef) => (
 
-<button
-  {...props}
-  ref={forwardedRef}
-/>
+  <button
+    {...props}
+    ref={forwardedRef}
+  />
+
 ))`}
 </CodeSnippet>
 
diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
index b6f4ae0299..8925c7c5a2 100644
--- a/apps/storefront/app/komponenter/page.tsx
+++ b/apps/storefront/app/komponenter/page.tsx
@@ -22,7 +22,7 @@ export default function page() {
       {sortedData.map((component) => (
         <ComponentCard key={component.title} {...component} />
       ))}
-      <style>
+      <style suppressHydrationWarning>
         {`
     body {
       background-color: var(--ds-color-neutral-background-subtle);
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index 3d15d4e491..92fdb95712 100644
--- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -77,7 +77,7 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           </div>
         </main>
       </Container>
-      <style>
+      <style suppressHydrationWarning>
         {`
           header {
             [data-color-scheme='dark'] &,