@cnamts/synapse 1.0.8 → 1.0.10

package/src/components/Amelipro/AmeliproFirstLogin/locales.ts

@@ -0,0 +1,48 @@
+export const locales = {
+	advantages: {
+		advantage1: 'Utilisation rapide et facile pour un gain de temps',
+		advantage2: 'Démarche simplifées grâce aux référentiels',
+		advantage3: 'Dématérialisation pour moins de papier',
+		advantage4: 'Prise en compte immédiate par l’Assurance Maladie',
+		advantage5: 'De plus en plus de régimes d Assurance Maladie',
+		advantage6: 'Démarches sécurisées et simplifiées pour vos patients',
+	},
+	advantagesTitle: 'De nombreux avantages',
+	cardTitle: 'Bienvenue dans votre espace Amelipro',
+	header: 'Retrouvez tous les services de l’Assurance Maladie réunis dans une seule offre',
+	onlineProcess: {
+		process1: 'Arret de travail',
+		process2: `Accident du travail
+        Maladies professionnelles`,
+		process3: `Protocole de soins
+        Affections de longue durée`,
+		process4: 'Prescription de transport',
+		process5: 'Déclaration médecin traitant',
+		process6: 'Déclaration simplifiée de grossesse',
+	},
+	onlineProcessSubtitle: 'Accessible par authentification avec la carte CPS',
+	onlineProcessTitle: 'Des téléprocédures pour faciliter la prise en charge de vos patients.',
+	services: {
+		service1: {
+			icon: 'paiements',
+			text: 'Consultez vos tiers-payant (factures, lots), vos relevés mensuels, vos forfaits et vos indus, pour les principaux régimes d’Assurance Maladie.',
+			title: 'Tous mes paiements',
+		},
+		service2: {
+			icon: 'convention',
+			text: 'Suivez vos indicateurs de la ROSP, réalisez vos déclarations et consultez le détail de vos rémunérations.',
+			title: 'Ma convention',
+		},
+		service3: {
+			icon: 'patientele',
+			text: 'Consultez les droits de base à l’Assurance Maladie de vos patients.',
+			title: 'Info Patient',
+		},
+		service4: {
+			icon: 'commandes',
+			text: 'Commandez des formulaires Cerfa, des kits de dépistage du cancer colorectal, des tests de diagnostic rapide de l’angine ou des tensiomètres.',
+			title: 'Commandes',
+		},
+	},
+	servicesTitle: 'Des services d’aide au suivi de votre activité accessibles où que vous soyez.',
+}

package/src/components/Amelipro/AmeliproIcon/AmeliproIcon.stories.ts

@@ -71,9 +71,30 @@ export const Default: Story = {
 
 }
 
