@cnamts/synapse 0.0.13-alpha → 0.0.14-alpha

package/src/components/FilterSideBar/tests/__snapshots__/FilterSideBar.spec.ts.snap

@@ -1,39 +1,168 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FilterSideBar > renders correctly 1`] = `
-"<div class="v-application v-theme--light v-layout v-layout--full-height v-locale--is-ltr">
+<div class="
+  v-application
+  v-layout
+  v-layout--full-height
+  v-locale--is-ltr
+  v-theme--light
+">
   <div class="v-application__wrap">
-    <div data-v-6c7d1f34="" class="sy-filters-side-bar"><button data-v-6c7d1f34="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-text px-8 py-3"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><!--v-if--> Filtres <i data-v-6c7d1f34="" class="M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z mdi v-icon notranslate v-theme--light v-icon--size-small ml-2" aria-hidden="true"></i></span>
+    <div class="sy-filters-side-bar">
+      <button
+        class="
+          px-8
+          py-3
+          text-primary
+          v-btn
+          v-btn--density-default
+          v-btn--size-large
+          v-btn--variant-text
+          v-theme--light
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <!-- v-if -->
+          Filtres
+          <i
+            aria-hidden="true"
+            class="
+              M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z
+              mdi
+              ml-2
+              notranslate
+              v-icon
+              v-icon--size-small
+              v-theme--light
+            "
+          ></i>
+        </span>
         <!---->
         <!---->
       </button>
-      <nav class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--rail v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile rounded-0 elevation-6" style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;" data-v-6c7d1f34="">
+      <nav
+        class="
+          elevation-6
+          rounded-0
+          v-navigation-drawer
+          v-navigation-drawer--mobile
+          v-navigation-drawer--rail
+          v-navigation-drawer--right
+          v-navigation-drawer--temporary
+          v-theme--light
+        "
+        style="right: 0px; z-index: 1004; transform: translateX(395px); position: fixed; transition: none !important;"
+      >
         <!---->
         <!---->
         <div class="v-navigation-drawer__content">
-          <div data-v-6c7d1f34="" class="v-expansion-panels v-theme--light v-expansion-panels--variant-accordion"></div>
-          <div data-v-6c7d1f34="" class="v-spacer"></div>
-          <div data-v-6c7d1f34="" class="px-4 pb-4 pt-10"><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-outlined mb-4"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator="">Fermer</span>
+          <div class="
+            v-expansion-panels
+            v-expansion-panels--variant-accordion
+            v-theme--light
+          "></div>
+          <div class="v-spacer"></div>
+          <div class="
+            pb-4
+            pt-10
+            px-4
+          ">
+            <button
+              class="
+                mb-4
+                text-primary
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--size-large
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
+              <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                Fermer
+              </span>
+              <!---->
+              <!---->
+            </button>
+            <button
+              class="
+                mb-4
+                text-primary
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--size-large
+                v-btn--variant-outlined
+                v-theme--light
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
               <!---->
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                Réinitialiser
+              </span>
               <!---->
-            </button><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-theme--light text-primary v-btn--density-default v-btn--size-large v-btn--variant-outlined mb-4"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator="">Réinitialiser</span>
               <!---->
+            </button>
+            <button
+              class="
+                bg-primary
+                v-btn
+                v-btn--block
+                v-btn--density-default
+                v-btn--elevated
+                v-btn--size-large
+                v-btn--variant-elevated
+                v-theme--light
+              "
+              type="button"
+            >
+              <span class="v-btn__overlay"></span>
+              <span class="v-btn__underlay"></span>
               <!---->
-            </button><button data-v-6c7d1f34="" type="button" class="v-btn v-btn--block v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-large v-btn--variant-elevated"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator="">Appliquer</span>
+              <span
+                class="v-btn__content"
+                data-no-activator=""
+              >
+                Appliquer
+              </span>
               <!---->
               <!---->
-            </button></div>
+            </button>
+          </div>
         </div>
         <!---->
       </nav>
-      <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+      <transition-stub
+        appear="false"
+        css="true"
+        name="fade-transition"
+        persisted="false"
+      >
         <!---->
       </transition-stub>
     </div>
   </div>
