From e3e5fa61e5379c0a88f27f17c32ecdf44cb06e2b Mon Sep 17 00:00:00 2001
From: Baroshem <jakub.andrzejewski.dev@gmail.com>
Date: Tue, 22 Jun 2021 17:42:11 +0200
Subject: [PATCH] feat: revoke modal and sidebar

---
 .../styles/components/molecules/SfModal.scss  | 14 +--
 .../components/organisms/SfSidebar.scss       | 38 +++-----
 packages/vue/package.json                     |  7 +-
 .../molecules/SfBanner/SfBanner.vue           |  6 +-
 .../molecules/SfModal/SfModal.stories.js      | 48 +---------
 .../components/molecules/SfModal/SfModal.vue  | 37 ++------
 .../organisms/SfSidebar/SfSidebar.stories.js  | 95 ++++---------------
 .../organisms/SfSidebar/SfSidebar.vue         | 43 ++-------
 .../src/examples/pages/thank-you/ThankYou.vue |  2 +-
 .../releases/v0.10.7/v0.10.7.stories.mdx      |  6 +-
 10 files changed, 57 insertions(+), 239 deletions(-)

diff --git a/packages/shared/styles/components/molecules/SfModal.scss b/packages/shared/styles/components/molecules/SfModal.scss
index 7a1457f172..d1e7360573 100644
--- a/packages/shared/styles/components/molecules/SfModal.scss
+++ b/packages/shared/styles/components/molecules/SfModal.scss
@@ -1,6 +1,5 @@
 @import "../../helpers";
 .sf-modal {
-   visibility: hidden;
   &__container {
     position: fixed;
     top: var(--modal-top, 0);
@@ -33,13 +32,10 @@
       var(--font-family--primary)
     );
   }
-  &__close.sf-button {
+  &__close {
     position: absolute;
     right: var(--modal-close-right, var(--spacer-sm));
-    top: var(--modal-close-top, var(--spacer-sm));    
-  }
-  & .sf-link {
-    --button-width: auto;
+    top: var(--modal-close-top, var(--spacer-sm));
   }
   @include for-desktop {
     --modal-width: 29.375rem;
@@ -52,10 +48,4 @@
     --modal-max-height: 90%;
     --modal-content-padding: var(--spacer-sm) var(--spacer-lg);
   }
-  &:target {
-    visibility: visible;
-  }
-  &.jsEnabled {
-    visibility: inherit;
-  }
 }
diff --git a/packages/shared/styles/components/organisms/SfSidebar.scss b/packages/shared/styles/components/organisms/SfSidebar.scss
index 5c04fa76f0..d24828fdc4 100644
--- a/packages/shared/styles/components/organisms/SfSidebar.scss
+++ b/packages/shared/styles/components/organisms/SfSidebar.scss
@@ -1,27 +1,20 @@
 @import "../../helpers";
