@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

package/dist/{src/vuetifyConfig.d.ts → vuetifyConfig.d.ts}

@@ -1,5 +1,6 @@
 export declare const createVuetifyInstance: () => {
     install: (app: import('vue').App<any>) => void;
+    unmount: () => void;
     defaults: import('vue').Ref<import('vuetify').DefaultsInstance, import('vuetify').DefaultsInstance>;
     display: import('vuetify').DisplayInstance;
     theme: import('vuetify').ThemeInstance & {
@@ -65,6 +66,7 @@ export declare const createVuetifyInstance: () => {
             getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
             getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
+            getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstWeekMinSize?: number | undefined) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;
             getDate: (date: unknown) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "0.0.13-alpha",
+  "version": "0.0.15-alpha",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -10,7 +10,7 @@
   ],
   "main": "./dist/design-system-v3.umd.cjs",
   "module": "./dist/design-system-v3.js",
-  "types": "./dist/src/main.d.ts",
+  "types": "./dist/main.d.ts",
   "exports": {
     ".": {
       "import": "./dist/design-system-v3.js",
@@ -24,9 +24,9 @@
     "build": "vue-tsc -p tsconfig.app.json && vite build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint 'src/**/*.{ts,vue}'",
-    "lint:style": "stylelint 'src/**/*.{css,scss,vue}'",
-    "lint:fix": "eslint 'src/**/*.{ts,vue}' --fix && stylelint 'src/**/*.{css,scss,vue}' --fix",
+    "lint": "eslint \"src/**/*.{ts,vue}\"",
+    "lint:style": "stylelint \"src/**/*.{css,scss,vue}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,vue}\" --fix && stylelint \"src/**/*.{css,scss,vue}\" --fix",
     "test:unit": "vitest run",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
@@ -79,9 +79,11 @@
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^15.7.4",
     "husky": "^9.1.6",
+    "marked": "^15.0.7",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "resize-observer-polyfill": "^1.5.1",
+    "semantic-release": "^24.2.3",
     "storybook": "^8.5.6",
     "storybook-addon-vue-mdx": "^1.0.6",
     "stylelint": "^16.12.0",
@@ -96,7 +98,8 @@
     "vitest": "^2.0.5",
     "vue": "^3.4.33",
     "vue-router": "^4.4.5",
-    "vue-tsc": "^2.1.8"
+    "vue-tsc": "^2.1.8",
+    "vue3-snapshot-serializer": "^2.9.0"
   },
   "peerDependencies": {
     "vue": "^3.4.33",
@@ -108,11 +111,9 @@
     "dayjs": "^1.11.13",
     "deepmerge": "^4.3.1",
     "iso-639-1": "^3.1.3",
-    "marked": "^15.0.7",
     "maska": "^3.0.3",
     "sass-embedded": "^1.83.0",
     "sass-loader": "^16.0.3",
-    "semantic-release": "^24.1.2",
     "slugify": "^1.6.6"
   },
   "publishConfig": {

package/src/components/BackBtn/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/BackBtn.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4006" target="_blank" style="color:#0C41BD;">issue #4006</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/BackBtn/BackBtn.stories.ts

@@ -18,6 +18,34 @@ const meta = {
 		hideBackIcon: {
 			control: 'boolean',
 		},
+		locales: {
+			description: 'Traductions',
+			control: false,
+			table: {
+				category: 'props',
+				type: {
+					summary: undefined,
+				},
+				defaultValue: {
+					summary: `Locales`,
+					detail: `{
+	label: 'Retour',
+}`,
+				},
+			},
+		},
+		backgroundColor: {
+			control: { type: 'text' },
+			description: 'Couleur de fond du bouton parmi la palette du thème.',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'white',
+				},
+			},
+		},
 	},
 } as Meta<typeof BackBtn>
 
