Ajout de la partie référence législative

src/lib/components/variables/VariableHeader.svelte

@@ -5,12 +5,15 @@
   import type { Decomposition } from "$lib/decompositions"
   import type { DisplayMode } from "$lib/displays"
   import { newSimulationUrl } from "$lib/urls"
+  import Icon from "@iconify/svelte"
 
   export let decomposition: Decomposition | undefined
   export let displayMode: DisplayMode
   export let variable: Variable | undefined
 
-  const dateFormatter = new Intl.DateTimeFormat("fr-FR", { dateStyle: "full" })
+  const dateFormatter = new Intl.DateTimeFormat("fr-FR", {
+    dateStyle: "medium",
+  })
 
   $: lastReview = decomposition?.last_review ?? variable?.last_review
 
@@ -126,45 +129,70 @@
   {/if}
 </div>
 
+<!--Description du dispositif-->
 {#if referencesByInstant !== undefined}
   <!--Add variable references as described in openfisca references + decomposition customization and order them by date. -->
   {#each Object.entries(referencesByInstant).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
     {#each references as { href, note, title }}
       <article class="mr-4">
+        <div class="mb-4">
           {#if note !== undefined}
-          <div class="mb-4 font-serif text-sm leading-normal text-black">
-            <p class="break-words">
+            <span
+              class="break-words font-serif text-sm leading-normal text-black"
+            >
               {@html note}
-            </p>
-          </div>
+            </span>
           {/if}
           {#if instant !== "0001-01-01"}
-          <footer class="mb-6 text-right text-xs text-black">
+            <span class="mb-6 text-sm text-black">
               {#if href === undefined}
                 {#if title !== undefined}
                   <span>{title}</span>
                 {/if}
               {:else}
-              <a class="link text-black" {href} target="_blank"
-                ><span class="underline">{title ?? href}</span>
-                <!--Material Icon - Open in a New-->
-                <svg
-                  class="inline h-4 w-4 fill-current pb-1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  height="18px"
-                  viewBox="0 0 24 24"
-                  width="18px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                  /></svg
-                >
+                <a class="link text-black" {href} target="_blank">
+                  {title ?? href}
+                  <span class="text-xs"
+                    >(consulté le {dateFormatter.format(new Date(instant))})
+                  </span><Icon
+                    class="ml-0.5 inline h-3 w-3"
+                    icon="ri-share-box-fill"
+                  />
                 </a>
               {/if}
-            <span>(consulté le {dateFormatter.format(new Date(instant))})</span>
-          </footer>
+            </span>
           {/if}
+        </div>
       </article>
     {/each}
   {/each}
 {/if}
+
+<!--Référence législative du dispositif-->
+{#if referencesByInstant !== undefined}
+  <!--Add variable references as described in openfisca references + decomposition customization and order them by date. -->
+  {#each Object.entries(referencesByInstant).sort( ([instant1], [instant2]) => instant2.localeCompare(instant1), ) as [instant, references]}
+    <div class="mr-4 mb-4 rounded-sm bg-le-gris-dispositif-ultralight p-2">
+      {#each references as { href, note, title }}
+        <ul class="text-xs">
+          <li>
+            {#if href === undefined}
+              {#if title !== undefined}
+                <span>{title}</span>
+              {/if}
+            {:else}
+              <a class="link text-black" {href} target="_blank"
+                ><span class="link flex items-center">
+                  <Icon
+                    class="mr-1 h-4 w-4"
+                    icon="ri-file-text-line"
+                  />{title ?? href}</span
+                >
+              </a>
+            {/if}
+          </li>
+        </ul>
+      {/each}
+    </div>
+  {/each}
+{/if}

src/lib/components/variables/VariableReferredScaleParameter.svelte

@@ -3,6 +3,7 @@
   import { scaleByInstantFromBrackets } from "@openfisca/json-model"
   import { getContext } from "svelte"
   import type { Writable } from "svelte/store"
+  import Icon from "@iconify/svelte"
 
   import type { RequestedCalculationByName } from "$lib/calculations"
   import { requestCalculation } from "$lib/calculations"
@@ -151,7 +152,7 @@
                 />
               </svg>
               <span
-                class="pl-2"
+                class="pl-1"
                 title="La dernière relecture date du {dateFormatter.format(
                   new Date(lastReviewOrChange),
                 )}">Vérifié</span
@@ -187,22 +188,13 @@
       <p class="pb-2 text-sm">
         Barème depuis le {billLatestInstantSplit[1]}/{billLatestInstantSplit[0]}
       </p>
-      <ul class="text-sm">
+      <ul class="text-xs">
         {#each billReferences as { href, note, title }}
-          <li class="text-xs">
+          <li>
             {#if href === undefined}{title}{:else}
-              <a class="link" {href} target="_blank">
-                <!--Material UI Icon Assignment-->
-                <svg
-                  class="inline h-4 w-4 fill-current"
-                  height="24px"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0V0z" fill="none" /><path
-                    d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
-                  /></svg
-                >{title ?? "Source"}</a
+              <a class="link flex items-center" {href} target="_blank">
+                <Icon class="mr-1 h-4 w-4" icon="ri-file-text-line" />{title ??
+                  "Source"}</a
               >{/if}
             {#if note}
               <p>{note}</p>

src/lib/components/variables/VariableReferredValueParameter.svelte

@@ -8,6 +8,7 @@
   import { labelFromUnit } from "$lib/parameters"
   import type { ParametricReform, ValueParameterReform } from "$lib/reforms"
   import { ParameterReformChangeType } from "$lib/reforms"
+  import Icon from "@iconify/svelte"
 
   import VariableReferredParameterHeader from "./VariableReferredParameterHeader.svelte"
   import VariableReferredValueEdit from "./VariableReferredValueEdit.svelte"
@@ -159,7 +160,7 @@
               />
             </svg>
             <span
-              class="pl-2"
+              class="pl-1"
               title="La dernière relecture date du {dateFormatter.format(
                 new Date(lastReviewOrChange),
               )}">Vérifié</span
@@ -197,22 +198,10 @@
       <ul class="text-xs">
         {#each billReferences as { href, note, title }}
           <li>
-            {#if href === undefined}{title}{:else}<a
-                class="link"
-                {href}
-                target="_blank"
-              >
-                <!--Material UI Icon Assignment-->
-                <svg
-                  class="inline h-4 w-4 fill-current"
-                  height="24px"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0V0z" fill="none" /><path
-                    d="M7 15h7v2H7zm0-4h10v2H7zm0-4h10v2H7zm12-4h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"
-                  /></svg
-                >{title ?? "Référence législative sans titre"}</a
+            {#if href === undefined}{title}{:else}
+              <a class="link flex items-center" {href} target="_blank">
+                <Icon class="mr-1 h-4 w-4" icon="ri-file-text-line" />{title ??
+                  "Référence législative sans titre"}</a
               >{/if}
             {#if note}
               <p>{note}</p>