feat: ✨ Implémente DsfrModal

Author: laruiss

src/assets/objects-dsfr.css

@@ -1,3 +1,2 @@
 @import url(./objects/fieldset.css);
 @import url(./objects/link.css);
-@import url(./objects/modal.css);

src/components/DsfrModal/DsfrModal.spec.js

@@ -0,0 +1,60 @@
+import DsfrModal from './DsfrModal.vue'
+import DsfrButton from '../DsfrButton/DsfrButton.vue'
+
+export default {
+  component: DsfrModal,
+  title: 'Éléments/Modale - Modal',
+}
+
+export const Modal = (args) => ({
+  components: {
+    DsfrModal,
+    DsfrButton,
+  },
+  data () {
+    return { ...args }
+  },
+  template: `
+  <div :data-rf-theme="dark ? 'dark' : ''" style="background-color: var(--w); padding: 1rem;">
+    <DsfrButton
+      label="Ouvre la modale"
+      @click="open()"
+    />
+    <DsfrModal
+      :opened="opened"
+      :actions="actions"
+      @close="onClose"
+    >
+      <h1
+        id="fr-modal-title-modal-1"
+        class="fr-modal__title"
+      >
+        <span class="fr-fi-arrow-right-line fr-fi--lg" />Titre de la modale
+      </h1>
+      <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>
+  </div>
+  `,
+  methods: {
+    onClose () {
+      this.opened = false
+    },
+    open () {
+      this.opened = true
+    },
+  },
+})
+
+Modal.args = {
+  dark: false,
+  opened: false,
+  actions: [
+    {
+      label: 'Valider',
+    },
+    {
+      label: 'Annuler',
+      secondary: true,
+    },
+  ],
+}

src/components/DsfrModal/DsfrModal.stories.js

@@ -0,0 +1,92 @@
+<script>
+import DsfrButtonGroup from '../DsfrButton/DsfrButtonGroup.vue'
+
+export default {
+  name: 'DsfrModal',
+
+  components: {
+    DsfrButtonGroup,
+  },
+
+  props: {
+    opened: Boolean,
+    actions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  emits: [
+    'close',
+  ],
+
+  data () {
+    return {
+      close: () => this.$emit('close'),
+    }
+  },
+
+  mounted () {
+    this.startListeningToEscape()
+  },
+
+  beforeUnmount () {
+    this.startListeningToEscape()
+  },
+
+  methods: {
+    startListeningToEscape () {
+      document.addEventListener('keydown', this.close)
+    },
+
+    stopListeningToEscape () {
+      document.removeEventListener('keydown', this.close)
+    },
+  },
+}
+</script>
+
+<template>
+  <dialog
+    id="fr-modal-1"
+    aria-labelledby="fr-modal-title-modal-1"
+    role="dialog"
+    class="fr-modal"
+    :class="{'fr-modal--opened': opened}"
+  >
+    <div class="fr-container fr-container--fluid fr-container-md">
+      <div class="fr-grid-row fr-grid-row--center">
+        <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
+          <div class="fr-modal__body">
+            <div class="fr-modal__header">
+              <button
+                class="fr-link--close fr-link"
+                title="Fermer la fenêtre modale"
+                aria-controls="fr-modal-1"
+                @click="close"
+              >
+                Fermer
+              </button>
+            </div>
+            <div class="fr-modal__content">
+              <slot />
+            </div>
+            <div
+              v-if="actions && actions.length"
+              class="fr-modal__footer"
+            >
+              <DsfrButtonGroup
+                align="right"
+                :buttons="actions"
+                inline
+                reverse
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</template>
+
+<style src="./modal.css" />

src/components/DsfrModal/DsfrModal.vue

@@ -7,6 +7,7 @@ export { default as DsfrCheckboxSet } from './DsfrCheckbox/DsfrCheckboxSet.vue'
 export { default as DsfrHeader } from './DsfrHeader/DsfrHeader.vue'
 export { default as DsfrInput } from './DsfrInput/DsfrInput.vue'
 export { default as DsfrLogo } from './DsfrLogo/DsfrLogo.vue'
+export { default as DsfrModal } from './DsfrModal/DsfrModal.vue'
 export { default as DsfrRadioButton } from './DsfrRadioButton/DsfrRadioButton.vue'
 export { default as DsfrRadioButtonSet } from './DsfrRadioButton/DsfrRadioButtonSet.vue'
 export { default as DsfrSearchBar } from './DsfrSearchBar/DsfrSearchBar.vue'