@cnamts/synapse 1.0.8 → 1.0.10

package/src/components/Accordion/Accessibilite/AccessibilityGuide.mdx

@@ -1,11 +1,14 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
 import * as AccordionStories from '../Accordion.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import '../../../stories/styles/shared.css';
 
 <Meta of={AccordionStories} />
 
 <div className="accessibility-guide">
-  <Title>Guide d'Accessibilité du Composant Accordion</Title>
+<div className="header">
+  <h1>Guide d'Accessibilité du Composant Accordion</h1>
+</div>
   
   <div className="intro-section">
     <img 
@@ -18,7 +21,7 @@ import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
       notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices</a>. 
       Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
     </p>
-  </div>
+</div>
 
   <div className="criteria-section">
     <h2>Critères d'accessibilité respectés</h2>

package/src/components/Accordion/Accordion.mdx

@@ -4,9 +4,10 @@ import * as AccordionStories from './Accordion.stories';
 
 <Meta of={AccordionStories} />
 
-# Accordion
-
-Le composant `Accordion` permet d'afficher du contenu dans des sections pliables/dépliables. Il est conforme aux normes d'accessibilité ARIA.
+<div className="header">
+  <h1>Accordion</h1>
+  <p>Le composant `Accordion` permet d'afficher du contenu dans des sections pliables/dépliables. Il est conforme aux normes d'accessibilité ARIA.</p>
+</div>
 
 ## Utilisation standard
 
@@ -57,6 +58,7 @@ const accordionItems = [
   }
 ]
 </script>
+import '../../stories/styles/shared.css';
 
 <template>
   <main>

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

