Ajoute flowbite svelte et popover sur bouton impact budget indisponible

package.json

@@ -21,6 +21,7 @@
     "@leximpact/socio-fiscal-openfisca-json": "^0.0.85",
     "@openfisca/json-model": "^3.0.2",
     "@playwright/test": "^1.28.1",
+    "@popperjs/core": "^2.11.6",
     "@rgossiaux/svelte-headlessui": "^1.0.0-beta.12",
     "@rollup/plugin-yaml": "^4.0.1",
     "@sveltejs/adapter-node": "^1.0.0-next.102",
@@ -37,12 +38,15 @@
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "autoprefixer": "^10.2.5",
+    "classnames": "^2.3.2",
     "d3-scale": "^4.0.0",
     "dedent-js": "^1.0.1",
     "dotenv": "^16.0.0",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "flowbite": "^1.5.5",
+    "flowbite-svelte": "^0.28.11",
     "fs-extra": "^11.1.0",
     "fuse.js": "^6.4.6",
     "iconify-icon": "^1.0.2",

src/routes/+page.svelte

@@ -17,6 +17,8 @@
   import { openModal } from "svelte-modals"
   import type { Writable } from "svelte/store"
 
+  import { Popover } from "flowbite-svelte"
+
   import { browser } from "$app/environment"
   import { goto } from "$app/navigation"
   import { page } from "$app/stores"
@@ -64,6 +66,8 @@
 
   export let data: PageData
 
+  let placement
+
   const billName = getContext("billName") as Writable<string | undefined>
   const budgetSimulation = getContext("budgetSimulation") as Writable<
     BudgetSimulation | undefined
@@ -1079,22 +1083,42 @@
           <div>
             <h2 class="flex">
               <div
-                class="flex h-14 items-center px-3  text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                class="flex h-14 items-center border-b-4  border-black px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
               >
                 <span class="pb-2 font-bold tracking-wide text-black">
                   Impact cas type
                 </span>
               </div>
+
               <div
+                id="placement-bottom"
+                on:mouseenter={() => (placement = "bottom")}
                 class="flex h-14 items-center  px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
               >
-                <span
-                  title="Le calcul budgétaire n'est pas disponible pour ce dispositif"
-                  class="pb-2 tracking-wide text-gray-300"
-                >
+                <span class="pb-2 tracking-wide text-gray-300">
                   Impact budgétaires
                 </span>
               </div>
+
+              <Popover
+                triggeredBy="[id^='placement-']"
+                {placement}
+                class="m-10 w-80 text-sm font-light shadow-2xl"
+                title="Impact budgétaire indisponible"
+              >
+                <span class="text-black">
+                  Le calcul des impacts budgétaires du dispositif «&nbsp;{displayMode.parametersVariableName}&nbsp;»
+                  n'est pas encore disponible.
+                  <span class="font-normal"
+                    >Ce sujet vous intéresse ? Écrivez-nous à
+                    <a
+                      class="link"
+                      href="mailto:leximpact@assemblee-nationale.fr"
+                      >leximpact@assemblee-nationale.fr</a
+                    ></span
+                  >
+                </span>
+              </Popover>
             </h2>
           </div>
         {/if}
@@ -1111,7 +1135,7 @@
               </h3>
               <div class="my-5 flex justify-center">
                 <div
-                  class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-gray-300 hover:text-black focus:outline-none md:mx-0"
+                  class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 px-4 text-lg uppercase text-white shadow-md hover:bg-blue-900 focus:outline-none md:mx-0"
                 >
                   <a
                     href={`/auth/login?redirect=${encodeURIComponent(
@@ -1153,13 +1177,13 @@
           </h3>
           <div class="my-5 flex justify-center">
             <div
-              class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-gray-300 hover:text-black focus:outline-none md:mx-0"
+              class="mx-6 grow-0 items-center rounded-lg bg-le-bleu py-2 text-lg uppercase text-white shadow-md hover:bg-blue-900 focus:outline-none md:mx-0"
             >
               <a
                 href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
                 title="Vers le simulateur CSG Budget de la Sécurité sociale"
               >
-                <div class="flex h-12 items-center px-4 py-1">
+                <div class="flex h-10 items-center px-4 py-1">
                   <PictoBudgetEtat />
                   <span class="pl-1 text-lg"> Simulateur budget CSG </span>
                   <iconify-icon class="ml-2 h-4 w-4" icon="ri-share-box-line" />

tailwind.config.cjs

@@ -3,8 +3,12 @@ const typography = require("@tailwindcss/typography")
 const colors = require("tailwindcss/colors")
 
 const config = {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+  content: ["./src/**/*.{html,js,svelte,ts}", "./src/**/*.{html,js,svelte,ts}",
+  "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",],
   plugins: [
+    [
+      require('flowbite/plugin')
+    ],
     typography,
     function ({ addUtilities }) {
       const extendLineThrough = {