@cnamts/synapse 1.0.27 → 1.1.1

package/dist/vuetifyConfig.js

@@ -1,4 +1,4 @@
-import { e, d as b, c as S, f as h, h as u, a as w, b as k, g as z } from "./apLightTheme2026-ug4Y23ns.js";
+import { g as e, h as b, f as S, a as h, c as u, i as w, e as k, d as z } from "./apLightTheme2026-C4ygwMHC.js";
 import * as W from "vuetify/components";
 import * as H from "vuetify/directives";
 import { mdi as F, aliases as V } from "vuetify/iconsets/mdi-svg";
@@ -376,6 +376,7 @@ const f = {
   // Feedback
   info: e.color.blue.base,
   infoVariant: e.color.blue.lighten80,
+  infoVariant90: e.color.blue.lighten90,
   onInfo: e.color.white.base,
   onInfoVariant: e.color.blue.darken20,
   error: e.color.orange.darken20,
@@ -403,7 +404,7 @@ const f = {
   interactionDarkenPressed: e.color.transparentBlack.alpha40
 }, D = {
   backgroundSurface: e.color.parma.darken60
-}, d = {
+}, p = {
   ...b,
   colors: {
     background: "#ffffff",
@@ -510,6 +511,7 @@ const f = {
   // Feedback
   info: e.color.parma.darken40,
   infoVariant: e.color.parma.lighten80,
+  infoVariant90: e.color.parma.lighten90,
   onInfo: e.color.white.base,
   onInfoVariant: e.color.parma.darken60,
   error: e.color.red.darken20,
@@ -535,51 +537,51 @@ const f = {
   interactionDarkenEnabled: e.color.transparentBlack.alpha00,
   interactionDarkenHover: e.color.transparentBlack.alpha20,
   interactionDarkenPressed: e.color.transparentBlack.alpha40
-}, p = {
+}, d = {
   backgroundSurface: e.color.parma.darken60
 }, v = (n) => typeof n == "object" && n !== null, c = (n) => {
-  const t = {}, r = (i, a = "") => {
-    for (const [o, s] of Object.entries(i)) {
+  const i = {}, r = (t, a = "") => {
+    for (const [o, s] of Object.entries(t)) {
       const l = a ? `${a}-${o}` : o;
       if (s === void 0)
         throw new Error(`Missing theme value for key "${l}"`);
-      v(s) ? r(s, l) : t[l] = s;
+      v(s) ? r(s, l) : i[l] = s;
     }
   };
-  return r(n), t;
+  return r(n), i;
 };
 function y(n) {
-  const t = {};
-  if (n.family && n.family.primary && (t["font-family"] = n.family.primary), n.heading && Object.entries(n.heading).forEach(([r, i]) => {
+  const i = {};
+  if (n.family && n.family.primary && (i["font-family"] = n.family.primary), n.heading && Object.entries(n.heading).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
-  }), n.body && Object.entries(n.body).forEach(([r, i]) => {
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
+  }), n.body && Object.entries(n.body).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
-  }), n.subtitle && Object.entries(n.subtitle).forEach(([r, i]) => {
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
+  }), n.subtitle && Object.entries(n.subtitle).forEach(([r, t]) => {
     var a, o;
-    t[`typography-${r}-font-size`] = i.fontSize || "", t[`typography-${r}-font-weight`] = ((a = i.fontWeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-line-height`] = ((o = i.lineHeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-letter-spacing`] = i.letterSpacing || "normal";
+    i[`typography-${r}-font-size`] = t.fontSize || "", i[`typography-${r}-font-weight`] = ((a = t.fontWeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-line-height`] = ((o = t.lineHeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-letter-spacing`] = t.letterSpacing || "normal";
   }), ["caption", "overline"].forEach((r) => {
-    var i, a, o, s;
+    var t, a, o, s;
     if (n[r]) {
       const l = n[r];
       if (l && typeof l == "object" && !Array.isArray(l))
         if ("fontSize" in l)
-          t[`typography-${r}-font-size`] = l.fontSize || "", t[`typography-${r}-font-weight`] = ((i = l.fontWeight) == null ? void 0 : i.toString()) || "", t[`typography-${r}-line-height`] = ((a = l.lineHeight) == null ? void 0 : a.toString()) || "", t[`typography-${r}-letter-spacing`] = l.letterSpacing || "normal", l.textTransform && (t[`typography-${r}-text-transform`] = l.textTransform || "");
+          i[`typography-${r}-font-size`] = l.fontSize || "", i[`typography-${r}-font-weight`] = ((t = l.fontWeight) == null ? void 0 : t.toString()) || "", i[`typography-${r}-line-height`] = ((a = l.lineHeight) == null ? void 0 : a.toString()) || "", i[`typography-${r}-letter-spacing`] = l.letterSpacing || "normal", l.textTransform && (i[`typography-${r}-text-transform`] = l.textTransform || "");
         else {
           const g = l[r];
-          g && (t[`typography-${r}-font-size`] = g.fontSize || "", t[`typography-${r}-font-weight`] = ((o = g.fontWeight) == null ? void 0 : o.toString()) || "", t[`typography-${r}-line-height`] = ((s = g.lineHeight) == null ? void 0 : s.toString()) || "", t[`typography-${r}-letter-spacing`] = g.letterSpacing || "normal", g.textTransform && (t[`typography-${r}-text-transform`] = g.textTransform || ""));
+          g && (i[`typography-${r}-font-size`] = g.fontSize || "", i[`typography-${r}-font-weight`] = ((o = g.fontWeight) == null ? void 0 : o.toString()) || "", i[`typography-${r}-line-height`] = ((s = g.lineHeight) == null ? void 0 : s.toString()) || "", i[`typography-${r}-letter-spacing`] = g.letterSpacing || "normal", g.textTransform && (i[`typography-${r}-text-transform`] = g.textTransform || ""));
         }
     }
   }), n.display) {
     const r = n.display;
-    ["display1", "display2"].forEach((i) => {
+    ["display1", "display2"].forEach((t) => {
       var o, s;
-      const a = r[i];
-      a && (t[`typography-${i}-font-size`] = a.fontSize || "", t[`typography-${i}-font-weight`] = ((o = a.fontWeight) == null ? void 0 : o.toString()) || "", t[`typography-${i}-line-height`] = ((s = a.lineHeight) == null ? void 0 : s.toString()) || "", t[`typography-${i}-letter-spacing`] = a.letterSpacing || "normal", a.textTransform && (t[`typography-${i}-text-transform`] = a.textTransform || ""));
+      const a = r[t];
+      a && (i[`typography-${t}-font-size`] = a.fontSize || "", i[`typography-${t}-font-weight`] = ((o = a.fontWeight) == null ? void 0 : o.toString()) || "", i[`typography-${t}-line-height`] = ((s = a.lineHeight) == null ? void 0 : s.toString()) || "", i[`typography-${t}-letter-spacing`] = a.letterSpacing || "normal", a.textTransform && (i[`typography-${t}-text-transform`] = a.textTransform || ""));
     });
   }
-  return t;
+  return i;
 }
 const R = () => x({
   components: W,
@@ -623,24 +625,24 @@ const R = () => x({
         dark: !1,
         colors: {
           ...S,
-          ...p,
+          ...d,
           ...c(k)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...c(d)
+          ...c(p)
         }
       },
       ap: {
         dark: !1,
         colors: {
           ...B,
-          ...p,
+          ...d,
           ...c(w)
         },
         variables: {
           "font-family": '"Arial", sans-serif',
-          ...c(d)
+          ...c(p)
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.27",
+  "version": "1.1.1",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -58,7 +58,7 @@
   },
   "license": "ISC",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.11.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.0",
@@ -86,7 +86,7 @@
     "@types/node": "^20.17.1",
     "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-vue": "5.2.1",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/coverage-v8": "^4.1.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "~0.8.0",
     "auto-changelog": "^2.4.0",
@@ -95,7 +95,7 @@
     "cross-env": "^10.1.0",
     "cypress": "^15.13.0",
     "eslint": "^9.13.0",
-    "eslint-plugin-storybook": "^0.11.3",
+    "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^9.30.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^20.8.8",
@@ -119,10 +119,10 @@
     "vite": "^6.4.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-vuetify": "^2.1.1",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.0",
     "vitest-axe": "^0.1.0",
     "vue": "^3.5.18",
-    "vue-component-type-helpers": "2.2.0",
+    "vue-component-type-helpers": "2.2.12",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.8",
     "vue3-snapshot-serializer": "^2.9.0"
@@ -144,17 +144,17 @@
     "access": "public"
   },
   "overrides": {
-    "esbuild": "^0.25.0",
+    "esbuild": ">=0.28.1",
     "parse5": "7.1.2",
     "npm": "^11.8.1",
-    "undici": "^6.24.0",
+    "undici": ">=6.27.0 <8",
     "rollup": "^4.59.0",
     "immutable": ">=5.1.5"
   },
   "pnpm": {
     "overrides": {
-      "esbuild": "^0.25.0",
-      "undici": "^6.24.0",
+      "esbuild": ">=0.28.1",
+      "undici": ">=6.27.0 <8",
       "glob": ">=10.5.0",
       "js-yaml": ">=4.1.1",
       "parse5": "7.1.2",
@@ -170,7 +170,8 @@
       "postcss": ">=8.5.10",
       "fast-uri": ">=3.1.2",
       "js-cookie": ">=3.0.7",
-      "qs": ">=6.15.2"
+      "qs": ">=6.15.2",
+      "tmp": ">=0.2.6"
     },
     "patchedDependencies": {
       "vuetify@3.12.2": "patches/vuetify@3.12.2.patch"

package/src/assets/compat/_legacy-tokens.scss

@@ -0,0 +1,91 @@
+// =============================================================================
+// Shim de compatibilité — ré-expose les anciens tokens SCSS (<= 1.0.24)
+// vers les variables CSS du thème (>= 1.0.25).
+// À utiliser UNIQUEMENT pour faciliter la migration d'un projet qui consommait
+// l'ancien export SCSS (`$gap-2`, `$radius-rounded-lg`, …). À terme, préférez
+// directement les variables CSS (`var(--v-gap-N)`, `var(--v-radius-…)`, …).
+// Usage (côté projet) :
+//   @use '@cnamts/synapse/assets/compat/legacy-tokens' as *;
+//   .box { gap: $gap-2; } // -> gap: var(--v-gap-2);
+// Limite : ces variables contiennent une `var(--…)` (résolue au runtime).
+// Elles conviennent pour des affectations directes (`gap`, `padding`, `margin`,
+// `border-radius`, `font-size`, `color`…) mais PAS pour des opérations SCSS
+// compile-time (`calc` Sass, fonctions de couleur…). Pour ces cas, utilisez
+// `calc()` CSS ou des valeurs en dur.
+// =============================================================================
+
+// --- Espacements : $gap-0 … $gap-16 -> var(--v-gap-N) ------------------------
+$gap-0: var(--v-gap-0) !default;
+$gap-1: var(--v-gap-1) !default;
+$gap-2: var(--v-gap-2) !default;
+$gap-3: var(--v-gap-3) !default;
+$gap-4: var(--v-gap-4) !default;
+$gap-5: var(--v-gap-5) !default;
+$gap-6: var(--v-gap-6) !default;
+$gap-7: var(--v-gap-7) !default;
+$gap-8: var(--v-gap-8) !default;
+$gap-9: var(--v-gap-9) !default;
+$gap-10: var(--v-gap-10) !default;
+$gap-11: var(--v-gap-11) !default;
+$gap-12: var(--v-gap-12) !default;
+$gap-13: var(--v-gap-13) !default;
+$gap-14: var(--v-gap-14) !default;
+$gap-15: var(--v-gap-15) !default;
+$gap-16: var(--v-gap-16) !default;
+
+// --- Paddings : $padding-N -> var(--v-padding-N) -----------------------------
+$padding-0: var(--v-padding-0) !default;
+$padding-2: var(--v-padding-2) !default;
+$padding-3: var(--v-padding-3) !default;
+$padding-4: var(--v-padding-4) !default;
+$padding-6: var(--v-padding-6) !default;
+$padding-8: var(--v-padding-8) !default;
+$padding-10: var(--v-padding-10) !default;
+$padding-14: var(--v-padding-14) !default;
+$padding-16: var(--v-padding-16) !default;
+
+// --- Arrondis : $radius-rounded-* -> var(--v-radius-*) -----------------------
+$radius-rounded-0: var(--v-radius-rounded0) !default;
+$radius-rounded: var(--v-radius-rounded) !default;
+$radius-rounded-md: var(--v-radius-rounded) !default; // 'md' (4px) = rounded
+$radius-rounded-lg: var(--v-radius-roundedLg) !default;
+$radius-rounded-pill: var(--v-radius-roundedPill) !default;
+
+// --- Typographie : $font-size-* -> var(--v-fontSize-*) -----------------------
+$font-size-title: var(--v-fontSize-titres) !default;
+$font-size-alt-title: var(--v-fontSize-titresAlternatifs) !default;
+$font-size-body-text: var(--v-fontSize-corpsDeTexte) !default;
+$font-size-link-label: var(--v-fontSize-liensEtLibelles) !default;
+
+// --- Espacements sémantiques : $spacing-* -> échelle gap (mêmes valeurs) ------
+// (Pas de variable CSS dédiée : on réutilise --v-gap-N de valeur identique.)
+$spacing-none: var(--v-gap-0) !default;
+$spacing-xx-small: var(--v-gap-1) !default; // 4px
+$spacing-x-small: var(--v-gap-2) !default; // 8px
+$spacing-small: var(--v-gap-4) !default; // 16px
+$spacing-medium: var(--v-gap-6) !default; // 24px
+$spacing-large: var(--v-gap-8) !default; // 32px
+$spacing-x-large: var(--v-gap-10) !default; // 40px
+$spacing-xx-large: var(--v-gap-14) !default; // 56px
+$spacing-xxx-large: var(--v-gap-16) !default; // 64px
+$spacing-huge: 80px !default; // pas d'équivalent (> gap-16) : valeur en dur
+
+$spacing-horizontal-none: var(--v-gap-0) !default;
+$spacing-horizontal-xx-small: var(--v-gap-1) !default;
+$spacing-horizontal-x-small: var(--v-gap-2) !default;
+$spacing-horizontal-small: var(--v-gap-4) !default;
+$spacing-horizontal-medium: var(--v-gap-6) !default;
+$spacing-horizontal-large: var(--v-gap-8) !default;
+$spacing-horizontal-x-large: var(--v-gap-10) !default;
+$spacing-horizontal-xx-large: var(--v-gap-14) !default;
+$spacing-horizontal-xxx-large: var(--v-gap-16) !default;
+$spacing-horizontal-huge: 80px !default;
+
+// --- Couleurs ----------------------------------------------------------------
+// Les couleurs de thème sont des triplets RVB : utilisez-les directement via
+//   color: rgb(var(--v-theme-primary));
+//   background: rgba(var(--v-theme-primary), 0.08);
+// Palette : rgb(var(--v-theme-<couleur>-<variante>)), ex. var(--v-theme-blue-base).
+// Le shim ne ré-expose volontairement pas l'ancienne palette en dur (> 100 valeurs)
+// pour rester aligné sur le thème actif. Si besoin ponctuel, aliasez côté projet :
+//   $primary: rgb(var(--v-theme-primary));

package/src/assets/overrides/_utilities.scss

@@ -7,3 +7,26 @@
 .theme-ap2026 {
 	--footer-background: rgb(var(--v-theme-primary));
 }
+
+.theme-cnam,
+.theme-pa,
+.theme-ap,
+.theme-ap2026 {
+	--carousel-controls-background: rgb(255 255 255);
+}
+
+.v-carousel .v-carousel__controls {
+	background-color: var(--carousel-controls-background) !important;
+}
+
+// Style pour tous les indicateurs (non actifs)
+.v-carousel .v-carousel__controls .v-btn .v-icon {
+	color: rgb(var(--v-theme-disabled)) !important;
+	opacity: 1;
+}
+
+// Style pour l'indicateur actif
+.v-carousel .v-carousel__controls .v-btn--active .v-icon {
+	color: rgb(var(--v-theme-primary)) !important;
+	opacity: 1;
+}

package/src/components/Accordion/Accordion.stories.ts

@@ -1,7 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { fn } from '@storybook/test'
 import Accordion from './Accordion.vue'
-import { ref } from 'vue'
+import { SyIcon } from '@/components'
+import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+import { mdiCloseCircleOutline } from '@mdi/js'
+import {
+	VStepper,
+	VStepperHeader,
+	VStepperItem,
+	VStepperWindow,
+	VStepperWindowItem,
+	VStepperActions,
+} from 'vuetify/components'
+import { computed, reactive, ref } from 'vue'
 
 const meta: Meta<typeof Accordion> = {
 	title: 'Composants/Données/Accordion',
@@ -489,3 +500,112 @@ export const PreOpened: Story = {
 		`,
 	}),
 }
+
+export const WithCustomContent: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				language: 'vue',
+				code: `<template>
+  <Accordion
+    :items="[
+      { id: 'item1', title: 'Section 1', content: 'Contenu de la section 1' },
+      { id: 'item2', title: 'Section 2', content: 'Contenu de la section 2' },
+    ]"
+    :heading-level="5"
+  />
+</template>`,
+			},
+		],
+	},
+	args: {
+		items: defaultItems.slice(0, 1),
+		headingLevel: 3,
+	},
+	render: args => ({
+		components: {
+			Accordion,
+			VStepper,
+			VStepperHeader,
+			VStepperItem,
+			VStepperWindow,
+			VStepperWindowItem,
+			VStepperActions,
+			SyCheckbox,
+			SyIcon,
+		},
+		setup() {
+			const steps = reactive([
+				{ id: 1, error: false, complete: true, editable: true },
+				{ id: 2, error: true, complete: false, editable: true },
+				{ id: 3, error: false, complete: false, editable: true },
+			])
+			const step = ref(2)
+
+			const close = mdiCloseCircleOutline
+
+			const hasError = computed(() =>
+				steps.some(s => s.error),
+			)
+			return { args, step, close, steps, hasError }
+		},
+		template: `
+			<div class="pa-4">
+				<Accordion v-bind="args" >
+                  <template #right-content>
+                    <SyIcon
+                        v-if="hasError"
+                        :icon="close"
+                        color="rgb(var(--v-theme-error))"
+                    />                  </template>
+                  <template #content="{ item }">
+                    <VStepper v-model="step">
+                      <template #default="{ prev, next }">
+                        <VStepperHeader>
+                          <VStepperItem
+                              v-for="stepItem in steps"
+                              :key="stepItem.id"
+                              :value="stepItem.id"
+                              :error="stepItem.error"
+                              :editable="stepItem.editable"
+                              :complete="stepItem.complete"
+                              :title="'Étape ' + stepItem.id"                        
+                              />
+                        </VStepperHeader>
+
+                        <VStepperWindow>
+                          <VStepperWindowItem
+                              v-for="(step) in steps"
+                              :key="step.id"
+                              :value="step.id"
+                          >
+                            <div style="padding: 24px;">
+                              <h3>Contenu de l'étape {{ step.id }}</h3>
+
+                              <SyCheckbox
+                                  v-model="step.error"
+                                  label="Cochez pour obtenir une erreur"
+                              />
+
+                              <p v-if="step.error" style="color: rgb(var(--v-theme-error));">
+                                Cette étape contient des erreurs.
+                              </p>
+
+                              <p v-else-if="step.complete">
+                                Cette étape est complétée.
+                              </p>
+
+                              <p v-else>
+                                Ceci est le contenu de l'étape {{ step.id }}.
+                              </p>
+                            </div>
+                          </VStepperWindowItem>
+                        </VStepperWindow>
+                      </template>
+                    </VStepper>
+                  </template>
+                </Accordion>
+			</div>
+		`,
+	}),
+}

package/src/components/Accordion/tests/Accordion.visual.cy.ts

@@ -0,0 +1,44 @@
+import Accordion from '../Accordion.vue'
+
+const defaultItems = [
+	{ id: '1', title: 'Premier élément', content: 'Contenu du premier élément' },
+	{ id: '2', title: 'Deuxième élément', content: 'Contenu du deuxième élément' },
+	{ id: '3', title: 'Troisième élément', content: 'Contenu du troisième élément' },
+]
+
+describe('Accordion - Visual regression tests', () => {
+	it('displays the accordion collapsed by default', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: { items: defaultItems },
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-default', cy.get('.sy-accordion'))
+	})
+
+	it('displays the accordion with one item open', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: {
+				items: defaultItems,
+				modelValue: ['1'],
+			},
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-open-first', cy.get('.sy-accordion'))
+	})
+
+	it('displays the accordion with a disabled item', () => {
+		cy.mountWithVuetify(Accordion, {
+			props: {
+				items: [
+					{ id: '1', title: 'Actif', content: 'Contenu actif' },
+					{ id: '2', title: 'Désactivé', content: 'Contenu désactivé', disabled: true },
+				],
+			},
+		})
+
+		cy.get('.sy-accordion').should('be.visible')
+		cy.matchImageSnapshot('accordion-disabled-item', cy.get('.sy-accordion'))
+	})
+})

package/src/components/BackBtn/BackBtn.mdx

@@ -20,7 +20,7 @@ import * as BackBtnStories from './BackBtn.stories';
 <script setup lang="ts">
 import { BackBtn } from '@cnamts/synapse'
 </script>
-import '../../stories/styles/shared.css';
+
 
 <template>
     <BackBtn/>

package/src/components/BackToTopBtn/BackToTopBtn.mdx

@@ -27,7 +27,6 @@ Ce composant peut être utilisé à la racine de la page ou bien dans un composa
 import { BackToTopBtn } from '@cnamts/synapse'
 import { VCard, VSheet } from 'vuetify/components'
 </script>
-import '../../stories/styles/shared.css';
 
 <template>
   <VCard

package/src/components/BackToTopBtn/tests/BackToTopBtn.visual.cy.ts

@@ -0,0 +1,34 @@
+import BackToTopBtn from '../BackToTopBtn.vue'
+
+function triggerScroll(scrollY = 200) {
+	cy.window().then((win) => {
+		Object.defineProperty(win, 'scrollY', { value: scrollY, writable: true })
+		win.dispatchEvent(new Event('scroll'))
+	})
+}
+
+describe('BackToTopBtn - Visual regression tests', () => {
+	it('displays the button after scroll', () => {
+		cy.mountWithVuetify(BackToTopBtn, {
+			props: { threshold: 0 },
+		})
+
+		triggerScroll()
+		cy.get('.vd-back-to-top-btn').should('be.visible')
+		cy.matchImageSnapshot('back-to-top-btn-default', cy.get('.vd-back-to-top-btn'))
+	})
+
+	it('displays the button with custom nudge', () => {
+		cy.mountWithVuetify(BackToTopBtn, {
+			props: {
+				threshold: 0,
+				nudgeRight: '32px',
+				nudgeBottom: '32px',
+			},
+		})
+
+		triggerScroll()
+		cy.get('.vd-back-to-top-btn').should('be.visible')
+		cy.matchImageSnapshot('back-to-top-btn-custom-nudge', cy.get('.vd-back-to-top-btn'))
+	})
+})