+// Génrer le code à afficher dans la story AllIcons
+const allIconsCode = iconList.map((icon) => {
+	const bgColor = icon.noBackground ? 'transparent' : 'ap-blue-darken-1'
+	const color = icon.noBackground ? 'ap-blue-darken-1' : 'ap-white'
+	return `<AmeliproIcon
+		icon="${icon.name}"
+		icon-bg-color="${bgColor}"
+		icon-color="${color}"
+		unique-id="amelipro-icon-${icon.name}"
+	/>
+`
+}).join('\n')
+
 export const AllIcons: Story = {
 	args: { iconColor: 'ap-white' },
-	parameters: {},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+
+				code: allIconsCode,
+			},
+		],
+	},
 	render: args => ({
 		components: { AmeliproIcon },
 		setup() {
@@ -99,3 +120,42 @@ export const AllIcons: Story = {
 </ul>`,
 	}),
 }
+
+export const AvecBordure: Story = {
+	name: 'Avec bordure personnalisée',
+	args: {
+		icon: 'utilisateur',
+		iconColor: 'ap-red-darken-1',
+		iconBgColor: 'ap-white',
+		bordered: true,
+		borderColor: 'ap-red-darken-1',
+		uniqueId: 'amelipro-icon-bordered',
+		xLarge: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <AmeliproIcon
+        icon="utilisateur"
+        icon-color="ap-red-darken-1"
+        icon-bg-color="ap-white"
+        bordered
+        border-color="ap-red-darken-1"
+        x-large
+        unique-id="amelipro-icon-bordered"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIcon },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Icône Amelipro avec bordure personnalisée (<code>bordered</code> et <code>borderColor</code>).</p>
+<AmeliproIcon v-bind="args" />
+        `,
+	}),
+}

package/src/components/Amelipro/AmeliproIconBtn/AmeliproIconBtn.stories.ts

@@ -79,3 +79,177 @@ export const Default: Story = {
 />`,
 	}),
 }
+
+export const BadgeTexte: Story = {
+	name: 'Badge texte',
+	args: {
+		icon: 'utilisateur',
+		iconColor: 'ap-blue-darken-1',
+		iconHoverColor: 'ap-blue-darken-2',
+		badge: 'A',
+		badgeBgColor: 'ap-green',
+		badgeColor: 'ap-white',
+		btnLabel: 'Voir les nouveautés',
+		uniqueId: 'icon-btn-badge-texte',
+		xLarge: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Bouton icône avec badge texte personnalisé.</p>
+    <AmeliproIconBtn
+        icon="utilisateur"
+        icon-color="ap-blue-darken-1"
+        icon-hover-color="ap-blue-darken-2"
+        badge="A"
+        badge-bg-color="ap-green"
+        badge-color="ap-white"
+        btn-label="Voir les nouveautés"
+        x-large
+        unique-id="icon-btn-badge-texte"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIconBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton icône avec badge texte personnalisé.</p>
+<AmeliproIconBtn v-bind="args" />
+        `,
+	}),
+}
+
+export const NavigationInterne: Story = {
+	name: 'Navigation interne',
+	args: {
+		icon: 'applications',
+		iconColor: 'ap-grey-darken-2',
+		iconHoverColor: 'ap-blue-darken-1',
+		btnLabel: 'Aller aux paramètres',
+		to: '/parametres',
+		uniqueId: 'icon-btn-to',
+		xLarge: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Bouton icône qui utilise la prop <code>to</code> pour une navigation interne.</p>
+    <AmeliproIconBtn
+        icon="applications"
+        icon-color="ap-grey-darken-2"
+        icon-hover-color="ap-blue-darken-1"
+        btn-label="Aller aux paramètres"
+        to="/parametres"
+        x-large
+        unique-id="icon-btn-to"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIconBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton icône qui utilise la prop <code>to</code> pour une navigation interne.</p>
+<AmeliproIconBtn v-bind="args" />
+        `,
+	}),
+}
+
+export const AvecPrependAppend: Story = {
+	name: 'Avec slot prepend et append',
+	args: {
+		icon: 'utilisateur',
+		iconColor: 'ap-blue-darken-1',
+		iconHoverColor: 'ap-blue-darken-2',
+		btnLabel: 'Bouton avec slots',
+		uniqueId: 'icon-btn-slots',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Bouton icône avec contenu dans les slots <code>prepend</code> et <code>append</code>.</p>
+    <AmeliproIconBtn
+        icon="utilisateur"
+        icon-color="ap-blue-darken-1"
+        icon-hover-color="ap-blue-darken-2"
+        btn-label="Bouton avec slots"
+        unique-id="icon-btn-slots"
+    >
+        <template #prepend>
+            <span style="font-size: 0.9em; color: #1976d2;">Avant</span>
+        </template>
+        <template #append>
+            <span style="font-size: 0.9em; color: #1976d2;">Après</span>
+        </template>
+    </AmeliproIconBtn>
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIconBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton icône avec contenu dans les slots <code>prepend</code> et <code>append</code>.</p>
+<AmeliproIconBtn v-bind="args">
+    <template #prepend>
+        <span style="font-size: 0.9em; color: #1976d2;">Avant</span>
+    </template>
+    <template #append>
+        <span style="font-size: 0.9em; color: #1976d2;">Après</span>
+    </template>
+</AmeliproIconBtn>
+        `,
+	}),
+}
+
+export const Accessibilite: Story = {
+	name: 'Accessibilité (label et title)',
+	args: {
+		icon: 'aide',
+		iconColor: 'ap-blue-darken-1',
+		iconHoverColor: 'ap-blue-darken-2',
+		btnLabel: 'Aide',
+		btnTitle: 'Ouvrir l’aide',
+		uniqueId: 'icon-btn-access',
+		xLarge: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Bouton icône avec label et title pour l’accessibilité.</p>
+    <AmeliproIconBtn
+        icon="aide"
+        icon-color="ap-blue-darken-1"
+        icon-hover-color="ap-blue-darken-2"
+        btn-label="Aide"
+        btn-title="Ouvrir l’aide"
+        x-large
+        unique-id="icon-btn-access"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIconBtn },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Bouton icône avec label et title pour l’accessibilité.</p>
+<AmeliproIconBtn v-bind="args" />
+        `,
+	}),
+}

package/src/components/Amelipro/AmeliproIllustratedDataTile/AmeliproIllustratedDataTile.stories.ts

@@ -65,3 +65,189 @@ export const Default: Story = {
 	}),
 
 }
+
+// --- Tuile illustrée avec image personnalisée ---
+export const AvecImage: Story = {
+	name: 'Avec image',
+	args: {
+		imgSrc: '.storybook/public/logos/logo-assurance-maladie.svg',
+		labelFirstLine: 'Assurance Maladie',
+		labelSecondLine: 'Partenaire',
+		tileWidth: '250px',
+		uniqueId: 'amelipro-illustrated-tile-img',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproIllustratedDataTile
+  img-src=".storybook/public/logos/logo-assurance-maladie.svg"
+  label-first-line="Assurance Maladie"
+  label-second-line="Partenaire"
+  tile-width="250px"
+  unique-id="amelipro-illustrated-tile-img"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedDataTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’une image personnalisée grâce à la prop <code>imgSrc</code>.</p>
+<AmeliproIllustratedDataTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile illustrée avec icône ---
+export const AvecIcone: Story = {
+	name: 'Avec icône',
+	args: {
+		iconName: 'document',
+		labelFirstLine: 'Documents',
+		labelSecondLine: 'à traiter',
+		tileWidth: '250px',
+		uniqueId: 'amelipro-illustrated-tile-icon',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproIllustratedDataTile
+  icon-name="document"
+  label-first-line="Documents"
+  label-second-line="à traiter"
+  tile-width="250px"
+  unique-id="amelipro-illustrated-tile-icon"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedDataTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’une icône grâce à la prop <code>iconName</code>.</p>
+<AmeliproIllustratedDataTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile illustrée avec informations complémentaires ---
+export const AvecInfosComplements: Story = {
+	name: 'Avec infos complémentaires',
+	args: {
+		iconName: 'chrono',
+		labelFirstLine: 'Traitement',
+		labelSecondLine: 'en cours',
+		tileWidth: '250px',
+		uniqueId: 'amelipro-illustrated-tile-complement',
+		complementaryInformation: [
+			{ label: 'Dossiers', value: '12' },
+			{ label: 'Restants', value: '3' },
+		],
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproIllustratedDataTile
+  icon-name="chrono"
+  label-first-line="Traitement"
+  label-second-line="en cours"
+  tile-width="250px"
+  unique-id="amelipro-illustrated-tile-complement"
+  :complementary-information="[{ label: 'Dossiers', value: '12' }, { label: 'Restants', value: '3' }]"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedDataTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’informations complémentaires sous le sous-titre grâce à la prop <code>complementaryInformation</code>.</p>
+<AmeliproIllustratedDataTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile illustrée avec niveau de titre personnalisé ---
+export const TitreNiveauPersonnalise: Story = {
+	name: 'Niveau de titre personnalisé',
+	args: {
+		iconName: 'document',
+		labelFirstLine: 'Titre niveau 4',
+		labelSecondLine: 'Sous-titre',
+		tileWidth: '250px',
+		uniqueId: 'amelipro-illustrated-tile-title-level',
+		titleLevel: 4,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproIllustratedDataTile
+  icon-name="document"
+  label-first-line="Titre niveau 4"
+  label-second-line="Sous-titre"
+  tile-width="250px"
+  unique-id="amelipro-illustrated-tile-title-level"
+  :title-level="4"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedDataTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le niveau du titre est personnalisé grâce à la prop <code>titleLevel</code>.</p>
+<AmeliproIllustratedDataTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile illustrée avec padding et min-height personnalisés ---
+export const AvecStylePerso: Story = {
+	name: 'Style personnalisé',
+	args: {
+		iconName: 'chrono',
+		labelFirstLine: 'Style',
+		labelSecondLine: 'personnalisé',
+		tileWidth: '250px',
+		tilePadding: '3rem 2rem',
+		tileMinHeight: '200px',
+		uniqueId: 'amelipro-illustrated-tile-style',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<AmeliproIllustratedDataTile
+  icon-name="chrono"
+  label-first-line="Style"
+  label-second-line="personnalisé"
+  tile-width="250px"
+  tile-padding="3rem 2rem"
+  tile-min-height="200px"
+  unique-id="amelipro-illustrated-tile-style"
+/>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedDataTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Le padding et la hauteur minimale sont personnalisés grâce aux props <code>tilePadding</code> et <code>tileMinHeight</code>.</p>
+<AmeliproIllustratedDataTile v-bind="args" />
+`,
+	}),
+}

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/AmeliproIllustratedRadioGroup.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import { ref, watch } from 'vue'
 import AmeliproIllustratedRadioGroup from './AmeliproIllustratedRadioGroup.vue'
