import {Controls, Canvas, Meta, Source, Story} from '@storybook/addon-docs/blocks';
import * as CollapsibleListStories from './CollapsibleList.stories';

<Meta of={CollapsibleListStories} />

<div className="header">
  <h1>CollapsibleList</h1>
  <p>L’élément `CollapsibleList` est utilisé pour afficher des listes de liens. Cette liste affiche tout le contenu sur les grands écrans et une liste accordéon sur mobile.</p>
</div>

{/* func-version-start */}
<p className="func-version-badge">Dernière mise à jour fonctionnelle : V1.1.3 - 22/07/2026</p>
{/* func-version-end */}
{/* a11y-version-start */}
<p className="a11y-version-badge">Dernière mise à jour accessibilité : V1.1.3 - 22/07/2026</p>
{/* a11y-version-end */}


<Canvas of={CollapsibleListStories.Default}  />

# API

<Controls of={CollapsibleListStories.Default} />

<Source dark code={`
<script setup lang="ts">
	import { CollapsibleList } from '@cnamts/synapse'
	import type { ListItem } from '@cnamts/synapse/src/components/CollapsibleList/types'

	const remboursementItems = [
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
		{
			text: 'Remboursement',
			href: '/remboursement',
		},
	] as ListItem[]
</script>

<template>
	<CollapsibleList
		:items="remboursementItems"
		list-title="Remboursement"
	/>
</template>
`} />