@@ -61,12 +89,12 @@ export const Default: Story = {
 					color="primary"
 					class="pa-4"
 				>
-				<BackBtn v-bind="args" />
-				</VSheet>
-				<VSheet
-					v-else
-					class="pa-4"
-				>
+					<BackBtn v-bind="args" />
+					</VSheet>
+					<VSheet
+						v-else
+						class="pa-4"
+					>
 					<BackBtn v-bind="args" />
 				</VSheet>
 			`,

package/src/components/BackBtn/BackBtn.vue

@@ -1,19 +1,22 @@
 <script lang="ts" setup>
-	import { ref, computed } from 'vue'
 	import { mdiArrowLeft } from '@mdi/js'
+	import { computed } from 'vue'
 	import { locales } from './locales'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		hideBackIcon?: boolean
 		dark?: boolean
-	}>()
+		backgroundColor?: string
+	}>(), {
+		backgroundColor: 'white',
+	})
 
-	const backIcon = ref(mdiArrowLeft)
 	const isDark = computed(() => props.dark ?? false)
 	const iconColor = computed(() => isDark.value ? 'white' : 'primary')
 	const buttonVariant = computed(() => isDark.value ? 'outlined' : 'text')
 	const buttonTheme = computed(() => isDark.value ? 'dark' : 'light')
 	const buttonColor = computed(() => isDark.value ? 'white' : 'primary')
+	const buttonBgColor = computed(() => isDark.value ? 'transparent' : props.backgroundColor)
 
 	const buttonClasses = computed(() => ({
 		'px-0': !isDark.value,
@@ -28,8 +31,7 @@
 		:variant="buttonVariant"
 		:theme="buttonTheme"
 		:color="buttonColor"
-		:outlined="isDark"
-		:class="['vd-back-btn', 'text-none', buttonClasses]"
+		:class="['sy-back-btn', 'text-none', buttonClasses, `bg-${buttonBgColor}`]"
 	>
 		<slot name="icon">
 			<VIcon
@@ -38,7 +40,7 @@
 				:class="{ 'ml-n1': isDark }"
 				class="mr-1"
 			>
-				{{ backIcon }}
+				{{ mdiArrowLeft }}
 			</VIcon>
 		</slot>
 
@@ -50,10 +52,18 @@
 
 <style lang="scss" scoped>
 // Désactiver l'état de hover sur le thème clair
-.v-btn.v-theme--light:deep() {
+.v-btn:deep() {
 	.v-btn__underlay,
 	.v-btn__overlay {
 		display: none;
 	}
 }
+
+.sy-back-btn:focus-visible {
+	outline: 0;
+}
+
+.sy-back-btn:focus-visible::after {
+	opacity: 1;
+}
 </style>

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

@@ -44,7 +44,7 @@ describe('BackBtn', () => {
 			},
 			props: { dark: false, hideBackIcon: false },
 		})
-		expect(wrapper.find('.vd-back-btn').classes()).toContain('pr-1')
+		expect(wrapper.find('.sy-back-btn').classes()).toContain('pr-1')
 	})
 
 	it('applies correct button classes when dark is true and hideBackIcon is false', () => {
@@ -58,7 +58,7 @@ describe('BackBtn', () => {
 			},
 			props: { dark: true, hideBackIcon: false },
 		})
-		expect(wrapper.find('.vd-back-btn').classes()).not.toContain('pr-1')
+		expect(wrapper.find('.sy-back-btn').classes()).not.toContain('pr-1')
 	})
 	it('returns false when dark prop is not provided', () => {
 		const wrapper = mount(BackBtn, {

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

@@ -1,9 +1,45 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BackBtn > render correctly 1`] = `
-"<button data-v-efb74141="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text vd-back-btn text-none px-0 pr-1" outlined="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-  <!----><span class="v-btn__content" data-no-activator=""><i data-v-efb74141="" class="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-1" aria-hidden="true"></i>Retour</span>
+<button
+  class="
+    bg-white
+    pr-1
+    px-0
+    sy-back-btn
+    text-none
+    text-primary
+    v-btn
+    v-btn--density-default
+    v-btn--size-default
+    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=""
+  >
+    <i
+      aria-hidden="true"
+      class="
+        M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z
+        mdi
+        mr-1
+        notranslate
+        text-primary
+        v-icon
+        v-icon--size-default
+        v-theme--light
+      "
+    ></i>
+    Retour
+  </span>
   <!---->
-</button>"
+  <!---->
+</button>
 `;

package/src/components/BackToTopBtn/Accessibilite.stories.ts

