Merge next -> next

navikt · Dec 5, 2023 · ad5b806 · ad5b806
2 parents 2f79c55 + 0deb458
commit ad5b806
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleBento.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleBento.tsx
@@ -27,15 +27,22 @@ function ArticleBento({ name, results }) {
               content={results[0].ingress}
               innholdstype={results[0].innholdstype}
               undertema={results[0].undertema}
+              slug={results[0].slug}
             />
 
             <ArticleCard
               title={results[1].heading}
               content={results[1].ingress}
+              innholdstype={results[1].innholdstype}
+              undertema={results[1].undertema}
+              slug={results[1].slug}
             />
             <ArticleCard
               title={results[2].heading}
               content={results[2].ingress}
+              innholdstype={results[2].innholdstype}
+              undertema={results[2].undertema}
+              slug={results[2].slug}
             />
           </HGrid>
         </Box>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleCard.tsx
@@ -10,12 +10,14 @@ const trunc = (text, num_chars) => {
 export const ArticleCard = ({
   title,
   content,
+  slug,
   main = false,
   innholdstype,
   undertema,
 }: {
   title: string;
   content: string;
+  slug: any; // TODO: types
   main?: boolean;
   innholdstype?: string;
   undertema?: string;
@@ -37,24 +39,35 @@ export const ArticleCard = ({
       </style>
       <Box
         as="a"
-        href="#"
+        href={`./${slug.current}`}
         className={clsx("gp-article-card", main && "gp-article-card-main")}
         paddingBlock="10"
         paddingInline="10"
         borderRadius="xlarge"
         background="surface-default"
         shadow="xsmall"
       >
-        <VStack justify="space-between">
-          <Box>
-            <Heading size={main ? "xlarge" : "medium"}>{title}</Heading>
-            <BodyLong>
+        <VStack justify="space-between" className="min-h-full">
+          <Box paddingBlock="0 5">
+            <Heading className="inner-shiny" size={main ? "xlarge" : "medium"}>
+              <span className="shiny">{title}</span>
+            </Heading>
+
+            <BodyLong size={main ? "large" : "small"}>
               {main ? trunc(content, 770) : trunc(content, 100)}
             </BodyLong>
           </Box>
           <HStack gap="2">
-            {undertema && <Tag variant="success">{undertema}</Tag>}
-            {innholdstype && <Tag variant="error">{innholdstype}</Tag>}
+            {undertema && (
+              <Tag variant="success" size={main ? "medium" : "xsmall"}>
+                {undertema}
+              </Tag>
+            )}
+            {innholdstype && (
+              <Tag variant="error" size={main ? "medium" : "xsmall"}>
+                {innholdstype}
+              </Tag>
+            )}
           </HStack>
         </VStack>
       </Box>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleGrid.tsx
@@ -35,6 +35,9 @@ function ArticleGrid({ name, results }) {
                   key={idx}
                   title={article.heading}
                   content={article.ingress}
+                  innholdstype={article.innholdstype}
+                  undertema={article.undertema}
+                  slug={article.slug}
                 />
               ))}
           </HGrid>

diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/ArticleList.tsx
@@ -5,9 +5,7 @@ function ArticleList({ results }) {
   if (!results || results.length === 0) {
     return null;
   }
-  console.log("### ", { results });
 
-  // TODO: filter results into two lists (popular and latest)
   const popular = results.slice(0, 3);
   const latest = results.slice(3);
 

diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
@@ -20,9 +20,9 @@ const query = groq`
     heading,
     ingress ,
     "undertema": undertema[]->title,
-    "innholdstype": innholdstype->title
+    "innholdstype": innholdstype->title,
+    slug
   }
-}
 `;
 
 export const getServerSideProps: GetServerSideProps = async (