npm - @cnamts/synapse - Versions diffs - 1.0.2 → 1.0.4 - Mend

@cnamts/synapse 1.0.2 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (814) hide show

package/src/components/ExternalLinks/tests/__snapshots__/ExternalLinks.spec.ts.snap CHANGED Viewed

@@ -1,26 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
+    aria-controls="sy-external-links-menu-v-0"
     aria-expanded="true"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(0);
+      position: absolute;
+      flex-direction: row;
+      top: 0px;
+      bottom: auto;
+      left: 0px;
+      right: auto;
+      z-index: 4;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -32,7 +45,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
     >
       <span class="
         mr-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -56,18 +69,17 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
   <!-- teleport start -->
   <div
     class="
+      sy-external-links
+      sy-external-links--left
       v-locale--is-ltr
       v-menu
       v-overlay
       v-overlay--absolute
       v-overlay--active
       v-theme--light
-      vd-external-links
-      vd-external-links--left
     "
-    id="external-link-btn"
+    id="sy-external-links-menu-v-0"
     style="z-index: 4;"
-    tile="true"
   >
     <transition-stub
       appear="true"
@@ -82,191 +94,204 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
-        style="--v-overlay-anchor-origin: top right; transform-origin: bottom right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;"
+        style="
+          --v-overlay-anchor-origin: top right;
+          transform-origin: bottom right;
+          top: 12px;
+          left: 12px;
+          min-width: 0px;
+          max-width: 1000px;
+          max-height: 744px;
+        "
       >
-        <div
+        <ul
           class="
             elevation-3
             py-0
-            v-list
-            v-list--density-default
-            v-list--one-line
-            v-theme--light
-            vd-external-links-list
+            sy-external-links-list
           "
-          role="listbox"
+          role="toolbar"
           tabindex="0"
         >
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.ameli.fr"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.ameli.fr"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>ameli.fr</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
+            <!---->
-          <!---->
+            <!---->
+            </a>
+          </li>
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.github.com"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">ameli.fr</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.github.com"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>Github</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
-          <!---->
+            <!---->
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">Github</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.twitter.com"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+            <!---->
+            </a>
+          </li>
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.twitter.com"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!---->
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>Twitter</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">Twitter</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-        </div>
+            <!---->
+            <!---->
+            </a>
+          </li>
+        </ul>
       </div>
     </transition-stub>
   </div>
@@ -275,21 +300,22 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
 `;
 exports[`ExternalLinks > renders correctly 1`] = `
-<div id="external-link-btn">
+<div>
   <v-menu-stub
     activatorprops="[object Object]"
     attach="true"
     class="
-      vd-external-links
-      vd-external-links--left
+      sy-external-links
+      sy-external-links--left
     "
     closedelay="250"
     closeonback="true"
     closeoncontentclick="true"
     contained="false"
     disabled="false"
+    disableinitialfocus="false"
     eager="false"
-    id="external-link-btn"
+    id="sy-external-links-menu-v-0"
     location="bottom"
     locationstrategy="connected"
     modelvalue="false"
