merge next -> next

navikt · Dec 5, 2023 · bdcf198 · bdcf198
2 parents 172afea + 8924fe4
commit bdcf198
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 23 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
@@ -2,7 +2,7 @@ import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Box, Button, HGrid, HStack, Heading } from "@navikt/ds-react";
 import { ArticleCard } from "./ArticleCard";
 
-function ArticleBento({ name, results }) {
+function ArticleBento({ name, articles }) {
   return (
     <>
       <Box>
@@ -23,26 +23,26 @@ function ArticleBento({ name, results }) {
           <HGrid gap="6" columns="1fr 1fr 1fr" className="aksel-bento">
             <ArticleCard
               main
-              title={results[0].heading}
-              content={results[0].ingress}
-              innholdstype={results[0].innholdstype}
-              undertema={results[0].undertema}
-              slug={results[0].slug}
+              title={articles[0].heading}
+              content={articles[0].ingress}
+              innholdstype={articles[0].innholdstype}
+              undertema={articles[0].undertema}
+              slug={articles[0].slug}
             />
 
             <ArticleCard
-              title={results[1].heading}
-              content={results[1].ingress}
-              innholdstype={results[1].innholdstype}
-              undertema={results[1].undertema}
-              slug={results[1].slug}
+              title={articles[1].heading}
+              content={articles[1].ingress}
+              innholdstype={articles[1].innholdstype}
+              undertema={articles[1].undertema}
+              slug={articles[1].slug}
             />
             <ArticleCard
-              title={results[2].heading}
-              content={results[2].ingress}
-              innholdstype={results[2].innholdstype}
-              undertema={results[2].undertema}
-              slug={results[2].slug}
+              title={articles[2].heading}
+              content={articles[2].ingress}
+              innholdstype={articles[2].innholdstype}
+              undertema={articles[2].undertema}
+              slug={articles[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
@@ -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,13 +15,15 @@ export const ArticleCard = ({
   main = false,
   innholdstype,
   undertema,
+  isNew = false,
 }: {
   title: string;
   content: string;
   slug: any; // TODO: types
   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
@@ -2,7 +2,7 @@ import { ArrowRightIcon } from "@navikt/aksel-icons";
 import { Box, Button, HGrid, HStack, Heading } from "@navikt/ds-react";
 import { ArticleCard } from "./ArticleCard";
 
-function ArticleGrid({ name, results }) {
+function ArticleGrid({ name, articles }) {
   return (
     <>
       <style>
@@ -29,15 +29,16 @@ function ArticleGrid({ name, results }) {
         </HStack>
         <Box paddingBlock="5 0">
           <HGrid gap="6" columns={3}>
-            {results &&
-              results.map((article, idx) => (
+            {articles &&
+              articles.map((article, idx) => (
                 <ArticleCard
                   key={idx}
                   title={article.heading}
                   content={article.ingress}
                   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
@@ -1,18 +1,22 @@
 import ArticleBento from "./ArticleBento";
 import ArticleGrid from "./ArticleGrid";
 
+const markRandomAsNew = (articles) => {
+  return [...articles].map((a) => ({ ...a, isNew: Math.random() > 0.5 }));
+};
+
 function ArticleList({ articles }) {
   if (!articles || articles.length === 0) {
     return null;
   }
 
   const popular = articles.slice(0, 3);
-  const latest = articles.slice(3);
+  const latest = markRandomAsNew(articles.slice(3));
 
   return (
     <>
-      <ArticleBento name="Populære" results={popular} />
-      <ArticleGrid name="Siste" results={latest} />
+      <ArticleBento name="Populære" articles={popular} />
+      <ArticleGrid name="Siste" articles={latest} />
     </>
   );
 }

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
@@ -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>
+    </>
+  );
+};