-</div>"
+</div>
 `;

package/src/components/FooterBar/tests/__snapshots__/FooterBar.spec.ts.snap

@@ -1,29 +1,103 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FooterBar > renders correctly 1`] = `
-"<footer data-v-a13c4e60="" class="v-footer v-theme--light bg-backgroundSurface elevation-3 vd-footer-bar flex-column align-stretch pa-3 w-100 v-theme--dark" style="height: auto;" role="contentinfo">
-  <div data-v-a13c4e60="" class="container">
-    <!--v-if-->
-    <!--v-if-->
-    <!--v-if-->
-    <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
-      <li data-v-a13c4e60="">
-        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
+<footer
+  class="
+    align-stretch
+    bg-backgroundSurface
+    elevation-3
+    flex-column
+    pa-3
+    v-footer
+    v-theme--dark
+    v-theme--light
+    vd-footer-bar
+    w-100
+  "
+  role="contentinfo"
+  style="height: auto;"
+>
+  <div class="container">
+    <!-- v-if -->
+    <!-- v-if -->
+    <!-- v-if -->
+    <ul class="
+      align-start
+      d-flex
+      flex-column
+      flex-sm-row
+      flex-wrap
+      justify-center
+      max-width-none
+      mx-n3
+      my-n3
+      py-2
+      py-sm-0
+      text-sm-center
+      vd-footer-bar-links
+    ">
+      <li>
+        <routerlink
+          class="
+            mx-4
+            my-3
+          "
+          tabindex="0"
+          to="[object Object]"
+        >
+          Plan du site
+        </routerlink>
       </li>
-      <li data-v-a13c4e60="">
-        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
+      <li>
+        <routerlink
+          class="
+            mx-4
+            my-3
+          "
+          tabindex="1"
+          to="[object Object]"
+        >
+          Conditions générales d’utilisation
+        </routerlink>
       </li>
-      <li data-v-a13c4e60="">
-        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
+      <li>
+        <routerlink
+          class="
+            mx-4
+            my-3
+          "
+          tabindex="2"
+          to="[object Object]"
+        >
+          Gestion des cookies
+        </routerlink>
       </li>
-      <li data-v-a13c4e60="">
-        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
+      <li>
+        <routerlink
+          class="
+            mx-4
+            my-3
+          "
+          tabindex="3"
+          to="[object Object]"
+        >
+          Mentions légales
+        </routerlink>
       </li>
-      <li data-v-a13c4e60="">
-        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
+      <li>
+        <routerlink
+          class="
+            mx-4
+            my-3
+          "
+          tabindex="4"
+          to="[object Object]"
+        >
+          Accessibilité&nbsp;: non conforme
+        </routerlink>
       </li>
-      <!--v-if-->
+      <!-- v-if -->
     </ul>
   </div>
-</footer>"
+</footer>
 `;

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -26,21 +26,23 @@
 
 <template>
 	<div
-		class="vd-france-connect-btn d-flex flex-column align-start"
+		class="sy-france-connect-btn d-flex flex-column align-start"
 		:class="{
-			'vd-france-connect-btn--dark': isDark,
+			'sy-france-connect-btn--dark': isDark,
 		}"
 	>
 		<a
 			:href="href"
 			:aria-label="locales.btnLabel(isConnectPlus)"
-			class="vd-france-connect-link d-inline-flex"
+			class="sy-france-connect-link d-inline-flex"
 		>
 			<svg
 				:viewBox="`0 0 ${props.isConnectPlus ? '245' : '209'} 56`"
 				:width="btnWidth"
 				height="56"
 				xmlns="http://www.w3.org/2000/svg"
+				role="presentation"
+				aria-hidden="true"
 			>
 				<path
 					fill="#000091"
@@ -79,13 +81,14 @@
 			:href="infoUrl"
 			target="_blank"
 			rel="noopener noreferrer"
-			class="vd-france-connect-info-link text-decoration-none mt-3"
+			class="sy-france-connect-info-link text-decoration-none mt-3"
+			:aria-label="locales.infoLinkAriaLabel(isConnectPlus)"
 		>
 			{{ locales.infoLinkLabel(isConnectPlus) }}
 
 			<VIcon
 				size="1em"
-				class="ml-1 mb-1"
+				class="sy-france-connect-info-link-icon"
 			>
 				{{ mdiOpenInNew }}
 			</VIcon>
@@ -94,15 +97,17 @@
 </template>
 
 <style lang="scss" scoped>
-.vd-france-connect-btn a {
+.sy-france-connect-btn a {
 	color: #000091;
 
-	&:focus {
-		outline-offset: 3px;
+	&:focus-visible {
+		outline: solid #0a76f6;
+		outline-width: 2px;
+		outline-offset: 2px;
 	}
 }
 
-.vd-france-connect-link {
+.sy-france-connect-link {
 	background: #000091;
 
 	&:hover {
@@ -110,35 +115,27 @@
 		transition: all 0.2s ease-in-out;
 	}
 
-	&:active {
-		background: #2323ff;
-	}
-
 	&:focus {
 		outline-offset: 3px;
 	}
 }
 
-.vd-france-connect-btn--dark {
-	.vd-france-connect-link {
+.sy-france-connect-btn--dark {
+	.sy-france-connect-link {
 		color: #fff;
 		background-color: #8585f6;
 
 		&:hover {
 			background-color: #b1b1f9;
 		}
-
-		&:active {
-			background-color: #c6c6fb;
-		}
 	}
 
-	.vd-france-connect-info-link {
+	.sy-france-connect-info-link {
 		color: #8585f6;
 	}
 }
 
-.vd-france-connect-info-link {
+.sy-france-connect-info-link {
 	background-image: linear-gradient(currentcolor, currentcolor);
 	background-position: 0% 100%;
 	background-repeat: no-repeat;

package/src/components/FranceConnectBtn/locales.ts

@@ -3,4 +3,6 @@ export const locales = {
 		`S’identifier avec FranceConnect${connectPlus ? '+' : ''}`,
 	infoLinkLabel: (connectPlus: boolean) =>
 		`Qu’est-ce que FranceConnect${connectPlus ? '+' : ''} ?`,
+	infoLinkAriaLabel: (connectPlus: boolean) =>
+		`Qu’est-ce que FranceConnect${connectPlus ? '+' : ''} ? (nouvelle fenêtre)`,
 }

package/src/components/FranceConnectBtn/tests/FranceConnectBtn.spec.ts

@@ -16,7 +16,7 @@ describe('FranceConnectBtn', () => {
 		})
 
 		expect(wrapper.html()).toMatchSnapshot()
-		expect(wrapper.find('.vd-france-connect-link').attributes('href')).toBe('https://app.franceconnect.gouv.fr/')
+		expect(wrapper.find('.sy-france-connect-link').attributes('href')).toBe('https://app.franceconnect.gouv.fr/')
 	})
 
 	it('renders correctly with connect-plus', () => {