🎨 dynamiske chips

navikt · Dec 5, 2023 · 172afea · 172afea
1 parent b1aab50
commit 172afea
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/GodPraksisPage.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/GodPraksisPage.tsx
@@ -27,10 +27,18 @@ function GodPraksisPage({ articles, heroNav, tema }: GodPraksisPageProps) {
               <Hero heroNav={heroNav} tema={tema}>
                 {tema?.description}
               </Hero>
-              <ChipNav
-                options={["WCAG", "Testing", "Kompetanse", "Retningslinjer"]}
-                type="innholdstype"
-              />
+              <VStack gap="2">
+                {tema?.undertema?.length > 0 && (
+                  <ChipNav
+                    options={tema.undertema.map((undertema) => undertema.title)}
+                    type="undertema"
+                  />
+                )}
+                <ChipNav
+                  options={["WCAG", "Testing", "Kompetanse", "Retningslinjer"]}
+                  type="innholdstype"
+                />
+              </VStack>
             </VStack>
             <ArticleList articles={articles} />
           </VStack>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/chips/ChipNav.tsx
@@ -3,6 +3,7 @@ import omit from "lodash/omit";
 import { useRouter } from "next/router";
 import { useId } from "react";
 import { Chips, HGrid, Label } from "@navikt/ds-react";
+import { capitalize } from "@/utils";
 import styles from "./Chips.module.css";
 import ScrollFade from "./ScrollFade";
 
@@ -29,7 +30,7 @@ function ChipNav({ options, type }: ChipsNavProps) {
   return (
     <HGrid gap="2" columns={{ sm: 1, md: "auto 1fr" }} align="center">
       <Label as="p" className="text-aksel-heading">
-        Innholdstyper:
+        {`${capitalize(type)}:`}
       </Label>
 
       <div className="relative overflow-hidden">

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/Hero.tsx
@@ -5,13 +5,12 @@ import { GpTemaT, HeroNavT } from "../types";
 
 type HeroProps = {
   children?: string;
-  /* TODO: Fikser tema-type */
+  /* TODO: Fikse tema-type */
   tema?: GpTemaT["tema"];
 } & HeroNavT;
 
 function Hero({ children, heroNav, tema }: HeroProps) {
   const router = useRouter();
-  console.log(tema);
 
   return (
     <Box

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/types.ts b/aksel.nav.no/website/components/layout/god-praksis-page/types.ts
@@ -20,5 +20,6 @@ export type GpTemaT = {
     title: string;
     slug: string;
     description?: string;
+    undertema: { title: string; description: string }[];
   };
 };
diff --git a/aksel.nav.no/website/pages/gp/[slug].tsx b/aksel.nav.no/website/pages/gp/[slug].tsx
@@ -14,7 +14,11 @@ const query = groq`
   ${heroNavQuery},
   "tema": *[_type == "gp.tema" && slug.current == $slug][0]{
     ...,
-    "slug": slug.current
+    "slug": slug.current,
+    "undertema": *[_type == "gp.tema.undertema" && tema->slug.current == $slug && count(*[_type == "aksel_artikkel" && references(^._id)]) > 0]{
+      title,
+      description
+    }
   }
 }
 `;