Referansesider: 🎨 aktivitetsplan main card

navikt · Oct 2, 2024 · 39f2cb8 · 39f2cb8
1 parent 4bf298f
commit 39f2cb8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 6 deletions.
diff --git a/examples/referansesider/src/components/Button.tsx b/examples/referansesider/src/components/Button.tsx
@@ -35,20 +35,32 @@ const ScButton = styled.button`
       background-color: ${tokens.BgAccentModeratePressed};
     }
   }
+
+  &[data-size="small"] {
+    min-height: fit-content;
+    padding-inline: 0.75rem;
+    > span {
+      font-size: 16px;
+      line-height: 24px;
+      display: block;
+    }
+  }
 `;
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: "primary" | "secondary";
+  size?: "default" | "small";
 };
 
 export const Button = ({
   children,
   variant = "primary",
+  size = "default",
   ...rest
 }: ButtonProps) => {
   return (
-    <ScButton {...rest} data-variant={variant}>
-      {children}
+    <ScButton {...rest} data-variant={variant} data-size={size}>
+      <span>{children}</span>
     </ScButton>
   );
 };
diff --git a/examples/referansesider/src/components/Page.tsx b/examples/referansesider/src/components/Page.tsx
@@ -19,7 +19,7 @@ export const Page = ({
       className={clsx(
         "flex flex-col px-2 w-full m-auto pb-20",
         "lg:px-0",
-        { [`lg:w-[72ch]`]: width === "medium" },
+        { [`lg:w-[874px]`]: width === "medium" },
         { [`lg:w-[921px]`]: width === "large" },
         { [`lg:w-[1872px]`]: width === "xlarge" },
         { ["min-h-screen"]: footer !== "none" },

diff --git a/examples/referansesider/src/routes/aktivitetsplan.tsx b/examples/referansesider/src/routes/aktivitetsplan.tsx
@@ -1,6 +1,9 @@
 import { ReactNode, createFileRoute } from "@tanstack/react-router";
+import clsx from "clsx";
 import styled from "styled-components";
 import * as tokens from "@navikt/ds-tokens/dist/darkside/tokens";
+import SykepengerIcon from "../assets/SykepengerIcon";
+import { Button } from "../components/Button";
 import { Dekoratoren } from "../components/Dekoratoren";
 import { Page } from "../components/Page";
 import { Tag } from "../components/Tag";
@@ -69,18 +72,62 @@ let ActivityCard;
   };
 }
 
+let BlueDotHeader;
+{
+  const ScBlueDot = styled.div`
+    background-color: ${tokens.Accent900};
+  `;
+
+  BlueDotHeader = ({
+    children,
+    dot,
+    level = 2,
+  }: {
+    children: string;
+    level?: 2 | 3;
+    dot?: boolean;
+  }) => {
+    const Header: keyof JSX.IntrinsicElements = `h${level}`;
+    return (
+      <div className="flex items-center">
+        {dot && <ScBlueDot className="w-[10px] h-[10px] mr-1 rounded-full" />}
+        <Header
+          className={clsx("font-semibold", {
+            "text-2xl": level === 2,
+          })}
+        >
+          {children}
+        </Header>
+      </div>
+    );
+  };
+}
+
 const AktivitetsplanPage = () => {
   return (
     <Dekoratoren>
       <Page options={{ width: "medium", footer: "none" }}>
         <Header1>Aktivitetsplan</Header1>
-        <div className="p-2 border border-black rounded-xl">card</div>
+        <div className="p-2 border border-black rounded-xl flex">
+          <SykepengerIcon className="w-40 relative translate-x-5 translate-y-3" />
+          <div className="flex flex-col gap-2 justify-between my-2">
+            <BlueDotHeader dot level={2}>
+              Mitt mål
+            </BlueDotHeader>
+            <p>jeg vil bli sjørøver</p>
+            <Button variant="secondary" size="small">
+              Endre målet
+            </Button>
+          </div>
+        </div>
       </Page>
       <Page options={{ width: "xlarge" }}>
         <div className="flex gap-5 justify-center">
           <ActivityColumn title="Forslag">
             <ActivityCard title="Servitør">
-              <div>test</div>
+              <BlueDotHeader dot level={3}>
+                Servitør (ikke svart)
+              </BlueDotHeader>
               <Tag $variant="success">Venter på å bli kontaktet</Tag>
             </ActivityCard>
             <ActivityCard title="Servitør">
@@ -115,7 +162,7 @@ const AktivitetsplanPage = () => {
           <ActivityColumn title="Forslag">
             <ActivityCard title="Servitør">
               <div>test</div>
-              <Tag $variant="info">Avtalt med NAV</Tag>
+              <Tag $variant="info-strong">Avtalt med NAV</Tag>
               <Tag $variant="neutral-strong">Slettet</Tag>
             </ActivityCard>
           </ActivityColumn>