Merge pull request #289 from navikt/oppgrader-aksel-ds-til-v6

Oppgrader aksel ds til v6
navikt · Apr 2, 2024 · ad36601 · ad36601
2 parents da1d113 + 1537213
commit ad36601
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 184 deletions.
diff --git a/components/ErrorMessageProvider.tsx b/components/ErrorMessageProvider.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading } from '@navikt/ds-react';
+import { BodyLong } from '@navikt/ds-react';
 import { createContext, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FellesModal } from './FellesModal';
@@ -48,15 +48,12 @@ export const ErrorMessageProvider = ({ children }: ErrorMessageProviderProps) =>
       {children}
 
       <FellesModal
+        heading={error.title || defaultTitle}
         open={open}
         setOpen={setOpen}
         cancelButtonText={t('feil.advarselBrukerBekreftelse')}
         cancelButtonVariant="secondary"
       >
-        <Heading spacing size="medium">
-          {error.title || defaultTitle}
-        </Heading>
-
         <BodyLong>{error.message}</BodyLong>
       </FellesModal>
     </ErrorMessageContext.Provider>

diff --git a/components/FellesModal.tsx b/components/FellesModal.tsx
@@ -1,25 +1,12 @@
 import { Button, ButtonProps, Modal } from '@navikt/ds-react';
-import React, { useEffect } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const StyledModal = styled(Modal)`
   max-width: 700px;
 `;
 
