use header prop instead of explicit header component in modals

navikt · Aug 29, 2023 · 55bc297 · 55bc297
1 parent 5df2790
commit 55bc297
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 91 deletions.
diff --git a/apps/frontend/.eslintrc.js b/apps/frontend/.eslintrc.js
@@ -33,6 +33,7 @@ module.exports = {
     "import/no-default-export": "error",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
+    "you-dont-need-lodash-underscore/capitalize": "off",
     "@typescript-eslint/consistent-type-imports": ["warn"],
     ...IGNORED_UNICORN_RULES,
   },

diff --git a/apps/frontend/src/components/team/EditMembersModal.tsx b/apps/frontend/src/components/team/EditMembersModal.tsx
@@ -1,7 +1,7 @@
 import { css } from "@emotion/css";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { PencilFillIcon, PlusCircleFillIcon, TrashFillIcon } from "@navikt/aksel-icons";
-import { Button, Heading, Label, Modal, TextField } from "@navikt/ds-react";
+import { Button, Label, Modal, TextField } from "@navikt/ds-react";
 import * as React from "react";
 import { useState } from "react";
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form";
@@ -27,12 +27,7 @@ export function EditMembersModal({
   updateMemberOfTeamMutation: UseMutationResult<unknown, unknown, MemberFormValues[]>;
 }) {
   return (
-    <Modal onClose={onClose} open={open}>
-      <Modal.Header>
-        <Heading level="1" size="large" spacing>
-          Endre medlemmer
-        </Heading>
-      </Modal.Header>
+    <Modal header={{ heading: "Endre medlemmer" }} onClose={onClose} open={open}>
       <Modal.Body>
         <div
           className={css`

diff --git a/apps/frontend/src/components/team/ModalContactAllTeams.tsx b/apps/frontend/src/components/team/ModalContactAllTeams.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { Button, Detail, Heading, Modal } from "@navikt/ds-react";
+import { Button, Detail, Modal } from "@navikt/ds-react";
 
 import { getResourceById } from "../../api/resourceApi";
 import type { ContactAddress, ProductTeamResponse } from "../../constants";
@@ -105,18 +105,7 @@ export const ModalContactAllTeams = (properties: ModalTeamProperties) => {
   const { onClose, title, isOpen, teams } = properties;
   return (
     <>
-      <Modal
-        aria-label="Modal kontakt alle team"
-        aria-labelledby="modal-heading"
-        className={styles.modalStyles}
-        onClose={onClose}
-        open={isOpen}
-      >
-        <Modal.Header>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
-        </Modal.Header>
+      <Modal className={styles.modalStyles} header={{ heading: title }} onClose={onClose} open={isOpen}>
         <Modal.Body>
           <Detail
             className={css`

diff --git a/apps/frontend/src/components/team/ModalTeam.tsx b/apps/frontend/src/components/team/ModalTeam.tsx
@@ -290,12 +290,7 @@ export const ModalTeam = (properties: ModalTeamProperties) => {
   }, [isOpen]);
 
   return (
-    <Modal aria-label="Modal team edit" aria-labelledby="modal-heading" onClose={onClose} open={isOpen}>
-      <Modal.Header>
-        <Heading level="1" size="large" spacing>
-          {title}
-        </Heading>
-      </Modal.Header>
+    <Modal header={{ heading: title }} onClose={onClose} open={isOpen}>
       <Modal.Body>
         <form>
           <Detail

diff --git a/apps/frontend/src/pages/area/ModalArea.tsx b/apps/frontend/src/pages/area/ModalArea.tsx
@@ -154,18 +154,7 @@ export const ModalArea = (properties: ModalAreaProperties) => {
   }, [isOpen]);
 
   return (
-    <Modal
-      aria-label="Modal area edit"
-      aria-labelledby="modal-heading"
-      className={styles.modalStyles}
-      onClose={() => onClose()}
-      open={isOpen}
-    >
-      <Modal.Header>
-        <Heading level="1" size="large" spacing>
-          {title}
-        </Heading>
-      </Modal.Header>
+    <Modal className={styles.modalStyles} header={{ heading: title }} onClose={() => onClose()} open={isOpen}>
       <Modal.Body>
         <form>
           <Detail

diff --git a/apps/frontend/src/pages/cluster/ModalCluster.tsx b/apps/frontend/src/pages/cluster/ModalCluster.tsx
@@ -93,18 +93,7 @@ export const ModalCluster = (properties: ModalAreaProperties) => {
 
   return (
     <form>
-      <Modal
-        aria-label="Modal area edit"
-        aria-labelledby="modal-heading"
-        className={styles.modalStyles}
-        onClose={() => onClose()}
-        open={isOpen}
-      >
-        <Modal.Header>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
-        </Modal.Header>
+      <Modal className={styles.modalStyles} header={{ heading: title }} onClose={onClose} open={isOpen}>
         <Modal.Body>
           <Detail
             className={css`

diff --git a/apps/frontend/src/pages/membership/ModalContactMembers.tsx b/apps/frontend/src/pages/membership/ModalContactMembers.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-import { Button, Detail, Heading, Modal } from "@navikt/ds-react";
+import { Button, Detail, Modal } from "@navikt/ds-react";
 import * as React from "react";
 import { Fragment } from "react";
 
@@ -39,18 +39,7 @@ export const ModalContactMembers = (properties: ModalMembersProperties) => {
   const { onClose, title, isOpen, memberships } = properties;
   return (
     <Fragment>
-      <Modal
-        aria-label="Modal kontakt alle medlemmer"
-        aria-labelledby="modal-heading"
-        className={styles.modalStyles}
-        onClose={onClose}
-        open={isOpen}
-      >
-        <Modal.Header>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
-        </Modal.Header>
+      <Modal className={styles.modalStyles} header={{ heading: title }} onClose={onClose} open={isOpen}>
         <Modal.Body>
           <Detail
             className={css`

diff --git a/apps/frontend/src/pages/team/components/ModalContactTeam.tsx b/apps/frontend/src/pages/team/components/ModalContactTeam.tsx
@@ -1,4 +1,4 @@
-import { BodyShort, Button, Heading, Modal } from "@navikt/ds-react";
+import { BodyShort, Button, Modal } from "@navikt/ds-react";
 import { useQuery } from "react-query";
 
 import { getResourceById } from "../../../api/resourceApi";
@@ -107,32 +107,23 @@ export const ModalContactTeam = (properties: ModalTeamProperties) => {
   });
 
   return (
-    <>
-      <Modal onClose={onClose} open={isOpen}>
-        <Modal.Header>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
-        </Modal.Header>
-        <Modal.Body>
-          <BodyShort spacing>
-            Hvis "Åpne e-postklient" knappen ikke fungerer bruk "Kopier e-post" knappen og lim dette inn i din
-            e-postklient
-          </BodyShort>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button
-            onClick={() => contactTeamOutlook({ team: team, contactPersonResource: fetchContactPersonResource.data })}
-          >
-            Åpne e-postklient
-          </Button>
-          <Button
-            onClick={() => contactTeamCopy({ team: team, contactPersonResource: fetchContactPersonResource.data })}
-          >
-            Kopier e-post
-          </Button>
-        </Modal.Footer>
-      </Modal>
-    </>
+    <Modal header={{ heading: title }} onClose={onClose} open={isOpen}>
+      <Modal.Body>
+        <BodyShort spacing>
+          Hvis "Åpne e-postklient" knappen ikke fungerer bruk "Kopier e-post" knappen og lim dette inn i din
+          e-postklient
+        </BodyShort>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          onClick={() => contactTeamOutlook({ team: team, contactPersonResource: fetchContactPersonResource.data })}
+        >
+          Åpne e-postklient
+        </Button>
+        <Button onClick={() => contactTeamCopy({ team: team, contactPersonResource: fetchContactPersonResource.data })}>
+          Kopier e-post
+        </Button>
+      </Modal.Footer>
+    </Modal>
   );
 };