skiplink on codeblock, misc styling

digdir · Mar 7, 2025 · 9c1c0a1 · 9c1c0a1
1 parent fd65893
commit 9c1c0a1
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/apps/_components/src/CodeBlock/CodeBlock.tsx b/apps/_components/src/CodeBlock/CodeBlock.tsx
@@ -1,7 +1,7 @@
 'use client';
-import { Button } from '@digdir/designsystemet-react';
+import { Button, SkipLink } from '@digdir/designsystemet-react';
 import cl from 'clsx/lite';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { CodeBlock as ReactCodeBlock } from 'react-code-block';
 import classes from './CodeBlock.module.css';
 
@@ -46,22 +46,27 @@ export const CodeBlock = ({
   className,
   language = 'text',
 }: CodeBlockProps) => {
+  const randId = useId();
+
   return (
-    <ReactCodeBlock code={children} language={language}>
-      <div className={classes.codeBlockWrapper}>
-        <ReactCodeBlock.Code
-          data-color-scheme='dark'
-          className={cl(classes.codeBlock, className)}
-        >
-          <ReactCodeBlock.LineContent>
-            <ReactCodeBlock.Token />
-          </ReactCodeBlock.LineContent>
-        </ReactCodeBlock.Code>
-        <div data-color-scheme='dark' className={classes.toolbar}>
-          <CopyButton text={children} />
+    <>
+      <SkipLink href={`#${randId}`}>Hopp over kodeblokk</SkipLink>
+      <ReactCodeBlock code={children} language={language}>
+        <div className={classes.codeBlockWrapper}>
+          <ReactCodeBlock.Code
+            data-color-scheme='dark'
+            className={cl(classes.codeBlock, className)}
+          >
+            <ReactCodeBlock.LineContent>
+              <ReactCodeBlock.Token />
+            </ReactCodeBlock.LineContent>
+          </ReactCodeBlock.Code>
+          <div data-color-scheme='dark' className={classes.toolbar} id={randId}>
+            <CopyButton text={children} />
+          </div>
         </div>
-      </div>
-    </ReactCodeBlock>
+      </ReactCodeBlock>
+    </>
   );
 };
 

diff --git a/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx b/apps/storefront/app/grunnleggende/for-utviklere/komposisjon/page.mdx
@@ -82,7 +82,7 @@ Dersom ein av event handlerane er avhengig av `event.defaultPrevented`, så må
   asChild
   onClick={(event) => {
     if (!event.defaultPrevented)
-      console.log('Not logged because default is prevented.');
+      console.log('Ikkje logget til konsoll fordi default er prevented.');
   }}
 >
   <Link onClick={(e) => e.preventDefault()}>Di lenke</Link>

diff --git a/apps/storefront/components/MdxContent/MdxContent.module.css b/apps/storefront/components/MdxContent/MdxContent.module.css
@@ -125,7 +125,9 @@
     box-shadow: var(--ds-shadow-md);
   }
 
-  & > p > code {
+  & > p > code,
+  & li > code,
+  & h2 > code {
     padding: 0.2em 0.5em;
     margin: 1px;
     font-size: 0.9em;