feat(patterns/modal): add css class .is-open & .is-visible on opening (…

…#849)
adeo · Jun 8, 2021 · d281863 · d281863
1 parent 5c33fdb
commit d281863
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 19 deletions.
diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
@@ -20,7 +20,11 @@
     background: $color-grey-000;
     display: flex;
     flex-direction: column;
+    opacity: 0;
+    pointer-events: all;
     position: relative;
+    transform: translateY(-25%);
+    transition: transform 0.4s ease, opacity 0.4s ease;
     width: 100%;
 
     @include set-from-screen(m) {
@@ -41,6 +45,11 @@
       max-height: 50vh;
       max-width: magic-unit-rem(56.5, true); // 904px
     }
+
+    &.is-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   &__header,

diff --git a/src/docs/Components/Modals/code.mdx b/src/docs/Components/Modals/code.mdx
@@ -1,5 +1,5 @@
 ---
-title: 'Code'
+title: "Code"
 order: 2
 ---
 
@@ -10,13 +10,13 @@ Import the **settings**, the **modal**, the **bodys**, and the **button** scss f
 > Note that you can also implement in addition the scss file of **the links** if you use this component in your modals.
 
 ```scss
-@import 'settings-tools/_all-settings';
+@import "settings-tools/_all-settings";
 
 @include import-font-families();
 
-@import 'typography/_t.bodys';
-@import 'components/_c.modal';
-@import 'components/_c.button';
+@import "typography/_t.bodys";
+@import "components/_c.modal";
+@import "components/_c.button";
 ```
 
 ## Usage
@@ -153,6 +153,7 @@ Just as the width of a modal varies according to the rules indicated above, the
 During the opening of a modal by Javascript, several events occur:
 
 - Added the `mc-modal-open` class to the body to prevent the default scrolling of the browser window.
-- A `mc-modal-overlay` element is generated in the DOM.
+- Added the `is-open` class on the `mc-modal__dialog` element.
+- A `mc-modal-overlay` element is generated in the DOM. This element must also have the class `is-visible`.
 
 <Preview path="opening" />
diff --git a/src/docs/Components/Modals/previews/big-content.preview.html b/src/docs/Components/Modals/previews/big-content.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">

diff --git a/src/docs/Components/Modals/previews/cta-link.preview.html b/src/docs/Components/Modals/previews/cta-link.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">

diff --git a/src/docs/Components/Modals/previews/cta-two.preview.html b/src/docs/Components/Modals/previews/cta-two.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">

diff --git a/src/docs/Components/Modals/previews/default.preview.html b/src/docs/Components/Modals/previews/default.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">

diff --git a/src/docs/Components/Modals/previews/opening.preview.html b/src/docs/Components/Modals/previews/opening.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">
@@ -26,5 +26,5 @@ <h3 class="mc-modal__heading">Title</h3>
       </div>
     </div>
   </div>
-  <div class="mc-modal-overlay" tabindex="-1" role="dialog"></div>
+  <div class="mc-modal-overlay is-visible" tabindex="-1" role="dialog"></div>
 </div>
diff --git a/src/docs/Components/Modals/previews/withouttitle.preview.html b/src/docs/Components/Modals/previews/withouttitle.preview.html
@@ -6,7 +6,7 @@
     aria-labelledby="modalTitle"
     aria-hidden="true"
   >
-    <div class="mc-modal__dialog" role="document">
+    <div class="mc-modal__dialog is-open" role="document">
       <div class="mc-modal__header">
         <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
         <button class="mc-modal__close" type="button">

diff --git a/yarn.lock b/yarn.lock
@@ -5684,9 +5684,9 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, can
   integrity sha512-e4Gyp7P8vqC2qV2iHA+cJNf/yqUKOShXQOJHQt81OHxlIZl/j/j3soEA0adAQi8CPUQgvOdDENyQ5kd6a6mNSg==
 
 caniuse-lite@^1.0.30001125:
-  version "1.0.30001233"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001233.tgz#b7cb4a377a4b12ed240d2fa5c792951a06e5f2c4"
-  integrity sha512-BmkbxLfStqiPA7IEzQpIk0UFZFf3A4E6fzjPJ6OR+bFC2L8ES9J8zGA/asoi47p8XDVkev+WJo2I2Nc8c/34Yg==
+  version "1.0.30001234"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001234.tgz#8fc2e709e3b0679d7af7f073a1c661155c39b975"
+  integrity sha512-a3gjUVKkmwLdNysa1xkUAwN2VfJUJyVW47rsi3aCbkRCtbHAfo+rOsCqVw29G6coQ8gzAPb5XBXwiGHwme3isA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -7782,9 +7782,9 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.723:
   integrity sha512-K2wXfo9iZQzNJNx67+Pld0DRF+9bYinj62gXCdgPhcu1vidwVuLPHQPPFnCdO55njWigXXpfBiT90jGUPbw8Zg==
 
 electron-to-chromium@^1.3.564:
-  version "1.3.744"
-  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.744.tgz#34e0da7babb325e18b50d3a0214504b12045ca85"
-  integrity sha512-o/vep/PvSXg+7buwCbVJXHY3zbjYVmFPwnMMnchESXgAzrfcasvbX/hQZHCFGG7YdZgdtwt1KTMyK9CyBxPbLA==
+  version "1.3.748"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.748.tgz#16638a8130f407ae5bf2fc168f2173574deb36c5"
+  integrity sha512-fmIKfYALVeEybk/L2ucdgt7jN3JsbGtg3K9pmF/MRWgkeADBI1VSAa5IzdG2gZwTxsnsrFtdMpOTSM5mrBRKVQ==
 
 elliptic@^6.5.3:
   version "6.5.4"