style : use dsfr button

annuaire-entreprises-data-gouv-fr · Apr 9, 2024 · ddb94bb · ddb94bb
1 parent 1a80d70
commit ddb94bb
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 122 deletions.
diff --git a/...fault)/formulaire/supprimer-donnees-personnelles-entreprise/_components/request-state.tsx b/...fault)/formulaire/supprimer-donnees-personnelles-entreprise/_components/request-state.tsx
@@ -66,22 +66,25 @@ export function RequestState({ hidePersonalDataRequest }: IProps) {
       ) : (
         throwUnreachableCaseError(hidePersonalDataRequest)
       )}
-      <p role="list" className="fr-mt-3w layout-left">
-        <ButtonLink
-          role="listitem"
-          to="/formulaire/supprimer-donnees-personnelles-entreprise"
-        >
-          Faire une autre demande
-        </ButtonLink>
-        &nbsp;
-        <ButtonLink
-          role="listitem"
-          to="/api/auth/france-connect/logout?pathFrom=%2Fformulaire%2Fsupprimer-donnees-personnelles-entreprise"
-          alt
-        >
-          Me déconnecter
-        </ButtonLink>
-      </p>
+      <ul className="fr-btns-group fr-btns-group--inline-md fr-btns-group--center">
+        <li>
+          <ButtonLink
+            role="listitem"
+            to="/formulaire/supprimer-donnees-personnelles-entreprise"
+          >
+            Faire une autre demande
+          </ButtonLink>
+        </li>
+        <li>
+          <ButtonLink
+            role="listitem"
+            to="/api/auth/france-connect/logout?pathFrom=%2Fformulaire%2Fsupprimer-donnees-personnelles-entreprise"
+            alt
+          >
+            Me déconnecter
+          </ButtonLink>
+        </li>
+      </ul>
     </>
   );
 }
diff --git a/components-ui/button/index.tsx b/components-ui/button/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import React, { MouseEventHandler, PropsWithChildren } from 'react';
-import styles from './style.module.css';
 type IProps = {
   role?: string;
   small?: boolean;
@@ -23,13 +22,16 @@ const ButtonLink: React.FC<PropsWithChildren<IProps>> = ({
   nofollow = false,
   onClick = () => {},
 }) => (
-  <div
-    className={`${styles['button-link']} ${alt ? styles.alt : ''} ${
-      small ? styles.small : ''
-    }`}
-  >
+  <>
     {!to ? (
-      <button role={role} type="submit" onClick={onClick}>
+      <button
+        role={role}
+        type="submit"
+        onClick={onClick}
+        className={`fr-btn ${alt ? ' fr-btn--secondary ' : ''} ${
+          small ? ' fr-btn--sm ' : ''
+        }`}
+      >
         {children}
       </button>
     ) : (
@@ -41,12 +43,14 @@ const ButtonLink: React.FC<PropsWithChildren<IProps>> = ({
           (nofollow ? 'nofollow' : '')
         }
         href={to}
-        className="no-style-link"
+        className={`fr-btn ${alt ? ' fr-btn--secondary ' : ''} ${
+          small ? ' fr-btn--sm ' : ''
+        }`}
       >
         {children}
       </a>
     )}
-  </div>
+  </>
 );
 
 export default ButtonLink;
diff --git a/components-ui/button/style.module.css b/components-ui/button/style.module.css
diff --git a/components/error-explanations/index.tsx b/components/error-explanations/index.tsx
@@ -11,13 +11,17 @@ const ErrorTemplate: React.FC<PropsWithChildren<{}>> = ({ children }) => (
       nous puissions trouver la panne 🕵️‍♀️.
     </p>
     <p>En attendant, vous pouvez toujours :</p>
-    <div className="layout-left">
-      <ButtonLink to="/faq" alt>
-        Consulter notre page d’aide
-      </ButtonLink>
-      <span>&nbsp;</span>
-      <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
-    </div>
+    <ul className="fr-btns-group fr-btns-group--inline-md">
+      <li>
+        <ButtonLink to="/faq" alt>
+          Consulter notre page d’aide
+        </ButtonLink>
+      </li>
+      <li>
+        <span>&nbsp;</span>
+        <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
+      </li>
+    </ul>
   </div>
 );
 

diff --git a/components/immatriculations/rne.tsx b/components/immatriculations/rne.tsx
@@ -58,33 +58,31 @@ const ImmatriculationLinks = ({
           <INPI />
           &nbsp;:
         </p>
-        <div className="layout-center">
-          <ButtonLink
-            nofollow={true}
-            to={`/justificatif-immatriculation-pdf/${uniteLegale.siren}`}
-          >
-            <Icon slug="download">
-              Télécharger le justificatif d’immatriculation
-            </Icon>
-          </ButtonLink>
-          <div className="separator" />
-          <ButtonLink
-            target="_blank"
-            to={
-              siteLink || `${routes.rne.portail.entreprise}${uniteLegale.siren}`
-            }
-            alt
-          >
-            ⇢ Voir la fiche sur le site de l’INPI
-          </ButtonLink>
-        </div>
+        <ul className="fr-btns-group fr-btns-group--inline-md fr-btns-group--center">
+          <li>
+            <ButtonLink
+              nofollow={true}
+              to={`/justificatif-immatriculation-pdf/${uniteLegale.siren}`}
+            >
+              <Icon slug="download">
+                Télécharger le justificatif d’immatriculation
+              </Icon>
+            </ButtonLink>
+          </li>
+          <li>
+            <ButtonLink
+              target="_blank"
+              to={
+                siteLink ||
+                `${routes.rne.portail.entreprise}${uniteLegale.siren}`
+              }
+              alt
+            >
+              ⇢ Voir la fiche sur le site de l’INPI
+            </ButtonLink>
+          </li>
+        </ul>
       </PrintNever>
-      <style jsx>{`
-        .separator {
-          width: 10px;
-          height: 10px;
-        }
-      `}</style>
     </>
   );
 };

diff --git a/pages/erreur/acces-refuse.tsx b/pages/erreur/acces-refuse.tsx
@@ -17,13 +17,16 @@ const Forbidden: NextPageWithLayout = () => {
         robot et que le problème se reproduit, vous pouvez nous contacter via
         notre FAQ.
       </p>
-      <div className="layout-left">
-        <ButtonLink to="/faq" alt>
-          Accéder à la FAQ
-        </ButtonLink>
-        <span>&nbsp;</span>
-        <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
-      </div>
+      <ul className="fr-btns-group fr-btns-group--inline-md">
+        <li>
+          <ButtonLink to="/faq" alt>
+            Accéder à la FAQ
+          </ButtonLink>
+        </li>
+        <li>
+          <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
+        </li>
+      </ul>
     </>
   );
 };

diff --git a/pages/erreur/trop-de-demandes.tsx b/pages/erreur/trop-de-demandes.tsx
@@ -35,13 +35,16 @@ const TooManyRequest: NextPageWithLayout = () => {
       <p>
         Si le problème se reproduit, vous pouvez nous contacter via notre FAQ.
       </p>
-      <div className="layout-left">
-        <ButtonLink to="/faq" alt>
-          Accéder à la FAQ
-        </ButtonLink>
-        <span>&nbsp;</span>
-        <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
-      </div>
+      <ul className="fr-btns-group fr-btns-group--inline-md">
+        <li>
+          <ButtonLink to="/faq" alt>
+            Accéder à la FAQ
+          </ButtonLink>
+        </li>
+        <li>
+          <ButtonLink to="/">Retourner à la page d’accueil</ButtonLink>
+        </li>
+      </ul>
     </>
   );
 };