feat: add dsfr white label config

.env

@@ -22,3 +22,6 @@ VITE_TELEMETRY_DISABLED=
 VITE_TELEMETRY_MAX_DELAY=
 # Override max number of data to send in a single batch (default: 10)
 VITE_TELEMETRY_MAX_LENGTH=
+
+# When VITE_IS_GOV_INSTANCE equals true we use the dsfr design and false we use the default design cf https://react-dsfr.codegouv.studio/custom-branding
+VITE_IS_GOV_INSTANCE=

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stromae-dsfr",
   "private": true,
-  "version": "1.4.2",
+  "version": "1.4.2-whitelabel.0",
   "type": "module",
   "scripts": {
     "prepare": "husky && vite-envs update-types",
@@ -25,7 +25,7 @@
     "prebuild-storybook": "react-dsfr update-icons"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^1.13.6",
+    "@codegouvfr/react-dsfr": "^1.23.9",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@inseefr/lunatic": "^3.5.8",
@@ -37,14 +37,14 @@
     "date-fns": "^4.1.0",
     "he": "^1.2.0",
     "i18nifty": "^3.2.2",
-    "oidc-spa": "^6.8.2",
+    "oidc-spa": "^6.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-number-format": "^5.4.0",
     "tsafe": "^1.7.2",
-    "tss-react": "^4.9.13",
+    "tss-react": "^4.9.18",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,6 @@
-import { MuiDsfrThemeProvider } from '@codegouvfr/react-dsfr/mui'
+import { createDsfrCustomBrandingProvider } from '@codegouvfr/react-dsfr/mui'
 import { startReactDsfr } from '@codegouvfr/react-dsfr/spa'
+import { createTheme } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import {
   Link,
@@ -8,15 +9,43 @@ import {
   createRouter,
 } from '@tanstack/react-router'
 
+import logoInseePngUrl from '@/assets/logo-insee.png'
 import { TelemetryProvider } from '@/contexts/TelemetryContext'
 import { OidcProvider } from '@/oidc'
 import { routeTree } from '@/router/router'
 
+import './assets/fonts/OpenSans/main.css'
+
 startReactDsfr({
   defaultColorScheme: 'system',
   Link,
 })
 
+const { DsfrCustomBrandingProvider } = createDsfrCustomBrandingProvider({
+  createMuiTheme: ({ isDark, theme_gov }) => {
+    if (import.meta.env.VITE_IS_GOV_INSTANCE === 'true') {
+      return { theme: theme_gov }
+    }
+
+    const theme = createTheme({
+      palette: {
+        mode: isDark ? 'dark' : 'light',
+        primary: {
+          main: isDark ? '#02AFFF' : '#3467AE',
+        },
+        secondary: {
+          main: '#FFC403',
+        },
+      },
+      typography: {
+        fontFamily: '"Open Sans"',
+      },
+    })
+
+    return { theme, faviconUrl: logoInseePngUrl }
+  },
+})
+
 declare module '@codegouvfr/react-dsfr/spa' {
   interface RegisterLink {
     Link: (props: LinkProps) => JSX.Element
@@ -48,7 +77,7 @@ declare module '@tanstack/react-router' {
 /** Wraps and inits the providers used in the app */
 export function App() {
   return (
-    <MuiDsfrThemeProvider>
+    <DsfrCustomBrandingProvider>
       <QueryClientProvider client={queryClient}>
         <OidcProvider>
           <TelemetryProvider>
@@ -59,6 +88,6 @@ export function App() {
           </TelemetryProvider>
         </OidcProvider>
       </QueryClientProvider>
-    </MuiDsfrThemeProvider>
+    </DsfrCustomBrandingProvider>
   )
 }

src/assets/fonts/OpenSans/main.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Bold-webfont.woff2') format('woff2');
+  font-weight: 900;
+  /* Black */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Bold-webfont.woff2') format('woff2');
+  font-weight: bold;
+  /* Bold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Light-webfont.woff2') format('woff2');
+  font-weight: 300;
+  /* Light */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Regular-webfont.woff2') format('woff2');
+  font-weight: 500;
+  /* Medium */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Regular-webfont.woff2') format('woff2');
+  font-weight: 400;
+  /* Regular */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Semibold-webfont.woff2') format('woff2');
+  font-weight: 600;
+  /* SemiBold */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Thin-webfont.woff2') format('woff2');
+  font-weight: 100;
+  /* Thin */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Thin-webfont.woff2') format('woff2');
+  font-weight: 200;
+  /* UltraLight */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./OpenSans-Bold-webfont.woff2') format('woff2');
+  font-weight: 950;
+  /* UltraBlack */
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Geist Variable';
+  src: url('./GeistVariableVF.woff2') format('woff2');
+  font-weight: 100 950;
+  /* Range from Thin to UltraBlack */
+  font-style: normal;
+}

src/components/error/ErrorComponent.tsx

@@ -1,12 +1,10 @@
 import { fr } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
-import ArtWorkBackground from '@codegouvfr/react-dsfr/dsfr/artwork/background/ovoid.svg'
-import TechnicalError from '@codegouvfr/react-dsfr/dsfr/artwork/pictograms/system/technical-error.svg'
-import ArtWork from '@codegouvfr/react-dsfr/dsfr/artwork/system.svg'
 import { useNavigate, useSearch } from '@tanstack/react-router'
 
 import { Container } from '@/components/Container'
 import { errorNormalizer } from '@/components/error/errorNormalizer'
+import { TechnicalError } from '@/components/pictogram/TechnicalError'
 import { useDocumentTitle } from '@/hooks/useDocumentTitle'
 import { declareComponentKeys, useTranslation } from '@/i18n'
 
@@ -73,38 +71,7 @@ export function ErrorComponent(props: Props) {
             'fr-unhidden-lg',
           )}
         >
-          <svg
-            className={fr.cx('fr-artwork', 'fr-responsive-img')}
-            aria-hidden="true"
-            width="160"
-            height="200"
-            viewBox="0 0 160 200"
-          >
-            <use
-              className={fr.cx('fr-artwork-motif')}
-              href={`${ArtWorkBackground}#artwork-motif`}
-            ></use>
-            <use href={`${ArtWork}#artwork-motif`}></use>
-
-            <use
-              className={fr.cx('fr-artwork-background')}
-              href={`${ArtWorkBackground}#artwork-background`}
-            ></use>
-            <g transform="translate(40, 60)">
-              <use
-                className={fr.cx('fr-artwork-decorative')}
-                xlinkHref={`${TechnicalError}#artwork-decorative`}
-              ></use>
-              <use
-                className={fr.cx('fr-artwork-minor')}
-                xlinkHref={`${TechnicalError}#artwork-minor`}
-              ></use>
-              <use
-                className={fr.cx('fr-artwork-major')}
-                xlinkHref={`${TechnicalError}#artwork-major`}
-              ></use>
-            </g>
-          </svg>
+          <TechnicalError />
         </div>
       </div>
     </Container>

src/components/orchestrator/slotComponents/Roundabout.tsx

@@ -5,7 +5,7 @@ import Alert from '@codegouvfr/react-dsfr/Alert'
 import { Badge } from '@codegouvfr/react-dsfr/Badge'
 import Button from '@codegouvfr/react-dsfr/Button'
 import type { LunaticSlotComponents } from '@inseefr/lunatic'
-import { useStyles } from 'tss-react/dsfr'
+import { useStyles } from 'tss-react'
 
 import { Declarations } from './Declarations'
 import type { ItemOf } from './utils/type'

src/components/orchestrator/slotComponents/Summary/SummaryResponses.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren, ReactNode } from 'react'
 
 import { fr } from '@codegouvfr/react-dsfr'
-import { useStyles } from 'tss-react/dsfr'
+import { useStyles } from 'tss-react'
 
 function ListResponses({
   title,