+
-### Autres icônes
-
-Il est très facile d’ajouter d’autres icônes depuis toutes les
-[20 collections](https://oh-vue-icons.netlify.app/docs#supported-icon-packs)
-mises à disposition par [OhVueIcons](https://oh-vue-icons.netlify.app) en les ajoutant à ce fichier `icons.ts`.
-
-Ci-dessous des exemples pour
-[Remix Icon](https://remixicon.com/),
-[Font Awesome 5](https://fontawesome.com/icons)
-et [Bootstrap Icons](https://icons.getbootstrap.com/) :
-
-```typescript
-// src/icons.ts
-export {
- RiCloseLine,
- RiFlagLine,
- RiHome2Line,
- RiRefreshLine,
-} from 'oh-vue-icons/icons' // Export de quelques icônes de Remix Icon (ri)
-
-export {
- FaFlag,
- FaAddressBook,
-} from 'oh-vue-icons/icons/fa/index.js' // Export de quelques icônes de Font Awesome 5 Free (fa)
-
-export {
- BiBadge3D,
- BiClouds,
-} from 'oh-vue-icons/icons/bi/index.js' // Export de quelques icônes de Bootstrap Icons (bi)
```
## Pour Nuxt 3
-Créer/modifier le fichier `vue-dsfr.ts` dans le dossier `plugins` avec un contenu comme celui-ci :
-
-```typescript
-// plugins/vue-dsfr.ts
-import {
- RiCloseLine,
- RiFlagLine,
- RiHome2Line,
- RiRefreshLine,
-} from 'oh-vue-icons/icons' // Import de quelques icônes de Remix Icon (ri)
-
-const icons = [
- RiCloseLine,
- RiFlagLine,
- RiHome2Line,
- RiRefreshLine,
-]
-
-export default defineNuxtPlugin((nuxtApp) => {
- // Enregistrement du plugin avec ajout de toutes les icônes du tableau `icons`
- nuxtApp.vueApp.use(VueDsfr, { icons }) // le deuxième paramètre est un objet contenant une propriété `icons`
- // qui est un tableau qui contient toutes les icônes que vous souhaitez utiliser
-})
-```
+Veillez simplement à utiliser la prop `ssr` à `true`.
-Le composant `VIcon` et tous les composants de VueDsfr sont désormais utilisables dans toute l’application Nuxt3
-avec toutes les icônes contenues dans le tableau `icons`.
+Plus de détails dans la [documentation officielle de @iconify/vue](https://iconify.design/docs/icon-components/vue/#ssr-attribute).
-
-
-
-
-
- Contenu de l’accordéon 1
-
-
-
-
- Contenu de l’accordéon 2
-
-
-
-
-```
-
-::: tip
-Comme l’événement `expand` a comme donnée (payload) l’`id` de l’accordéon, les deux lignes suivantes sont équivalentes :
-
-```vue
-@expand="id => expandedId = id"
-```
-
-et
-
-```vue
-@expand="expandedId = $event"
-```
-
-Cf. la [documentation Vue](https://vuejs.org/guide/essentials/event-handling.html#accessing-event-argument-in-inline-handlers) pour plus de détails.
-:::
-
-## 📝 Exemple complet
+- **`title`** : Slot pour le contenu personnalisé du titre de l’accordéon. Si non utilisé, le texte fourni via la prop `title` sera utilisé.
+- **`default`** : Slot pour le contenu principal de l'accordéon, affiché dans la section repliable.
-::: code-group
+## Utilisation
-
-
-
+Ce composant peut être utilisé uniquement avec [`DsfrAccordionsGroup`](/composants/DsfrAccordionsGroup).
-<<< docs-demo/DsfrAccordionDemo.vue [Code de la démo]
+## ⚙️ Code source du composant
+::: code-group
<<< DsfrAccordion.vue
-
-<<< DsfrAccordionsGroup.vue
+<<< DsfrAccordion.types.ts
:::
-
-
diff --git a/src/components/DsfrAccordion/DsfrAccordion.spec.ts b/src/components/DsfrAccordion/DsfrAccordion.spec.ts
index bd723e38..0706cc55 100644
--- a/src/components/DsfrAccordion/DsfrAccordion.spec.ts
+++ b/src/components/DsfrAccordion/DsfrAccordion.spec.ts
@@ -1,24 +1,31 @@
-import { fireEvent, render } from '@testing-library/vue'
-import { OhVueIcon as VIcon } from 'oh-vue-icons'
+import { render } from '@testing-library/vue'
+import VIcon from '../VIcon/VIcon.vue'
// import '@gouvfr/dsfr/dist/core/core.module.js'
import DsfrAccordion from './DsfrAccordion.vue'
+import { registerTabKey } from './injection-key'
+import { ref } from 'vue'
describe('DsfrAccordion', () => {
it('should render a simple accordion', async () => {
const title = 'Intitulé de l’accordéon'
const content = 'Contenu de l’accordéon'
- const { getByText, emitted } = render(DsfrAccordion, {
+ const { getByText } = render(DsfrAccordion, {
global: {
components: {
VIcon,
},
+ provide: {
+ [registerTabKey as symbol]: () => ({
+ isActive: ref(false),
+ expand: () => {},
+ }),
+ },
},
props: {
title,
id: 'accordion-1',
- expandedId: undefined,
},
slots: {
default: content,
@@ -30,15 +37,8 @@ describe('DsfrAccordion', () => {
expect(contentEl).toHaveClass('fr-collapse')
expect(contentEl).toHaveAttribute('id', 'accordion-1')
- expect(titleEl.parentNode).toHaveClass('fr-accordion__btn')
- expect(titleEl.parentNode.parentNode).toHaveClass('fr-accordion__title')
- expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-accordion')
-
- await fireEvent.click(titleEl.parentNode)
-
- expect(emitted()).toHaveProperty('expand')
- expect(emitted().expand).toStrictEqual([['accordion-1']])
-
- // Cannot test expandedId because Component is not wrapped in a listening Vue instance
+ expect(titleEl).toHaveClass('fr-accordion__btn')
+ expect(titleEl.parentNode).toHaveClass('fr-accordion__title')
+ expect(titleEl.parentNode.parentNode).toHaveClass('fr-accordion')
})
})
diff --git a/src/components/DsfrAccordion/DsfrAccordion.stories.ts b/src/components/DsfrAccordion/DsfrAccordion.stories.ts
index 40610d38..da79e828 100644
--- a/src/components/DsfrAccordion/DsfrAccordion.stories.ts
+++ b/src/components/DsfrAccordion/DsfrAccordion.stories.ts
@@ -1,6 +1,10 @@
import DsfrAccordion from './DsfrAccordion.vue'
import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
import DsfrCheckboxSet from '../DsfrCheckbox/DsfrCheckboxSet.vue'
+import { expect, within } from '@storybook/test'
+
+const delay = (timeout = 100) =>
+ new Promise((resolve) => setTimeout(resolve, timeout))
/**
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon/)
@@ -45,41 +49,44 @@ export const Accordeon = (args) => ({
},
template: `
-
-