Merge pull request #657 from dnum-mi/feat-635-links-in-modal-footer

laruiss · web-flow · commit 24a68f518500 · 2023-12-05T12:00:08.000+01:00
feat: ✨ permet de personnaliser le pied-de-page de la modale
diff --git a/src/components/DsfrModal/DsfrModal.stories.ts b/src/components/DsfrModal/DsfrModal.stories.ts
@@ -62,7 +62,7 @@ export default {
   },
 }
 
-export const Modal = (args) => ({
+export const ModalAvecActions = (args) => ({
   components: {
     DsfrModal,
     DsfrButton,
@@ -75,7 +75,10 @@ export const Modal = (args) => ({
 
   computed: {
     modifiedActions () {
-      return this.actions.map(action => ({ ...action, onClick: () => { action.onClick(); this.onClose() } }))
+      return this.actions.map(action => ({
+        ...action,
+        onClick: () => { this.onClick?.(action.actionArg); this.onClose() },
+      }))
     },
   },
 
@@ -88,28 +91,29 @@ export const Modal = (args) => ({
     <DsfrModal
       ref="modal"
       :opened="opened"
-      :actions="modifyActions"
+      :actions="modifiedActions"
       :is-alert="isAlert"
       :icon="icon"
       :title="title"
       :origin="$refs.modalOrigin"
       :size="size"
       @close="onClose()"
     >
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p>
     </DsfrModal>
   `,
 
   methods: {
     onClose () {
+      args.onClick('Fermer')
       this.opened = false
     },
     open () {
       this.opened = true
     },
   },
 })
-Modal.args = {
+ModalAvecActions.args = {
   opened: false,
   title: 'Titre de la modale',
   isAlert: false,
@@ -118,15 +122,130 @@ Modal.args = {
   actions: [
     {
       label: 'Valider',
+      actionArg: 'Valider',
     },
     {
       label: 'Annuler',
+      actionArg: 'Annuler',
       secondary: true,
     },
   ],
 }
 
-Modal.play = async ({ canvasElement }) => {
+export const ModalSansPiedDePage = (args) => ({
+  components: {
+    DsfrModal,
+    DsfrButton,
+    VIcon,
+  },
+
+  data () {
+    return args
+  },
+
+  template: `
+    <DsfrButton
+      label="Ouvre la modale"
+      @click="open()"
+      ref="modalOrigin"
+    />
+    <DsfrModal
+      ref="modal"
+      :opened="opened"
+      :is-alert="isAlert"
+      :icon="icon"
+      :title="title"
+      :origin="$refs.modalOrigin"
+      :size="size"
+      @close="onClose()"
+    >
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p>
+    </DsfrModal>
+  `,
+
+  methods: {
+    onClose () {
+      args.onClick('Fermer')
+      this.opened = false
+    },
+    open () {
+      this.opened = true
+    },
+  },
+})
+ModalSansPiedDePage.args = {
+  opened: false,
+  title: 'Titre de la modale',
+  isAlert: false,
+  icon: 'ri-checkbox-circle-line',
+  size: 'md',
+  actions: [
+    {
+      label: 'Valider',
+      actionArg: 'Valider',
+    },
+    {
+      label: 'Annuler',
+      actionArg: 'Annuler',
+      secondary: true,
+    },
+  ],
+}
+
+export const ModalAvecFooterPersonnalise = (args) => ({
+  components: {
+    DsfrModal,
+    DsfrButton,
+    VIcon,
+  },
+
+  data () {
+    return args
+  },
+
+  template: `
+    <DsfrButton
+      label="Ouvre la modale"
+      @click="open()"
+      ref="modalOrigin"
+    />
+    <DsfrModal
+      ref="modal"
+      :opened="opened"
+      :actions="modifiedActions"
+      :is-alert="isAlert"
+      :icon="icon"
+      :title="title"
+      :origin="$refs.modalOrigin"
+      :size="size"
+      @close="onClose()"
+    >
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo. Vestibulum aliquam hendrerit molestie. Mauris malesuada nisi sit amet augue accumsan tincidunt. Maecenas tincidunt, velit ac porttitor pulvinar, tortor eros facilisis libero, vitae commodo nunc quam et ligula. Ut nec ipsum sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer id nisi nec nulla luctus lacinia non eu turpis. Etiam in ex imperdiet justo tincidunt egestas. Ut porttitor urna ac augue cursus tincidunt sit amet sed orci.</p>
+      <template #footer>
+        Ici pied de page personnalisé
+      </template>
+    </DsfrModal>
+  `,
+
+  methods: {
+    onClose () {
+      args.onClick('Fermer')
+      this.opened = false
+    },
+    open () {
+      this.opened = true
+    },
+  },
+})
+ModalAvecFooterPersonnalise.args = {
+  opened: false,
+  title: 'Titre de la modale',
+  isAlert: false,
+  icon: 'ri-checkbox-circle-line',
+  size: 'md',
+}
+
+ModalAvecActions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
   const openModalButton = canvas.getByRole('button')
   await userEvent.type(openModalButton, '{enter}')
diff --git a/src/components/DsfrModal/DsfrModal.vue b/src/components/DsfrModal/DsfrModal.vue
@@ -125,10 +125,13 @@ async function close () {
                 <slot />
               </div>
               <div
-                v-if="actions && actions.length"
+                v-if="actions?.length || $slots.footer"
                 class="fr-modal__footer"
               >
+                <!-- @slot Slot pour le pied-de-page de la modale `<ul class="fr-modal__footer">` -->
+                <slot name="footer" />
                 <DsfrButtonGroup
+                  v-if="actions?.length"
                   align="right"
                   :buttons="actions"
                   inline-layout-when="large"
diff --git a/src/components/DsfrNavigation/DsfrNavigation.types.ts b/src/components/DsfrNavigation/DsfrNavigation.types.ts
@@ -28,6 +28,7 @@ export type DsfrNavigationItemProps = {
 
 export type DsfrNavigationMegaMenuCategoryProps = {
   title: string
+  active?: boolean
   links: DsfrNavigationMenuLinkProps[]
 }
 
@@ -43,16 +44,12 @@ export type DsfrNavigationMegaMenuProps = {
 
 export type DsfrNavigationMenuLinks = (DsfrNavigationMenuLinkProps | DsfrNavigationMegaMenuProps | DsfrNavigationMenuProps)[]
 
-type SimpleLink = { text?: string ; to?: RouteLocationRaw }
-type MenuItem = { title?: string; active?: boolean; links?: DsfrNavigationMenuLinks }
-type MegaMenuItem = { title?: string; description: string, link: SimpleLink, menus: { title?: string; active?: boolean; links?: DsfrNavigationMenuLinks }[]}
-
 export type DsfrNavigationProps = {
   id?: string
   label?: string
   navItems:(
-    SimpleLink
-    | MenuItem
-    | MegaMenuItem
+    DsfrNavigationMenuLinkProps
+    | DsfrNavigationMenuProps
+    | DsfrNavigationMegaMenuProps
   )[]
 }
diff --git a/src/components/DsfrNavigation/DsfrNavigation.vue b/src/components/DsfrNavigation/DsfrNavigation.vue
@@ -8,7 +8,13 @@ import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 import DsfrNavigationMenu from './DsfrNavigationMenu.vue'
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
 
-import type { DsfrNavigationMenuLinks, DsfrNavigationProps } from './DsfrNavigation.types'
+import type {
+  DsfrNavigationMenuLinks,
+  DsfrNavigationProps,
+  DsfrNavigationMenuProps,
+  DsfrNavigationMenuLinkProps,
+  DsfrNavigationMegaMenuProps,
+} from './DsfrNavigation.types'
 
 export type { DsfrNavigationMenuLinks, DsfrNavigationProps }
 
@@ -76,22 +82,22 @@ onUnmounted(() => {
         :key="idx"
       >
         <DsfrNavigationMenuLink
-          v-if="(navItem as SimpleLink).to && (navItem as SimpleLink).text"
+          v-if="(navItem as DsfrNavigationMenuLinkProps).to && (navItem as DsfrNavigationMenuLinkProps).text"
           v-bind="navItem"
           :expanded-id="expandedMenuId"
           @toggle-id="toggle($event)"
         />
         <!-- @vue-ignore -->
         <DsfrNavigationMenu
-          v-else-if="(navItem as MenuItem).title && (navItem as MenuItem).links"
-          v-bind="(navItem as MenuItem)"
+          v-else-if="(navItem as DsfrNavigationMenuProps).title && (navItem as DsfrNavigationMenuProps).links"
+          v-bind="(navItem as DsfrNavigationMenuProps)"
           :expanded-id="expandedMenuId"
           @toggle-id="toggle($event)"
         />
         <!-- @vue-ignore -->
         <DsfrNavigationMegaMenu
-          v-else-if="(navItem as MegaMenuItem).title && (navItem as MegaMenuItem).menus"
-          v-bind="(navItem as MegaMenuItem)"
+          v-else-if="(navItem as DsfrNavigationMegaMenuProps).title && (navItem as DsfrNavigationMegaMenuProps).menus"
+          v-bind="(navItem as DsfrNavigationMegaMenuProps)"
           :expanded-id="expandedMenuId"
           @toggle-id="toggle($event)"
         />