+import AmeliproTooltips from '../AmeliproTooltips/AmeliproTooltips.vue'
 
 const meta = {
 	argTypes: {
@@ -160,3 +161,196 @@ export const Default: Story = {
 />`,
 	}),
 }
+
+export const Disabled: Story = {
+	args: {
+		groupLabel: 'Groupe désactivé',
+		modelValue: items,
+		uniqueId: 'illustrated-radio-disabled',
+		disabled: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le groupe de boutons radios est entièrement désactivé grâce à la prop <code>disabled</code>.</p>
+  <AmeliproIllustratedRadioGroup
+    v-model="value"
+    group-label="Groupe désactivé"
+    unique-id="illustrated-radio-disabled"
+    disabled
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproIllustratedRadioGroup } from '@cnamts/synapse'
+  const value = ref(${JSON.stringify(items, null, 2)})
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedRadioGroup },
+		setup() {
+			const model = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le groupe de boutons radios est entièrement désactivé grâce à la prop <code>disabled</code>.</p>
+<AmeliproIllustratedRadioGroup v-bind="args" v-model="model" />`,
+	}),
+}
+
+export const Required: Story = {
+	args: {
+		groupLabel: 'Sélection obligatoire',
+		modelValue: items,
+		uniqueId: 'illustrated-radio-required',
+		ariaRequired: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>La sélection d’un bouton est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+  <AmeliproIllustratedRadioGroup
+    v-model="value"
+    group-label="Sélection obligatoire"
+    unique-id="illustrated-radio-required"
+    aria-required
+    error
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproIllustratedRadioGroup } from '@cnamts/synapse'
+  const value = ref(${JSON.stringify(items, null, 2)})
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedRadioGroup },
+		setup() {
+			const model = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">La sélection d’un bouton est obligatoire grâce à la prop <code>ariaRequired</code>.</p>
+<AmeliproIllustratedRadioGroup v-bind="args" v-model="model" />`,
+	}),
+}
+
+export const IconSize: Story = {
+	args: {
+		groupLabel: 'Taille d’icône personnalisée',
+		modelValue: items,
+		uniqueId: 'illustrated-radio-iconsize',
+		iconSize: '100px',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>La taille des icônes est personnalisée via la prop <code>iconSize</code>.</p>
+  <AmeliproIllustratedRadioGroup
+    v-model="value"
+    group-label="Taille d’icône personnalisée"
+    unique-id="illustrated-radio-iconsize"
+    icon-size="100px"
+  />
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproIllustratedRadioGroup } from '@cnamts/synapse'
+  const value = ref(${JSON.stringify(items, null, 2)})
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedRadioGroup },
+		setup() {
+			const model = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">La taille des icônes est personnalisée via la prop <code>iconSize</code>.</p>
+<AmeliproIllustratedRadioGroup v-bind="args" v-model="model" />`,
+	}),
+}
+
+export const LabelInfo: Story = {
+	args: {
+		groupLabel: 'Label avec info-bulle',
+		modelValue: items,
+		uniqueId: 'illustrated-radio-labelinfo',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le slot <code>labelInfo</code> permet d’ajouter une info-bulle au label du groupe.</p>
+  <AmeliproIllustratedRadioGroup
+    v-model="value"
+    group-label="Label avec info-bulle"
+    unique-id="illustrated-radio-labelinfo"
+  >
+	<template #labelInfo>
+		<AmeliproTooltips
+			tooltip-text="Info-bulle personnalisée"
+			unique-id="amelipro-tooltip-id"
+		/>
+	</template>
+  </AmeliproIllustratedRadioGroup>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { ref } from 'vue'
+  import { AmeliproIllustratedRadioGroup } from '@cnamts/synapse'
+  const value = ref(${JSON.stringify(items, null, 2)})
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproIllustratedRadioGroup, AmeliproTooltips },
+		setup() {
+			const model = ref(args.modelValue)
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `<p class="mb-2">Le slot <code>labelInfo</code> permet d’ajouter une info-bulle au label du groupe.</p>
+<AmeliproIllustratedRadioGroup v-bind="args" v-model="model">
+  <template #labelInfo>
+    <AmeliproTooltips
+        tooltip-text="Info-bulle personnalisée"
+        unique-id="amelipro-tooltip-id"
+    />
+  </template>
+</AmeliproIllustratedRadioGroup>`,
+	}),
+}