Merge pull request #1146 from navikt/upgrade_to_designsystem_v5

Upgrade to designsystem v5

apps/frackend/package.json

@@ -13,7 +13,7 @@
   "author": "NAV",
   "license": "MIT",
   "dependencies": {
-    "axios": "1.4.0",
+    "axios": "1.5.0",
     "express": "4.18.2",
     "express-jwt": "8.4.1",
     "express-session": "1.17.3",
@@ -26,18 +26,18 @@
   "devDependencies": {
     "@types/express": "4.17.17",
     "@types/express-session": "1.17.7",
-    "@types/node": "20.4.7",
+    "@types/node": "20.5.7",
     "@types/node-jose": "1.1.10",
     "@types/uuid": "9.0.2",
-    "@typescript-eslint/eslint-plugin": "6.2.1",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "8.10.0",
-    "eslint-plugin-import": "2.28.0",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-unicorn": "48.0.1",
-    "prettier": "3.0.1",
-    "typescript": "5.1.6"
+    "prettier": "3.0.2",
+    "typescript": "5.2.2"
   }
 }

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,
   },

apps/frontend/package.json

@@ -15,51 +15,51 @@
   },
   "dependencies": {
     "@emotion/css": "11.11.2",
-    "@hookform/resolvers": "3.1.0",
-    "@navikt/aksel-icons": "4.7.3",
-    "@navikt/ds-css": "4.7.3",
-    "@navikt/ds-react": "4.7.3",
+    "@hookform/resolvers": "3.3.1",
+    "@navikt/aksel-icons": "5.2.1",
+    "@navikt/ds-css": "5.2.1",
+    "@navikt/ds-react": "5.2.1",
     "amplitude-js": "8.21.9",
-    "axios": "1.4.0",
+    "axios": "1.5.0",
     "date-fns": "2.30.0",
     "dayjs": "1.11.9",
     "lodash": "4.17.21",
     "query-string": "8.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.45.2",
+    "react-hook-form": "7.45.4",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
-    "react-router-dom": "6.14.2",
+    "react-router-dom": "6.15.0",
     "react-select": "5.7.4",
     "rehype-raw": "6.1.1",
     "remark-gfm": "3.0.1",
     "yup": "1.2.0"
   },
   "devDependencies": {
-    "@navikt/aksel-stylelint": "4.7.3",
+    "@navikt/aksel-stylelint": "5.2.1",
     "@types/amplitude-js": "8.16.2",
-    "@types/lodash": "4.14.196",
-    "@types/react": "18.2.18",
+    "@types/lodash": "4.14.197",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "6.2.1",
-    "@typescript-eslint/parser": "6.2.1",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
     "@vitejs/plugin-react": "4.0.4",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "8.10.0",
-    "eslint-plugin-import": "2.28.0",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-lodash": "7.4.0",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-simple-import-sort": "10.0.0",
     "eslint-plugin-unicorn": "48.0.1",
-    "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
-    "prettier": "3.0.1",
+    "eslint-plugin-you-dont-need-lodash-underscore": "6.13.0",
+    "prettier": "3.0.2",
     "react-localization": "1.0.19",
     "postcss-styled-syntax": "0.4.0",
-    "stylelint": "15.10.2",
+    "stylelint": "15.10.3",
     "stylelint-config-standard": "34.0.0",
-    "typescript": "5.1.6",
-    "vite": "4.4.8"
+    "typescript": "5.2.2",
+    "vite": "4.4.9"
   }
 }

apps/frontend/src/App.tsx

@@ -1,5 +1,4 @@
 import { css, cx } from "@emotion/css";
-import { Modal } from "@navikt/ds-react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { BrowserRouter } from "react-router-dom";
 
