@cnamts/synapse 1.0.9 → 1.0.10

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

@@ -86,3 +86,213 @@ export const Default: Story = {
 />`,
 	}),
 }
+
+// --- Tuile désactivée ---
+export const Desactivee: Story = {
+	name: 'Désactivée',
+	args: {
+		btnStyledText: 'Action désactivée',
+		labelFirstLine: 'Tuile',
+		labelSecondLine: 'désactivée',
+		tileType: 'toDo',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		disabled: true,
+		uniqueId: 'amelipro-state-tile-disabled',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Action désactivée"
+    label-first-line="Tuile"
+    label-second-line="désactivée"
+    tile-type="toDo"
+    tile-width="300px"
+    tile-min-height="100%"
+    :disabled="true"
+    unique-id="amelipro-state-tile-disabled"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile est désactivée grâce à la prop <code>disabled</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec lien externe (href) ---
+export const AvecLien: Story = {
+	name: 'Avec lien',
+	args: {
+		btnStyledText: 'Voir le détail',
+		labelFirstLine: 'Lien externe',
+		labelSecondLine: 'vers ameli pro',
+		tileType: 'done',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		href: 'https://espacepro.ameli.fr',
+		uniqueId: 'amelipro-state-tile-href',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Voir le détail"
+    label-first-line="Lien externe"
+    label-second-line="vers ameli pro"
+    tile-type="done"
+    tile-width="300px"
+    tile-min-height="100%"
+    href="https://espacepro.ameli.fr"
+    unique-id="amelipro-state-tile-href"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile agit comme un lien externe grâce à la prop <code>href</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec route interne (to) ---
+export const AvecRouteInterne: Story = {
+	name: 'Avec route interne',
+	args: {
+		btnStyledText: 'Accéder à la page',
+		labelFirstLine: 'Navigation interne',
+		labelSecondLine: 'avec "to"',
+		tileType: 'doneNoCertificate',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		to: '/ma-route-interne',
+		uniqueId: 'amelipro-state-tile-to',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Accéder à la page"
+    label-first-line="Navigation interne"
+    label-second-line="avec \\"to\\""
+    tile-type="doneNoCertificate"
+    tile-width="300px"
+    tile-min-height="100%"
+    to="/ma-route-interne"
+    unique-id="amelipro-state-tile-to"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile utilise la navigation interne grâce à la prop <code>to</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile avec 3 lignes de texte ---
+export const TroisLignes: Story = {
+	name: 'Trois lignes de texte',
+	args: {
+		btnStyledText: 'Action',
+		labelFirstLine: 'Première ligne',
+		labelSecondLine: 'Deuxième ligne',
+		labelThirdLine: 'Troisième ligne',
+		tileType: 'optionnal',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		uniqueId: 'amelipro-state-tile-3lignes',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Action"
+    label-first-line="Première ligne"
+    label-second-line="Deuxième ligne"
+    label-third-line="Troisième ligne"
+    tile-type="optionnal"
+    tile-width="300px"
+    tile-min-height="100%"
+    unique-id="amelipro-state-tile-3lignes"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Affichage d’une tuile avec trois lignes de texte.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}
+
+// --- Tuile sans icône PDF ---
+export const SansIconePdf: Story = {
+	name: 'Sans icône PDF',
+	args: {
+		btnStyledText: 'Télécharger',
+		labelFirstLine: 'Sans PDF',
+		labelSecondLine: 'Icône masquée',
+		tileType: 'doneNoCertificateBlue',
+		tileWidth: '300px',
+		tileMinHeight: '100%',
+		noPdfIcon: true,
+		uniqueId: 'amelipro-state-tile-no-pdf',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <AmeliproStateTile
+    btn-styled-text="Télécharger"
+    label-first-line="Sans PDF"
+    label-second-line="Icône masquée"
+    tile-type="doneNoCertificateBlue"
+    tile-width="300px"
+    tile-min-height="100%"
+    :no-pdf-icon="true"
+    unique-id="amelipro-state-tile-no-pdf"
+  />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStateTile },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">La tuile est affichée sans l’icône PDF grâce à la prop <code>noPdfIcon</code>.</p>
+<AmeliproStateTile v-bind="args" />
+`,
+	}),
+}

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

