Justerer farger og avstander

navikt · Nov 29, 2024 · 40b4566 · 40b4566
1 parent 1c9783d
commit 40b4566
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 61 deletions.
diff --git a/components/openapi/OperationView.module.css b/components/openapi/OperationView.module.css
@@ -1,10 +1,13 @@
 .operation {
-  margin-bottom: var(--a-spacing-16);
+  display: flex;
+  flex-direction: column;
+  gap: var(--a-spacing-8);
 }
 
-.subTitle {
-  font-weight: 600;
-  margin-bottom: var(--a-spacing-6);
+.scrollAnchor {
+  display: block;
+  position: relative;
+  top: calc(var(--a-spacing-16) * -1);
 }
 
 .path {
@@ -18,10 +21,6 @@
   margin-right: var(--a-spacing-4);
 }
 
-.description {
-  margin-bottom: var(--a-spacing-6);
-}
-
 .operationAnchor {
   margin-left: var(--a-spacing-2);
 }
@@ -39,8 +38,7 @@
   opacity: 1;
 }
 
-.scrollAnchor {
-  display: block;
-  position: relative;
-  top: calc(var(--a-spacing-16) * -1);
+.separator {
+  margin: var(--a-spacing-8) 0 var(--a-spacing-16) 0;
+  border-color: var(--a-border-subtle);
 }
diff --git a/components/openapi/OperationView.tsx b/components/openapi/OperationView.tsx
@@ -43,27 +43,28 @@ export const OperationView: React.FC<Props> = ({
 }) => {
   return (
     <div className={styles.operation} key={`${path}-${method}`}>
-      <Heading className={styles.subTitle} level="2" size="medium">
+      <Heading level="2" size="medium">
         {summary}
         <a id={id} className={styles.scrollAnchor} />
       </Heading>
-      <div className={styles.path}>
-        <Tag
-          className={styles.method}
-          size="medium"
-          variant={getTagType(method)}
-        >
-          {method.toUpperCase()}
-        </Tag>
-        <pre>{path}</pre>
-        <a className={styles.operationAnchor} href={`#${id}`} />
+      <div>
+        <div className={styles.path}>
+          <Tag
+            className={styles.method}
+            size="medium"
+            variant={getTagType(method)}
+          >
+            {method.toUpperCase()}
+          </Tag>
+          <pre>{path}</pre>
+          <a className={styles.operationAnchor} href={`#${id}`} />
+        </div>
+        {description && <BodyLong>{description}</BodyLong>}
       </div>
-      {description && (
-        <BodyLong className={styles.description}>{description}</BodyLong>
-      )}
       {parameters && <ParametersView parameters={parameters} />}
       {requestBody && <RequestBodyView requestBody={requestBody} />}
       {responses && <ResponsesView responses={responses} />}
+      <hr className={styles.separator} />
     </div>
   )
 }
diff --git a/components/openapi/ParametersView.module.css b/components/openapi/ParametersView.module.css
@@ -1,4 +1,3 @@
 .title {
-  margin-top: var(--a-spacing-8);
   margin-bottom: var(--a-spacing-3);
 }
diff --git a/components/openapi/ParametersView.tsx b/components/openapi/ParametersView.tsx
@@ -27,7 +27,7 @@ export const ParametersView: React.FC<Props> = ({ parameters }) => {
     .filter(isParameterObject)
 
   return (
-    <>
+    <div>
       <Heading className={styles.title} level="3" size="small">
         Path-parametre
       </Heading>
@@ -63,6 +63,6 @@ export const ParametersView: React.FC<Props> = ({ parameters }) => {
           )
         })}
       </ul>
-    </>
+    </div>
   )
 }
