Skip to content

Commit 0a301ad

Browse files
Ines FTLlaruiss
Ines FTL
authored and
laruiss
committed
feat: ✨ Ajoute le composant DsfrFieldset
1 parent dbf1550 commit 0a301ad

File tree

7 files changed

+285
-1
lines changed

7 files changed

+285
-1
lines changed

‎src/components/DsfrFieldset/DsfrFieldset.spec.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { render } from '@testing-library/vue'
2+
3+
import DsfrFieldset from './DsfrFieldset.vue'
4+
5+
describe('DsfrFieldset', () => {
6+
it('should render a DsfrFieldset component', () => {
7+
const legend = 'Texte de la légende'
8+
const slotContent = 'Contenu du slot par défaut'
9+
const hint = 'Texte d̛’indice'
10+
const { container, getByText } = render(DsfrFieldset, {
11+
props: {
12+
legend,
13+
legendId: 'legend-id',
14+
hint,
15+
},
16+
slots: {
17+
default: slotContent,
18+
},
19+
})
20+
21+
const fieldsetEl = container.querySelector('fieldset')
22+
const legendEl = fieldsetEl.firstElementChild
23+
const legendByText = getByText(legend)
24+
const fieldsetByText = getByText(slotContent)
25+
const hintByText = getByText(hint)
26+
27+
const hintEl = legendEl.nextElementSibling
28+
29+
expect(fieldsetEl).not.toBeNull()
30+
expect(fieldsetEl).toHaveClass('fr-fieldset')
31+
expect(legendEl).toBe(legendByText)
32+
expect(fieldsetByText).toBe(fieldsetEl)
33+
expect(hintByText).toBe(hintEl)
34+
expect(legendEl).toHaveClass('fr-fieldset__legend')
35+
expect(legendEl).toHaveAttribute('id', 'legend-id')
36+
expect(hintEl).toHaveClass('fr-hint-text')
37+
})
38+
39+
it('should render a complex DsfrFieldset component', () => {
40+
const legend = 'Contenu du slot de la légende'
41+
const slotContent = 'Contenu du slot par défaut'
42+
const hint = 'Contenu du slot de l’indice'
43+
const { container, getByText } = render(DsfrFieldset, {
44+
props: {
45+
legendId: 'legend-id',
46+
},
47+
slots: {
48+
default: slotContent,
49+
hint,
50+
legend,
51+
},
52+
})
53+
54+
const fieldsetEl = container.querySelector('fieldset')
55+
const legendEl = fieldsetEl.firstElementChild
56+
const legendByText = getByText(legend)
57+
const fieldsetByText = getByText(slotContent)
58+
const hintByText = getByText(hint)
59+
60+
const hintEl = legendEl.nextElementSibling
61+
62+
expect(fieldsetEl).not.toBeNull()
63+
expect(fieldsetEl).toHaveClass('fr-fieldset')
64+
expect(legendEl).toBe(legendByText)
65+
expect(fieldsetByText).toBe(fieldsetEl)
66+
expect(hintByText).toBe(hintEl)
67+
expect(legendEl).toHaveClass('fr-fieldset__legend')
68+
expect(legendEl).toHaveAttribute('id', 'legend-id')
69+
expect(hintEl).toHaveClass('fr-hint-text')
70+
})
71+
})

‎src/components/DsfrFieldset/DsfrFieldset.stories.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import DsfrFieldset from './DsfrFieldset.vue'
2+
3+
export default {
4+
component: DsfrFieldset,
5+
title: 'Composants/Ensemble de champs - DsfrFieldset',
6+
argTypes: {
7+
dark: {
8+
control: 'boolean',
9+
description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
10+
},
11+
legend: {
12+
control: 'text',
13+
description: 'Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme.',
14+
},
15+
legendClass: {
16+
control: 'text',
17+
description: 'Classes à ajouter à l’élément `<legend class="fr-fieldset__legend">`',
18+
},
19+
legendId: {
20+
control: 'text',
21+
description: 'id de la balise `legend`',
22+
},
23+
hint: {
24+
control: 'text',
25+
description: 'Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une props du même nom est utilisable pour du texte simple sans mise en forme.',
26+
},
27+
hintClass: {
28+
control: 'text',
29+
description: 'Classe(s) à ajouter à l’élément <span class="fr-hint-text">',
30+
},
31+
},
32+
}
33+
34+
export const EnsembleDeChamps = (args) => ({
35+
components: {
36+
DsfrFieldset,
37+
},
38+
39+
data () {
40+
return {
41+
...args,
42+
expandedId: undefined,
43+
title1: args.title + ' 1',
44+
title2: args.title + ' 2',
45+
}
46+
},
47+
48+
template: `
49+
<DsfrFieldset
50+
:legend="legend"
51+
:legend-class="legendClass"
52+
:hint-class="hintClass"
53+
:legend-id="legendId"
54+
:hint="hint"
55+
>
56+
Contenu du fieldset
57+
</DsfrFieldset>
58+
`,
59+
60+
mounted () {
61+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
62+
},
63+
})
64+
EnsembleDeChamps.args = {
65+
dark: false,
66+
legend: 'Titre de l’ensemble des champs',
67+
legendId: 'legend-id',
68+
legendClass: '',
69+
hintClass: '',
70+
hint: 'Texte d’indice',
71+
}
72+
73+
export const EnsemblePersonnaliseDeChamps = (args) => ({
74+
components: {
75+
DsfrFieldset,
76+
},
77+
78+
data () {
79+
return {
80+
...args,
81+
expandedId: undefined,
82+
title1: args.title + ' 1',
83+
title2: args.title + ' 2',
84+
}
85+
},
86+
87+
template: `
88+
<DsfrFieldset
89+
:legend-id="legendId"
90+
:legend-class="legendClass"
91+
:hint-class="hintClass"
92+
>
93+
<template #legend>
94+
{{ legend }} avec <em>de l’italique</em>
95+
</template>
96+
<template #hint>
97+
{{ hint }} avec <strong>du gras</strong>
98+
</template>
99+
Contenu du fieldset
100+
</DsfrFieldset>
101+
`,
102+
103+
mounted () {
104+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
105+
},
106+
})
107+
EnsemblePersonnaliseDeChamps.args = {
108+
dark: false,
109+
legend: 'Contenu personnalisé du titre de l’ensemble des champs',
110+
legendId: 'legend-id',
111+
legendClass: '',
112+
hintClass: '',
113+
hint: 'Contenu personnalisé de l’indice',
114+
}

