gaufre: new variant props to impact sizing

this is done to integrate the button more easily in an app using the DSFR heading
numerique-gouv · May 15, 2024 · 4b64642 · 4b64642
1 parent d741b05
commit 4b64642
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 13 deletions.
diff --git a/packages/integration/src/components/Gaufre.tsx b/packages/integration/src/components/Gaufre.tsx
@@ -1,11 +1,27 @@
 import { useTranslate } from "../i18n/useTranslate"
 
-export const Gaufre = () => {
+export type Props = {
+  /**
+   * Variantes d'affichage :
+   *
+   * "responsive": Affiche un bouton plus petit sur écran mobile/tablette, plus grand sur écran plus large.
+   * "small": Affiche un bouton plus petit.
+   */
+  variant?: "responsive" | "small"
+}
+
+const variantClasses = {
+  responsive: "lasuite-gaufre-btn--responsive",
+  small: "lasuite-gaufre-btn--small",
+}
+
+export const Gaufre = ({ variant }: Props) => {
   const { t } = useTranslate()
+  const variantClass = !!variant ? variantClasses[variant] : ""
   return (
     <button
       type="button"
-      className="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
+      className={`lasuite-gaufre-btn ${variantClass} lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn`}
       title={t("gaufre.label")}
     >
       {t("gaufre.label")}

diff --git a/packages/integration/src/dev/DsfrHeader.tsx b/packages/integration/src/dev/DsfrHeader.tsx
@@ -1,9 +1,13 @@
-import { ReactNode } from "react"
+import "@gouvfr/dsfr/dist/core/core.module"
+import "@gouvfr/dsfr/dist/component/navigation/navigation.module"
+import "@gouvfr/dsfr/dist/component/modal/modal.module"
+import "@gouvfr/dsfr/dist/component/header/header.module"
+import { Gaufre } from "../components/Gaufre"
 
 /**
  * This component is there to test showing the Gaufre button in a classic DSFR header
  */
-export const DsfrHeader = ({ actions }: { actions: Array<ReactNode> }) => {
+export const DsfrHeader = () => {
   return (
     <header role="banner" className="fr-header">
       <div className="fr-header__body">
@@ -17,6 +21,19 @@ export const DsfrHeader = ({ actions }: { actions: Array<ReactNode> }) => {
                     officiel
                   </p>
                 </div>
+                <div className="fr-header__navbar">
+                  <Gaufre variant="small" />
+                  <button
+                    className="fr-btn--menu fr-btn"
+                    data-fr-opened="false"
+                    aria-controls="modal-499"
+                    aria-haspopup="menu"
+                    id="button-500"
+                    title="Menu"
+                  >
+                    Menu
+                  </button>
+                </div>
               </div>
               <div className="fr-header__service">
                 <a
@@ -34,19 +51,27 @@ export const DsfrHeader = ({ actions }: { actions: Array<ReactNode> }) => {
               <div className="fr-header__tools-links">
                 <ul className="fr-btns-group">
                   <li>
-                    <a className="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
+                    <a className="fr-btn fr-icon-add-circle-line" href="#">
                       Créer un espace
                     </a>
                   </li>
-                  {actions.map((action, i) => (
-                    <li key={i}>{action}</li>
-                  ))}
+                  <li>
+                    <Gaufre variant="small" />
+                  </li>
                 </ul>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div className="fr-header__menu fr-modal" id="modal-499" aria-labelledby="button-500">
+        <div className="fr-container">
+          <button className="fr-btn--close fr-btn" aria-controls="modal-499" title="Fermer">
+            Fermer
+          </button>
+          <div className="fr-header__menu-links"> </div>
+        </div>
+      </div>
     </header>
   )
 }
diff --git a/packages/integration/src/dev/dev.tsx b/packages/integration/src/dev/dev.tsx
@@ -115,7 +115,7 @@ const routes = [
     label: "Gaufre (header DSFR)",
     component: (
       <StylesStandalone type="gaufre">
-        <DsfrHeader actions={[<Gaufre />]} />
+        <DsfrHeader />
         <div className="fr-container fr-p-4w">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
@@ -157,7 +157,6 @@ const routes = [
       <DarkTheme>
         <StylesGaufre>
           <div
-            data-fr-scheme="dark"
             style={{
               margin: "2rem auto",
               width: 800,

diff --git a/packages/integration/src/styles/gaufre.css b/packages/integration/src/styles/gaufre.css
@@ -36,16 +36,14 @@
   font-size: 1.125rem !important;
   line-height: 1.75rem !important;
   min-height: 3rem !important;
-  padding: 0.5rem 1.5rem !important;
+  padding: 0.5rem !important;
   background-color: transparent !important;
   color: #000091 !important;
   box-shadow: inset 0 0 0 1px #ddd !important;
   overflow: hidden !important;
   white-space: nowrap !important;
   max-width: 3rem !important;
   max-height: 3rem !important;
-  padding-left: 0.5rem !important;
-  padding-right: 0.5rem !important;
 }
 
 [data-fr-scheme="dark"] .lasuite-gaufre-btn--vanilla {
@@ -67,6 +65,28 @@
   --icon-size: 2rem !important;
 }
 
+.lasuite-gaufre-btn--vanilla.lasuite-gaufre-btn--small {
+  min-height: 2.5rem !important;
+  max-width: 2.5rem !important;
+  max-height: 2.5rem !important;
+}
+
+.lasuite-gaufre-btn--vanilla.lasuite-gaufre-btn--small::before {
+  --icon-size: 1.5rem !important;
+}
+
+@media screen and (max-width: 991px) {
+  .lasuite-gaufre-btn--vanilla.lasuite-gaufre-btn--responsive {
+    min-height: 2.5rem !important;
+    max-width: 2.5rem !important;
+    max-height: 2.5rem !important;
+  }
+
+  .lasuite-gaufre-btn--vanilla.lasuite-gaufre-btn--responsive::before {
+    --icon-size: 1.5rem !important;
+  }
+}
+
 .lasuite-gaufre-btn--vanilla:hover,
 .lasuite-gaufre-btn--vanilla:focus-visible {
   background-color: #f6f6f6 !important;