Markdown support in Code example descriptions (#3098)

* feat: Added markdown link support to code example descriptions * memo: Markdown implementation tested in story * refactor: Use child pattern
navikt · Aug 16, 2024 · 293b15f · 293b15f
1 parent 289ce63
commit 293b15f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.stories.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.stories.tsx
@@ -29,10 +29,11 @@ export const Designsystem: Story = {
             index: 1,
             sandboxBase64: "fakebase64",
             sandboxEnabled: true,
+            description:
+              "Tekst før lenke [Aksel-lenke](https://aksel.nav.no/) tekst etter lenke.",
           },
           {
             _key: getKey(),
-            description: "Testdescription",
             innhold:
               'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary-neutral">Primary</Button>\n      <Button variant="secondary-neutral">Secondary</Button>\n      <Button variant="tertiary-neutral">Tertiary</Button>\n    </div>\n  );\n};',
             navn: "neutral",

diff --git a/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx b/aksel.nav.no/website/components/sanity-modules/code-examples/CodeExamples.tsx
@@ -11,6 +11,7 @@ import { BodyLong, Button, Chips, HStack } from "@navikt/ds-react";
 import SnippetLazy from "@/cms/code-snippet/SnippetLazy";
 import ErrorBoundary from "@/error-boundary";
 import { CodeExamplesT } from "@/types";
+import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
 import { CodeSandbox } from "./parts/CodeSandbox";
 import { Sandbox } from "./parts/Sandbox";
 
@@ -129,7 +130,9 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
           })}
         >
           {fil?.description && (
-            <BodyLong className="mb-2">{fil.description}</BodyLong>
+            <BodyLong className="mb-2">
+              <TextWithMarkdownLink>{fil.description}</TextWithMarkdownLink>
+            </BodyLong>
           )}
 
           {active === fil.navn && (

diff --git a/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx b/aksel.nav.no/website/components/sanity-modules/intro-seksjon/IntroSeksjon.tsx
@@ -2,7 +2,7 @@ import ErrorBoundary from "@/error-boundary";
 import { SanityBlockContent } from "@/sanity-block";
 import { AkselGrunnleggendeDocT, AkselKomponentDocT } from "@/types";
 import { List, ListItem } from "@/web/List";
-import { markdownLink } from "./markdown-link";
+import { TextWithMarkdownLink } from "@/web/TextWithMarkdownLink";
 
 type IntroProps = {
   node: AkselKomponentDocT["intro"] | AkselGrunnleggendeDocT["intro"];
@@ -25,15 +25,15 @@ const Intro = ({ node, internal }: IntroProps) => {
           {internal && <ListItem icon>Bruk på interne flater</ListItem>}
           {node.brukes_til.map((x) => (
             <ListItem icon key={x}>
-              {markdownLink(x)}
+              <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
             </ListItem>
           ))}
         </List>
         {node?.brukes_ikke_til && (
           <List title="Uegnet til:">
             {node.brukes_ikke_til.map((x) => (
               <ListItem icon key={x}>
-                {markdownLink(x)}
+                <TextWithMarkdownLink>{x}</TextWithMarkdownLink>
               </ListItem>
             ))}
           </List>

diff --git a/...y-modules/intro-seksjon/markdown-link.tsx → .../website-modules/TextWithMarkdownLink.tsx b/...y-modules/intro-seksjon/markdown-link.tsx → .../website-modules/TextWithMarkdownLink.tsx
@@ -5,7 +5,7 @@ import AkselLink from "@/web/AkselLink";
  * Splits a string into text and links,
  * and returns an array of React elements.
  */
-function markdownLink(input: string) {
+const TextWithMarkdownLink = ({ children: input }: { children: string }) => {
   const regex = /\[([^\]]+)\]\(([^\s)]+)\)/g;
   let lastIndex = 0;
   const elements: React.ReactNode[] = [];
@@ -28,7 +28,7 @@ function markdownLink(input: string) {
     elements.push(input.slice(lastIndex));
   }
 
-  return elements;
-}
+  return <>{elements}</>;
+};
 
-export { markdownLink };
+export { TextWithMarkdownLink };