@@ -158,6 +158,10 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/BackToTopBtn.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4022" target="_blank" style="color:#0C41BD;">issue #4022</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -12,24 +12,69 @@ const meta = {
 	argTypes: {
 		threshold: {
 			control: { type: 'range', max: 2000 },
+			description: 'Distance par rapport au bas de la page à partir de laquelle le bouton apparaît',
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		nudgeRight: {
 			control: { type: 'range' },
+			description: 'Décalage du bouton par rapport au bord droit de la fenêtre',
 			default: 16,
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		nudgeBottom: {
 			control: { type: 'range' },
+			description: 'Décalage du bouton par rapport au bord inférieur de la fenêtre',
 			default: 16,
+			table: {
+				type: { summary: 'number' },
+			},
 		},
 		target: {
 			control: { type: 'text' },
+			description: 'ID du conteneur devant être scrollé',
+			table: {
+				type: { summary: 'string' },
+			},
 		},
 		default: {
+			description: 'Texte du bouton',
 			control: { type: 'text' },
 		},
 		icon: {
+			description: 'Icône du bouton',
 			control: { type: 'text' },
 		},
+		vuetifyOptions: {
+			control: { type: 'object' },
+			description: 'Options de personnalisation du bouton',
+			default: () => ({
+				btn: {
+					variant: 'outlined',
+					color: 'primary',
+					class: 'text-wrap px-0 px-md-4',
+				},
+				icon: {
+					color: 'primary',
+					size: 'medium',
+					class: 'ml-0 ml-md-2',
+				},
+			}),
+			table: {
+				category: 'props',
+				type: {
+					summary: 'object',
+					detail: `
+{
+	btn: Record<string, unknown>,
+	icon: Record<string, unknown>,
+}`,
+				},
+			},
+		},
 	},
 	args: {
 		threshold: 120,
@@ -92,8 +137,8 @@ export const Default: Story = {
 			},
 			icon: {
 				color: 'primary',
-				size: 'small',
-				class: 'ml-0 ml-md-1',
+				size: 'medium',
+				class: 'ml-0 ml-md-2',
 			},
 		},
 	},
@@ -105,16 +150,20 @@ export const Default: Story = {
 				VSheet,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
-				<VCard
-					id="target"
-					width="100%"
-					max-height="200px"
-					class="overflow-y-auto"
-					style="scroll-behavior: smooth"
-				>
+			<VCard
+				id="target"
+				width="100%"
+				max-height="200px"
+				class="overflow-y-auto"
+				style="scroll-behavior: smooth"
+			>
 					<VSheet
 						height="600px"
 						class="d-flex flex-column align-center"
@@ -123,8 +172,8 @@ export const Default: Story = {
 							Haut de la section.
 						</p>
 					</VSheet>
-					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
-						{{args.default}}
+					<BackToTopBtn v-bind="props" :vuetify-options="props.vuetifyOptions">
+						{{ defaultSlot }}
 					</BackToTopBtn>
 				</VCard>
 			`,
@@ -208,7 +257,11 @@ export const Customization: Story = {
 				BackToTopBtn,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
 				<VCard
@@ -226,8 +279,8 @@ export const Customization: Story = {
 							Haut de la section.
 						</p>
 					</VSheet>
-					<BackToTopBtn v-bind="args" :vuetify-options="args.vuetifyOptions">
-						{{args.default}}
+					<BackToTopBtn v-bind="props" :vuetify-options="props.vuetifyOptions">
+						{{defaultSlot}}
 					</BackToTopBtn>
 				</VCard>
 			`,
@@ -311,7 +364,11 @@ export const CustomPosition: Story = {
 				BackToTopBtn,
 			},
 			setup() {
-				return { args }
+				const { default: defaultSlot, ...props } = args
+				return {
+					defaultSlot,
+					props,
+				}
 			},
 			template: `
 				<VCard
@@ -330,12 +387,12 @@ export const CustomPosition: Story = {
 						</p>
 					</VSheet>
 					<BackToTopBtn 
-						v-bind="args" 
-						:nudge-right="args.nudgeRight"
-						:nudge-bottom="args.nudgeBottom"
-						:vuetify-options="args.vuetifyOptions"
+						v-bind="props" 
+						:nudge-right="props.nudgeRight"
+						:nudge-bottom="props.nudgeBottom"
+						:vuetify-options="props.vuetifyOptions"
 					>
-						{{args.default}}
+						{{defaultSlot}}
 					</BackToTopBtn>
 				</VCard>
 			`,

package/src/components/BackToTopBtn/BackToTopBtn.vue

@@ -135,4 +135,19 @@
 .v-btn--variant-outlined {
 	background: white;
 }
+
+.vd-back-to-top-btn:deep() {
+	.v-btn__underlay,
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+.vd-back-to-top-btn:focus-visible {
+	outline: 0;
+}
+
+.vd-back-to-top-btn:focus-visible::after {
+	opacity: 1;
+}
 </style>

package/src/components/BackToTopBtn/config.ts

@@ -6,7 +6,7 @@ export const config = {
 	},
 	icon: {
 		color: 'primary',
-		size: 'small',
-		class: 'ml-0 ml-md-1',
+		size: 'medium',
+		class: 'ml-0 ml-md-2',
 	},
 }

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

@@ -1,17 +1,109 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BackToTopBtn > renders correctly 1`] = `
-"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 16px; margin-right: 16px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+<transition-stub
+  appear="false"
+  css="true"
+  name="fade-transition"
+  persisted="false"
+>
+  <button
+    class="
+      px-0
+      px-md-4
+      text-primary
+      text-wrap
+      v-btn
+      v-btn--density-default
+      v-btn--size-default
+      v-btn--variant-outlined
+      v-theme--light
+      vd-back-to-top-btn
+    "
+    style="bottom: 16px; margin-right: 16px; display: none;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
     <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span class="">
+        Retour en haut
+      </span>
+      <i
+        aria-hidden="true"
+        class="
+          M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
+          mdi
+          ml-0
+          ml-md-2
+          notranslate
+          text-primary
+          v-icon
+          v-theme--light
+        "
+        style="font-size: medium;"
+      ></i>
+    </span>
     <!---->
-  </button></transition-stub>"
+    <!---->
+  </button>
+</transition-stub>
 `;
 
 exports[`BackToTopBtn > renders correctly when nudgeBottom and nudgeRight are set to invalid values 1`] = `
-"<transition-stub data-v-8ea81d33="" name="fade-transition" appear="false" persisted="false" css="true"><button data-v-8ea81d33="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-outlined text-wrap px-0 px-md-4 vd-back-to-top-btn" style="bottom: 0px; margin-right: 0px; display: none;"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-    <!----><span class="v-btn__content" data-no-activator=""><span data-v-8ea81d33="" class="">Retour en haut</span><i data-v-8ea81d33="" class="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z mdi v-icon notranslate v-theme--light v-icon--size-small text-primary ml-0 ml-md-1" aria-hidden="true"></i></span>
+<transition-stub
+  appear="false"
+  css="true"
+  name="fade-transition"
+  persisted="false"
+>
+  <button
+    class="
+      px-0
+      px-md-4
+      text-primary
+      text-wrap
+      v-btn
+      v-btn--density-default
+      v-btn--size-default
+      v-btn--variant-outlined
+      v-theme--light
+      vd-back-to-top-btn
+    "
+    style="bottom: 0px; margin-right: 0px; display: none;"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span class="">
+        Retour en haut
+      </span>
+      <i
+        aria-hidden="true"
+        class="
+          M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z
+          mdi
+          ml-0
+          ml-md-2
+          notranslate
+          text-primary
+          v-icon
+          v-theme--light
+        "
+        style="font-size: medium;"
+      ></i>
+    </span>
     <!---->
     <!---->
-  </button></transition-stub>"
+  </button>
+</transition-stub>
 `;

package/src/components/ChipList/ChipList.vue

@@ -177,6 +177,7 @@
 						<VIcon
 							v-bind="options.icon"
 							:icon="deleteIcon"
+							:color="item.state"
 						/>
 					</VBtn>
 				</div>

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

@@ -1,10 +1,36 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContextualMenu > renders correctly with items 1`] = `
-"<ul data-v-b65f24a2="" class="vd-contextual-menu">
-  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-1" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 1</a></li>
-  <li data-v-b65f24a2=""><a data-v-b65f24a2="" href="#example-2" class="text-medium-emphasis d-flex align-center text-decoration-none text-body-1 px-4 py-2">Titre 2</a></li>
-</ul>"
+<ul class="vd-contextual-menu">
+  <li>
+    <a
+      class="
+        align-center
+        d-flex
+        px-4
+        py-2
+        text-body-1
+        text-decoration-none
+        text-medium-emphasis
+      "
+      href="#example-1"
+    >Titre 1</a>
+  </li>
+  <li>
+    <a
+      class="
+        align-center
+        d-flex
+        px-4
+        py-2
+        text-body-1
+        text-decoration-none
+        text-medium-emphasis
+      "
+      href="#example-2"
+    >Titre 2</a>
+  </li>
+</ul>
 `;
 
-exports[`ContextualMenu > renders correctly without items 1`] = `"<!--v-if-->"`;
+exports[`ContextualMenu > renders correctly without items 1`] = `<!-- v-if -->`;