‎src/components/DsfrFieldset/DsfrFieldset.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script>
2+
import { defineComponent } from 'vue'
3+
4+
export default defineComponent({
5+
name: 'DsfrFieldset',
6+
7+
props: {
8+
legend: {
9+
type: String,
10+
default: '',
11+
},
12+
legendClass: {
13+
type: [String, Object],
14+
default: '',
15+
},
16+
legendId: {
17+
type: String,
18+
default: undefined,
19+
},
20+
hint: {
21+
type: String,
22+
default: '',
23+
},
24+
hintClass: {
25+
type: [String, Object],
26+
default: '',
27+
},
28+
},
29+
})
30+
</script>
31+
32+
<template>
33+
<fieldset class="fr-fieldset">
34+
<legend
35+
v-if="legend || $slots.legend?.().length"
36+
:id="legendId"
37+
class="fr-fieldset__legend"
38+
:class="legendClass"
39+
>
40+
{{ legend }}
41+
<!-- @slot Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
42+
<slot name="legend" />
43+
</legend>
44+
<span
45+
v-if="hint || $slots.hint?.().length"
46+
class="fr-hint-text"
47+
>
48+
{{ hint }}
49+
<!-- @slot Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
50+
<slot name="hint" />
51+
</span>
52+
53+
<!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<fieldset>`, après `</legend>`) -->
54+
<slot />
55+
</fieldset>
56+
</template>

‎src/components/DsfrFooter/DsfrFooter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export default defineComponent({
119119
return this.$slots['footer-link-lists']?.().length
120120
},
121121
isWithSlotOperator () {
122-
return this.$slots.operato?.().length
122+
return this.$slots.operator?.().length
123123
},
124124
},
125125
})

‎src/components/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as DsfrCard } from './DsfrCard/DsfrCard.vue'
99
export { default as DsfrCheckbox } from './DsfrCheckbox/DsfrCheckbox.vue'
1010
export { default as DsfrCheckboxSet } from './DsfrCheckbox/DsfrCheckboxSet.vue'
1111
export { default as DsfrConsent } from './DsfrConsent/DsfrConsent.vue'
12+
export { default as DsfrFieldset } from './DsfrFieldset/DsfrFieldset.vue'
1213
export { default as DsfrFileUpload } from './DsfrFileUpload/DsfrFileUpload.vue'
1314
export { default as DsfrFollow } from './DsfrFollow/DsfrFollow.vue'
1415
export { default as DsfrFooter } from './DsfrFooter/DsfrFooter.vue'

‎types/components/DsfrFieldset/DsfrFieldset.vue.d.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
declare const _default: import('vue').DefineComponent<{
2+
legend: {
3+
type: StringConstructor;
4+
default: string;
5+
};
6+
legendClass: {
7+
type: (ObjectConstructor | StringConstructor)[];
8+
default: string;
9+
};
10+
legendId: {
11+
type: StringConstructor;
12+
default: string;
13+
};
14+
hint: {
15+
type: StringConstructor;
16+
default: string;
17+
};
18+
}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
19+
legend: {
20+
type: StringConstructor;
21+
default: string;
22+
};
23+
legendClass: {
24+
type: (ObjectConstructor | StringConstructor)[];
25+
default: string;
26+
};
27+
legendId: {
28+
type: StringConstructor;
29+
default: any;
30+
};
31+
hint: {
32+
type: StringConstructor;
33+
default: string;
34+
};
35+
}>>, {
36+
legend: string;
37+
hint: string;
38+
legendClass: string | Record<string, any>;
39+
legendId: string;
40+
}>
41+
export default _default

‎types/components/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as DsfrCard } from './DsfrCard/DsfrCard.vue'
99
export { default as DsfrCheckbox } from './DsfrCheckbox/DsfrCheckbox.vue'
1010
export { default as DsfrCheckboxSet } from './DsfrCheckbox/DsfrCheckboxSet.vue'
1111
export { default as DsfrConsent } from './DsfrConsent/DsfrConsent.vue'
12+
export { default as DsfrFieldset } from './DsfrFieldset/DsfrFieldset.vue'
1213
export { default as DsfrFileUpload } from './DsfrFileUpload/DsfrFileUpload.vue'
1314
export { default as DsfrFollow } from './DsfrFollow/DsfrFollow.vue'
1415
export { default as DsfrFooter } from './DsfrFooter/DsfrFooter.vue'

0 commit comments

Comments
 (0)