-const ButtonRow = styled.div`
-  padding-top: 37px;
-  display: flex;
-  justify-content: right;
-  button {
-    margin: 0 12px;
-  }
-`;
-
-const StyledContent = styled(Modal.Content)`
-  > *:first-child {
-    margin-right: 36px;
-  }
-
+const StyledModalBody = styled(Modal.Body)`
   ol,
   ul {
     padding-left: 1.75rem;
@@ -33,6 +20,7 @@ const StyledContent = styled(Modal.Content)`
 `;
 
 type FellesModalProps = {
+  heading: string;
   open: boolean;
   setOpen(isOpen: boolean): void;
   children?: React.ReactNode;
@@ -42,10 +30,12 @@ type FellesModalProps = {
   acceptButtonVariant?: ButtonProps['variant'];
   cancelButtonVariant?: ButtonProps['variant'];
   isLoading?: boolean;
+  closeButton?: boolean;
 };
 
 export const FellesModal = (props: FellesModalProps) => {
   const {
+    heading,
     open,
     setOpen,
     onAccept,
@@ -55,43 +45,38 @@ export const FellesModal = (props: FellesModalProps) => {
     acceptButtonVariant = 'primary',
     cancelButtonVariant = 'tertiary',
     isLoading = false,
+    closeButton = true,
   } = props;
 
-  useEffect(() => {
-    Modal.setAppElement('#__next');
-  }, []);
-
   return (
     <>
-      <StyledModal open={open} onClose={() => setOpen(false)}>
-        <StyledContent>
-          {children}
-          {(acceptButtonText || cancelButtonText) && (
-            <ButtonRow>
-              {cancelButtonText && (
-                <Button
-                  variant={cancelButtonVariant}
-                  size="medium"
-                  onClick={() => setOpen(false)}
-                  data-cy="neiFellesModalKnapp"
-                >
-                  {cancelButtonText}
-                </Button>
-              )}
-              {acceptButtonText && (
-                <Button
-                  variant={acceptButtonVariant}
-                  size="medium"
-                  onClick={onAccept}
-                  loading={isLoading}
-                  data-cy="jaFellesModalKnapp"
-                >
-                  {acceptButtonText}
-                </Button>
-              )}
-            </ButtonRow>
-          )}
-        </StyledContent>
+      <StyledModal header={{ heading, closeButton, size: 'medium' }} open={open} onClose={() => setOpen(false)}>
+        <StyledModalBody>{children}</StyledModalBody>
+        {(acceptButtonText || cancelButtonText) && (
+          <Modal.Footer>
+            {acceptButtonText && (
+              <Button
+                variant={acceptButtonVariant}
+                size="medium"
+                onClick={onAccept}
+                loading={isLoading}
+                data-cy="jaFellesModalKnapp"
+              >
+                {acceptButtonText}
+              </Button>
+            )}
+            {cancelButtonText && (
+              <Button
+                variant={cancelButtonVariant}
+                size="medium"
+                onClick={() => setOpen(false)}
+                data-cy="neiFellesModalKnapp"
+              >
+                {cancelButtonText}
+              </Button>
+            )}
+          </Modal.Footer>
+        )}
       </StyledModal>
     </>
   );

diff --git a/components/Fil.tsx b/components/Fil.tsx
@@ -476,7 +476,8 @@ export function Fil({
                   })
                 }
                 CustomButton={
-                  <Button as="label" variant="tertiary">
+                  // Label kan ikke ha role='button', som settes automatisk
+                  <Button as="label" variant="tertiary" role={undefined}>
                     {t('soknad.vedlegg.fil.provIgjen')}
                   </Button>
                 }

diff --git a/components/Filvelger.tsx b/components/Filvelger.tsx
@@ -82,7 +82,13 @@ export function Filvelger(props: FilvelgerProps) {
 
   const CurrentButton = useCallback(() => {
     const DefaultButton = (
-      <Button as="label" variant="secondary" icon={<UploadIcon aria-hidden />} data-cy="filvelgerKnapp">
+      <Button
+        as="label"
+        variant="secondary"
+        icon={<UploadIcon aria-hidden />}
+        data-cy="filvelgerKnapp"
+        role={undefined} // Label kan ikke ha role='button', som settes automatisk
+      >
         {buttonText || t('filvelger.defaultText')}
       </Button>
     );

diff --git a/components/SoknadModalProvider.tsx b/components/SoknadModalProvider.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading } from '@navikt/ds-react';
+import { BodyLong } from '@navikt/ds-react';
 import { createContext, useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { datoOmXDager, formatertDato } from '../utils/dato';
@@ -79,15 +79,13 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
       {children}
 
       <FellesModal
+        heading={t('modal.fortsettSenere.tittel')}
         open={fortsettSenereSoknadModal}
         setOpen={setForstettSenereSoknadModal}
         onAccept={navigerTilMinSide}
         acceptButtonText={t('modal.fortsettSenere.accept')}
         cancelButtonText={t('modal.fortsettSenere.cancel')}
       >
-        <Heading spacing size="medium">
-          {t('modal.fortsettSenere.tittel')}
-        </Heading>
         <BodyLong as="ul">
           {(
             t('modal.fortsettSenere.liste', {
@@ -100,16 +98,14 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
       </FellesModal>
 
       <FellesModal
+        heading={t('modal.slett.tittel')}
         open={slettSoknadModal}
         setOpen={setSlettSoknadModal}
         onAccept={slettSoknad}
         acceptButtonText={t('modal.slett.accept')}
         cancelButtonText={t('modal.slett.cancel')}
         isLoading={lagrer}
       >
-        <Heading spacing size="medium">
-          {t('modal.slett.tittel')}
-        </Heading>
         <BodyLong as="ul">
           {(
             t('modal.slett.liste', {
@@ -122,6 +118,7 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
       </FellesModal>
 
       <FellesModal
+        heading={t('modal.sendInnUferdig.tittel')}
         open={sendInnUferdigSoknadModal}
         setOpen={setSendInnUferdigSoknadModal}
         onAccept={async () => {
@@ -132,9 +129,6 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
         cancelButtonText={t('modal.sendInnUferdig.cancel')}
         isLoading={lagrer}
       >
-        <Heading spacing size="medium">
-          {t('modal.sendInnUferdig.tittel')}
-        </Heading>
         <BodyLong as="ul">
           {(
             t('modal.sendInnUferdig.liste', {
@@ -153,6 +147,7 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
       </FellesModal>
 
       <FellesModal
+        heading={t('modal.sendInnKomplett.tittel')}
         open={sendInnKomplettSoknadModal}
         setOpen={setSendInnKomplettSoknadModal}
         onAccept={async () => {
@@ -163,9 +158,6 @@ export const SoknadModalProvider = ({ children }: SoknadModalProviderProps) => {
         cancelButtonText={t('modal.sendInnKomplett.cancel')}
         isLoading={lagrer}
       >
-        <Heading spacing size="medium">
-          {t('modal.sendInnKomplett.tittel')}
-        </Heading>
         <BodyLong as="ul">
           {(
             t('modal.sendInnKomplett.liste', {

diff --git a/cypress/e2e/dokumentinnsendingTest.cy.js b/cypress/e2e/dokumentinnsendingTest.cy.js
@@ -94,7 +94,7 @@ describe('Tester dokumentinnsendingsløpet', () => {
     // Sender inn
     cy.get('[data-cy="sendTilNAVKnapp"]').click();
 
-    cy.get('[data-cy="jaFellesModalKnapp"]').should('be.visible').click();
+    cy.get('[data-cy="jaFellesModalKnapp"]').filter(':visible').should('be.visible').click();
 
     cy.get('[data-cy="kvitteringOverskrift"]').should('be.visible');
     cy.checkA11y('#__next');

diff --git a/cypress/e2e/ettersendingTest.cy.js b/cypress/e2e/ettersendingTest.cy.js
@@ -33,18 +33,10 @@ describe('Tester ettersendingsløpet', () => {
       });
 
     // Sender inn
-    cy.get('[data-cy="sendTilNAVKnapp"]', {
-      timeout: 10000,
-    }).click();
+    cy.get('[data-cy="sendTilNAVKnapp"]').click();
 
-    cy.get('[data-cy="jaFellesModalKnapp"]', {
-      timeout: 10000,
-    }).should('be.visible');
+    cy.get('[data-cy="jaFellesModalKnapp"]').filter(':visible').should('be.visible').click();
 
-    cy.get('[data-cy="jaFellesModalKnapp"]').click();
-
-    cy.get('[data-cy="kvitteringOverskrift"]', {
-      timeout: 10000,
-    }).should('be.visible');
+    cy.get('[data-cy="kvitteringOverskrift"]').should('be.visible');
   });
 });
diff --git a/next.config.js b/next.config.js
@@ -5,6 +5,9 @@ const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
 import { withSentryConfig } from '@sentry/nextjs';
 
 const nextConfig = {
+  experimental: {
+    optimizePackageImports: ['@navikt/ds-react', '@navikt/aksel-icons'],
+  },
   reactStrictMode: false,
   eslint: {
     // Warning: This allows production builds to successfully complete even if