diff --git a/components/Tag.module.css b/components/Tag.module.css index 9766112..fae8c3e 100644 --- a/components/Tag.module.css +++ b/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); } \ No newline at end of file diff --git a/components/openapi/EnumView.module.css b/components/openapi/EnumView.module.css index c935e14..b451344 100644 --- a/components/openapi/EnumView.module.css +++ b/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; +} \ No newline at end of file diff --git a/components/openapi/EnumView.tsx b/components/openapi/EnumView.tsx index b17c2ae..9228743 100644 --- a/components/openapi/EnumView.tsx +++ b/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 = ({ values }) => { +export const EnumView: React.FC = ({ values, defaultVisible = 3 }) => { + const [visibleItems, setVisibleItems] = useState(defaultVisible) + + const showable = values.slice(0, visibleItems) + + const toggleVisibleItems = () => { + setVisibleItems((prev) => + prev === defaultVisible ? values.length : defaultVisible, + ) + } + return ( <> En av: ) diff --git a/components/openapi/OpenApiView.module.css b/components/openapi/OpenApiView.module.css index b1ecb2b..501b59b 100644 --- a/components/openapi/OpenApiView.module.css +++ b/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); } diff --git a/components/openapi/OpenApiView.tsx b/components/openapi/OpenApiView.tsx index cc33879..cf690d0 100644 --- a/components/openapi/OpenApiView.tsx +++ b/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 = () => { {currentDoc.info.title} + {currentDoc.info.description && ( + + {currentDoc.info.description} + + )} {operations.map((operation) => { return })} diff --git a/lib/openapi/context.tsx b/lib/openapi/context.tsx index a5f65ff..368e8ff 100644 --- a/lib/openapi/context.tsx +++ b/lib/openapi/context.tsx @@ -30,7 +30,7 @@ type Props = { export const OpenApiSpecProvider: React.FC = ({ children, - defaultDoc = "Utsjekk API", + defaultDoc = "Utsjekk API (wip)", }) => { const [doc, setDoc] = useState(getDoc(defaultDoc)) diff --git a/lib/openapi/openapi_new.yml b/lib/openapi/openapi_new.yml index 06d4249..f7df28f 100644 --- a/lib/openapi/openapi_new.yml +++ b/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 diff --git a/pages/globals.css b/pages/globals.css index c9fd2ed..6dc5127 100644 --- a/pages/globals.css +++ b/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); } -} \ No newline at end of file +}