[aksel.nav.no] Templates vises nå riktig på mønster/mal-sider (#2450)

* 🐛 Fikset visning av templates * 🐛 autoGenerateArrayKeys fungerte ikke for nested arrays * 🐛 Fikset tester
navikt · Nov 3, 2023 · 2a8533a · 2a8533a
1 parent 9b990a2
commit 2a8533a
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 11 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
@@ -26,6 +26,7 @@ export const Designsystem: Story = {
             innhold:
               'import { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button variant="primary">Primary</Button>\n      <Button variant="secondary">Secondary</Button>\n      <Button variant="tertiary">Tertiary</Button>\n      <Button variant="danger">Danger</Button>\n    </div>\n  );\n};',
             navn: "default",
+            title: "title",
             index: 1,
           },
           {
@@ -34,6 +35,7 @@ export const Designsystem: Story = {
             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",
+            title: "title",
             index: 1,
           },
           {
@@ -42,6 +44,7 @@ export const Designsystem: Story = {
             innhold:
               'import { PencilIcon } from "@navikt/aksel-icons";\nimport { Button } from "@navikt/ds-react";\n\nconst Example = () => {\n  return (\n    <div className="flex flex-wrap gap-2">\n      <Button size="small" variant="primary" icon={<PencilIcon aria-hidden />}>\n        Primary\n      </Button>\n      <Button size="small" variant="secondary">\n        Secondary\n      </Button>\n      <Button size="small" variant="tertiary">\n        Tertiary\n      </Button>\n      <Button size="small" variant="danger">\n        Danger\n      </Button>\n    </div>\n  );\n};',
             navn: "small",
+            title: "title",
             index: 1,
           },
         ],

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
@@ -34,7 +34,15 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
         iframeId
       ) as HTMLIFrameElement;
       const exampleIframeDOM = exampleIframe?.contentDocument;
-      const exampleWrapper = exampleIframeDOM?.getElementById("ds-example");
+
+      let exampleWrapper: HTMLElement;
+
+      if (node.dir.variant === "templates") {
+        exampleWrapper = exampleIframeDOM?.getElementById("__next");
+      } else {
+        exampleWrapper = exampleIframeDOM?.getElementById("ds-example");
+      }
+
       if (exampleWrapper && exampleWrapper.offsetHeight) {
         const newHeight = iframePadding + exampleWrapper.offsetHeight;
         clearInterval(waitForExampleContentToRender);
@@ -85,6 +93,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
   }
 
   const active = activeExample ?? node?.dir?.filer?.[0]?.navn;
+  const demoVariant = node.dir?.variant;
 
   return (
     <div>
@@ -107,7 +116,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                   );
                 }}
               >
-                {fixName(fil.navn)}
+                {fixName(fil.title)}
               </Chips.Toggle>
             );
           })}
@@ -138,7 +147,7 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                   )}
                 >
                   <iframe
-                    src={`/eksempler/${node.dir.title}/${fil.navn.replace(
+                    src={`/${demoVariant}/${node.dir.title}/${fil.navn.replace(
                       ".tsx",
                       ""
                     )}`}
@@ -148,7 +157,10 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                     aria-label={`${node?.dir?.title} ${fil.navn} eksempel`}
                     className={cl(
                       "min-w-80 block w-full max-w-full resize-x bg-white shadow-[20px_0_20px_-20px_rgba(0,0,0,0.22)]",
-                      { invisible: unloaded }
+                      {
+                        invisible: unloaded,
+                        "p-6": demoVariant === "templates",
+                      }
                     )}
                     title="Kode-eksempler"
                     ref={iframeRef}
@@ -199,10 +211,9 @@ const ComponentExamples = ({ node }: CodeExamplesProps) => {
                         target="_blank"
                         className="si-ignore"
                         as="a"
-                        href={`/eksempler/${node.dir.title}/${fil.navn.replace(
-                          ".tsx",
-                          ""
-                        )}`}
+                        href={`/${demoVariant}/${
+                          node.dir.title
+                        }/${fil.navn.replace(".tsx", "")}`}
                       />
                     </HStack>
                   </HStack>

diff --git a/aksel.nav.no/website/public/robots.txt b/aksel.nav.no/website/public/robots.txt
@@ -17,6 +17,7 @@ Disallow: /*_ssgManifest.js$
 Disallow: /*.js$
 
 Disallow: /eksempler
+Disallow: /templates
 Disallow: /admin
 
 Sitemap: https://aksel.nav.no/sitemap.xml
diff --git a/aksel.nav.no/website/sanity/schema/documents/komponenter/kode-eksempler.tsx b/aksel.nav.no/website/sanity/schema/documents/komponenter/kode-eksempler.tsx
@@ -46,6 +46,7 @@ export const KodeEksempelDoc = defineType({
           name: "fil",
           type: "object",
           fields: [
+            { title: "Title", name: "title", type: "string" },
             { title: "Filnavn", name: "navn", type: "string" },
             { title: "Innhold", name: "innhold", type: "string" },
             { title: "Beskrivelse", name: "description", type: "text" },

diff --git a/aksel.nav.no/website/scripts/update-examples/__tests__/get-directories.test.ts b/aksel.nav.no/website/scripts/update-examples/__tests__/get-directories.test.ts
@@ -8,7 +8,7 @@ describe("Testing getDirectories function", () => {
   });
 
   test("getDirectories should list directories in /pages/templates", () => {
-    const folders = getDirectories("eksempler");
+    const folders = getDirectories("templates");
 
     expect(folders.length).toBeGreaterThan(0);
   });

diff --git a/aksel.nav.no/website/scripts/update-examples/parts/parse-code-files.ts b/aksel.nav.no/website/scripts/update-examples/parts/parse-code-files.ts
@@ -34,7 +34,8 @@ export function parseCodeFiles(
 
     return {
       innhold: code,
-      navn: args?.title ?? file.replace(".tsx", ""),
+      title: args?.title ?? file.replace(".tsx", ""),
+      navn: file.replace(".tsx", ""),
       description: args?.desc,
       index: args?.index ?? 1,
     };

diff --git a/aksel.nav.no/website/scripts/update-examples/types.ts b/aksel.nav.no/website/scripts/update-examples/types.ts
@@ -1,5 +1,6 @@
 export type FileArrayT = {
   innhold: string;
+  title: string;
   navn: string;
   index: number;
   description?: string;

diff --git a/aksel.nav.no/website/scripts/update-examples/update-sanity.ts b/aksel.nav.no/website/scripts/update-examples/update-sanity.ts
@@ -30,7 +30,10 @@ export async function updateSanity(
       _type: "kode_eksempler_fil",
       title: folder.path,
       variant: directory,
-      filer: parseCodeFiles(folder.path, directory),
+      filer: parseCodeFiles(folder.path, directory).map((x) => ({
+        ...x,
+        _key: x.navn.split(".")[0],
+      })),
       metadata: extractMetadata(folder.path, directory),
     };
 

diff --git a/aksel.nav.no/website/types/sanity-schema.ts b/aksel.nav.no/website/types/sanity-schema.ts
@@ -307,6 +307,7 @@ export type CodeExampleSchemaT = {
   title: string;
   variant: "eksempler" | "templates";
   filer: {
+    title: string;
     innhold: string;
     navn: string;
     index: number;