From 2e198218fc3ee1f60b03dea9e924a904a82df72e Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Tue, 5 Dec 2023 18:41:53 +0100
Subject: [PATCH] :construction: new sticker

---
 .../god-praksis-page/articles/ArticleCard.tsx |  6 ++-
 .../god-praksis-page/articles/ArticleGrid.tsx |  1 +
 .../god-praksis-page/articles/ArticleList.tsx |  6 ++-
 .../god-praksis-page/articles/Sticker.tsx     | 49 +++++++++++++++++++
 aksel.nav.no/website/pages/gp/index.tsx       |  1 +
 5 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 aksel.nav.no/website/components/layout/god-praksis-page/articles/Sticker.tsx

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
index 43b896cd46..2f1a62343c 100644
--- 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,5 +1,6 @@
 import clsx from "clsx";
 import { BodyLong, Box, HStack, Heading, Tag, VStack } from "@navikt/ds-react";
+import { Sticker } from "./Sticker";
 
 const trunc = (text, num_chars) => {
   return `${text.substring(0, num_chars)}${
@@ -14,6 +15,7 @@ export const ArticleCard = ({
   main = false,
   innholdstype,
   undertema,
+  isNew = false,
 }: {
   title: string;
   content: string;
@@ -21,6 +23,7 @@ export const ArticleCard = ({
   main?: boolean;
   innholdstype?: string;
   undertema?: string;
+  isNew?: boolean;
 }) => {
   return (
     <>
@@ -47,7 +50,7 @@ export const ArticleCard = ({
         background="surface-default"
         shadow="xsmall"
       >
-        <VStack justify="space-between" className="min-h-full">
+        <VStack justify="space-between" className="min-h-full relative">
           <Box paddingBlock="0 5">
             <Heading className="inner-shiny" size={main ? "xlarge" : "medium"}>
               <span className="shiny">{title}</span>
@@ -69,6 +72,7 @@ export const ArticleCard = ({
               </Tag>
             )}
           </HStack>
+          {isNew && <Sticker large={main} />}
         </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
index 233ab4d170..55951317ed 100644
--- 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
@@ -38,6 +38,7 @@ function ArticleGrid({ name, results }) {
                   innholdstype={article.innholdstype}
                   undertema={article.undertema}
                   slug={article.slug}
+                  isNew={article.isNew}
                 />
               ))}
           </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
index cc563f4621..e59e0e852c 100644
--- 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
@@ -1,13 +1,17 @@
 import ArticleBento from "./ArticleBento";
 import ArticleGrid from "./ArticleGrid";
 
+const markRandomAsNew = (articles) => {
+  return [...articles].map((a) => ({ ...a, isNew: Math.random() > 0.5 }));
+};
+
 function ArticleList({ results }) {
   if (!results || results.length === 0) {
     return null;
   }
 
   const popular = results.slice(0, 3);
-  const latest = results.slice(3);
+  const latest = markRandomAsNew(results.slice(3));
 
   return (
     <>
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/articles/Sticker.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/articles/Sticker.tsx
new file mode 100644
index 0000000000..da054988e8
--- /dev/null
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/articles/Sticker.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import dynamic from "next/dynamic";
+
+export const Sticker = dynamic(() => Promise.resolve(_Sticker), { ssr: false });
+
+const _Sticker = ({ text = "NEW!", large = false }) => {
+  return (
+    <>
+      <style>
+        {`
+    .sticker {
+        height: 3rem;
+        width: 3rem;
+        aspect-ratio: 1;
+        display: inline-block;
+        clip-path: path('M24 0L29.2178 4.52694L36 3.21539L38.2553 9.74473L44.7846 12L43.4731 18.7822L48 24L43.4731 29.2178L44.7846 36L38.2553 38.2553L36 44.7846L29.2178 43.4731L24 48L18.7822 43.4731L12 44.7846L9.74473 38.2553L3.21539 36L4.52694 29.2178L0 24L4.52694 18.7822L3.21539 12L9.74473 9.74473L12 3.21539L18.7822 4.52694L24 0Z');
+        background: linear-gradient(to top right, var(--a-deepblue-300), var(--a-purple-200));
+        position: absolute;
+        right: -1rem;
+        bottom: -1rem;
+        transform: scale(1.2);
+    }
+    .new {
+      color: #fff;
+      font-size: calc(0.9rem);
+      font-weight: bold;
+      position: absolute;
+      left: 0.5rem;
+      top: 0.9rem;
+      transform: rotate(-15deg);
+    }
+
+    .sticker--large {
+        bottom: calc(1rem);
+        right: calc(1rem);
+        transform: scale(2);
+    }
+`}
+      </style>
+      <div
+        className={clsx("sticker", {
+          "sticker--large": large,
+        })}
+      >
+        <span className="new">{text}</span>
+      </div>
+    </>
+  );
+};
diff --git a/aksel.nav.no/website/pages/gp/index.tsx b/aksel.nav.no/website/pages/gp/index.tsx
index 802c3c1e59..edbaa2c8b5 100644
--- a/aksel.nav.no/website/pages/gp/index.tsx
+++ b/aksel.nav.no/website/pages/gp/index.tsx
@@ -23,6 +23,7 @@ const query = groq`
     "innholdstype": innholdstype->title,
     slug
   }
+  }
 `;
 
 export const getServerSideProps: GetServerSideProps = async (