@@ -54,3 +54,329 @@ export const Default: Story = {
 		`,
 	}),
 }
+
+export const TypeSuccess: Story = {
+	name: 'Succès',
+	args: {
+		type: 'success',
+		label: 'Succès',
+		uniqueId: 'status-success',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>success</code> (vert) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="success"
+        label="Succès"
+        unique-id="status-success"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>success</code> (vert) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeErreur: Story = {
+	name: 'Erreur',
+	args: {
+		type: 'failure',
+		label: 'Erreur détectée',
+		uniqueId: 'status-error',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>failure</code> (rouge) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="failure"
+        label="Erreur détectée"
+        unique-id="status-error"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>failure</code> (rouge) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeArchive: Story = {
+	name: 'Archivé',
+	args: {
+		type: 'archive',
+		label: 'Archivé',
+		uniqueId: 'status-archive',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>archive</code> (gris) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="archive"
+        label="Archivé"
+        unique-id="status-archive"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>archive</code> (gris) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeEnCours: Story = {
+	name: 'En cours',
+	args: {
+		type: 'progress',
+		label: 'Traitement en cours',
+		uniqueId: 'status-progress',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>progress</code> (bleu) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="progress"
+        label="Traitement en cours"
+        unique-id="status-progress"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>progress</code> (bleu) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeBrouillon: Story = {
+	name: 'Brouillon',
+	args: {
+		type: 'draft',
+		label: 'Brouillon',
+		uniqueId: 'status-draft',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>draft</code> (jaune) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="draft"
+        label="Brouillon"
+        unique-id="status-draft"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>draft</code> (jaune) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeFerme: Story = {
+	name: 'Fermé',
+	args: {
+		type: 'closed',
+		label: 'Fermé',
+		uniqueId: 'status-closed',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>closed</code> (violet) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="closed"
+        label="Fermé"
+        unique-id="status-closed"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>closed</code> (violet) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeAction: Story = {
+	name: 'Action',
+	args: {
+		type: 'action',
+		label: 'Action requise',
+		uniqueId: 'status-action',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>action</code> (bleu foncé) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="action"
+        label="Action requise"
+        unique-id="status-action"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>action</code> (bleu foncé) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const TypeAnnule: Story = {
+	name: 'Annulé',
+	args: {
+		type: 'canceled',
+		label: 'Annulé',
+		uniqueId: 'status-canceled',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut de type <code>canceled</code> (rouge clair) avec label personnalisé.</p>
+    <AmeliproStatus
+        type="canceled"
+        label="Annulé"
+        unique-id="status-canceled"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut de type <code>canceled</code> (rouge clair) avec label personnalisé.</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const BaliseSpan: Story = {
+	name: 'Balise span',
+	args: {
+		type: 'success',
+		label: 'Statut en span',
+		isSpan: true,
+		uniqueId: 'status-span',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut affiché dans une balise <code>span</code> (<code>isSpan</code>).</p>
+    <AmeliproStatus
+        type="success"
+        label="Statut en span"
+        is-span
+        unique-id="status-span"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut affiché dans une balise <code>span</code> (<code>isSpan</code>).</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}
+
+export const PaddingPersonnalise: Story = {
+	name: 'Padding personnalisé',
+	args: {
+		type: 'draft',
+		label: 'Padding personnalisé',
+		paddingX: '32px',
+		paddingY: '12px',
+		uniqueId: 'status-padding',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+    <p>Statut avec padding horizontal et vertical personnalisé (<code>paddingX</code> et <code>paddingY</code>).</p>
+    <AmeliproStatus
+        type="draft"
+        label="Padding personnalisé"
+        padding-x="32px"
+        padding-y="12px"
+        unique-id="status-padding"
+    />
+</template>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproStatus },
+		setup() { return { args } },
+		template: `
+<p class="mb-2">Statut avec padding horizontal et vertical personnalisé (<code>paddingX</code> et <code>paddingY</code>).</p>
+<AmeliproStatus v-bind="args" />
+        `,
+	}),
+}