🎨 Updated cards

navikt · Dec 13, 2023 · 4f23ea9 · 4f23ea9
1 parent d1315fb
commit 4f23ea9
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
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
@@ -1,7 +1,12 @@
 import cl from "clsx";
 import Link from "next/link";
 import { CSSProperties } from "react";
-import { BodyLong, Heading, Tag, VStack } from "@navikt/ds-react";
+import {
+  ChevronRightIcon,
+  FileFillIcon,
+  TagFillIcon,
+} from "@navikt/aksel-icons";
+import { BodyLong, Detail, Heading, VStack } from "@navikt/ds-react";
 import { useFormatedDate } from "@/hooks/useFormatedDate";
 import { GpArticleT } from "@/layout/god-praksis-page/types";
 import styles from "./articles.module.css";
@@ -45,7 +50,7 @@ export const ArticleCard = ({
     <Link
       href={`/${slug}`}
       className={cl(
-        "flex-shrink w-full focus:outline-none focus-visible:shadow-focus overflow-hidden text-ellipsis hover:shadow-large px-10 pt-6 pb-8 rounded-xlarge bg-surface-default shadow-small",
+        "flex-shrink w-full focus:outline-none focus-visible:shadow-focus overflow-hidden text-ellipsis hover:shadow-large p-5 rounded-large bg-surface-default shadow-small",
         {
           [styles.articleGrid]: group === "initial",
           [styles.articleGridLazy]: group === "lazy",
@@ -55,28 +60,37 @@ export const ArticleCard = ({
     >
       <VStack justify="space-between" className="min-h-full relative">
         <div>
-          <span className="flex gap-2 mb-2">
-            <Tag variant="alt3-moderate" size="small">
-              {undertema}
-            </Tag>
-            <Tag variant="neutral-moderate" size="small">
-              {innholdstype}
-            </Tag>
-          </span>
           <Heading
-            size="medium"
+            size="small"
             level="2"
-            spacing
             className="text-aksel-heading underline"
           >
             {heading}
           </Heading>
-
           {/* TODO: Can do this serverside in initialProps (saves data sent to user) */}
-          {ingress && <BodyLong>{trunc(ingress, 100)}</BodyLong>}
-        </div>
+          {date && (
+            <Detail textColor="subtle" className="mt-1">
+              {date}
+            </Detail>
+          )}
 
-        {date && <div className="pt-2">{date}</div>}
+          {ingress && (
+            <BodyLong className="mt-2">{trunc(ingress, 100)}</BodyLong>
+          )}
+        </div>
+        <div className="flex gap-2 justify-between items-center mt-6">
+          <div className="flex gap-3 flex-wrap items-center font-semibold">
+            <span className="text-deepblue-500 flex gap-05 items-center">
+              <TagFillIcon aria-hidden />
+              <span>{undertema}</span>
+            </span>
+            <span className="text-teal-700 flex gap-05 items-center">
+              <FileFillIcon aria-hidden />
+              <span>{innholdstype}</span>
+            </span>
+          </div>
+          <ChevronRightIcon aria-hidden className="flex-shrink-0" />
+        </div>
       </VStack>
     </Link>
   );

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
@@ -25,7 +25,7 @@ function ArticleGrid({ data, initialData, loaded }: ArticleGridT) {
   return (
     <div>
       {loaded && (
-        <div className="grid gap-5">
+        <div className="grid gap-6">
           <div className={cl("pt-5", styles.initialGrid, styles.articleGrid)}>
             {initialData.map((article, idx) => (
               <ArticleCard