chore: storefront fix

digdir · Nov 28, 2024 · 5940da5 · 5940da5
1 parent 99aa669
commit 5940da5
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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';
   children: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const CodeSnippet = ({
   language = 'markdown',
   className,
-  syntax = 'js',
   children,
   ...rest
 }: CodeSnippetProps) => {
@@ -87,15 +85,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
@@ -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:[email protected]'
                 className={classes.button}

diff --git 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/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
@@ -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
@@ -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/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
@@ -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}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ @@
         & svg {
           margin: 0;
+          fill: var(--ds-color-neutral-text-default);
         }
       }
@@ Expand Down @@