fix: structure

package.json

@@ -22,15 +22,14 @@
     "storybook:deploy:action": "npm run storybook:build && gh-pages -d .out -u \"github-actions-bot <support+actions@github.com>\""
   },
   "dependencies": {
-    "@dataesr/react-dsfr": "^1.0.2",
+    "@dataesr/react-dsfr": "^1.0.4",
     "@gouvfr/dsfr": "^1.3.1",
     "@sentry/nextjs": "^6.17.9",
     "@socialgouv/matomo-next": "^1.2.2",
     "next": "12.1.0",
     "next-seo": "^5.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "zustand": "^3.7.0"
+    "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",

public/sitemap-0.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://template.fabrique.social.gouv.fr</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-02-19T09:12:14.128Z</lastmod></url>
+<url><loc>https://template.fabrique.social.gouv.fr</loc><changefreq>daily</changefreq><priority>0.7</priority><lastmod>2022-03-04T11:34:05.964Z</lastmod></url>
 </urlset>

src/components/header/body.tsx

@@ -7,9 +7,8 @@ import {
   ToolItemGroup,
   Tool,
 } from "@dataesr/react-dsfr";
-import { Switch } from "./switch";
+import { SwitchThemeMode } from "./switch";
 import { HeaderBodyProps } from "./type";
-import { isSwitch } from "./utils";
 
 export const Body = (props: HeaderBodyProps): JSX.Element => (
   <HeaderBody>
@@ -28,21 +27,14 @@ export const Body = (props: HeaderBodyProps): JSX.Element => (
       description={props.serviceDescription}
     />
     <Tool>
-      {props.items && (
-        <ToolItemGroup>
-          {props.items.map((item, index) => (
-            <>
-              {isSwitch(item) ? (
-                <Switch {...item} />
-              ) : (
-                <ToolItem key={`${index}-${item.title}`} link={item.href}>
-                  {item.title}
-                </ToolItem>
-              )}
-            </>
-          ))}
-        </ToolItemGroup>
-      )}
+      <ToolItemGroup>
+        {props.items?.map((item, index) => (
+          <ToolItem key={`${index}-${item.title}`} link={item.href}>
+            {item.title}
+          </ToolItem>
+        ))}
+        {props.switchProps && <SwitchThemeMode {...props.switchProps} />}
+      </ToolItemGroup>
     </Tool>
   </HeaderBody>
 );

src/components/header/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 
-import Header from "./";
+import Header from ".";
 import { headerBody, headerNav } from "@config";
 
 export default {

src/components/header/switch.tsx

@@ -1,17 +1,13 @@
-import { SwitchTheme } from "@dataesr/react-dsfr";
-import { ToolItem } from "@dataesr/react-dsfr";
-import { useHeaderStore } from "./store";
+import { SwitchTheme, ToolItem } from "@dataesr/react-dsfr";
+import { useState } from "react";
 import { SwitchProps } from "./type";
 
-export const Switch = (props: SwitchProps): JSX.Element => {
-  const [isOpen, onSwitchMode] = useHeaderStore(state => [
-    state.isSwitchModeOpen,
-    state.onSwitchMode,
-  ]);
+export const SwitchThemeMode = (props: SwitchProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <ToolItem onClick={onSwitchMode}>
+      <ToolItem onClick={() => setIsOpen(!isOpen)}>
         <span
           className="fr-fi-theme-fill fr-link--icon-left"
           aria-controls="fr-theme-modal"
@@ -20,7 +16,7 @@ export const Switch = (props: SwitchProps): JSX.Element => {
           {props.label}
         </span>
       </ToolItem>
-      <SwitchTheme isOpen={isOpen} setIsOpen={onSwitchMode} />
+      <SwitchTheme isOpen={isOpen} setIsOpen={() => setIsOpen(!isOpen)} />
     </>
   );
 };

src/components/header/type.ts

@@ -45,7 +45,8 @@ export type HeaderBodyProps = {
   image?: Image;
   serviceTitle: string;
   serviceDescription: string;
-  items?: Array<Omit<Link, "name"> | SwitchProps>;
+  items?: Array<Omit<Link, "name">>;
+  switchProps?: SwitchProps;
 };
 
 export type HeaderProps = {
@@ -54,6 +55,5 @@ export type HeaderProps = {
 };
 
 export type SwitchProps = {
-  isSwitch: true;
   label: string;
 };

src/config/layout/header.ts

@@ -15,11 +15,10 @@ export const headerBody: HeaderBodyProps = {
   items: [
     { href: "/", title: "Lien A" },
     { href: "/", title: "Lien B" },
-    {
-      label: "Paramètre d'affichage",
-      isSwitch: true,
-    },
   ],
+  switchProps: {
+    label: "Paramètre d'affichage",
+  },
 };
 
 export const headerNav: HeaderNavProps = {

yarn.lock

@@ -1174,10 +1174,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dataesr/react-dsfr@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@dataesr/react-dsfr/-/react-dsfr-1.0.2.tgz#1d925c4f8ddee6761385a813e3c5bc67f0bc90dd"
-  integrity sha512-eAmFujCOq86d6ZVFODBRCrKbv9F4vZxEia1KBHn0E6a+ok5hpuGJ/0/Hr4WJ42Dhsr8ug43+XdYVBu6GjInj6Q==
+"@dataesr/react-dsfr@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@dataesr/react-dsfr/-/react-dsfr-1.0.4.tgz#ad6f806a4ff613abd3748ded8bf3571721136373"
+  integrity sha512-I6G3JM1KPy+4KL4qOp0mfjS/kKtpKX11zZbF3JQACOvRc+f2z3mDbA5tPFSr/XNb6xG2ofk4+N2qmbNhCNWSqQ==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@gouvfr/dsfr" "1.3.1"
@@ -12704,11 +12704,6 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
-zustand@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.0.tgz#a5c68fb06bdee9c63ad829de2432635be6d0ce69"
-  integrity sha512-USzVzLGrvZ8VK1/sEsOAmeqa8N7D3OBdZskVaL7DL89Q4QLTYD053iIlZ5KDidyZ+Od80Dttin/f8ZulOLFFDQ==
-
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"