@@ -11,14 +10,6 @@ import { MainRoutes } from "./routes";
 const queryClient = new QueryClient();
 
 export function App() {
-  /**
-   * Must set where a modal is mounted for screen readers to work properly: https://aksel.nav.no/designsystem/komponenter/modal
-   * Not sure if setting it at the root like this is sufficient, or if it should be part of every modal's useEffects()
-   */
-  if (Modal.setAppElement) {
-    Modal.setAppElement(document.querySelector("#root"));
-  }
-
   return (
     <BrowserRouter>
       <QueryClientProvider client={queryClient}>

apps/frontend/src/appStyles.css

@@ -28,4 +28,15 @@
     position: absolute;
     left: 0;
     z-index: -1;
-}
+}
+
+.sticky-modal-actions {
+    border-top: 1px solid #cfcfcf;
+    width: 100%;
+    display: flex;
+    gap: 1rem;
+    bottom: -2rem;
+    background-color: white;
+    position: sticky;
+    padding: 1rem;
+}

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,20 +27,8 @@ export function EditMembersModal({
   updateMemberOfTeamMutation: UseMutationResult<unknown, unknown, MemberFormValues[]>;
 }) {
   return (
-    <Modal onClose={onClose} open={open} shouldCloseOnOverlayClick={false}>
-      <Modal.Content
-        className={css`
-          width: 700px;
-          padding: 2rem 2rem 0;
-
-          @media screen and (width <= 700px) {
-            width: 100%;
-          }
-        `}
-      >
-        <Heading level="1" size="large" spacing>
-          Endre medlemmer
-        </Heading>
+    <Modal header={{ heading: "Endre medlemmer" }} onClose={onClose} open={open}>
+      <Modal.Body>
         <div
           className={css`
             display: flex;
@@ -58,29 +46,12 @@ export function EditMembersModal({
             />
           ))}
         </div>
-        <div
-          className={css`
-            display: flex;
-            justify-content: center;
-            position: sticky;
-            bottom: 0;
-            padding: 1rem;
-            background: var(--a-white);
-            border-top: 2px solid var(--a-gray-100);
-            margin-top: 0.5rem;
-          `}
-        >
-          <Button
-            className={css`
-              width: 200px;
-            `}
-            onClick={onClose}
-            variant="secondary"
-          >
-            Lukk
-          </Button>
-        </div>
-      </Modal.Content>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button onClick={onClose} variant="secondary">
+          Lukk
+        </Button>
+      </Modal.Footer>
     </Modal>
   );
 }

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";
@@ -104,54 +104,41 @@ const getContactAddress = async (productTeam: ProductTeamResponse) => {
 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.Content>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
-          <Detail
-            className={css`
-              font-size: 16px;
-            `}
+    <Modal className={styles.modalStyles} header={{ heading: title }} onClose={onClose} open={isOpen}>
+      <Modal.Body>
+        <Detail
+          className={css`
+            font-size: 16px;
+          `}
+        >
+          Hvis "Åpne e-postklient" knappen ikke fungerer bruk "Kopier e-poster" knappen og lim disse inn i din
+          e-postklient
+        </Detail>
+        <div
+          className={css`
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+          `}
+        >
+          <Button
+            className={styles.buttonStyle}
+            onClick={async () => {
+              await contactTeamsOutlook(teams);
+            }}
           >
-            Hvis "Åpne e-postklient" knappen ikke fungerer bruk "Kopier e-poster" knappen og lim disse inn i din
-            e-postklient
-          </Detail>
-          <div
-            className={css`
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-            `}
+            Åpne e-postklient
+          </Button>
+          <Button
+            className={styles.buttonStyle}
+            onClick={async () => {
+              await contactTeamsCopy(teams);
+            }}
           >
-            <Button
-              className={styles.buttonStyle}
-              onClick={async () => {
-                await contactTeamsOutlook(teams);
-              }}
-            >
-              Åpne e-postklient
-            </Button>
-            <Button
-              className={styles.buttonStyle}
-              onClick={async () => {
-                await contactTeamsCopy(teams);
-              }}
-            >
-              Kopier e-poster
-            </Button>
-          </div>
-        </Modal.Content>
-      </Modal>
-    </>
+            Kopier e-poster
+          </Button>
+        </div>
+      </Modal.Body>
+    </Modal>
   );
 };

apps/frontend/src/components/team/ModalTeam.tsx

@@ -30,11 +30,6 @@ import { intl } from "../../util/intl/intl";
 import { BasicCreatableSelect, BasicSelect, SelectLayoutWrapper } from "../select/CustomSelectComponents";
 
 const styles = {
-  modalStyles: css`
-    width: 850px;
-    min-height: 400px;
-    padding: 1rem 1rem 0;
-  `,
   boxStyles: css`
     background: #e6f1f8;
     border: 1px solid #236b7d;
@@ -51,17 +46,6 @@ const styles = {
     width: 100%;
     margin-bottom: 1rem;
   `,
-  buttonSection: css`
-    border-top: 1px solid #cfcfcf;
-    margin-top: 2rem;
-    width: 100%;
-    display: flex;
-    gap: 1rem;
-    bottom: 0;
-    background-color: white;
-    position: sticky;
-    padding: 1rem;
-  `,
   errorStyling: css`
     color: #ba3a26;
     font-weight: bold;
@@ -306,19 +290,9 @@ export const ModalTeam = (properties: ModalTeamProperties) => {
   }, [isOpen]);
 
   return (
-    <form>
-      <Modal
-        aria-label="Modal team edit"
-        aria-labelledby="modal-heading"
-        className={styles.modalStyles}
-        onClose={() => onClose()}
-        open={isOpen}
-        shouldCloseOnOverlayClick={false}
-      >
-        <Modal.Content>
-          <Heading level="1" size="large" spacing>
-            {title}
-          </Heading>
+    <Modal header={{ heading: title }} onClose={onClose} open={isOpen}>
+      <Modal.Body>
+        <form>
           <Detail
             className={css`
               font-size: 16px;
@@ -825,7 +799,7 @@ export const ModalTeam = (properties: ModalTeamProperties) => {
             </div>
           </div>
 
-          <div className={styles.buttonSection}>
+          <div className="sticky-modal-actions">
             <Button onClick={handleSubmit((data) => onSubmitForm(mapDataToSubmit(data)))} type="submit">
               Lagre
             </Button>
@@ -834,8 +808,8 @@ export const ModalTeam = (properties: ModalTeamProperties) => {
               Avbryt
             </Button>
           </div>
-        </Modal.Content>
-      </Modal>
-    </form>
+        </form>
+      </Modal.Body>
+    </Modal>
   );
 };