Fix next setup

Author: garronej

test/integration/cra/yarn.lock

@@ -1,8 +1,9 @@
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next";
-import { Display, headerQuickAccessDisplay } from "@codegouvfr/react-dsfr/Display";
+import { Display, headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { Header } from "@codegouvfr/react-dsfr/Header";
+import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 import { useStyles } from "tss-react/dsfr";
 import { fr } from "@codegouvfr/react-dsfr";
@@ -42,6 +43,10 @@ const { augmentDocumentWithEmotionCache, withAppEmotionCache } = createEmotionSs
 
 export { dsfrDocumentApi, augmentDocumentWithEmotionCache };
 
+const brandTop= <>INTITULE<br />OFFICIEL</>;
+
+const homeLinkPops= { "href": "/", "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" };
+
 function App({ Component, pageProps }: AppProps) {
 
     const { css } = useStyles();
@@ -51,9 +56,9 @@ function App({ Component, pageProps }: AppProps) {
     return (
         <DsfrLinkProvider>
             <Header
-                brandTop={<>INTITULE<br />OFFICIEL</>}
+                brandTop={brandTop}
                 serviceTitle="Nom du site / service"
-                homeLinkProps={{ "href": "/", "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
+                homeLinkProps={homeLinkPops }
                 navItems={[
                     {
                         "text": "Home",
@@ -70,7 +75,7 @@ function App({ Component, pageProps }: AppProps) {
                         "isActive": router.asPath === "/mui"
                     }
                 ]}
-                quickAccessItems={[headerQuickAccessDisplay]}
+                quickAccessItems={[headerFooterDisplayItem]}
             />
             <div className={css({
                 "margin": "auto",
@@ -81,6 +86,19 @@ function App({ Component, pageProps }: AppProps) {
             })}>
                 <Component {...pageProps} />
             </div>
+            <Footer
+                brandTop={brandTop}
+                accessibility="fully compliant"
+                contentDescription={`
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
+                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
+                    eu fugiat nulla pariatur. 
+                `}
+                homeLinkProps={homeLinkPops}
+                bottomItems={[headerFooterDisplayItem]}
+            />
             <Display />
         </DsfrLinkProvider>
     );

test/integration/next/pages/_app.tsx

@@ -10,7 +10,7 @@ export default function App() {
     return (
         <>
             <Alert
-                isClosable={true}
+                closable
                 severity="success"
                 title="Success: This is the title"
                 description="This is the description"
@@ -45,7 +45,7 @@ function ControlledTabs() {
     return (
         <Tabs
             className={css({
-                "margin": fr.spacing("3v")
+                "margin": fr.spacing("10v"),
             })}
             selectedTabId={selectedTabId}
             tabs={[