Skip to content

Commit b3a16b5

Browse files
laruisslaruiss
authored
Merge pull request #540 from dnum-mi/develop
Develop
2 parents e99af19 + 9c21f1b commit b3a16b5

25 files changed

+690
-174
lines changed

‎src/components/DsfrAccordion/DsfrAccordion.spec.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ describe('DsfrAccordion', () => {
99
const title = 'Intitulé de l’accordéon'
1010
const content = 'Contenu de l’accordéon'
1111

12-
const { getByText } = render(DsfrAccordion, {
12+
const { getByText, emitted } = render(DsfrAccordion, {
1313
global: {
1414
components: {
1515
VIcon,
1616
},
1717
},
1818
props: {
1919
title,
20-
id: '1',
21-
expandedId: '1',
20+
id: 'accordion-1',
21+
expandedId: undefined,
2222
},
2323
slots: {
2424
default: content,
@@ -28,12 +28,17 @@ describe('DsfrAccordion', () => {
2828
const titleEl = getByText(title)
2929
const contentEl = getByText(content)
3030

31-
await fireEvent.click(titleEl)
32-
31+
expect(contentEl).toHaveClass('fr-collapse')
32+
expect(contentEl).toHaveAttribute('id', 'accordion-1')
3333
expect(titleEl.parentNode).toHaveClass('fr-accordion__btn')
3434
expect(titleEl.parentNode.parentNode).toHaveClass('fr-accordion__title')
3535
expect(titleEl.parentNode.parentNode.parentNode).toHaveClass('fr-accordion')
36-
expect(contentEl).toHaveClass('fr-collapse--expanded')
37-
expect(contentEl).toHaveClass('fr-collapse')
36+
37+
await fireEvent.click(titleEl.parentNode)
38+
39+
expect(emitted()).toHaveProperty('expand')
40+
expect(emitted().expand).toStrictEqual([['accordion-1']])
41+
42+
// Cannot test expandedId because Component is not wrapped in a listening Vue instance
3843
})
3944
})

‎src/components/DsfrAccordion/DsfrAccordion.stories.js‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import DsfrAccordion from './DsfrAccordion.vue'
22
import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
3+
import DsfrCheckboxSet from '../DsfrCheckbox/DsfrCheckboxSet.vue'
34

45
/**
56
* [Voir quand l’utiliser sur la documentation du DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon/)
@@ -68,6 +69,77 @@ Accordeon.args = {
6869
title: 'Un titre d’accordéon',
6970
}
7071

72+
export const AccordeonSimple = (args) => ({
73+
components: {
74+
DsfrAccordion,
75+
},
76+
77+
data () {
78+
return {
79+
...args,
80+
expandedId: undefined,
81+
title1: args.title + ' 1',
82+
}
83+
},
84+
85+
template: `
86+
<DsfrAccordion
87+
:title="title1"
88+
:expanded-id="expandedId"
89+
@expand="expandedId = $event"
90+
>
91+
Contenu de l’accordéon 1
92+
</DsfrAccordion>
93+
`,
94+
})
95+
AccordeonSimple.args = {
96+
title: 'Un titre d’accordéon',
97+
}
98+
99+
export const AccordeonDejaOuvert = (args) => ({
100+
components: {
101+
DsfrAccordion,
102+
DsfrAccordionsGroup,
103+
},
104+
105+
data () {
106+
return {
107+
...args,
108+
expandedId: 'accordeon-1',
109+
title1: args.title + ' 1',
110+
title2: args.title + ' 2',
111+
}
112+
},
113+
114+
template: `
115+
<DsfrAccordionsGroup>
116+
<li>
117+
<DsfrAccordion
118+
:title="title1"
119+
id="accordeon-1"
120+
:expanded-id="expandedId"
121+
@expand="expandedId = $event"
122+
>
123+
Contenu de l’accordéon 1
124+
</DsfrAccordion>
125+
</li>
126+
<li>
127+
<DsfrAccordion
128+
:title="title2"
129+
id="accordeon-2"
130+
:expanded-id="expandedId"
131+
@expand="expandedId = $event"
132+
>
133+
Contenu de l’accordéon 2
134+
</DsfrAccordion>
135+
</li>
136+
</DsfrAccordionsGroup>
137+
`,
138+
})
139+
AccordeonDejaOuvert.args = {
140+
title: 'Un titre d’accordéon',
141+
}
142+
71143
export const AccordeonDansUnAccordeon = (args) => ({
72144
components: {
73145
DsfrAccordion,
@@ -167,3 +239,66 @@ AccordeonTitreCustom.args = {
167239
title1: 'Un titre d’accordéon customisé',
168240
title2: 'Un autre titre d’accordéon',
169241
}
242+
243+
export const AccordeonAvecCheckbox = (args) => ({
244+
components: {
245+
DsfrAccordion,
246+
DsfrAccordionsGroup,
247+
DsfrCheckboxSet,
248+
},
249+
250+
data () {
251+
return {
252+
...args,
253+
expandedId: undefined,
254+
accordions: args.accordions,
255+
}
256+
},
257+
258+
template: `
259+
<dsfr-accordions-group>
260+
<li
261+
v-for="(accordion, name) in accordions"
262+
:id="\`accordion_${name}\`"
263+
:key="name"
264+
>
265+
<dsfr-accordion
266+
:id="name"
267+
:title="name"
268+
:expanded-id="expandedId"
269+
@expand="id => expandedId = id"
270+
>
271+
<dsfr-checkbox-set
272+
:options="accordion.options"
273+
small
274+
/>
275+
</dsfr-accordion>
276+
</li>
277+
</dsfr-accordions-group>
278+
`,
279+
})
280+
AccordeonAvecCheckbox.args = {
281+
accordions: {
282+
'Accordéon 1': {
283+
options: [
284+
{ label: 'Option 1', value: 'option1', name: 'option1' },
285+
{ label: 'Option 2', value: 'option2', name: 'option2' },
286+
{ label: 'Option 3', value: 'option3', name: 'option3' },
287+
],
288+
},
289+
'Accordéon 2': {
290+
options: [
291+
{ label: 'Option 1', value: 'option1', name: 'option1' },
292+
{ label: 'Option 2', value: 'option2', name: 'option2' },
293+
{ label: 'Option 3', value: 'option3', name: 'option3' },
294+
],
295+
},
296+
'Accordéon 3': {
297+
options: [
298+
{ label: 'Option 1', value: 'option1', name: 'option1' },
299+
{ label: 'Option 2', value: 'option2', name: 'option2' },
300+
{ label: 'Option 3', value: 'option3', name: 'option3' },
301+
],
302+
},
303+
},
304+
}

‎src/components/DsfrAccordion/DsfrAccordion.vue‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { defineComponent } from 'vue'
55
// import '@gouvfr/dsfr/dist/component/accordion/accordion.module.js'
66
77
import { getRandomId } from '../../utils/random-utils.js'
8+
import { useCollapsable } from '@/composables'
89
910
export default defineComponent({
1011
name: 'DsfrAccordion',
@@ -27,9 +28,23 @@ export default defineComponent({
2728
2829
emits: ['expand'],
2930
30-
data () {
31+
setup () {
32+
const {
33+
collapse,
34+
collapsing,
35+
cssExpanded,
36+
doExpand,
37+
adjust,
38+
onTransitionEnd,
39+
} = useCollapsable()
40+
3141
return {
32-
collapsing: false,
42+
collapse,
43+
collapsing,
44+
cssExpanded,
45+
doExpand,
46+
adjust,
47+
onTransitionEnd,
3348
}
3449
},
3550
@@ -45,21 +60,19 @@ export default defineComponent({
4560
*/
4661
expanded (newValue, oldValue) {
4762
if (newValue !== oldValue) {
48-
if (newValue === true) {
49-
this.$refs.collapse.style.setProperty('--collapse-max-height', 'none')
50-
}
51-
this.collapsing = true
52-
this.adjust()
53-
setTimeout(() => {
54-
this.collapsing = false
55-
if (newValue === false) {
56-
this.$refs.collapse.style.removeProperty('--collapse-max-height')
57-
}
58-
}, 300)
63+
this.doExpand(newValue)
5964
}
6065
},
6166
},
6267
68+
mounted () {
69+
// Accordion can be expanded by default
70+
// We need to trigger the expand animation at mounted
71+
if (this.expanded) {
72+
this.doExpand(true)
73+
}
74+
},
75+
6376
methods: {
6477
toggleExpanded () {
6578
/*
@@ -71,17 +84,7 @@ export default defineComponent({
7184
this.$emit('expand', this.id)
7285
}
7386
},
74-
/*
75-
* @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js#L61
76-
*/
77-
adjust () {
78-
this.$refs.collapse.style.setProperty('--collapser', 'none')
79-
const height = this.$refs.collapse.offsetHeight
80-
this.$refs.collapse.style.setProperty('--collapse', -height + 'px')
81-
this.$refs.collapse.style.setProperty('--collapser', '')
82-
},
8387
},
84-
8588
})
8689
</script>
8790

@@ -106,9 +109,10 @@ export default defineComponent({
106109
ref="collapse"
107110
class="fr-collapse"
108111
:class="{
109-
'fr-collapse--expanded': expanded,
112+
'fr-collapse--expanded': cssExpanded, // Need to use a separate data to add/remove the class after a RAF
110113
'fr-collapsing': collapsing,
111114
}"
115+
@transitionend="onTransitionEnd(expanded)"
112116
>
113117
<!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
114118
<slot />

‎src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
<script>
22
import { defineComponent } from 'vue'
3-
4-
// Ne fonctionne pas dans Nuxt
5-
// import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.module.js'
6-
73
import { getRandomId } from '../../utils/random-utils.js'
4+
import { useCollapsable } from '@/composables'
85
96
export default defineComponent({
107
name: 'DsfrBreadcrumb',
@@ -22,11 +19,42 @@ export default defineComponent({
2219
},
2320
},
2421
22+
setup () {
23+
const {
24+
collapse,
25+
collapsing,
26+
cssExpanded,
27+
doExpand,
28+
adjust,
29+
onTransitionEnd,
30+
} = useCollapsable()
31+
32+
return {
33+
collapse,
34+
collapsing,
35+
cssExpanded,
36+
doExpand,
37+
adjust,
38+
onTransitionEnd,
39+
}
40+
},
41+
2542
data () {
2643
return {
27-
hideButton: false,
44+
expanded: false,
2845
}
2946
},
47+
48+
watch: {
49+
/*
50+
* @see https://github.com/GouvernementFR/dsfr/blob/main/src/core/script/collapse/collapse.js
51+
*/
52+
expanded (newValue, oldValue) {
53+
if (newValue !== oldValue) {
54+
this.doExpand(newValue)
55+
}
56+
},
57+
},
3058
})
3159
</script>
3260

@@ -37,18 +65,23 @@ export default defineComponent({
3765
aria-label="vous êtes ici :"
3866
>
3967
<button
40-
v-show="!hideButton"
68+
v-show="!expanded"
4169
class="fr-breadcrumb__button"
42-
:aria-expanded="hideButton"
70+
:aria-expanded="expanded"
4371
:aria-controls="breadcrumbId"
44-
@click="hideButton = !hideButton"
72+
@click="expanded = !expanded"
4573
>
4674
Voir le fil d’Ariane
4775
</button>
4876
<div
4977
:id="breadcrumbId"
78+
ref="collapse"
5079
class="fr-collapse"
51-
:class="{ 'fr-collapse--expanded': hideButton }"
80+
:class="{
81+
'fr-collapse--expanded': cssExpanded, // Need to use a separate data to add/remove the class after a RAF
82+
'fr-collapsing': collapsing,
83+
}"
84+
@transitionend="onTransitionEnd(expanded)"
5285
>
5386
<ol class="fr-breadcrumb__list">
5487
<li

‎src/components/DsfrFileDownload/DsfrFileDownload.spec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ describe('DsfrFileDownload', () => {
88
const format = 'JPEG'
99
const size = '205 Ko'
1010
const href = '#'
11+
const download = 'document.txt'
1112
const block = true
1213
const description = 'Une chouette description'
1314

@@ -17,6 +18,7 @@ describe('DsfrFileDownload', () => {
1718
format,
1819
size,
1920
href,
21+
download,
2022
block,
2123
description,
2224
},

0 commit comments

Comments
 (0)