@cnamts/synapse 1.0.20 → 1.0.21

package/src/components/PhoneField/PhoneField.stories.ts

@@ -8,47 +8,54 @@ const meta = {
 	component: PhoneField,
 	parameters: {
 		layout: 'fullscreen',
+		actions: {
+			handles: ['update:modelValue', 'update:selectedDialCode', 'update:dialCodeModel', 'change'],
+		},
 		controls: { exclude: ['computedValue', 'phoneMask', 'counter', 'hasError', 'phoneNumber', 'mergedDialCodes'] },
 	},
 	argTypes: {
-		modelValue: { control: false },
-		dialCodeModel: { control: false },
-		required: { control: 'boolean' },
-		outlined: { control: 'boolean' },
-		outlinedIndicatif: { control: 'boolean' },
-		withCountryCode: { control: 'boolean' },
-		countryCodeRequired: { control: 'boolean' },
-		displayFormat: {
+		'modelValue': { control: false },
+		'dialCodeModel': { control: false },
+		'onUpdate:modelValue': { action: 'update:modelValue' },
+		'onUpdate:selectedDialCode': { action: 'update:selectedDialCode' },
+		'onUpdate:dialCodeModel': { action: 'update:dialCodeModel' },
+		'onChange': { action: 'change' },
+		'required': { control: 'boolean' },
+		'outlined': { control: 'boolean' },
+		'outlinedIndicatif': { control: 'boolean' },
+		'withCountryCode': { control: 'boolean' },
+		'countryCodeRequired': { control: 'boolean' },
+		'displayFormat': {
 			control: { type: 'select' },
 			description: 'Format d\'affichage des items',
 			options: ['code', 'code-abbreviation', 'code-country', 'country', 'abbreviation'],
 		},
-		customIndicatifs: {
+		'customIndicatifs': {
 			control: 'object',
 			description: 'Permet d\'ajouter des indicatifs à la liste pre-existante',
 		},
-		useCustomIndicatifsOnly: {
+		'useCustomIndicatifsOnly': {
 			control: 'boolean',
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
-		helpText: {
+		'helpText': {
 			control: 'text',
 			description: 'Texte d\'aide affiché sous le champ. Lorsque présent, les messages d\'erreur incluent un exemple concret distinct du texte d\'aide.',
 		},
-		autocompleteCountryCode: {
+		'autocompleteCountryCode': {
 			control: 'text',
 			description: 'Valeur de l\'attribut autocomplete pour le champ indicatif pays (par défaut: "tel-country-code")',
 		},
-		autocompletePhone: {
+		'autocompletePhone': {
 			control: 'text',
 			description: 'Valeur de l\'attribut autocomplete pour le champ numéro de téléphone (par défaut: "tel-national")',
 		},
-		isValidatedOnBlur: { control: 'boolean' },
-		displayAsterisk: { control: 'boolean' },
-		disableErrorHandling: { control: 'boolean' },
-		disabled: { control: 'boolean' },
-		readonly: { control: 'boolean' },
-	},
+		'isValidatedOnBlur': { control: 'boolean' },
+		'displayAsterisk': { control: 'boolean' },
+		'disableErrorHandling': { control: 'boolean' },
+		'disabled': { control: 'boolean' },
+		'readonly': { control: 'boolean' },
+	} as Record<string, unknown>,
 } satisfies Meta<typeof PhoneField>
 
 export default meta
@@ -1254,7 +1261,7 @@ export const DisplayModels: Story = {
 				code: `
         <template>
         	<span>
-				{{ args.selectedDialCode }} - {{ args.modelValue }}
+				Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
 			</span>
           <PhoneField
             v-model="modelValue"
@@ -1305,24 +1312,25 @@ export const DisplayModels: Story = {
 		readonly: false,
 		bgColor: 'white',
 	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="pa-4">
-					<div class="pa-4">
-						{{ args.dialCodeModel }} - {{ args.modelValue }}
-					</div>
-					<PhoneField
-						v-bind="args"
-					/>
-				</div>
-			`,
-		}
-	},
+	render: args => ({
+		components: { PhoneField },
+		setup() {
+			return { args }
+		},
+		template: `
+    <div class="pa-4">
+      <div class="pa-4">
+        Indicatif: {{ args.dialCodeModel }}<br/>Numéro: {{ args.modelValue }}
+      </div>
+
+      <PhoneField
+        v-bind="args"
+        @update:modelValue="args.modelValue = $event"
+        @update:selectedDialCode="args.dialCodeModel = $event"
+      />
+    </div>
+  `,
+	}),
 }
 
 /**

package/src/components/SocialMediaLinks/DefaultSocialMediaLinks.ts

@@ -1,7 +1,9 @@
-import { mdiTwitter, mdiFacebook, mdiLinkedin } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
 
 import type { SocialMediaLink } from './types'
 
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
 export const defaultSocialMediaLinks: SocialMediaLink[] = [
 	{
 		icon: mdiLinkedin,
@@ -14,8 +16,8 @@ export const defaultSocialMediaLinks: SocialMediaLink[] = [
 		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]

package/src/components/SocialMediaLinks/SocialMediaLinks.mdx

@@ -20,7 +20,9 @@ import * as SocialMediaLinksStories from './SocialMediaLinks.stories.ts';
 <Source dark code={`
 <script setup lang="ts">
 import { SocialMediaLinks } from '@cnamts/synapse'
-import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
+
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 
 const links = [
 	{
@@ -31,12 +33,12 @@ const links = [
 	{
 		icon: mdiFacebook,
 		name: 'Facebook',
-		href: 'https://twitter.com/Assur_Maladie',
+		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]
 </script>

package/src/components/SocialMediaLinks/SocialMediaLinks.stories.ts

@@ -1,6 +1,8 @@
 import SocialMediaLinks from './SocialMediaLinks.vue'
 import type { Meta, StoryObj } from '@storybook/vue3'
-import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiFacebook, mdiLinkedin } from '@mdi/js'
+
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 
 const meta = {
 	title: 'Composants/Navigation/SocialMediaLinks',
@@ -22,11 +24,11 @@ const meta = {
 			},
 			{
 				icon: mdiFacebook,
-				href: 'https://twitter.com/Assur_Maladie',
+				href: 'https://www.facebook.com/AssurMaladie/',
 			},
 			{
-				icon: mdiTwitter,
-				href: 'https://twitter.com/Assur_Maladie',
+				icon: xIcon,
+				href: 'https://x.com/Assur_Maladie',
 			},
 		],
 		headingLevel: 6,
@@ -78,7 +80,9 @@ export const Default: Story = {
 				name: 'Script',
 				code: `<script setup lang="ts">
 	import { SocialMediaLinks } from '@cnamts/synapse'
-	import { mdiFacebook, mdiLinkedin, mdiTwitter } from '@mdi/js'
+	import { mdiFacebook, mdiLinkedin } from '@mdi/js'
+	
+	const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
 	
 	const links = [
 		{
@@ -89,12 +93,12 @@ export const Default: Story = {
 		{
 			icon: mdiFacebook,
 			name: 'Facebook',
-			href: 'https://twitter.com/Assur_Maladie',
+			href: 'https://www.facebook.com/AssurMaladie/',
 		},
 		{
-			icon: mdiTwitter,
-			name: 'Twitter',
-			href: 'https://twitter.com/Assur_Maladie',
+			icon: xIcon,
+			name: 'X',
+			href: 'https://x.com/Assur_Maladie',
 		},
 	]
 </script>
@@ -112,12 +116,12 @@ export const Default: Story = {
 			{
 				icon: mdiFacebook,
 				name: 'Facebook',
-				href: 'https://twitter.com/Assur_Maladie',
+				href: 'https://www.facebook.com/AssurMaladie/',
 			},
 			{
-				icon: mdiTwitter,
-				name: 'Twitter',
-				href: 'https://twitter.com/Assur_Maladie',
+				icon: xIcon,
+				name: 'X',
+				href: 'https://x.com/Assur_Maladie',
 			},
 		],
 	},

package/src/components/SocialMediaLinks/SocialMediaLinks.vue

@@ -49,7 +49,10 @@
 					<SyIcon
 						:icon="social.icon"
 						size="30px"
-						class="vd-social-media-links-icon"
+						:class="{
+							'vd-social-media-links-icon': true,
+							'vd-social-media-links-icon--x': social.name === 'X',
+						}"
 						decorative
 					/>
 				</VBtn>
@@ -91,6 +94,11 @@ li {
 	color: tokens.$grey-base;
 }
 
+.vd-social-media-links-icon--x {
+	transform: scale(0.75);
+	transform-origin: center;
+}
+
 .v-btn--icon {
 	width: calc(var(--v-btn-height) + 5px);
 	height: calc(var(--v-btn-height) + 5px);

package/src/components/SocialMediaLinks/accessibilite/Accessibility.mdx

@@ -1,15 +1,67 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../SocialMediaLinks.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as SocialMediaLinksStories from '../SocialMediaLinks.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={SocialMediaLinksStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="SocialMediaLinks"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/790" target="_blank" style={{ color: '#0C41BD' }}>issue #790</a>)
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li><strong>Titre accessible</strong> : utilise un heading natif (<code>h1–h6</code>) ou un <code>role="heading"</code> + <code>aria-level</code> via <code>use-native-heading</code>.</li>
+				<li><strong>Liens</strong> : chaque bouton est un lien <code>&lt;a&gt;</code> avec <code>aria-label</code> explicite « Lien vers &lt;nom&gt; ».</li>
+				<li><strong>Icônes décoratives</strong> : <code>SyIcon</code> marqué décoratif pour ne pas polluer le lecteur d’écran.</li>
+				<li><strong>Ouverture externe</strong> : <code>target="_blank"</code> avec <code>rel="noopener noreferrer"</code> pour la sécurité.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li><strong>Focus visible</strong> : halo visible sur <code>.v-btn--icon:focus-visible</code>, contrasté en clair/sombre.</li>
+				<li><strong>Ordre logique</strong> : tabulation suit l’ordre des liens fournis.</li>
+				<li><strong>Taille des cibles</strong> : boutons icon-text élargis (<code>height/width</code> ajustée) pour une cible confortable.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SocialMediaLinks.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/790" target="_blank" style={{color:'#0C41BD'}}>issue #790</a>)</p>
-	</div>
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li><strong>Texte du label</strong> : couleur primaire (<code>tokens.$blue-base</code>) ou blanc en thème sombre.</li>
+				<li><strong>Icônes</strong> : couleur neutre (<code>tokens.$grey-base</code>) et outline blanc en sombre.</li>
+				<li><strong>Responsive</strong> : alignement adapté (gauche/droite) selon la largeur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SocialMediaLinks">
+		<Story of={SocialMediaLinksStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours un <code>aria-label</code> descriptif pour chaque lien d’icône.</li>
+			<li>Choisissez un niveau de titre cohérent avec la hiérarchie de la page (<code>heading-level</code> 1–6) ou activez <code>use-native-heading</code> pour un titre sémantique.</li>
+			<li>Vérifiez le focus visible sur tous les liens, notamment en thème sombre.</li>
+			<li>Utilisez des icônes SVG accessibles et marquées décoratives quand le libellé est déjà donné.</li>
+			<li>Si vous changez l’ordre ou la liste des réseaux, assurez-vous que l’ordre de tabulation reste logique.</li>
+		</ul>
+	</BestPracticesSection>
+</AccessibilityGuideLayout>

package/src/components/SocialMediaLinks/tests/DefaultSocialMediaLinks.spec.ts

@@ -1,6 +1,6 @@
 import { defaultSocialMediaLinks } from '../DefaultSocialMediaLinks'
 import { describe, it, expect } from 'vitest'
-import { mdiLinkedin, mdiTwitter } from '@mdi/js'
+import { mdiLinkedin } from '@mdi/js'
 
 describe('defaultSocialMediaLinks', () => {
 	it('contains the correct number of links', () => {
@@ -13,9 +13,9 @@ describe('defaultSocialMediaLinks', () => {
 		expect(linkedinLink?.icon).toBe(mdiLinkedin)
 	})
 
-	it('contains the correct Twitter link', () => {
-		const twitterLink = defaultSocialMediaLinks.find(link => link.href === 'https://twitter.com/Assur_Maladie')
-		expect(twitterLink).toBeDefined()
-		expect(twitterLink?.icon).toBe(mdiTwitter)
+	it('contains the correct X link', () => {
+		const xLink = defaultSocialMediaLinks.find(link => link.href === 'https://x.com/Assur_Maladie')
+		expect(xLink).toBeDefined()
+		expect(typeof xLink?.icon).toBe('string')
 	})
 })

package/src/components/SocialMediaLinks/tests/SocialMediaLinks.a11y.spec.ts

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SocialMediaLinks from '../SocialMediaLinks.vue'
+
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
+const sampleLinks = [
+	{
+		href: 'https://www.linkedin.com/company/assurance-maladie/',
+		name: 'LinkedIn',
+		icon: 'mdi-linkedin',
+	},
+	{
+		href: 'https://x.com/Assur_Maladie',
+		name: 'X',
+		icon: xIcon,
+	},
+	{
+		href: 'https://www.facebook.com/assurancemaladie',
+		name: 'Facebook',
+		icon: 'mdi-facebook',
+	},
+]
+
+describe('SocialMediaLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations with native heading', async () => {
+		const wrapper = mount(SocialMediaLinks, {
+			props: {
+				links: sampleLinks,
+				headingLevel: 6,
+				useNativeHeading: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SocialMediaLinks – native heading', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with ARIA heading', async () => {
+		const wrapper = mount(SocialMediaLinks, {
+			props: {
+				links: sampleLinks,
+				headingLevel: 3,
+				useNativeHeading: false,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SocialMediaLinks – aria heading', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -2,6 +2,8 @@ import { mount, VueWrapper } from '@vue/test-utils'
 import SocialMediaLinks from '../SocialMediaLinks.vue'
 import { describe, it, expect, afterEach } from 'vitest'
 
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
 describe('SocialMediaLinks', () => {
 	let wrapper: VueWrapper
 
@@ -30,7 +32,7 @@ describe('SocialMediaLinks', () => {
 
 	it('renders correctly with provided links', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
@@ -51,8 +53,8 @@ describe('SocialMediaLinks', () => {
 
 		// Check first link
 		const firstLink = listItems[0]?.find('a')
-		expect(firstLink?.attributes('href')).toBe('https://twitter.com')
-		expect(firstLink?.attributes('aria-label')).toBe('Lien vers Twitter')
+		expect(firstLink?.attributes('href')).toBe('https://x.com')
+		expect(firstLink?.attributes('aria-label')).toBe('Lien vers X')
 
 		// Check second link
 		const secondLink = listItems[1]?.find('a')
@@ -62,7 +64,7 @@ describe('SocialMediaLinks', () => {
 
 	it('renders the correct number of social media links', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 			{ href: 'https://facebook.com', name: 'Facebook', icon: 'mdi-facebook' },
 		]
 		wrapper = mount(SocialMediaLinks, {
@@ -126,7 +128,7 @@ describe('SocialMediaLinks', () => {
 
 	it('has proper focus styles for accessibility', () => {
 		const links = [
-			{ href: 'https://twitter.com', name: 'Twitter', icon: 'mdi-twitter' },
+			{ href: 'https://x.com', name: 'X', icon: xIcon },
 		]
 		wrapper = mount(SocialMediaLinks, {
 			props: {
@@ -142,8 +144,8 @@ describe('SocialMediaLinks', () => {
 
 		// Verify the button has proper accessibility attributes
 		const link = wrapper.find('a')
-		expect(link.attributes('href')).toBe('https://twitter.com')
-		expect(link.attributes('aria-label')).toBe('Lien vers Twitter')
+		expect(link.attributes('href')).toBe('https://x.com')
+		expect(link.attributes('aria-label')).toBe('Lien vers X')
 
 		// Check that the component has the necessary CSS classes for focus styles
 		// We can't test the actual CSS properties, but we can verify the structure is there

package/src/components/StatusPage/StatusPage.mdx

@@ -0,0 +1,22 @@
+import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
+import '../../stories/styles/shared.css';
+import * as StatusPageStories from './StatusPage.stories'
+
+<Meta of={StatusPageStories} />
+
+<div className="header">
+  <h1>StatusPage</h1>
+  <p>Le composant `StatusPage` sert à afficher une page de statut.</p>
+</div>
+
+<Canvas of={StatusPageStories.Default} />
+
+# API
+
+<Controls of={StatusPageStories.Default} />
+
+## Lien de retour
+
+Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
+
+<Canvas of={StatusPageStories.WithLink} />