feat: revoke modal and sidebar

vuestorefront · Jun 22, 2021 · e3e5fa6 · e3e5fa6
1 parent e9ad3fe
commit e3e5fa6
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 239 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);