Merge pull request #367 from DivanteLtd/develop

Release v1.0.0-rc.2

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Support for Storefront UI v0.7.8
+- Support for Storefront UI v0.7.10 (#360)
 
 ### Changed / Improved
 
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Show login modal for my account link in footer (#325)
 - Tabs on the product page are not reset properly (#228)
 - Add changelog (#345)
+- Support discount coupons in mobile view (#361)
 
 ## [1.0.0-rc.1] - 2020-04-27
 

components/atoms/a-account-icon.vue

@@ -1,24 +1,26 @@
 <template>
-  <SfIcon
-    icon="profile"
-    size="xs"
-    class="sf-header__icon a-account-icon"
-    :class="{
-      'sf-header__icon--is-active': isLoggedIn
-    }"
-    role="button"
-    aria-label="account"
+  <SfButton
+    class="sf-button--pure a-account-icon"
     @click="goToAccount"
-  />
+  >
+    <SfIcon
+      icon="account"
+      size="xs"
+      class="sf-header__icon"
+      :class="{
+        'sf-header__icon--is-active': isLoggedIn
+      }"
+    />
+  </SfButton>
 </template>
 
 <script>
-import { SfIcon } from '@storefront-ui/vue';
+import { SfIcon, SfButton } from '@storefront-ui/vue';
 import { mapGetters, mapActions } from 'vuex';
 import { ModalList } from 'theme/store/ui/modals'
 
 export default {
-  components: { SfIcon },
+  components: { SfIcon, SfButton },
   computed: {
     ...mapGetters('user', ['isLoggedIn'])
   },
@@ -30,7 +32,7 @@ export default {
       if (this.isLoggedIn) {
         this.$router.push(this.localizedRoute('/my-account'))
       } else {
-        this.openModal({name: ModalList.Auth, payload: 'login'})
+        this.openModal({ name: ModalList.Auth, payload: 'login' })
       }
     }
   }

components/atoms/a-microcart-icon.vue

@@ -1,25 +1,29 @@
 <template>
-  <div class="a-microcart-icon">
+  <SfButton
+    class="sf-button--pure a-microcart-icon"
+    @click="openMicrocart"
+  >
     <SfIcon
       size="xs"
       :icon="floatingIcon ? 'add_to_cart' : 'empty_cart'"
       :class="floatingIcon ? 'sf-bottom-navigation__floating-icon' : 'sf-header__icon'"
-      role="button"
       :aria-label="$t('Open microcart')"
-      @click="openMicrocart"
-    />
-    <SfBadge v-show="!floatingIcon && totalQuantity" class="badge">
-      {{ totalQuantity }}
-    </SfBadge>
-  </div>
+    >
+      <template #badge>
+        <SfBadge v-show="!floatingIcon && totalQuantity" class="sf-icon__badge sf-badge--number">
+          {{ totalQuantity }}
+        </SfBadge>
+      </template>
+    </SfIcon>
+  </SfButton>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { SfIcon, SfBadge } from '@storefront-ui/vue';
+import { SfIcon, SfButton, SfBadge } from '@storefront-ui/vue';
 
 export default {
-  components: { SfIcon, SfBadge },
+  components: { SfIcon, SfButton, SfBadge },
   props: {
     floatingIcon: {
       type: Boolean,
@@ -46,14 +50,4 @@ export default {
     cursor: pointer;
   }
 }
-.badge {
-  position: absolute;
-  bottom: 2.2em;
-  left: 4.2em;
-  font-size: 0.6em;
-  padding: 0.3em 0;
-  border-radius: 100%;
-  width: 2.2em;
-  min-height: 2.2em;
-}
 </style>

components/molecules/m-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-menu">
+  <div class="m-menu sf-mega-menu">
     <SfMegaMenu
       :title="title || currentCategoryTitle"
       :visible="visible"
@@ -106,6 +106,7 @@ export default {
 <style lang="scss" scoped>
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 .m-menu {
+  padding: 0;
   position: absolute;
   left: 0;
   width: 100%;

components/molecules/m-price-summary.vue

@@ -32,7 +32,6 @@
         :class="{'sf-property--large': isLarge}"
       />
       <SfButton
-        v-if="allowPromoCodeRemoval"
         class="sf-button sf-button--outline promo-code__button"
         @click="removeCoupon"
       >
@@ -63,10 +62,6 @@ export default {
     isLarge: {
       type: Boolean,
       default: false
-    },
-    allowPromoCodeRemoval: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {

components/molecules/m-product-additional-info.vue

@@ -1,9 +1,9 @@
 <template>
   <SfTabs
     class="m-product-additional-info product__tabs"
-    :open-tab="openTab"
-    :key="product.id"
     id="m-product-additional-info"
+    ref="productTabs"
+    @toggle="onToggle"
   >
     <SfTab :title="$t('Description')">
       <div itemprop="description" v-html="product.description" />
@@ -15,7 +15,7 @@
         class="product__property"
       />
     </SfTab>
-    <SfTab :title="$t('Read reviews')">
+    <SfTab :title="$t('Read reviews')" ref="reviewTab">
       <div class="review-header">
         <SfHeading
           :title="$t('{count} Reviews', { count: reviewsCount })"
@@ -37,7 +37,7 @@
 
 <script>
 import { ModalList } from 'theme/store/ui/modals';
-import { mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { SfHeading, SfTabs, SfDivider } from '@storefront-ui/vue';
 import AProductRating from 'theme/components/atoms/a-product-rating';
 import AProductAttribute from 'theme/components/atoms/a-product-attribute';
@@ -68,22 +68,32 @@ export default {
     }
   },
   computed: {
-    openTab () {
-      return this.$store.state.ui.activeProductTab
-    },
+    ...mapState({
+      isReviewProductTab: state => state.ui.isReviewProductTab
+    }),
     reviewsCount () {
-      return this.reviews.length
+      return this.reviews.length;
+    }
+  },
+  watch: {
+    isReviewProductTab (value) {
+      if (value && !this.$refs.reviewTab.isActive) {
+        this.$refs.productTabs.toggle(this.$refs.reviewTab._uid);
+      }
     }
   },
   beforeDestroy () {
-    this.$store.commit('ui/setActiveProductTab', 1);
+    this.$store.commit('ui/setReviewProductTab', false);
   },
   methods: {
     ...mapActions('ui', {
       openModal: 'openModal'
     }),
     handleOpenReviewModal () {
-      this.openModal({name: ModalList.Review, payload: this.product.id})
+      this.openModal({ name: ModalList.Review, payload: this.product.id })
+    },
+    onToggle (id) {
+      this.$store.commit('ui/setReviewProductTab', id === this.$refs.reviewTab._uid);
     }
   }
 };

components/molecules/m-product-short-info.vue

@@ -64,7 +64,7 @@ export default {
   },
   methods: {
     openReviewsTab () {
-      this.$store.commit('ui/setActiveProductTab', 2);
+      this.$store.commit('ui/setReviewProductTab', true);
 
       const reviewsEl = document.querySelector('#m-product-additional-info');
       if (!reviewsEl) return;

components/molecules/m-review-list.vue

@@ -66,7 +66,7 @@ export default {
       immediate: true,
       handler (to, from) {
         if (to.query.reviewPage) {
-          this.setCurrentPage(to.query.reviewPage);
+          this.setCurrentPage(parseInt(to.query.reviewPage) || 1);
         }
       }
     }

components/organisms/o-confirm-order.vue

@@ -223,6 +223,7 @@
         </SfCheckbox>
       </div>
     </div>
+    <APromoCode class="mobile-only" :allow-promo-code-removal="false" />
     <div class="characteristics mobile-only">
       <SfCharacteristic
         v-for="characteristic in characteristics"
@@ -253,7 +254,7 @@
         </SfCheckbox>
         <APromoCode :allow-promo-code-removal="false" />
       </div>
-      <MPriceSummary class="totals__element" :allow-promo-code-removal="true" />
+      <MPriceSummary class="totals__element" />
     </div>
     <div class="actions">
       <SfButton
@@ -407,7 +408,7 @@ export default {
       });
     },
     openTermsAndConditionsModal () {
-      this.openModal({name: ModalList.TermsAndConditions})
+      this.openModal({ name: ModalList.TermsAndConditions })
     }
   },
   mounted () {
@@ -593,4 +594,10 @@ a {
 .no-flex {
   flex: unset;
 }
+.promo-code {
+  &.mobile-only {
+    max-width: 100%;
+    width: 20rem;
+  }
+}
 </style>

components/organisms/o-header.vue

@@ -7,8 +7,11 @@
     />
     <SfHeader
       :active-icon="activeIcon"
-      :is-sticky="isSearchPanelVisible"
-      :has-mobile-search="isSearchPanelVisible"
+      :class="{
+        'sf-header--has-mobile-search': isSearchPanelVisible,
+        'sf-header--is-sticky': isSearchPanelVisible
+      }"
+      :style="{'z-index': isHoveredMenu ? 2 : 1}"
     >
       <template #logo>
         <ALogo />
@@ -48,8 +51,8 @@
       </template>
       <template #header-icons>
         <div class="sf-header__icons">
-          <AAccountIcon />
-          <AMicrocartIcon />
+          <AAccountIcon class="sf-header__action" />
+          <AMicrocartIcon class="sf-header__action" />
         </div>
       </template>
     </SfHeader>
@@ -148,7 +151,7 @@ export default {
   z-index: 1;
 }
 .o-header {
-  --header-navigation-item-margin: 0 3rem 0 0;
+  --header-navigation-item-margin: 0 2rem 0 0;
   box-sizing: border-box;
   a {
     &.active {
@@ -192,9 +195,6 @@ export default {
         cursor: pointer;
       }
     }
-    &__icons > :first-child {
-      margin: 0;
-    }
   }
 }
 </style>

components/organisms/o-order-summary.vue

@@ -5,7 +5,7 @@
       :level="3"
       class="sf-heading--left sf-heading--no-underline title"
     />
-    <MPriceSummary :is-large="true" :allow-promo-code-removal="true" />
+    <MPriceSummary :is-large="true" />
     <APromoCode :allow-promo-code-removal="false" />
     <div class="characteristics">
       <SfCharacteristic

components/organisms/o-search-panel.vue

@@ -164,21 +164,17 @@ export default {
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .o-search-panel {
-  @include for-mobile {
-    --header-container-height: 6.75rem;
-  }
-
   position: fixed;
   left: 0;
   right: 0;
-  top: var(--header-container-height);
+  top: var(--_header-height);
   background: var(--c-white);
   overflow: auto;
-  max-height: calc(66vh - var(--header-container-height));
+  max-height: calc(66vh - var(--_header-height));
 
   @include for-mobile {
     top: auto;
-    max-height: calc(100vh - var(--header-container-height) - var(--bottom-navigation-height));
+    max-height: calc(100vh - var(--_header-height) - var(--bottom-navigation-height));
   }
 
   .container {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-capybara",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "New theme for Vue Storefront based on Storefront UI",
   "main": "index.js",
   "scripts": {
@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@storefront-ui/vue": "^0.7.8",
+    "@storefront-ui/vue": "0.7.10",
     "body-scroll-lock": "^3.0.1",
     "quicklink": "^2.0.0-alpha",
     "storefront-query-builder": "^1.0.0",

pages/Category.vue

@@ -2,7 +2,7 @@
   <div id="category">
     <SfBreadcrumbs class="breadcrumbs desktop-only" :breadcrumbs="breadcrumbs">
       <template #link="{breadcrumb}">
-        <router-link :to="breadcrumb.route.link" class="sf-breadcrumbs__link">
+        <router-link :to="breadcrumb.route.link" class="sf-breadcrumbs__breadcrumb">
           {{ breadcrumb.text }}
         </router-link>
       </template>
@@ -414,7 +414,7 @@ export default {
       immediate: true,
       handler (to, from) {
         if (to.query.page) {
-          this.changePage(to.query.page);
+          this.changePage(parseInt(to.query.page) || 1);
         }
       }
     }
@@ -662,6 +662,7 @@ export default {
   &__select {
     --select-padding: 0 var(--spacer-lg) 0 var(--spacer-2xs);
     --select-margin: 0;
+    --select-selected-padding: 0 var(--spacer-xl) 0 0;
   }
   &__sort {
     display: flex;