diff --git a/components/openapi/PropertyView.module.css b/components/openapi/PropertyView.module.css
@@ -2,7 +2,7 @@
 .listItem {
   --left-spacing: var(--a-spacing-8);
   --vertical-spacing: var(--a-spacing-2);
-  --line-color: var(--a-border-default);
+  --line-color: var(--a-border-subtle);
   display: flex;
   gap: var(--a-spacing-4);
   position: relative;

diff --git a/components/openapi/RequestBodyView.module.css b/components/openapi/RequestBodyView.module.css
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--a-spacing-3);
-  margin-top: var(--a-spacing-8);
 }
 
 .heading {
@@ -19,4 +18,9 @@
 
 .mediaType {
   font-size: var(--a-font-size-small);
+}
+
+.tabs {
+  margin-top: 0;
+  font-size: var(--a-font-size-small);
 }
diff --git a/components/openapi/RequestBodyView.tsx b/components/openapi/RequestBodyView.tsx
@@ -13,6 +13,7 @@ import { JsonView } from "@/components/openapi/JsonView"
 import ReferenceObject = OpenAPIV3_1.ReferenceObject
 import RequestBodyObject = OpenAPIV3_1.RequestBodyObject
 import SchemaObject = OpenAPIV3_1.SchemaObject
+import { Tabs } from "nextra/components"
 
 type Example = {
   [name: string]: {
@@ -41,7 +42,7 @@ export const RequestBodyView: React.FC<Props> = ({ requestBody }) => {
           ? resolveRef(mediaTypeObject.schema.$ref, doc)
           : mediaTypeObject.schema
 
-        console.log(mediaTypeObject)
+        const examples = mediaTypeObject.examples ?? schema.examples
 
         return (
           <div className={styles.requestBody} key={mediaType}>
@@ -55,20 +56,21 @@ export const RequestBodyView: React.FC<Props> = ({ requestBody }) => {
               {required && <Required />}
             </div>
             {schema && <SchemaObjectView schema={schema} doc={doc} />}
-            {mediaTypeObject.examples && (
+            {examples && (
               <>
                 <Heading level="4" size="xsmall">
                   Eksempler
                 </Heading>
-                {Object.entries(mediaTypeObject.examples).map(
-                  ([name, content]) =>
-                    (content as Example).value && (
-                      <Fragment key={name}>
-                        {name}:
-                        <JsonView json={(content as Example).value} />
-                      </Fragment>
-                    ),
-                )}
+                <Tabs className={styles.tabs} items={Object.keys(examples)}>
+                  {Object.entries(examples).map(
+                    ([name, content]) =>
+                      (content as Example).value && (
+                        <Tabs.Tab key={name}>
+                          <JsonView json={(content as Example).value} />
+                        </Tabs.Tab>
+                      ),
+                  )}
+                </Tabs>
               </>
             )}
           </div>

diff --git a/components/openapi/ResponsesView.module.css b/components/openapi/ResponsesView.module.css
@@ -1,6 +1,5 @@
 .title {
   font-weight: var(--a-font-weight-bold);
-  margin-top: var(--a-spacing-8);
   margin-bottom: var(--a-spacing-4);
 }
 

diff --git a/components/openapi/ResponsesView.tsx b/components/openapi/ResponsesView.tsx
@@ -19,7 +19,7 @@ export const ResponsesView: React.FC<Props> = ({ responses }) => {
   const { currentDoc: doc } = useContext(OpenApiSpecContext)
 
   return (
-    <>
+    <div>
       <Heading className={styles.title} level="3" size="small">
         Respons
       </Heading>
@@ -39,6 +39,6 @@ export const ResponsesView: React.FC<Props> = ({ responses }) => {
           )
         })}
       </div>
-    </>
+    </div>
   )
 }
diff --git a/lib/openapi/openapi_new.yml b/lib/openapi/openapi_new.yml
@@ -32,21 +32,6 @@ paths:
           application/json:
             schema:
               "$ref": "#/components/schemas/UtbetalingApi"
-            examples:
-              Tiltakspenger:
-                value:
-                  sakId: "ASD123NLDQ23"
-                  behandlingId: "ADNLK123lDLJNWQ1"
-                  personident: "15507600333"
-                  vedtakstidspunkt: "2024-11-26T09:34:10.912Z"
-                  stønad: "ARBEIDSTRENING"
-                  beslutterId: "Z123456"
-                  saksbehandlerId: "A234567"
-                  perioder:
-                    - fom: "2024-10-01"
-                      tom: "2024-10-31"
-                      beløp: 1234
-                      betalendeEnhet: "1234"
         required: true
       responses:
         "201":
@@ -203,7 +188,7 @@ paths:
         content:
           application/json:
             schema:
-              "$ref": "#/components/schemas/UtbetalingApi"
+              "$ref": "#/components/schemas/SimuleringApi"
         required: true
       responses:
         "200":
@@ -325,6 +310,34 @@ components:
           type: array
           items:
             "$ref": "#/components/schemas/UtbetalingsperiodeApi"
+      examples:
+        Tiltakspenger:
+          value:
+            sakId: "ASD123NLDQ23"
+            behandlingId: "ADNLK123lDLJNWQ1"
+            personident: "15507600333"
+            vedtakstidspunkt: "2024-11-26T09:34:10.912Z"
+            stønad: "ARBEIDSTRENING"
+            beslutterId: "Z123456"
+            saksbehandlerId: "A234567"
+            perioder:
+              - fom: "2024-10-01"
+                tom: "2024-10-31"
+                beløp: 1024
+                betalendeEnhet: "1234"
+        Tilleggsstønader:
+          value:
+            sakId: "ASD123NLDQ23"
+            behandlingId: "ADNLK123lDLJNWQ1"
+            personident: "15507600333"
+            vedtakstidspunkt: "2024-11-26T09:34:10.912Z"
+            stønad: "TILSYN_BARN_ENSLIG_FORSØRGER"
+            beslutterId: "Z123456"
+            saksbehandlerId: "A234567"
+            perioder:
+              - fom: "2024-10-01"
+                tom: "2024-10-01"
+                beløp: 256
 
     UtbetalingsperiodeApi:
       type: object
@@ -450,6 +463,30 @@ components:
           type: array
           items:
             "$ref": "#/components/schemas/UtbetalingsperiodeApi"
+      examples:
+        Tiltakspenger:
+          value:
+            sakId: "ASD123NLDQ23"
+            behandlingId: "ADNLK123lDLJNWQ1"
+            personident: "15507600333"
+            stønad: "ARBEIDSTRENING"
+            saksbehandlerId: "A234567"
+            perioder:
+              - fom: "2024-10-01"
+                tom: "2024-10-31"
+                beløp: 1024
+                betalendeEnhet: "1234"
+        Tilleggsstønader:
+          value:
+            sakId: "ASD123NLDQ23"
+            behandlingId: "ADNLK123lDLJNWQ1"
+            personident: "15507600333"
+            stønad: "TILSYN_BARN_ENSLIG_FORSØRGER"
+            saksbehandlerId: "A234567"
+            perioder:
+              - fom: "2024-10-01"
+                tom: "2024-10-01"
+                beløp: 256
 
     SimuleringApiRespons:
       type: object

diff --git a/lib/openapi/schema.ts b/lib/openapi/schema.ts
@@ -45,6 +45,7 @@ const BooleanSchemaObjectSchema = z.object({
   type: z.literal("boolean"),
   enum: z.array(z.any()).nonempty().optional(),
   const: z.any().optional(),
+  examples: z.record(z.string(), z.any()).optional(),
 })
 
 const NumberSchemaObjectSchema = z.object({
@@ -56,6 +57,7 @@ const NumberSchemaObjectSchema = z.object({
   exclusiveMinimum: z.boolean().optional(),
   enum: z.array(z.any()).nonempty().optional(),
   const: z.any().optional(),
+  examples: z.record(z.string(), z.any()).optional(),
 })
 
 const StringSchemaObjectSchema = z.object({
@@ -81,6 +83,7 @@ const StringSchemaObjectSchema = z.object({
     .optional(),
   enum: z.array(z.any()).nonempty().optional(),
   const: z.any().optional(),
+  examples: z.record(z.string(), z.any()).optional(),
 })
 
 const ArraySchemaObjectSchema = z.object({
@@ -93,6 +96,7 @@ const ArraySchemaObjectSchema = z.object({
   minContains: z.number().nonnegative().optional(),
   enum: z.array(z.any()).nonempty().optional(),
   const: z.any().optional(),
+  examples: z.record(z.string(), z.any()).optional(),
 })
 
 const ObjectSchemaObjectSchema = z.object({
@@ -106,6 +110,7 @@ const ObjectSchemaObjectSchema = z.object({
   const: z.any().optional(),
   oneOf: z.array(z.any()).optional(),
   allOf: z.array(z.any()).optional(),
+  examples: z.record(z.string(), z.any()).optional(),
 })
 
 const SchemaObjectSchema = z.discriminatedUnion("type", [