-.sf-sidebar { 
-  visibility: hidden;
-  &__aside {   
-    display: flex;
-    flex-direction: column;
+.sf-sidebar {
+  &__aside {
     position: fixed;
     top: var(--sidebar-top, 0);
     left: var(--sidebar-left, 0);
     right: var(--sidebar-right, 0);
     bottom: var(--sidebar-bottom, 0);
-    z-index: var(--sidebar-z-index, 1);    
-    box-sizing: border-box;    
-    height: 100%;
+    z-index: var(--sidebar-z-index, 1);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
     width: var(--sidebar-width);
+    height: 100%;
     background-color: var(--sidebar-background, var(--c-white));
     box-shadow: var(--sidebar-box-shadow, 0px 4px 11px rgba(29, 31, 34, 0.1));
   }
-  &:target {
-    visibility: visible;
-  }
-  &.jsEnabled {
-    visibility: inherit;
-  }
   &__top {
     padding: var(
       --sidebar-top-padding,
@@ -40,6 +33,7 @@
     display: var(--sidebar-content-display, flex);
     flex-direction: var(--sidebar-content-flex-direction, column);
     box-sizing: border-box;
+    width: var(--sidebar-content-width);
     height: 100%;
     scrollbar-color: var(--c-gray-variant) var(--c-light);
     scrollbar-width: thin;
@@ -80,28 +74,22 @@
       var(--font-family--primary)
     );
   }
-  &__circle-icon.sf-circle-icon {
-    position: absolute;
+  &__circle-icon {
+    --circle-icon-position: absolute;
     z-index: 1;
     display: var(--sidebar-circle-icon-display, flex);
     left: var(--sidebar-circle-icon-left);
     top: var(--sidebar-circle-icon-top, var(--spacer-xl));
     right: var(--sidebar-circle-icon-right, 0);
-    padding: 0;
-    transform: var(--sidebar-circle-icon-transform, translate3d(50%, 0, 0))
+    transform: var(--sidebar-circle-icon-transform, translate3d(50%, 0, 0));
   }
-  & .sf-sidebar__bar-button.sf-link {
-    width: auto;
-  }
-  @include for-desktop {    
+  @include for-desktop {
+    --sidebar-width: 25.5rem;
     --sidebar-top-padding: var(--spacer-xl) var(--spacer-xl) var(--spacer-sm)
       var(--spacer-xl);
     --sidebar-content-padding: var(--spacer-base) var(--spacer-xl);
     --sidebar-bottom-padding: var(--spacer-sm) var(--spacer-xl) var(--spacer-xl)
       var(--spacer-xl);
-    &__aside {
-      --sidebar-width: 25.5rem;
-    }
     &--right {
       --sidebar-left: auto;
       --sidebar-right: 0;
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 0a838c2126..38e26f84d1 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -43,7 +43,7 @@
     "nouislider": "^15.2.0",
     "sass-loader": "^8.0.2",
     "simplebar-vue": "^1.4.0",
-    "vue": "2.6.14",
+    "vue": "^2.6.12",
     "vue2-leaflet": "^2.5.2"
   },
   "devDependencies": {
@@ -83,7 +83,7 @@
     "storybook-addon-vue-info": "^1.4.2",
     "style-loader": "^2.0.0",
     "vue-docgen-api": "^3.22.3",
-    "vue-template-compiler": "2.6.14",
+    "vue-template-compiler": "^2.6.11",
     "webpack-dev-middleware": "3.7.2"
   },
   "lint-staged": {
@@ -92,6 +92,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "resolutions": {
+    "webpack-dev-middleware": "3.7.2"
+  },
   "sideEffects": [
     "*.vue",
     "*.scss",
diff --git a/packages/vue/src/components/molecules/SfBanner/SfBanner.vue b/packages/vue/src/components/molecules/SfBanner/SfBanner.vue
index 7cb610e72c..3ba4e83f57 100644
--- a/packages/vue/src/components/molecules/SfBanner/SfBanner.vue
+++ b/packages/vue/src/components/molecules/SfBanner/SfBanner.vue
@@ -1,9 +1,5 @@
 <template>
-  <section
-    class="sf-banner"
-    :style="style"
-    v-on="isMobileView ? $listeners : {}"
-  >
+  <section class="sf-banner" :style="style" v-on="isMobileView ? $listeners : {}">
     <component :is="wrapper" class="sf-banner__wrapper" :link="link">
       <slot name="subtitle" v-bind="{ subtitle }">
         <h2 v-if="subtitle" class="sf-banner__subtitle">
diff --git a/packages/vue/src/components/molecules/SfModal/SfModal.stories.js b/packages/vue/src/components/molecules/SfModal/SfModal.stories.js
index ffea7b23b9..af1d518933 100644
--- a/packages/vue/src/components/molecules/SfModal/SfModal.stories.js
+++ b/packages/vue/src/components/molecules/SfModal/SfModal.stories.js
@@ -1,4 +1,4 @@
-import { SfModal, SfButton } from "@storefront-ui/vue";
+import { SfModal } from "@storefront-ui/vue";
 export default {
   title: "Components/Molecules/Modal",
   component: SfModal,
@@ -103,49 +103,3 @@ export const UseCloseSlot = (args, { argTypes }) => ({
 UseCloseSlot.args = {
   ...Common.args,
 };
-
-export const ModalWithoutJs = (args, { argTypes }) => ({
-  components: { SfModal, SfButton },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      openedModal: false,
-      jsEnabled: false,
-    };
-  },
-  methods: {
-    modalToggler() {
-      this.openedModal = !this.openedModal;
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      return (this.jsEnabled = "block");
-    });
-  },
-  template: `
-  <div>
-    <noscript inline-template>
-      <SfButton link="#modal">
-        open
-      </SfButton>
-    </noscript>      
-    <SfButton :style="{ display: jsEnabled }" @click="modalToggler">
-      open
-    </SfButton>
-    <SfModal
-      :visible="openedModal"
-      :title="title"
-      :overlay="overlay"
-      :cross="cross"
-      :persistent="persistent"
-      @close="modalToggler"
-      id="modal"
-    >
-      <p>HELLO STOREFRONT UI!  </p>    
-    </SfModal>
-  </div>`,
-});
-ModalWithoutJs.args = {
-  ...Common.args,
-};
diff --git a/packages/vue/src/components/molecules/SfModal/SfModal.vue b/packages/vue/src/components/molecules/SfModal/SfModal.vue
index 8247889ef3..16e261e7f4 100644
--- a/packages/vue/src/components/molecules/SfModal/SfModal.vue
+++ b/packages/vue/src/components/molecules/SfModal/SfModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <section
-    class="sf-modal"
-    :class="{ staticClass, className, jsEnabled: jsEnabled }"
-  >
+  <section class="sf-modal" :class="[staticClass, className]">
     <SfOverlay
       v-if="overlay"
       class="sf-modal__overlay"
@@ -12,30 +9,22 @@
     </SfOverlay>
     <transition :name="transitionModal">
       <div
-        v-if="isMounted ? visible : true"
+        v-if="visible"
         v-focus-trap
         v-click-outside="checkPersistence"
         class="sf-modal__container"
       >
         <!--@slot Use this slot to place content inside the modal bar.-->
         <slot name="modal-bar">
-          <SfBar class="sf-modal__bar smartphone-only" :title="title">
-            <template #close="{ jsEnabled }">
-              <SfButton
-                :link="jsEnabled ? null : '#'"
-                class="sf-button--pure sf-bar__icon"
-                aria-label="close"
-                type="button"
-                @click="close"
-              >
-                <SfIcon icon="cross" size="14px" />
-              </SfButton>
-            </template>
-          </SfBar>
+          <SfBar
+            class="sf-modal__bar smartphone-only"
+            :close="cross"
+            :title="title"
+            @click:close="close"
+          />
         </slot>
         <SfButton
           v-if="cross"
-          :link="jsEnabled ? null : '#'"
           class="sf-button--pure sf-modal__close desktop-only"
           aria-label="Close modal"
           type="button"
@@ -132,8 +121,6 @@ export default {
     return {
       staticClass: null,
       className: null,
-      jsEnabled: false,
-      isMounted: false,
     };
   },
   watch: {
@@ -153,14 +140,6 @@ export default {
       immediate: true,
     },
   },
-  beforeMount() {
-    this.isMounted = true;
-  },
-  mounted() {
-    this.$nextTick(() => {
-      return (this.jsEnabled = true);
-    });
-  },
   methods: {
     close() {
       this.$emit("close", false);
diff --git a/packages/vue/src/components/organisms/SfSidebar/SfSidebar.stories.js b/packages/vue/src/components/organisms/SfSidebar/SfSidebar.stories.js
index 668ac035fe..0a606fa913 100644
--- a/packages/vue/src/components/organisms/SfSidebar/SfSidebar.stories.js
+++ b/packages/vue/src/components/organisms/SfSidebar/SfSidebar.stories.js
@@ -1,4 +1,4 @@
-import { SfSidebar, SfButton } from "@storefront-ui/vue";
+import { SfSidebar } from "@storefront-ui/vue";
 export default {
   title: "Components/Organisms/Sidebar",
   component: SfSidebar,
@@ -42,7 +42,6 @@ export default {
       table: {
         category: "Props",
       },
-      defaultValue: false,
     },
     persistent: {
       control: "boolean",
@@ -57,6 +56,7 @@ export default {
       },
       defaultValue: true,
     },
+    close: { action: "Close sidebar clicked", table: { category: "Events" } },
   },
   parameters: {
     docs: {
@@ -66,35 +66,22 @@ export default {
 };
 
 const Template = (args, { argTypes }) => ({
-  components: { SfSidebar, SfButton },
+  components: { SfSidebar },
   props: Object.keys(argTypes),
-  data() {
-    return {
-      openedSidebar: this.visible,
-    };
-  },
-  methods: {
-    sidebarToggler() {
-      this.openedSidebar = !this.openedSidebar;
-    },
-  },
   template: `
-  <div>  
-    <SfButton @click="sidebarToggler" link="#sidebar" style="position: absolute; top: 50%; left: 50%;"> Open </SfButton>  
-    <SfSidebar
-      :visible="openedSidebar"
-      @close="sidebarToggler"
-      :title="title"
-      :subtitle="subtitle"
-      :heading-level="headingLevel"
-      :button="button"
-      :overlay="overlay"
-      :class="classes"
-      :persistent="persistent"
-    >
-      Total items: 0
-    </SfSidebar>
-  </div>`,
+  <SfSidebar
+    :visible="visible"
+    @close="close"
+    :title="title"
+    :subtitle="subtitle"
+    :heading-level="headingLevel"
+    :button="button"
+    :overlay="overlay"
+    :class="classes"
+    :persistent="persistent"
+  >
+    Total items: 0
+  </SfSidebar>`,
 });
 
 export const Common = Template.bind({});
@@ -168,53 +155,3 @@ export const UseCircleIconSlot = (args, { argTypes }) => ({
   </SfSidebar>`,
 });
 UseCircleIconSlot.args = { ...Common.args };
-
-export const SidebarWithoutJs = (args, { argTypes }) => ({
-  components: { SfSidebar, SfButton },
-  props: Object.keys(argTypes),
-  data() {
-    return {
-      openedSidebar: false,
-      jsEnabled: false,
-    };
-  },
-  methods: {
-    sidebarToggler() {
-      this.openedSidebar = !this.openedSidebar;
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      return (this.jsEnabled = "block");
-    });
-  },
-  template: `
-  <div>
-    <noscript inline-template>
-      <SfButton link="#sidebar">
-        open
-      </SfButton>
-    </noscript>      
-    <SfButton :style="{ display: jsEnabled }" @click="sidebarToggler">
-      open
-    </SfButton>  
-    <SfSidebar
-      :visible="openedSidebar"
-      @close="sidebarToggler"
-      :title="title"
-      :subtitle="subtitle"
-      :heading-level="headingLevel"
-      :button="button"
-      :overlay="overlay"
-      :class="classes"
-      :persistent="persistent"
-      id="sidebar"
-    >
-      <template #title="{title, subtitle, headingLevel}">
-        <div>CUSTOM TITLE</div>
-      </template>
-      Total items: 0
-    </SfSidebar>
-  </div>`,
-});
-SidebarWithoutJs.args = { ...Common.args };
diff --git a/packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue b/packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue
index 8dccead5f5..9b0e42d0e6 100644
--- a/packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue
+++ b/packages/vue/src/components/organisms/SfSidebar/SfSidebar.vue
@@ -1,12 +1,9 @@
 <template>
-  <div
-    class="sf-sidebar"
-    :class="{ staticClass, className, jsEnabled: jsEnabled }"
-  >
+  <div class="sf-sidebar" :class="[staticClass, className]">
     <SfOverlay :visible="visibleOverlay" />
     <transition :name="transitionName">
       <aside
-        v-if="isMounted ? visible : true"
+        v-if="visible"
         ref="asideContent"
         v-focus-trap
         v-click-outside="checkPersistence"
@@ -14,25 +11,17 @@
       >
         <!--@slot Use this slot to place content inside the modal bar.-->
         <slot name="bar">
-          <SfBar :title="title" class="smartphone-only" @click:back="close">
-            <template #back>
-              <SfButton
-                :link="jsEnabled ? null : '#'"
-                aria-label="back"
-                class="sf-sidebar__bar-button sf-button--pure sf-bar__icon"
-                type="button"
-                @click="close"
-              >
-                <SfIcon icon="chevron_left" size="0.875rem" />
-              </SfButton>
-            </template>
-          </SfBar>
+          <SfBar
+            :title="title"
+            class="smartphone-only"
+            :back="true"
+            @click:back="close"
+          />
         </slot>
         <!--@slot Use this slot to replace close icon.-->
         <slot name="circle-icon" v-bind="{ close, button }">
           <SfCircleIcon
             v-if="button"
-            :link="jsEnabled ? null : '#'"
             icon-size="12px"
             aria-label="Close sidebar"
             icon="cross"
@@ -79,9 +68,6 @@ import SfBar from "../../molecules/SfBar/SfBar.vue";
 import SfCircleIcon from "../../atoms/SfCircleIcon/SfCircleIcon.vue";
 import SfOverlay from "../../atoms/SfOverlay/SfOverlay.vue";
 import SfHeading from "../../atoms/SfHeading/SfHeading.vue";
-import SfIcon from "../../atoms/SfIcon/SfIcon.vue";
-import SfButton from "../../atoms/SfButton/SfButton.vue";
-
 export default {
   name: "SfSidebar",
   directives: { focusTrap, clickOutside },
@@ -90,8 +76,6 @@ export default {
     SfCircleIcon,
     SfOverlay,
     SfHeading,
-    SfIcon,
-    SfButton,
   },
   props: {
     /**
@@ -149,8 +133,6 @@ export default {
       position: "left",
       staticClass: null,
       className: null,
-      jsEnabled: false,
-      isMounted: false,
     };
   },
   computed: {
@@ -184,22 +166,13 @@ export default {
       immediate: true,
     },
   },
-  beforeMount() {
-    this.isMounted = true;
-  },
   mounted() {
     this.classHandler();
-    this.$nextTick(() => {
-      return (this.jsEnabled = true);
-    });
   },
   updated() {
     this.classHandler();
   },
   methods: {
-    isVisible() {
-      if (typeof this.jsEnabled === undefined) return false;
-    },
     close() {
       this.$emit("close");
     },
diff --git a/packages/vue/src/examples/pages/thank-you/ThankYou.vue b/packages/vue/src/examples/pages/thank-you/ThankYou.vue
index 8352fea7f2..9f9e671f6a 100644
--- a/packages/vue/src/examples/pages/thank-you/ThankYou.vue
+++ b/packages/vue/src/examples/pages/thank-you/ThankYou.vue
@@ -88,7 +88,7 @@
 <script>
 import { SfHeading, SfButton, SfCallToAction } from "@storefront-ui/vue";
 export default {
-  name: "ThankYou",
+  name: "Product",
   components: {
     SfHeading,
     SfButton,
diff --git a/packages/vue/src/stories/releases/v0.10.7/v0.10.7.stories.mdx b/packages/vue/src/stories/releases/v0.10.7/v0.10.7.stories.mdx
index 00623d7421..6fcccac6aa 100644
--- a/packages/vue/src/stories/releases/v0.10.7/v0.10.7.stories.mdx
+++ b/packages/vue/src/stories/releases/v0.10.7/v0.10.7.stories.mdx
@@ -6,8 +6,6 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 🚀 Features
 
-- SfModal modified to work without js
-- SfSidebar works without js
 - SfRange new component implemented
 - atom components refactor to functional:
   - SfBreadcrumbs
@@ -21,9 +19,9 @@ import { Meta } from "@storybook/addon-docs/blocks";
   - SfRating
   - SfSkeleton
   - SfTextarea
-- add nuxt branch for testing purposes and lighthouse ci audit on push to master and develop branches  
+- add nuxt branch for testing purposes and lighthouse ci audit on push to master and develop branches
 
 ## 🐛 Fixes
 
 - SfAccordion - header text should be aligned left when multiline
-- SfBanner, SfCategoryCard, SfTile, SfHeader, SfHero: fixed SSR mismatch
\ No newline at end of file
+- SfBanner, SfCategoryCard, SfTile, SfHeader, SfHero: fixed SSR missmatch