Merge 1e757f6 into fd4358d

navikt · Feb 21, 2024 · f5faa4f · f5faa4f
2 parents fd4358d + 1e757f6
commit f5faa4f
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 6 deletions.
diff --git a/.changeset/kind-flies-cover.md b/.changeset/kind-flies-cover.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Modal: Bedre feilmeldinger ved feil bruk av props
diff --git a/@navikt/core/react/src/modal/modal.stories.tsx b/@navikt/core/react/src/modal/modal.stories.tsx
@@ -339,3 +339,57 @@ ChromaticViewportTesting.parameters = {
     },
   },
 };
+
+// For testing TS error messages:
+
+/* const PropTypeTest = () => {
+  return (
+    <>
+      <Modal header={{ heading: "Label" }}>OK</Modal>
+
+      <Modal header={{ heading: "Label" }} aria-label="Label">
+        OK
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} aria-labelledby="Label">
+        OK
+      </Modal>
+
+      <Modal aria-label="Label">OK</Modal>
+
+      <Modal aria-labelledby="Label">OK</Modal>
+
+      <Modal aria-label="Label" open onClose={() => null}>
+        OK
+      </Modal>
+
+      <Modal>Mangler label</Modal>
+
+      <Modal open>Mangler onClose eller label</Modal>
+
+      <Modal open aria-label="Label">
+        Mangler onClose
+      </Modal>
+
+      <Modal open onClose={() => null}>
+        Mangler label
+      </Modal>
+
+      <Modal header={{ heading: "Label" }} open>
+        Mangler onClose
+      </Modal>
+
+      <Modal
+        header={{ heading: "Label" }}
+        aria-label="Label"
+        aria-labelledby="Label"
+      >
+        For mange labels
+      </Modal>
+
+      <Modal aria-label="Label" aria-labelledby="Label">
+        For mange labels
+      </Modal>
+    </>
+  );
+}; */
diff --git a/@navikt/core/react/src/modal/types.test-d.ts b/@navikt/core/react/src/modal/types.test-d.ts
@@ -0,0 +1,78 @@
+import { expectTypeOf } from "vitest";
+import { ModalProps } from "./types";
+
+test("ModalProps works as intended", () => {
+  expectTypeOf({
+    header: { heading: "Label" },
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-label": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-labelledby": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-labelledby": "Label",
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    open: true,
+    onClose: () => null,
+    children: "OK",
+  }).toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    children: "Mangler label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    children: "Mangler onClose eller label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    "aria-label": "Label",
+    children: "Mangler onClose",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    open: true,
+    onClose: () => null,
+    children: "Mangler label",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    open: true,
+    children: "Mangler onClose",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    header: { heading: "Label" },
+    "aria-label": "Label",
+    "aria-labelledby": "Label",
+    children: "For mange labels",
+  }).not.toMatchTypeOf<ModalProps>();
+
+  expectTypeOf({
+    "aria-label": "Label",
+    "aria-labelledby": "Label",
+    children: "For mange labels",
+  }).not.toMatchTypeOf<ModalProps>();
+});
diff --git a/@navikt/core/react/src/modal/types.ts b/@navikt/core/react/src/modal/types.ts
@@ -81,11 +81,25 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
 // Require onClose if you use open  &  Require either header, aria-labelledby or aria-label
 export type ModalProps = ModalPropsBase &
   (
-    | { open?: never }
-    | { open: boolean | undefined; onClose: ModalPropsBase["onClose"] }
+    | { onClose: ModalPropsBase["onClose"]; open: boolean | undefined }
+    | { onClose?: ModalPropsBase["onClose"]; open?: never }
   ) &
   (
-    | { header: ModalPropsBase["header"] }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-labelledby": string;
+        "aria-label"?: never;
+      }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-label": string;
+        "aria-labelledby"?: never;
+      }
+    | {
+        header: ModalPropsBase["header"];
+        "aria-labelledby"?: never;
+        "aria-label"?: never;
+      }
     | { "aria-labelledby": string; "aria-label"?: never }
     | { "aria-labelledby"?: never; "aria-label": string }
   );
diff --git a/@navikt/core/react/src/overlays/portal/Portal.stories.tsx b/@navikt/core/react/src/overlays/portal/Portal.stories.tsx
@@ -12,7 +12,7 @@ export default {
 
 export const Default = () => {
   return (
-    <Box background="surface-neutral-subtle" border>
+    <Box background="surface-neutral-subtle">
       <h1>In regular DOM tree</h1>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
@@ -65,7 +65,10 @@ export const CustomPortalRootFromProvider = () => {
             <p>This is mounted to Tree B, while created inside Tree A</p>
           </Portal>
         </Box>
-        <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
+        <Box
+          background="surface-alt-3-subtle"
+          ref={(el) => el && setPortalContainer(el)}
+        >
           <h1>Tree B</h1>
         </Box>
       </Box>
@@ -75,7 +78,7 @@ export const CustomPortalRootFromProvider = () => {
 
 export const AsChild = () => {
   return (
-    <Box background="surface-neutral-subtle" border>
+    <Box background="surface-neutral-subtle">
       <h1>In regular DOM tree</h1>
       <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus

diff --git a/@navikt/core/react/tests/vitest.config.ts b/@navikt/core/react/tests/vitest.config.ts
@@ -6,5 +6,8 @@ export default defineConfig({
     globals: true,
     setupFiles: "./tests/setup.ts",
     environment: "jsdom",
+    typecheck: {
+      enabled: true,
+    },
   },
 });