@@ -81,3 +81,261 @@ export const Default: Story = {
 `,
 	}),
 }
+
+// --- Panneau ouvert par défaut ---
+export const OpenByDefault: Story = {
+	args: {
+		accordionTitle: 'Ouvert par défaut',
+		default: '[Slot: default]',
+		uniqueId: 'amelipro-accordion-open',
+		isOpen: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le panneau dépliant est ouvert au chargement grâce à la prop <code>isOpen</code>.</p>
+  <AmeliproAccordion
+    accordion-title="Ouvert par défaut"
+    unique-id="amelipro-accordion-open"
+    :is-open="true"
+  >
+    <template #default>
+      [Slot: default]
+    </template>
+  </AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordion } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<p class="mb-2">Le panneau dépliant est ouvert au chargement grâce à la prop <code>isOpen</code>.</p>
+<AmeliproAccordion v-bind="args">
+  <template #default>
+    {{ args.default }}
+  </template>
+</AmeliproAccordion>
+`,
+	}),
+}
+
+// --- Bordure et couleur personnalisées ---
+export const BorderedColored: Story = {
+	args: {
+		accordionTitle: 'Bordure et couleur',
+		default: '[Slot: default]',
+		uniqueId: 'amelipro-accordion-colored',
+		bordered: true,
+		borderColor: '#1976d2',
+		cardColor: '#e3f2fd',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le panneau dépliant possède une bordure et une couleur de fond personnalisées grâce aux props <code>bordered</code>, <code>borderColor</code> et <code>cardColor</code>.</p>
+  <AmeliproAccordion
+    accordion-title="Bordure et couleur"
+    unique-id="amelipro-accordion-colored"
+    bordered
+    border-color="#1976d2"
+    card-color="#e3f2fd"
+  >
+    <template #default>
+      [Slot: default]
+    </template>
+  </AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordion } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<p class="mb-2">Le panneau dépliant possède une bordure et une couleur de fond personnalisées grâce aux props <code>bordered</code>, <code>borderColor</code> et <code>cardColor</code>.</p>
+<AmeliproAccordion v-bind="args">
+  <template #default>
+    {{ args.default }}
+  </template>
+</AmeliproAccordion>
+`,
+	}),
+}
+
+// --- Masquer le séparateur ---
+export const HideSeparator: Story = {
+	args: {
+		accordionTitle: 'Sans séparateur',
+		default: '[Slot: default]',
+		uniqueId: 'amelipro-accordion-nosep',
+		hideSeparator: true,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le séparateur entre le titre et le contenu est masqué grâce à la prop <code>hideSeparator</code>.</p>
+  <AmeliproAccordion
+    accordion-title="Sans séparateur"
+    unique-id="amelipro-accordion-nosep"
+    hide-separator
+  >
+    <template #default>
+      [Slot: default]
+    </template>
+  </AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordion } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<p class="mb-2">Le séparateur entre le titre et le contenu est masqué grâce à la prop <code>hideSeparator</code>.</p>
+<AmeliproAccordion v-bind="args">
+  <template #default>
+    {{ args.default }}
+  </template>
+</AmeliproAccordion>
+`,
+	}),
+}
+
+// --- Titre capitales et niveau ---
+export const TitleUppercaseLevel: Story = {
+	args: {
+		accordionTitle: 'Titre capitales H3',
+		default: '[Slot: default]',
+		uniqueId: 'amelipro-accordion-uppercase',
+		titleUppercase: true,
+		titleLevel: 3,
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>Le titre est en capitales et utilise le niveau de titre <code>h3</code> grâce aux props <code>titleUppercase</code> et <code>titleLevel</code>.</p>
+  <AmeliproAccordion
+    accordion-title="Titre capitales H3"
+    unique-id="amelipro-accordion-uppercase"
+    title-uppercase
+    :title-level="3"
+  >
+    <template #default>
+      [Slot: default]
+    </template>
+  </AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordion } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<p class="mb-2">Le titre est en capitales et utilise le niveau de titre <code>h3</code> grâce aux props <code>titleUppercase</code> et <code>titleLevel</code>.</p>
+<AmeliproAccordion v-bind="args">
+  <template #default>
+    {{ args.default }}
+  </template>
+</AmeliproAccordion>
+`,
+	}),
+}
+
+// --- Slot headerRight avec largeur personnalisée ---
+export const HeaderRightWidth: Story = {
+	args: {
+		accordionTitle: 'Header droit personnalisé',
+		default: '[Slot: default]',
+		headerRight: '[Slot: headerRight]',
+		uniqueId: 'amelipro-accordion-header-right',
+		headerRightWidth: '200px',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+  <p>La partie droite du header utilise le slot <code>headerRight</code> et une largeur personnalisée via <code>headerRightWidth</code>.</p>
+  <AmeliproAccordion
+    accordion-title="Header droit personnalisé"
+    unique-id="amelipro-accordion-header-right"
+    header-right-width="200px"
+  >
+    <template #default>
+      [Slot: default]
+    </template>
+    <template #headerRight>
+      [Slot: headerRight]
+    </template>
+  </AmeliproAccordion>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+  import { AmeliproAccordion } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproAccordion },
+		setup() {
+			return { args }
+		},
+		template: `
+<p class="mb-2">La partie droite du header utilise le slot <code>headerRight</code> et une largeur personnalisée via <code>headerRightWidth</code>.</p>
+<AmeliproAccordion v-bind="args">
+  <template #default>
+    {{ args.default }}
+  </template>
+  <template #headerRight>
+    {{ args.headerRight }}
+  </template>
+</AmeliproAccordion>
+`,
+	}),
+}

package/src/components/Amelipro/AmeliproAccordionFrieze/AmeliproAccordionFrieze.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproAccordionFriezeStories from './AmeliproAccordionFrieze.stories';
+
+<Meta of={AmeliproAccordionFriezeStories} />
+
+# AmeliproAccordionFrieze
+
+L’élément `AmeliproAccordionFrieze` est utilisé pour afficher tous les éléments de type Carrousel constitués de bloc dépliants dans la charte Amelipro
+
+<Canvas of={AmeliproAccordionFriezeStories.Default} />
+
+## API
+
+<Controls of={AmeliproAccordionFriezeStories.Default} />

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

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+import AmeliproAccordionFrieze from './AmeliproAccordionFrieze.vue'
+
+const meta = {
+	argTypes: {
+		'`${uniqueId}-slot-slide-${index}-item-${item.uniqueId}`': { description: 'Slots générés automatiquement pour chaque item' },
+		'click-next': { description: 'Evénement émis au clic sur le bouton suivant du carrousel' },
+		'click-previous': { description: 'Evénement émis au clic sur le bouton précédent du carrousel' },
+		'defaultOpenedAccordion': { description: 'id unique du bloc déplié par défaut' },
+		'defaultSlide': { description: 'numéro de la slide affichée par défaut' },
+		'duration': { description: 'Durée de transition entre les slides du carrousel en secondes' },
+		'fillSlideOrientation': { description: 'Définit dans quel sens doivent être remplies les slide prend les valeur `left` ou `right`' },
+		'infiniteRotation': { description: 'Booléen permettant de faire boucler les slides du carrousel' },
+		'item': { description: 'Slots générés automatiquement pour chaque item, afin de donner le même aspect à tous les items' },
+		'items': {
+			description: 'Tableau comprenant la liste des blocs dépliants à afficher dans le carrousel',
+			table: {
+				type: {
+					detail: `Array <{
+	title?: string,
+	linkStyleText?: string,
+	uniqueId: string,
+	isEmpty?: boolean,
+}>`,
+					summary: 'AmeliproAccordionFriezeItem[]',
+				},
+			},
+		},
+		'labelNextBtn': { description: 'Libellé du bouton suivant, il est affiché au survol du bouton' },
+		'labelPreviousBtn': { description: 'Libellé du bouton précédent, il est affiché au survol du bouton' },
+		'open-close-event': { description: 'Evénement émis à l\'ouverture ou fermeture des accordéons' },
+		'title': { description: 'Titre du carrousel doit être pertinent par rapport au contenu' },
+		'uniqueId': { description: 'Identifiant unique du carrousel' },
+	},
+	component: AmeliproAccordionFrieze,
+	title: 'Composants/Amelipro/Listes de résultats/AmeliproAccordionFrieze',
+} as Meta<typeof AmeliproAccordionFrieze>
+export default meta
+
+type Story = StoryObj<typeof AmeliproAccordionFrieze>
+
+export const Default: Story = {
+	args: {
+		items: [
+			{
+				linkStyleText: 'sous-titre 1',
+				title: 'titre 1',
+				uniqueId: '1',
+			},
+			{
+				linkStyleText: 'sous-titre 2',
+				title: 'titre 2',
+				uniqueId: '2',
+			},
+			{
+				linkStyleText: 'sous-titre 3',
+				title: 'titre 3',
+				uniqueId: '3',
+			},
+			{
+				linkStyleText: 'sous-titre 4',
+				title: 'titre 4',
+				uniqueId: '4',
+			},
+			{
+				linkStyleText: 'sous-titre 5',
+				title: 'titre 5',
+				uniqueId: '5',
+			},
+			{
+				linkStyleText: 'sous-titre 6',
+				title: 'titre 6',
+				uniqueId: '6',
+			},
+			{
+				linkStyleText: 'sous-titre 7',
+				title: 'titre 7',
+				uniqueId: '7',
+			},
+			{
+				linkStyleText: 'sous-titre 8',
+				title: 'titre 8',
+				uniqueId: '8',
+			},
+			{
+				linkStyleText: 'sous-titre 9',
+				title: 'titre 9',
+				uniqueId: '9',
+			},
+			{
+				linkStyleText: 'sous-titre 10',
+				title: 'titre 10',
+				uniqueId: '10',
+			},
+			{
+				linkStyleText: 'sous-titre 11',
+				title: 'titre 11',
+				uniqueId: '11',
+			},
+			{
+				linkStyleText: 'sous-titre 12',
+				title: 'titre 12',
+				uniqueId: '12',
+			},
+			{
+				linkStyleText: 'sous-titre 13',
+				title: 'titre 13',
+				uniqueId: '13',
+			},
+			{
+				linkStyleText: 'sous-titre 14',
+				title: 'titre 14',
+				uniqueId: '14',
+			},
+		],
+		title: 'Titre du carrousel',
+		uniqueId: 'amelipro-accordion-frieze-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproAccordionFrieze
+		:items="items"
+		title="Titre du carrousel"
+		unique-id="amelipro-accordion-frieze-id"
+	>
+		<template #item>
+			<div class="d-flex">
+				<AmeliproCard 
+					card-title="Contenu dépliant"
+					class="mt-4"				
+				>
+					<template #default>
+						<p class="mb-0">
+							Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+							à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+							faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+							un texte en faux latin, le Lorem ipsum ou Lipsum.
+						</p>
+					</template>
+				</AmeliproCard>
+			</div>
+		</template>
+	</AmeliproAccordionFrieze>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproCard, AmeliproAccordionFrieze } from '@cnamts/synapse'
+
+	const items = [
+		{
+			linkStyleText: 'sous-titre 1',
+			title: 'titre 1',
+			uniqueId: '1',
+		},
+		{
+			linkStyleText: 'sous-titre 2',
+			title: 'titre 2',
+			uniqueId: '2',
+		},
+		{
+			linkStyleText: 'sous-titre 3',
+			title: 'titre 3',
+			uniqueId: '3',
+		},
+		{
+			linkStyleText: 'sous-titre 4',
+			title: 'titre 4',
+			uniqueId: '4',
+		},
+		{
+			linkStyleText: 'sous-titre 5',
+			title: 'titre 5',
+			uniqueId: '5',
+		},
+		{
+			linkStyleText: 'sous-titre 6',
+			title: 'titre 6',
+			uniqueId: '6',
+		},
+		{
+			linkStyleText: 'sous-titre 7',
+			title: 'titre 7',
+			uniqueId: '7',
+		},
+		{
+			linkStyleText: 'sous-titre 8',
+			title: 'titre 8',
+			uniqueId: '8',
+		},
+		{
+			linkStyleText: 'sous-titre 9',
+			title: 'titre 9',
+			uniqueId: '9',
+		},
+		{
+			linkStyleText: 'sous-titre 10',
+			title: 'titre 10',
+			uniqueId: '10',
+		},
+		{
+			linkStyleText: 'sous-titre 11',
+			title: 'titre 11',
+			uniqueId: '11',
+		},
+		{
+			linkStyleText: 'sous-titre 12',
+			title: 'titre 12',
+			uniqueId: '12',
+		},
+		{
+			linkStyleText: 'sous-titre 13',
+			title: 'titre 13',
+			uniqueId: '13',
+		},
+		{
+			linkStyleText: 'sous-titre 14',
+			title: 'titre 14',
+			uniqueId: '14',
+		},
+	]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproCard, AmeliproAccordionFrieze },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproAccordionFrieze
+	v-bind="args"
+>
+	<template #item>
+		<div class="d-flex">
+			<AmeliproCard 
+				card-title="Contenu dépliant"
+				class="mt-4"
+			>
+				<template #default>
+					<p class="mb-0">
+						Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+						à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+						faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+						un texte en faux latin, le Lorem ipsum ou Lipsum.
+					</p>
+				</template>
+			</AmeliproCard>
+		</div>
+	</template>
+</AmeliproAccordionFrieze>
+		`,
+	}),
+}