@@ -302,7 +328,6 @@ exports[`ExternalLinks > renders correctly 1`] = `
     scrim="false"
     scrollstrategy="reposition"
     submenu="false"
-    tile="true"
     transition="fade-transition"
     zindex="4"
   ></v-menu-stub>
@@ -310,26 +335,39 @@ exports[`ExternalLinks > renders correctly 1`] = `
 `;
 exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
+    aria-controls="sy-external-links-menu-v-0"
     aria-expanded="true"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(0);
+      position: fixed;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -341,7 +379,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -365,18 +403,17 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
   <!-- teleport start -->
   <div
     class="
+      sy-external-links
+      sy-external-links--right
       v-locale--is-ltr
       v-menu
       v-overlay
       v-overlay--absolute
       v-overlay--active
       v-theme--light
-      vd-external-links
-      vd-external-links--right
     "
-    id="external-link-btn"
+    id="sy-external-links-menu-v-0"
     style="z-index: 24;"
-    tile="true"
   >
     <transition-stub
       appear="true"
@@ -391,191 +428,204 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
-        style="--v-overlay-anchor-origin: bottom right; transform-origin: top right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;"
+        style="
+          --v-overlay-anchor-origin: bottom right;
+          transform-origin: top right;
+          top: 12px;
+          left: 12px;
+          min-width: 0px;
+          max-width: 1000px;
+          max-height: 744px;
+        "
       >
-        <div
+        <ul
           class="
             elevation-3
             py-0
-            v-list
-            v-list--density-default
-            v-list--one-line
-            v-theme--light
-            vd-external-links-list
+            sy-external-links-list
           "
-          role="listbox"
+          role="toolbar"
           tabindex="0"
         >
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.ameli.fr"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.ameli.fr"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>ameli.fr</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
-          <!---->
+            <!---->
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">ameli.fr</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.github.com"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+            <!---->
+            </a>
+          </li>
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.github.com"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!---->
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>Github</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">Github</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-          <a
-            class="
-              rounded-0
-              v-list-item
-              v-list-item--density-default
-              v-list-item--link
-              v-list-item--one-line
-              v-list-item--variant-text
-              v-theme--light
-            "
-            href="https://www.twitter.com"
-            rel="noopener noreferrer"
-            tabindex="-2"
-            target="_blank"
-          ><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
-          <!---->
-            <div
-            class="v-list-item__content"
-            data-no-activator=""
-          >
+            <!---->
-          <!---->
+            <!---->
+            </a>
+          </li>
+          <li>
+            <a
+              class="
+                py-2
+                rounded-0
+                sy-external-links-list-item
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--flat
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              href="https://www.twitter.com"
+              rel="noopener noreferrer"
+              tabindex="-1"
+              target="_blank"
+            ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-          <!---->
-              <div class="
-            d-flex
-            flex-row
-            justify-space-between
-          ">
-                <div class="v-list-item-title">Twitter</div><i
-            aria-hidden="true"
-            class="
-              0
-              0
-              0,0
-              0,0
-              21,19V12H19V19Z
-              3,3.9
-              3,5V19A2,2
-              5,21H19A2,2
-              M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
-              mdi
-              notranslate
-              v-icon
-              v-icon--size-default
-              v-theme--light
-            "
-            style="color: rgba(0, 0, 0, .54); caret-color: rgba(0, 0, 0, .54);"
-          ></i>
-              </div>
-            </div>
-          <!---->
-          </a>
-        </div>
+            <!----><span
+              class="v-btn__content"
+              data-no-activator=""
+            ><div class="
+              align-center
+              d-flex
+              h-100
+              justify-space-between
+              w-100
+            "><div>Twitter</div><i
+              aria-hidden="true"
+              class="
+                0
+                0
+                0,0
+                0,0
+                21,19V12H19V19Z
+                3,3.9
+                3,5V19A2,2
+                5,21H19A2,2
+                M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3
+                mdi
+                notranslate
+                v-icon
+                v-icon--size-large
+                v-theme--light
+              "
+              style="
+                color: rgba(0, 0, 0, .54);
+                caret-color: rgba(0, 0, 0, .54);
+              "
+            ></i></div></span>
+            <!---->
+            <!---->
+            </a>
+          </li>
+        </ul>
       </div>
     </transition-stub>
   </div>
@@ -584,26 +634,38 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
 `;
 exports[`ExternalLinks > slides on hover or focus 1`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(calc(100% - 48px));
+      position: absolute;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -615,7 +677,7 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -641,26 +703,38 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
 `;
 exports[`ExternalLinks > slides on hover or focus 2`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(0);
+      position: absolute;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -672,7 +746,7 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -698,26 +772,38 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
 `;
 exports[`ExternalLinks > slides on hover or focus 3`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(calc(100% - 48px));
+      position: absolute;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -729,7 +815,7 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -755,26 +841,38 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
 `;
 exports[`ExternalLinks > slides on hover or focus 4`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(0);
+      position: absolute;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -786,7 +884,7 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes
@@ -812,26 +910,38 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
 `;
 exports[`ExternalLinks > slides on hover or focus 5`] = `
-<div id="external-link-btn">
+<div>
   <button
-    aria-controls="external-link-btn"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-label="external-link-btn"
-    aria-owns="external-link-btn"
+    aria-label="Menu : Consulter les données externes"
     class="
       d-flex
       px-3
       rounded-0
+      sy-external-links-btn
       v-btn
       v-btn--density-default
       v-btn--elevated
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
-      vd-external-links-btn
     "
-    style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;"
+    style="
+      background-color: #0c419a;
+      color: #fff;
+      caret-color: #fff;
+      min-height: 48px;
+      min-width: 328px;
+      transform: translateX(calc(100% - 48px));
+      position: absolute;
+      flex-direction: row-reverse;
+      top: auto;
+      bottom: 0px;
+      left: auto;
+      right: 0px;
+      z-index: 5;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -843,7 +953,7 @@ exports[`ExternalLinks > slides on hover or focus 5`] = `
     >
       <span class="
         ml-3
-        vd-external-links-btn-text
+        sy-external-links-btn-text
         white--text
       ">
         Consulter les données externes