Minimer enum-visning

components/Tag.module.css

@@ -15,24 +15,15 @@
 
 .tag.warning {
   border: 1px solid var(--a-border-warning);
-  background: light-dark(
-      var(--a-orange-50),
-      var(--a-orange-900)
-  );
+  background: var(--warning-background);
 }
 
 .tag.info {
   border: 1px solid var(--a-border-info);
-  background: light-dark(
-      var(--a-lightblue-50),
-      var(--a-lightblue-900)
-  );
+  background: var(--info-background);
 }
 
 .tag.error {
   border: 1px solid var(--a-border-danger);
-  background: light-dark(
-      var(--a-red-50),
-      var(--a-red-900)
-  );
+  background: var(--danger-background);
 }

components/openapi/EnumView.module.css

@@ -6,9 +6,14 @@
   background: var(--example-background);
 }
 
-.enumValue {
-}
-
 .pre {
   font-size: var(--a-font-size-small);
 }
+
+.expandButton {
+  display: flex;
+  gap: var(--a-spacing-1);
+  align-items: center;
+  font-size: var(--a-font-size-small);
+  width: max-content;
+}

components/openapi/EnumView.tsx

@@ -1,20 +1,50 @@
 import { BodyShort } from "@navikt/ds-react"
+import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons"
+import { useState } from "react"
+
 import styles from "./EnumView.module.css"
 
 type Props = {
   values: string[]
+  defaultVisible?: number
 }
 
-export const EnumView: React.FC<Props> = ({ values }) => {
+export const EnumView: React.FC<Props> = ({ values, defaultVisible = 3 }) => {
+  const [visibleItems, setVisibleItems] = useState(defaultVisible)
+
+  const showable = values.slice(0, visibleItems)
+
+  const toggleVisibleItems = () => {
+    setVisibleItems((prev) =>
+      prev === defaultVisible ? values.length : defaultVisible,
+    )
+  }
+
   return (
     <>
       <BodyShort>En av:</BodyShort>
       <ul className={styles.enumList}>
-        {values.map((it) => (
-          <li key={it} className={styles.enumValue}>
+        {defaultVisible !== values.length && (
+          <button className={styles.expandButton} onClick={toggleVisibleItems}>
+            {visibleItems === defaultVisible ? (
+              <>
+                Se alle <ChevronDownIcon />
+              </>
+            ) : (
+              <>
+                Se færre <ChevronUpIcon />
+              </>
+            )}
+          </button>
+        )}
+        {showable.map((it) => (
+          <li key={it}>
             <pre className={styles.pre}>{it}</pre>
           </li>
         ))}
+        {defaultVisible !== values.length &&
+          visibleItems === defaultVisible &&
+          "..."}
       </ul>
     </>
   )

components/openapi/OpenApiView.module.css

@@ -10,6 +10,10 @@
   margin-bottom: var(--a-spacing-12);
 }
 
+.description {
+  margin-bottom: var(--a-spacing-12);
+}
+
 .document {
   padding: var(--a-spacing-4) var(--a-spacing-12);
 }

components/openapi/OpenApiView.tsx

@@ -1,6 +1,6 @@
 import { useContext, useMemo } from "react"
 import { OpenAPIV3_1 } from "openapi-types"
-import { Heading } from "@navikt/ds-react"
+import { BodyLong, Heading } from "@navikt/ds-react"
 
 import { OpenApiSpecContext } from "@/lib/openapi/context"
 import { Nav } from "@/components/openapi/Nav"
@@ -46,6 +46,11 @@ export const OpenApiView: React.FC = () => {
         <Heading className={styles.title} level="1" size="large">
           {currentDoc.info.title}
         </Heading>
+        {currentDoc.info.description && (
+          <BodyLong className={styles.description}>
+            {currentDoc.info.description}
+          </BodyLong>
+        )}
         {operations.map((operation) => {
           return <OperationView key={operation.operationId} {...operation} />
         })}

lib/openapi/context.tsx

@@ -30,7 +30,7 @@ type Props = {
 
 export const OpenApiSpecProvider: React.FC<Props> = ({
   children,
-  defaultDoc = "Utsjekk API",
+  defaultDoc = "Utsjekk API (wip)",
 }) => {
   const [doc, setDoc] = useState<OpenApiDoc>(getDoc(defaultDoc))
 

lib/openapi/openapi_new.yml

@@ -1,7 +1,7 @@
 openapi: 3.1.1
 info:
-  version: "1"
-  title: Utsjekk API (WIP)
+  version: "2"
+  title: Utsjekk API (wip)
   description: API for iverksetting av utbetalinger mot Oppdragssystemet
 servers:
   - url: https://utsjekk.intern.nav.no

pages/globals.css

@@ -3,12 +3,28 @@
 :root {
   color-scheme: light dark;
   --example-background: light-dark(
-      var(--a-surface-neutral-subtle),
-      var(--a-surface-neutral-active)
+    var(--a-surface-neutral-subtle),
+    var(--a-surface-neutral-active)
+  );
+
+  /* Colors */
+  --warning-background: light-dark(
+      var(--a-orange-50),
+      var(--a-orange-900)
+  );
+  --danger-background: light-dark(
+      var(--a-red-50),
+      var(--a-red-800)
+  );
+  --info-background: light-dark(
+      var(--a-lightblue-50),
+      var(--a-lightblue-900)
   );
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -22,21 +38,35 @@ body {
   background: var(--a-bg-default);
 }
 
-img, picture, video, canvas, svg {
+img,
+picture,
+video,
+canvas,
+svg {
   display: block;
   max-width: 100%;
 }
 
-input, button, textarea, select {
+input,
+button,
+textarea,
+select {
   font: inherit;
 }
 
-p, h1, h2, h3, h4, h5, h6 {
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   max-width: 75ch;
   overflow-wrap: break-word;
 }
 
-#root, #__next {
+#root,
+#__next {
   isolation: isolate;
 }
 
@@ -51,4 +81,4 @@ p, h1, h2, h3, h4, h5, h6 {
     --a-border-subtle: var(--a-gray-800);
     --a-surface-neutral-subtle-hover: var(--a-bg-subtle);
   }
-}
+}