Skip to content

Commit 0c1ad3e

Browse files
laruisslaruiss
authored
Merge pull request #509 from dnum-mi/feat/ajout-slot-header
feat: ✨ Ajout d'un slot dans le composant header + fix icons
2 parents ed74273 + 0785cf7 commit 0c1ad3e

File tree

7 files changed

+209
-68
lines changed

7 files changed

+209
-68
lines changed

‎.storybook/preview.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { FocusTrap } from 'focus-trap-vue'
66

77
import '../src/assets/variables-fdr.css'
88
import '@gouvfr/dsfr/dist/dsfr.min.css'
9-
// import '../src/main.css'
9+
import '@gouvfr/dsfr/dist/utility/utility.main.min.css'
10+
import '@gouvfr/dsfr/dist/utility/icons/icons.main.min.css'
1011

1112
import './theme.css'
1213

‎build-css.mjs‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/components/DsfrHeader/DsfrHeader.stories.js‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import DsfrHeader from './DsfrHeader.vue'
2+
import DsfrNavigation from '../DsfrNavigation/DsfrNavigation.vue'
23

34
import { addIcons } from 'oh-vue-icons'
45

@@ -218,3 +219,184 @@ EnTeteAvecLogoOperateur.args = {
218219
operatorImgAlt: 'Logo opérateur',
219220
operatorImgStyle: { height: '40px' },
220221
}
222+
223+
export const EnTeteAvecNavigation = (args, { argTypes }) => ({
224+
components: {
225+
DsfrHeader,
226+
DsfrNavigation,
227+
},
228+
data () {
229+
return {
230+
...args,
231+
quickLincks: args.quickLinks.map((link, idx) => {
232+
if (idx === 0) {
233+
link.onClick = ($event) => {
234+
$event.preventDefault()
235+
this.actionOnLink()
236+
}
237+
}
238+
return link
239+
}),
240+
}
241+
},
242+
243+
template: `
244+
<DsfrHeader
245+
:service-title="serviceTitle"
246+
:service-description="serviceDescription"
247+
:home-to="homeTo"
248+
:quick-links="quickLinks"
249+
:show-search="showSearch"
250+
:logo-text="logoText"
251+
v-model="modelValue"
252+
@click="onClickOnLogo"
253+
@search="onSearch($event)"
254+
>
255+
<DsfrNavigation
256+
:nav-items="navItems"
257+
/>
258+
</DsfrHeader>
259+
`,
260+
261+
methods: {
262+
onClickOnLogo ($event) {
263+
$event.preventDefault()
264+
$event.stopPropagation()
265+
this.actionOnLogo($event)
266+
},
267+
},
268+
269+
mounted () {
270+
document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
271+
},
272+
})
273+
EnTeteAvecNavigation.args = {
274+
dark: false,
275+
showSearch: true,
276+
logoText: ['Ministère', 'de l’intérieur'],
277+
serviceTitle: 'Nom du Site/Service',
278+
serviceDescription: 'baseline - précisions sur l‘organisation',
279+
modelValue: '',
280+
placeholder: '',
281+
homeTo: '#',
282+
quickLinks: [
283+
{ label: 'Créer un espace', to: '/space/create', icon: 'ri-add-circle-line', iconAttrs: { scale: 0.9 } },
284+
{ label: 'Se connecter', to: '/login', class: 'fr-fi-lock-line', target: '_blank' },
285+
{ label: 'S’enregistrer', to: '/signin', icon: 'ri-account-circle-line', iconRight: true, iconAttrs: { animation: 'spin', speed: 'slow' } },
286+
],
287+
navItems: [
288+
{
289+
to: '#essai',
290+
text: 'Accès direct',
291+
},
292+
{
293+
title: 'Menu déroulant',
294+
links: [
295+
{
296+
text: 'Lien 1',
297+
to: '#',
298+
},
299+
{
300+
text: 'Lien 2',
301+
to: '#',
302+
},
303+
{
304+
text: 'Lien 3',
305+
to: '#',
306+
},
307+
{
308+
text: 'Lien 4',
309+
to: '#',
310+
},
311+
{
312+
text: 'Lien 5',
313+
to: '#',
314+
},
315+
],
316+
},
317+
{
318+
title: 'Mega menu',
319+
link: {
320+
to: '#',
321+
text: 'Voir toute la rubrique',
322+
},
323+
menus: [
324+
{
325+
title: 'Nom de catégorie',
326+
links: [
327+
{
328+
text: 'Lien 1',
329+
to: '#',
330+
},
331+
{
332+
text: 'Lien 2',
333+
to: '#',
334+
},
335+
{
336+
text: 'Lien 3',
337+
to: '#',
338+
},
339+
{
340+
text: 'Lien 4',
341+
to: '#',
342+
},
343+
{
344+
text: 'Lien 5',
345+
to: '#',
346+
},
347+
],
348+
},
349+
{
350+
title: 'Nom de catégorie',
351+
links: [
352+
{
353+
text: 'Lien 1',
354+
to: '#',
355+
},
356+
{
357+
text: 'Lien 2',
358+
to: '#',
359+
},
360+
{
361+
text: 'Lien 3',
362+
to: '#',
363+
},
364+
{
365+
text: 'Lien 4',
366+
to: '#',
367+
},
368+
{
369+
text: 'Lien 5',
370+
to: '#',
371+
},
372+
],
373+
},
374+
{
375+
title: 'Nom de catégorie',
376+
links: [
377+
{
378+
text: 'Lien 1',
379+
to: '#',
380+
},
381+
{
382+
text: 'Lien 2',
383+
to: '#',
384+
},
385+
{
386+
text: 'Lien 3',
387+
to: '#',
388+
},
389+
{
390+
text: 'Lien 4',
391+
to: '#',
392+
},
393+
{
394+
text: 'Lien 5',
395+
to: '#',
396+
},
397+
],
398+
},
399+
],
400+
},
401+
],
402+
}

