fix: storybook

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:storybook/recommended"]
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended",
+    "plugin:jsx-a11y/recommended"
+  ]
 }

README.md

@@ -57,10 +57,3 @@ yarn
 yarn build
 yarn export
 ```
-
-## Todo
-
-- Ajouter des CSP
-- Husky pour avant de commit faire des verifications
-- Finir la documentation, en mode si vous créez un fichier faut le mettre là, etc.
-- Rajouter une config sur <https://github.com/SocialGouv/linters> un linter pour next 12 et accessibilité plugin

next.config.js

@@ -2,6 +2,18 @@ const { withSentryConfig } = require("@sentry/nextjs");
 
 const { version } = require("./package.json");
 
+const ContentSecurityPolicy = `
+  default-src 'self' *.fabrique.social.gouv.fr;
+  img-src 'self' data: *.fabrique.social.gouv.fr https://dummyimage.com/;
+  script-src 'self' *.fabrique.social.gouv.fr ${
+    process.env.NODE_ENV !== "production" && "'unsafe-eval'"
+  };
+  frame-src 'self' *.fabrique.social.gouv.fr;
+  style-src 'self' 'unsafe-inline';
+  font-src 'self' data: blob:;
+  prefetch-src 'self' *.fabrique.social.gouv.fr;
+`;
+
 /** @type {import('next').NextConfig} */
 const moduleExports = {
   reactStrictMode: true,
@@ -16,4 +28,25 @@ const moduleExports = {
   },
 };
 
-module.exports = withSentryConfig(moduleExports, { silent: true });
+module.exports = {
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "Content-Security-Policy",
+            value: ContentSecurityPolicy.replace(/\n/g, " ").trim(),
+          },
+          {
+            key: "X-Robots-Tag",
+            value: process.env.NEXT_PUBLIC_IS_PRODUCTION_DEPLOYMENT
+              ? "all"
+              : "noindex, nofollow, nosnippet",
+          },
+        ],
+      },
+    ];
+  },
+  ...withSentryConfig(moduleExports, { silent: true }),
+};

package.json

@@ -51,6 +51,7 @@
     "cypress": "^9.4.1",
     "eslint": "8.10.0",
     "eslint-config-next": "12.1.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-storybook": "^0.5.7",
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",

src/components/footer/bottom.tsx

@@ -1,35 +1,59 @@
-import { FooterBottom, FooterCopy, FooterLink } from "@dataesr/react-dsfr";
+import {
+  FooterBottom,
+  FooterCopy,
+  FooterLink,
+  SwitchTheme,
+} from "@dataesr/react-dsfr";
+import { useState } from "react";
 import { FooterBottomSectionProps } from "./type";
 
-export const Bottom = (props: FooterBottomSectionProps): JSX.Element => (
-  <FooterBottom>
-    {props.links.map((link, index) => (
-      <FooterLink key={`${index}-${link.title}`} href={link.href}>
-        {link.title}
-      </FooterLink>
-    ))}
-    <FooterCopy>
-      <p>
-        Sauf mention contraire, tous les contenus de ce site sont sous{" "}
-        <a
-          href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
-          rel="noreferrer"
-          target="_blank"
-        >
-          licence etalab-2.0
-        </a>
-      </p>
-      <p>
-        Version {props.version} (
-        <a
-          target="_blank"
-          href={`${props.repositoryUrl}/tree/${props.commitHash}`}
-          rel="noreferrer"
-        >
-          {props.commitHash.substring(0, 8)}
-        </a>
-        )
-      </p>
-    </FooterCopy>
-  </FooterBottom>
-);
+export const Bottom = (props: FooterBottomSectionProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <FooterBottom>
+      {props.links.map((link, index) => (
+        <FooterLink key={`${index}-${link.title}`} href={link.href}>
+          {link.title}
+        </FooterLink>
+      ))}
+      {props.hasSwitchMode && (
+        <FooterLink onClick={() => setIsOpen(true)} href="/">
+          <span
+            className="fr-fi-theme-fill fr-link--icon-left"
+            aria-controls="fr-theme-modal"
+            data-fr-opened={isOpen}
+          >
+            Paramètres d’affichage
+          </span>
+        </FooterLink>
+      )}
+      <FooterCopy>
+        <p>
+          Sauf mention contraire, tous les contenus de ce site sont sous{" "}
+          <a
+            href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+            rel="noreferrer"
+            target="_blank"
+          >
+            licence etalab-2.0
+          </a>
+        </p>
+        <p>
+          Version {props.version} (
+          <a
+            target="_blank"
+            href={`${props.repositoryUrl}/tree/${props.commitHash}`}
+            rel="noreferrer"
+          >
+            {props.commitHash.substring(0, 8)}
+          </a>
+          )
+        </p>
+      </FooterCopy>
+      {props.hasSwitchMode && (
+        <SwitchTheme isOpen={isOpen} setIsOpen={setIsOpen} />
+      )}
+    </FooterBottom>
+  );
+};

src/components/footer/type.ts

@@ -27,6 +27,7 @@ export type FooterBottomSectionProps = {
   version: string;
   repositoryUrl: string;
   commitHash: string;
+  hasSwitchMode: boolean;
 };
 
 export type FooterTopSectionProps = {

src/components/landing/head.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Head } from "./head";
+
+export default {
+  title: "Header",
+  component: Head,
+} as ComponentMeta<typeof Head>;
+
+const Template: ComponentStory<typeof Head> = args => <Head {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Random title",
+  textLead: "Random text lead",
+  description: "Random description",
+  image: {
+    src: "https://via.placeholder.com/600x400",
+    alt: "Random image",
+  },
+};

src/components/landing/testimonial.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Testimonial } from "./testimonial";
+
+export default {
+  title: "Testimonial",
+  component: Testimonial,
+} as ComponentMeta<typeof Testimonial>;
+
+const Template: ComponentStory<typeof Testimonial> = args => (
+  <Testimonial {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  description: "Random description",
+  image: {
+    src: "https://via.placeholder.com/600x400",
+    alt: "Random image",
+  },
+  link: {
+    href: "https://www.google.com",
+    title: "Random link",
+  },
+};

src/components/landing/tile.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Testimonial } from "./testimonial";
+import { Tile } from "./tile";
+
+export default {
+  title: "Tile",
+  component: Tile,
+} as ComponentMeta<typeof Tile>;
+
+const Template: ComponentStory<typeof Tile> = args => <Tile {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Random title",
+  description: "Random description",
+  image: {
+    src: "https://via.placeholder.com/600x400",
+    alt: "Random image",
+  },
+  href: "https://www.fabrique.social.gouv.fr/",
+};

src/components/landing/tile.tsx

@@ -16,8 +16,10 @@ export const Tile = (props: TileProps): JSX.Element => {
       <div className="fr-card fr-enlarge-link fr-pt-3w">
         <div className="fr-card__body">
           <h2 className="fr-card__title">
-            <Link href={props.href} passHref>
-              <a className="fr-card__link">{props.title}</a>
+            <Link href={props.href}>
+              <a className="fr-card__link" href={props.href}>
+                {props.title}
+              </a>
             </Link>
           </h2>
           <p className="fr-card__desc">{props.description}</p>

src/components/stats/tile.stories.tsx → src/components/stats/index.stories.tsx

@@ -14,7 +14,7 @@ const Template: ComponentStory<typeof StatsTile> = args => (
 export const Default = Template.bind({});
 Default.args = {
   title: "Nombre de visites",
-  stats: "1.000.000"
+  stats: "1.000.000",
 };
 
 export const WithDescription = Template.bind({});

src/config/layout.ts

@@ -168,6 +168,7 @@ export const footerPartnerSection: FooterPartnerSectionProps = {
 };
 
 export const footerBottomSection: FooterBottomSectionProps = {
+  hasSwitchMode: true,
   links: [
     {
       title: "Accessibilité : non conforme",