From e9aaa40e17f6246d45d094d91b7af649ecf2e32e Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 28 Nov 2024 11:52:37 +0100
Subject: [PATCH] chore: storefront fixes (#2844)

This PR ports over changes and fixes from #2830
resolves #2840
resolves #2816

New codeblock styling is approved by @Thunear
---
 .../src/ClipboardButton/ClipboardButton.tsx   |  2 +-
 .../src/CodeSnippet/CodeSnippet.module.css    | 11 +++-
 .../src/CodeSnippet/CodeSnippet.tsx           | 18 +++---
 apps/_components/src/Footer/Footer.tsx        |  9 ++-
 apps/_components/src/Header/Header.tsx        |  4 +-
 apps/_components/src/logos/Udir.tsx           |  2 +-
 .../_components/PostLayout/PostLayout.tsx     |  2 +-
 .../designelementer/farger/page.mdx           |  2 +-
 .../for-utviklere/komposisjon/page.mdx        | 37 +++++-------
 apps/storefront/app/komponenter/page.tsx      |  2 +-
 .../app/monstre/feilmeldinger/page.mdx        | 58 +++++++++----------
 .../MdxContent/MdxContent.module.css          |  1 +
 .../components/SidebarMenu/SidebarMenu.tsx    |  2 +-
 .../components/Tokens/TokenList/TokenList.tsx | 29 ++++++++--
 .../layouts/MenuPageLayout/MenuPageLayout.tsx |  2 +-
 apps/storefront/tsconfig.json                 |  1 +
 .../components/TokenModal/TokenModal.tsx      |  2 +-
 17 files changed, 105 insertions(+), 79 deletions(-)

diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx
index d21df7faa1..0f7545317e 100644
--- a/apps/_components/src/ClipboardButton/ClipboardButton.tsx
+++ b/apps/_components/src/ClipboardButton/ClipboardButton.tsx
@@ -34,7 +34,7 @@ export const ClipboardButton = ({
           title={title}
           icon={!text}
           variant='tertiary'
-          color='neutral'
+          data-color='neutral'
           data-size='sm'
         >
           <ClipboardIcon fontSize={'1.4rem'} />
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css
index 40776471c0..ddbcf60327 100644
--- a/apps/_components/src/CodeSnippet/CodeSnippet.module.css
+++ b/apps/_components/src/CodeSnippet/CodeSnippet.module.css
@@ -8,7 +8,16 @@
 }
 
 .codeSnippet > pre {
-  padding-right: var(--ds-spacing-11) !important;
+  padding-right: var(--ds-spacing-18) !important;
+  background-color: var(--ds-color-neutral-background-subtle) !important;
+}
+
+.codeSnippet > pre > code {
+  padding: 0;
+}
+
+.codeSnippet > pre > code span:empty {
+  display: none;
 }
 
 .copyButton {
diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
index c63de3aff0..bf00ef571e 100644
--- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx
+++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -10,8 +10,8 @@ import * as prettierCSS from 'prettier/plugins/postcss.js';
 import * as prettierTypescript from 'prettier/plugins/typescript.js';
 import { format } from 'prettier/standalone.js';
 import { useEffect, useState } from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { stackoverflowDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 import classes from './CodeSnippet.module.css';
 
@@ -27,15 +27,13 @@ const plugins = [
 ];
 
 type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'json';
-  syntax?: string;
+  language?: 'css' | 'html' | 'ts' | 'markdown' | 'json' | 'shell' | 'tsx';
   children: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const CodeSnippet = ({
   language = 'markdown',
   className,
-  syntax = 'js',
   children,
   ...rest
 }: CodeSnippetProps) => {
@@ -49,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);
@@ -76,6 +75,7 @@ const CodeSnippet = ({
     <div
       className={cl(classes.codeSnippet, className)}
       data-color-scheme='dark'
+      suppressHydrationWarning
       {...rest}
     >
       {snippet && (
@@ -87,15 +87,15 @@ const CodeSnippet = ({
               className={classes.copyButton}
               aria-label='Kopier'
               icon
-              color='neutral'
+              data-color='neutral'
               data-size='sm'
             >
               <FilesIcon fontSize='1.5rem' />
             </Button>
           </Tooltip>
           <SyntaxHighlighter
-            style={nightOwl}
-            language={syntax}
+            style={stackoverflowDark}
+            language={language}
             customStyle={{
               fontSize: '15px',
               margin: 0,
diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
index 9939f8e78e..1d8f6ce1b4 100644
--- a/apps/_components/src/Footer/Footer.tsx
+++ b/apps/_components/src/Footer/Footer.tsx
@@ -26,7 +26,7 @@ const LinkList = (links: LinkListItemProps[]) => {
     <ul className={classes.links}>
       {links.map((item, index) => (
         <li key={index}>
-          <Link href={item.url} color='neutral' className={classes.link}>
+          <Link href={item.url} data-color='neutral' className={classes.link}>
             {item.prefix}
             {item.text}
           </Link>
@@ -64,7 +64,12 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
               <Mattilsynet />
               <Udir className={classes.udir} />
             </div>
-            <Button asChild variant='secondary' color='neutral' data-size='sm'>
+            <Button
+              asChild
+              variant='secondary'
+              data-color='neutral'
+              data-size='sm'
+            >
               <NextLink
                 href='mailto:designsystem@digdir.no'
                 className={classes.button}
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
index c3a1a07cd7..ae67f0da43 100644
--- a/apps/_components/src/Header/Header.tsx
+++ b/apps/_components/src/Header/Header.tsx
@@ -128,7 +128,7 @@ const Header = ({
               <Button
                 variant='tertiary'
                 icon={true}
-                color='neutral'
+                data-color='neutral'
                 aria-expanded={open}
                 aria-label='Meny'
                 className={cl(classes.toggle, 'ds-focus')}
@@ -207,7 +207,7 @@ const Header = ({
                   aria-label={`Bytt til ${theme === 'light' ? 'mørk' : 'lys'} modus`}
                   variant='tertiary'
                   icon={true}
-                  color='neutral'
+                  data-color='neutral'
                   onClick={() => {
                     handleThemeChange(theme === 'light' ? 'dark' : 'light');
                   }}
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/designelementer/farger/page.mdx b/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
index ded833b423..d242ab2b70 100644
--- a/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
+++ b/apps/storefront/app/grunnleggende/designelementer/farger/page.mdx
@@ -29,7 +29,7 @@ Fargesystemet består av globale farger som refererer til hva fargen er (eks. re
 ### Navnestruktur
 
 Et semantisk fargenavn er bygget opp av 3 ledd: <br/>
-_farge - stryke - vekt_ <br/>
+_farge - styrke - vekt_ <br/>
 
 - Background: Som regel bakgrunnen på hele siden (HTML body).
 - Surface: Bakgrunnsfargen til en ting. Eks. et panel, en knapp, en seksjon, etc.
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/app/monstre/feilmeldinger/page.mdx b/apps/storefront/app/monstre/feilmeldinger/page.mdx
index ac966b551d..a9dbe9b3d9 100644
--- a/apps/storefront/app/monstre/feilmeldinger/page.mdx
+++ b/apps/storefront/app/monstre/feilmeldinger/page.mdx
@@ -185,38 +185,36 @@ Her må vi gjøre det så tydelig som mulig for brukeren at flere felt påvirker
 I dette eksempelet har vi en gruppe med felt, der brukeren ikke nødvendigvis har alle opplysningene, men må fylle ut minst ett felt.
 
 <Details
-  color='neutral'
+  data-color='neutral'
 >
-  <DetailsItem>
-    <DetailsSummary>Eksempel på feilmelding som gjelder flere felt</DetailsSummary>
-    <DetailsContent
-        style={{
-        paddingTop: '0px',
-        paddingBottom: '0px',
-        maxWidth: '780px'
-    }}>
-      Videoen under viser at brukeren forsøker å gå videre uten å ha fyllt ut minst ett felt, som er påkrevd. Alle feltene i gruppen blir da røde og en feilmelding vises i bunnen.
-      <video
-        controls
-        autoplay
-        width='100%'
-        loop
-      >
-        <source
-          src='/img/error-message-group-error.mp4'
-          type='video/mp4'
-        />
-      </video>
-
-      Hadde det vært bare en feil i gruppen, ville feilmeldingen vist på vanlig måte under kun et av feltene, uten at hele gruppen ble rød.
-
-      <Image
-        src='/img/errormessage-co-22b.png'
-        alt='Skjermbilde av skjema med en gruppe av felter. Brukeren har fylt ut minst ett felt, men har en feil i utfyllingen. Feilmeldingen vises da på vanlig måte under det aktuelle feltet. '
-        boxShadow={false}
+  <DetailsSummary>Eksempel på feilmelding som gjelder flere felt</DetailsSummary>
+  <DetailsContent
+      style={{
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      maxWidth: '780px'
+  }}>
+    Videoen under viser at brukeren forsøker å gå videre uten å ha fyllt ut minst ett felt, som er påkrevd. Alle feltene i gruppen blir da røde og en feilmelding vises i bunnen.
+    <video
+      controls
+      autoplay
+      width='100%'
+      loop
+    >
+      <source
+        src='/img/error-message-group-error.mp4'
+        type='video/mp4'
       />
-    </DetailsContent>
-  </DetailsItem>
+    </video>
+
+    Hadde det vært bare en feil i gruppen, ville feilmeldingen vist på vanlig måte under kun et av feltene, uten at hele gruppen ble rød.
+
+    <Image
+      src='/img/errormessage-co-22b.png'
+      alt='Skjermbilde av skjema med en gruppe av felter. Brukeren har fylt ut minst ett felt, men har en feil i utfyllingen. Feilmeldingen vises da på vanlig måte under det aktuelle feltet. '
+      boxShadow={false}
+    />
+  </DetailsContent>
 </Details>
 
 ## Kode
diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
index 5969fbe527..46db4eb986 100644
--- a/apps/storefront/components/MdxContent/MdxContent.module.css
+++ b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -52,6 +52,7 @@
 
     & svg {
       margin: 0;
+      fill: var(--ds-color-neutral-text-default);
     }
   }
 
diff --git a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx
index 3b3293c0f9..85808e4eb4 100644
--- a/apps/storefront/components/SidebarMenu/SidebarMenu.tsx
+++ b/apps/storefront/components/SidebarMenu/SidebarMenu.tsx
@@ -41,7 +41,7 @@ const SidebarMenu = ({ routerPath }: SidebarMenuProps) => {
           <Button
             className={classes.toggleBtn}
             data-size='md'
-            color='neutral'
+            data-color='neutral'
             variant='secondary'
             onClick={() => setShowMenu(!showMenu)}
             aria-expanded={showMenu}
diff --git a/apps/storefront/components/Tokens/TokenList/TokenList.tsx b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
index 0a18aa2824..4f2ac4c9e2 100644
--- a/apps/storefront/components/Tokens/TokenList/TokenList.tsx
+++ b/apps/storefront/components/Tokens/TokenList/TokenList.tsx
@@ -54,9 +54,6 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
         {tokens.map(([, tokens]) => {
           return tokens.map((token) => {
             const value = token.$value as string;
-            const pxSize = /\b\d+px\b/.test(value)
-              ? value
-              : `${parseFloat(value) * 16}px`;
             const isBorderRadius = token.path.includes('border-radius');
 
             return (
@@ -69,12 +66,14 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
                   />
                 </Table.Cell>
                 <Table.Cell>{token.$value}</Table.Cell>
-                <Table.Cell>{pxSize}</Table.Cell>
+                <Table.Cell>
+                  <ComputedValue value={value} />
+                </Table.Cell>
                 <Table.Cell>
                   {isBorderRadius ? (
-                    <TokenBorderRadius value={pxSize} />
+                    <TokenBorderRadius value={value} />
                   ) : (
-                    <TokenSize value={pxSize} />
+                    <TokenSize value={value} />
                   )}
                 </Table.Cell>
               </Table.Row>
@@ -86,6 +85,24 @@ const TokensTable = ({ tokens }: TokenTableProps) => {
   );
 };
 
+const ComputedValue = ({ value }: { value: string }) => {
+  const [computedValue, setComputedValue] = useState<string>('');
+
+  useEffect(() => {
+    if (!document) return;
+
+    const elm = document.createElement('div');
+    elm.style.cssText = `width: ${value}; height: ${value};`;
+    document.body.appendChild(elm);
+    const computedValue = getComputedStyle(elm).width;
+    document.body.removeChild(elm);
+
+    setComputedValue(computedValue);
+  }, [value]);
+
+  return <>{computedValue}</>;
+};
+
 type TokenCardsProps = {
   tokens: [string, Token[]][];
   cols?: number;
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'] &,
diff --git a/apps/storefront/tsconfig.json b/apps/storefront/tsconfig.json
index 1acbc9ece2..0e3ca35ddd 100644
--- a/apps/storefront/tsconfig.json
+++ b/apps/storefront/tsconfig.json
@@ -19,6 +19,7 @@
     "jsx": "preserve",
     "incremental": true,
     "forceConsistentCasingInFileNames": true,
+    "types": ["@digdir/designsystemet-theme/colors.d.ts"],
     "plugins": [
       {
         "name": "typescript-plugin-css-modules"
diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
index cbd6d587a3..a9395b09e0 100644
--- a/apps/theme/components/TokenModal/TokenModal.tsx
+++ b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -183,7 +183,7 @@ export const TokenModal = ({
           </div>
           <div className={classes.rightSection}>
             <div className={classes.snippet}>
-              <CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
+              <CodeSnippet language='shell'>{cliSnippet}</CodeSnippet>
             </div>
             <div className={classes.contact}>
               <div className={classes.contact__icon}>