‎src/components/DsfrHeader/DsfrHeader.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ export default defineComponent({
271271
</div>
272272
</div>
273273
</div>
274+
<slot />
274275
</div>
275276
</div>
276277
</header>

‎src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,6 @@ describe('DsfrNavigationMegaMenu', () => {
124124
expect(button.tagName).toBe('BUTTON')
125125
expect(titleEl.tagName).toBe('H4')
126126
expect(megaMenuWrapper.id).toBe(button.getAttribute('aria-controls'))
127-
expect(descEl).toHaveClass('fr-text--sm')
127+
expect(descEl).toHaveClass('fr-displayed-lg')
128128
})
129129
})

‎src/components/DsfrNavigation/DsfrNavigationMegaMenu.vue‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -65,31 +65,33 @@ export default defineComponent({
6565
tabindex="-1"
6666
:class="{ 'fr-collapse--expanded': expanded }"
6767
>
68-
<div class="fr-container">
68+
<div class="fr-container fr-container--fluid fr-container-lg">
6969
<button
70-
class="fr-btn--close fr-btn"
70+
class="fr-link--close fr-link"
7171
aria-controls="mega-menu-695"
7272
@click="$emit('toggle-id', id)"
7373
>
7474
Fermer
7575
</button>
76-
<div class="fr-grid-row fr-grid-row--gutters">
77-
<div class="fr-col-12 fr-mb-4v">
78-
<h4 class="fr-h4 fr-mb-2v">
79-
{{ title }}
80-
</h4>
81-
<p class="fr-text--sm">
82-
{{ description }}
83-
<!-- @slot Slot par défaut pour le contenu de la description du mega-menu. Sera dans `<p class="fr-text--sm">` -->
84-
<slot name="description" />
85-
</p>
86-
<RouterLink
87-
vi
88-
class="fr-btn fr-fi-arrow-right-line fr-btn--icon-right"
89-
:to="link.to"
90-
>
91-
{{ link.text }}
92-
</RouterLink>
76+
<div class="fr-grid-row fr-grid-row-lg--gutters">
77+
<div class="fr-col-12 fr-col-lg-8 fr-col-offset-lg-4--right fr-mb-4v">
78+
<div class="fr-mega-menu__leader">
79+
<h4 class="fr-h4 fr-mb-2v">
80+
{{ title }}
81+
</h4>
82+
<p class="fr-hidden fr-displayed-lg">
83+
{{ description }}
84+
<!-- @slot Slot par défaut pour le contenu de la description du mega-menu. Sera dans `<p class="fr-text--sm">` -->
85+
<slot name="description" />
86+
</p>
87+
<RouterLink
88+
vi
89+
class="fr-link fr-icon-arrow-right-line fr-link--icon-right fr-link--align-on-content"
90+
:to="link.to"
91+
>
92+
{{ link.text }}
93+
</RouterLink>
94+
</div>
9395
</div>
9496
<!-- @slot Slot par défaut pour le contenu du mega-menu. Sera dans `<div class="fr-grid-row fr-grid-row--gutters">` -->
9597
<slot />

‎src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default defineComponent({
2424
</script>
2525

2626
<template>
27-
<div class="fr-col-12 fr-col-md-3">
27+
<div class="fr-col-12 fr-col-lg-3">
2828
<h5 class="fr-mega-menu__category">
2929
<a
3030
class="fr-nav__link"
@@ -38,7 +38,7 @@ export default defineComponent({
3838
<li
3939
v-for="(link, idx) of links"
4040
:key="idx"
41-
class="fr-mega-menu__item"
41+
class="fr-nav__link"
4242
>
4343
<DsfrNavigationMenuLink
4444
v-bind="link"

0 commit comments

Comments
 (0)