feat: implemented body-scroll-lock

packages/shared/styles/components/SfModal.scss

@@ -35,4 +35,4 @@ $modal-border: solid 1px rgba($c-black, 0.5) !default;
       outline: none;
     }
   }
-}
+}

packages/vue/package.json

@@ -29,6 +29,7 @@
     "@glidejs/glide": "^3.3.0",
     "@storefront-ui/shared": "^0.4.0",
     "@vue/babel-preset-app": "^4.0.0-alpha.1",
+    "body-scroll-lock": "^2.6.4",
     "core-js": "^3.1.3",
     "hammerjs": "^2.0.8",
     "leaflet": "^1.5.1",

packages/vue/src/components/molecules/SfModal/SfModal.stories.js

@@ -31,7 +31,11 @@ storiesOf("Molecules|Modal", module)
         :persistent="persistent"
         @close="visible = false"
       >
-        HELLO STOREFRONT UI!
+        <p>Soufflé bonbon toffee chocolate marshmallow. Sugar plum gummies marshmallow soufflé topping donut donut icing marzipan. Bonbon cake cheesecake croissant chocolate jelly beans muffin. Jujubes soufflé croissant. Toffee fruitcake biscuit powder dragée jelly-o brownie. Wafer icing biscuit lemon drops bear claw cotton candy gingerbread cotton candy. Gummies ice cream marzipan sweet roll tart pudding jelly-o. Dessert halvah cake marzipan topping dragée wafer. Pudding cake liquorice dragée cheesecake pie ice cream. Pudding cotton candy marshmallow soufflé cake lemon drops liquorice. Dessert pudding candy pudding sweet roll biscuit cotton candy muffin dessert. Chocolate chocolate topping ice cream marshmallow pudding.</p>
+        <p>Fruitcake soufflé jelly-o chupa chups fruitcake cake topping. Candy gingerbread candy. Chocolate marzipan cookie marzipan sweet. Tootsie roll lemon drops tiramisu topping toffee cotton candy cake. Topping ice cream tootsie roll tart tiramisu biscuit halvah cake. Carrot cake cake tootsie roll muffin wafer wafer fruitcake. Bear claw sesame snaps oat cake sugar plum marshmallow. Jujubes dessert danish chocolate bar icing cheesecake candy. Jujubes tart marzipan ice cream. Donut pudding candy canes. Jelly-o dragée fruitcake donut. Lollipop sweet halvah croissant caramels.</p>
+        <p>Jelly chocolate cake candy sweet roll sweet danish jelly. Cheesecake caramels chupa chups jujubes macaroon sweet cupcake donut. Liquorice sugar plum pie candy lollipop marshmallow sugar plum icing. Jelly beans marzipan chocolate macaroon sweet topping dragée brownie. Dragée biscuit jujubes topping danish cake. Topping cheesecake jelly cookie marshmallow halvah. Jelly beans chocolate cake gingerbread pie. Cheesecake brownie candy canes. Pastry caramels jelly beans. Cake caramels cupcake muffin cheesecake cupcake dragée wafer bonbon. Topping oat cake cake brownie bear claw fruitcake soufflé carrot cake. Chocolate cake chocolate cake apple pie jelly-o fruitcake cotton candy chocolate candy danish.</p>
+        <p>Dragée sweet icing liquorice sweet cookie caramels pie. Croissant gummies macaroon marshmallow pastry marshmallow gingerbread cookie cake. Caramels topping bear claw ice cream bonbon. Donut gummi bears fruitcake topping. Macaroon carrot cake chupa chups pie lemon drops. Cheesecake carrot cake macaroon tootsie roll sweet cake muffin oat cake powder. Cake topping topping cake biscuit. Tart marzipan chupa chups candy. Pie cake muffin pastry muffin biscuit. Wafer cookie jujubes. Jelly-o pudding halvah lollipop sweet roll. Chocolate cake biscuit fruitcake muffin brownie cookie chocolate bar pudding. Chocolate cake gingerbread macaroon. Lollipop gummi bears halvah danish tootsie roll dessert.</p>
+        <p>Cake sweet roll jujubes lollipop toffee sweet roll jelly-o pie jelly-o. Muffin cookie cookie powder jelly chocolate cake. Cupcake tootsie roll cotton candy. Ice cream cotton candy bear claw oat cake pastry. Bonbon jelly beans marshmallow powder chocolate bar wafer. Pastry lollipop chocolate oat cake donut candy jujubes cookie lollipop. Chocolate donut ice cream chocolate pudding sesame snaps. Jelly-o apple pie gummi bears apple pie jelly candy. Fruitcake cotton candy chocolate cake tart icing apple pie apple pie liquorice gingerbread. Gummi bears tart cookie soufflé croissant marshmallow bear claw oat cake. Caramels chocolate bar tootsie roll dessert lemon drops caramels marshmallow. Biscuit caramels chupa chups. Pastry lollipop topping sweet gummi bears cotton candy danish.</p>
       </SfModal>`
   }))
   .add("[slot] close", () => ({

packages/vue/src/components/molecules/SfModal/SfModal.vue

@@ -9,14 +9,14 @@
     >
     </SfOverlay>
     <transition :name="transitionModal">
-      <div v-show="visible" class="sf-modal__container">
+      <div v-if="visible" class="sf-modal__container">
         <button v-if="cross" class="sf-modal__close" @click="close">
           <!--@slot Use this slot to place content inside the close button.-->
           <slot name="close">
             <SfIcon icon="cross" size="15px" color="gray-secondary" />
           </slot>
         </button>
-        <div class="sf-modal__content">
+        <div ref="content" class="sf-modal__content">
           <!--@slot Use this slot to place content inside the modal.-->
           <slot />
         </div>
@@ -27,6 +27,7 @@
 <script>
 import SfOverlay from "../../atoms/SfOverlay/SfOverlay.vue";
 import SfIcon from "../../atoms/SfIcon/SfIcon.vue";
+import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
 export default {
   name: "SfModal",
   components: {
@@ -86,10 +87,10 @@ export default {
       handler: function(value) {
         if (typeof window === "undefined") return;
         if (value) {
-          document.body.style.setProperty("overflow", "hidden");
+          disableBodyScroll(this.$refs.content);
           document.addEventListener("keydown", this.keydownHandler);
         } else {
-          document.body.style.removeProperty("overflow");
+          clearAllBodyScrollLocks();
           document.removeEventListener("keydown", this.keydownHandler);
         }
       },

packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="sf-sidebar">
-    <SfOverlay :visible="visibleOverlay" @click="$emit('close')" />
+    <SfOverlay :visible="visibleOverlay" @click="close" />
     <transition :name="'slide-' + position">
       <aside v-if="visible" class="sf-sidebar__aside">
-        <div class="sf-sidebar__content">
+        <div ref="content" class="sf-sidebar__content">
           <slot name="title">
             <SfHeading
               v-if="headingTitle"
@@ -21,7 +21,7 @@
             icon-size="14px"
             icon="cross"
             class="sf-sidebar__circle-icon"
-            @click="$emit('close')"
+            @click="close"
           />
         </slot>
       </aside>
@@ -32,6 +32,7 @@
 import SfCircleIcon from "../../atoms/SfCircleIcon/SfCircleIcon.vue";
 import SfOverlay from "../../atoms/SfOverlay/SfOverlay.vue";
 import SfHeading from "../../atoms/SfHeading/SfHeading.vue";
+import { disableBodyScroll, clearAllBodyScrollLocks } from "body-scroll-lock";
 export default {
   name: "SfSidebar",
   components: {
@@ -77,33 +78,33 @@ export default {
   },
   watch: {
     visible: {
-      handler: value => {
+      handler(value) {
         if (typeof window === "undefined") return;
         if (value) {
-          document.body.classList.add("sf-sidebar--has-scroll-lock");
+          disableBodyScroll(this.$refs.content);
+          document.addEventListener("keydown", this.keydownHandler);
         } else {
-          document.body.classList.remove("sf-sidebar--has-scroll-lock");
+          clearAllBodyScrollLocks();
+          document.removeEventListener("keydown", this.keydownHandler);
         }
       },
       immediate: true
     }
   },
   mounted() {
-    const keydownHandler = e => {
-      if (e.key === "Escape" || e.key === "Esc" || e.keyCode === 27) {
-        this.$emit("close");
-      }
-    };
-    document.addEventListener("keydown", keydownHandler);
-    this.$once("hook:destroyed", () => {
-      document.removeEventListener("keydown", keydownHandler);
-    });
     this.position = this.$el.classList.contains("sf-sidebar--right")
       ? "right"
       : "left";
   },
-  beforeDestroy() {
-    document.body.classList.remove("sf-sidebar--has-scroll-lock");
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+    keydownHandler(e) {
+      if (e.key === "Escape" || e.key === "Esc" || e.keyCode === 27) {
+        this.close();
+      }
+    }
   }
 };
 </script>

yarn.lock

@@ -5263,6 +5263,11 @@ [email protected]:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
+body-scroll-lock@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
+  integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
+
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"