✨(header) add Gaufre button

add the button from @gouvfr-lasuite/integration to easily switch between La Suite numérique services
numerique-gouv · May 21, 2024 · f5c0c53 · f5c0c53
1 parent d7ea1ab
commit f5c0c53
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "format:fix": "prettier --write \"**/*.{css,ts,tsx,md,json,cjs,js}\""
   },
   "dependencies": {
+    "@gouvfr-lasuite/integration": "1.0.1",
     "classnames": "2.5.1",
     "next": "14.1.0",
     "react": "18.2.0",

diff --git a/src/components/LaGaufre.tsx b/src/components/LaGaufre.tsx
@@ -0,0 +1,16 @@
+import { Gaufre } from '@gouvfr-lasuite/integration'
+import '@gouvfr-lasuite/integration/dist/css/gaufre.css'
+import Script from 'next/script'
+
+export const LaGaufre = () => {
+  return (
+    <>
+      <Script
+        src="https://integration.lasuite.numerique.gouv.fr/api/v1/gaufre.js"
+        strategy="lazyOnload"
+        id="lasuite-gaufre-script"
+      />
+      <Gaufre />
+    </>
+  )
+}
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { LaGaufre } from '@/components/LaGaufre'
 
 /**
  * NavBar Component
@@ -9,23 +10,28 @@ import Link from 'next/link'
 export const NavBar = () => (
   <header className="bg-white navbar-shadow">
     <div className="fr-container">
-      <div className="-mx-4 lg:w-fit lg:py-2">
-        <div className="sm:flex items-center fr-enlarge-link hover:bg-white-1 rounded transition ease-in-out delay-50 duration-300">
-          <p className="p-4 logo text-[0.7875rem] font-bold leading-[1.0317460317em] tracking-[-.01em] uppercase align-middle inline-block">
-            Gouvernement
-          </p>
-          <p className="p-4 border-t border-grey-4 sm:border-0">
-            <Link
-              className="block text-xl"
-              href="/"
-              aria-label="Accueil - lasuite.numerique.gouv.fr"
-            >
-              <strong>lasuite.numerique.gouv.</strong>
-              <i>fr</i>
-            </Link>
-            <span className="block text-xs sm:text-sm text-black-1">
-              Un État efficace, simple, souverain grâce au numérique
-            </span>
+      <div className="-mx-4 lg:py-2">
+        <div className="flex sm:items-center">
+          <div className="sm:flex lg:w-fit grow lg:grow-0 items-center fr-enlarge-link hover:bg-white-1 rounded transition ease-in-out delay-50 duration-300">
+            <p className="p-4 logo text-[0.7875rem] font-bold leading-[1.0317460317em] tracking-[-.01em] uppercase align-middle inline-block">
+              Gouvernement
+            </p>
+            <p className="p-4 border-t border-grey-4 sm:border-0">
+              <Link
+                className="block text-xl"
+                href="/"
+                aria-label="Accueil - lasuite.numerique.gouv.fr"
+              >
+                <strong>lasuite.numerique.gouv.</strong>
+                <i>fr</i>
+              </Link>
+              <span className="block text-xs sm:text-sm text-black-1">
+                Un État efficace, simple, souverain grâce au numérique
+              </span>
+            </p>
+          </div>
+          <p className="absolute top-0 right-0 sm:relative z-10 p-4 ml-auto">
+            <LaGaufre />
           </p>
         </div>
       </div>

diff --git a/yarn.lock b/yarn.lock
@@ -51,6 +51,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
   integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
+"@gouvfr-lasuite/[email protected]":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.1.tgz#26340c3c281fdcd13ea95bda08aee551d6b441e7"
+  integrity sha512-w1roGR5rG7RFoxmnvs0T1vg3lxB9AHws1Mmio6c3QsIR7GdltHC1HyHI/vZVq5V5TSoyLanlU4qG2lSi5uUnGw==
+
 "@humanwhocodes/config-array@^0.11.13":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
@@ -2256,8 +2261,16 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -2317,8 +2330,14 @@ string.prototype.trimstart@^1.0.7:
     define-properties "^1.2.0"
     es-abstract "^1.22.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  name strip-ansi-cjs
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==