Merge branch 'develop' into #621

App.vue

@@ -8,8 +8,8 @@
 
 <script>
 import get from 'lodash-es/get'
-import DefaultLayout from './layouts/Default'
-import MinimalLayout from './layouts/Minimal'
+const DefaultLayout = () => import(/* webpackChunkName: "vsf-layout-default" */ './layouts/Default')
+const MinimalLayout = () => import(/* webpackChunkName: "vsf-layout-minimal" */ './layouts/Minimal')
 
 export default {
   components: {
@@ -28,10 +28,14 @@ export default {
 <style lang="scss">
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 body {
-  --overlay-z-index: 1;
+  --overlay-z-index: 2;
   --sidebar-aside-z-index: 2;
   --sidebar-z-index: 2;
   --bottom-navigation-height: 3.75rem;
+  --footer-height: 345px;
+  --_header-height: 80px;
+  --_header-mobile-height: 50px;
+  --select-dropdown-z-index: 2;
   --bar-height: 3.125rem;
   --notification-font-size: var(--font-sm);
   font-family: var(--font-family-secondary);
@@ -45,6 +49,18 @@ body {
       color: var(--c-link-hover);
     }
   }
+  .sf-select {
+    &__dropdown {
+      padding-bottom: env(safe-area-inset-bottom); //safe area padding for dropdown
+    }
+  }
+  .global--max-width {
+    min-height: calc(100vh - var(--_header-mobile-height) - var(--bottom-navigation-height));
+    @include for-desktop {
+      min-height: calc(100vh - var(--_header-height) - var(--footer-height));
+      max-width: 1272px;
+    }
+  }
 }
 
 #viewport {

CHANGELOG.md

@@ -5,10 +5,93 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.5] - ???
+
+## [1.0.6] - ???
 
 ### Added
+
 - Added `VueObserveVisibility` and `VueLazyload` dependency
+- Added safe Area of Elements in the Bottom Elements(#499)
+
+### Changed / Improved
+
+- Replaced icon size, font styling, margin and padding's hard coded values with variables(#619)
+- Improved category list and product list styling through css grid(#617)
+- Improved color of filter icon(#617)
+- Improved font size of sortby dropdown(#617)
+- Updated styling of colors in filter(#617)
+- Removed section class from navbar and main(#617)
+- Updated alignment of pagination(#617)
+- Removed filter clear button on mobile(#617)
+- Improved spacing between HTML markup(#617)
+- Removed auto overflow from o-search-panel(#613)
+- Added  auto overflow to container(#613)
+- Improved position of categories(#613)
+- Improved height of products(#613)
+- Updated padding of container on mobile(#613)
+- Updated padding values(#613)
+- Improved HTML markup by spacing between elements(#613)
+- Improved css styling by replacing flexbox to css grid(#606)
+- Improved spacing between the form elements through grid gap(#606)
+- Improved button width on desktop(#606)
+- Improved line height of message text(#606)
+- Removed styling of 'a' tag as their was no 'a' tag in the file(#606)
+- Improved HTML markup by spacing between elements(#606)
+- Improved CSS styling by using shorthand methods (#606)
+- Improved css styling by replacing flexbox to css grid(#610)
+- Added auto fill property to grid column(#610)
+- Removed update button(#610)
+- Added update click functionality to address card itself(#610)
+- Added border to address card(#610)
+- Improved delete button by using it with icon for deleting address on desktop also(#610)
+- Added hover effect to delete icon button(#610)
+- Improved HTML markup by spacing between elements(#610)
+- Refactored address form styling of my account page(#608)
+- Removed Horizontal Padding on product bottom section in product page (#534)
+- Removed backdrop filter to position sort by drop down of category page in mobile (#669)
+- Improved search on mobile (#542)
+- Added min height to the main content of the page (#503)
+- Made navbar visible while scrolling on mobile(#622)
+- Added background blur effect on mobile(#622)
+- Updated css styling by replacing flexbox to css grid(#601)
+- Updated spacing between the form elements(#601)
+- Updated spacing around login button and details heading(#601)
+- Updated width and position of login button on mobile(#601)
+- Improved HTML markup by spacing between elements(#601)
+- Improved CSS styling by using shorthand methods (#601)
+- Fix broken mega menu. Requires [one change](https://github.com/vuestorefront/vsf-capybara/issues/509#issuecomment-862174222) in the config. ([#509](https://github.com/vuestorefront/vsf-capybara/issues/509))
+- Using `getProductPrice` helper for calculating product prices in Cart/Checkout
+- Improved: the error message for the zip-code field on shipping and payment page(#589)
+- Fixed spacing of a-product-quantity(#614)
+- Improved: Z-index for dropdowns(#536)
+- Improved: Height for the micro cart on mobile (#576)
+- Fixed body scroll issue when open micro cart (#482)
+- Improved speed of carousel in m-product-carousel(#623)
+- Height of search result page on mobile (#474)
+- Replaced: the slack community link with discord link(676)
+- Updated the links of banners in product page (#445)
+- Improved: code to empty the password fields when clicking the update password button ([#679] (https://github.com/vuestorefront/vsf-capybara/issues/679))
+- Updated: code to make the tab index work on the authentication modals(#434)
+- Improved css styling by replacing flexbox to css grid(#604)
+- Improved spacing between the form elements through grid gap(#604)
+- Improved button width on desktop(#604)
+- Removed maximum width of notice text(#604)
+- Updated color of hover text(#604)
+- Improved HTML markup by spacing between elements(#604)
+- Improved CSS styling by using shorthand methods (#604)
+
+
+## [1.0.5] - 23.06.2021
+
+### Added
+
+### Changed / Improved
+- Fixed: modalComponents map type errors
+- Fixed: remove product from Cart on Desktop
+- Fixed: close Mega Menu after clicking on the Category
+- Fixed: wrong product image on PDP after clicked on filtered product from PLP
+- Fixed: set missing require for `phoneNumber` on the Checkout
+
 
 ### Changed / Improved
 - Replaced flex with css grid in product galley and info(#621)
@@ -54,6 +137,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update filters bar on category page (#381)
 - Use i18n wrapper for the login title (#438)
 - Corrected displayed the selected size option on product page (#436)
+- Fixed memory leak (#419)
 - Styling around color selector on filters in category page (#443)
 - Styling around color filters (#442)
 - Carousel time in product carousel (#444)
@@ -63,14 +147,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Used sku instead of product_id while preparing order line items product (#415)
 - Replaced deprecated action product/list call with findProducts (#417)
 - Fix hydration errors with fresh installation (#462)
-- Fixed console warning related to  value of key 'Sort by' is not a string (#476)
+- Fixed console warning related to value of key 'Sort by' is not a string (#476)
 - Update pwacompat to avoid loading multiple favicons (https://github.com/DivanteLtd/vue-storefront/issues/4559)
 - Fixed changing and deleting shipping details on MyAccount (#4499)
 - Corrected displayed price when choosing configurable product second time (#493)
 
 ## [1.0.2] - 03.07.2020
 
 ### Added
+
 ### Changed / Improved
 
 - Update sfui version to 0.7.11
@@ -84,6 +169,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.0.1] - 2020.06.02
 
 ### Added
+
 ### Changed / Improved
 
 - Support theme configuration via CLI (#369)

MIGRATION_GUIDE.md

@@ -0,0 +1,5 @@
+# Migration Guide
+
+## [1.1.0]
+
+- Add `"children_data.*"` to the `config.entities.category.includeFields` in your PWA's config to fix the mega menu. ([#509](https://github.com/vuestorefront/vsf-capybara/issues/509))

README.md

@@ -22,7 +22,7 @@ We have prepared [short introduction](https://github.com/DivanteLtd/vsf-capybara
         </a>
       </td>
       <td align="left" valign="top">
-        Try out our open demo and if you like it <strong> first give us some star on Github ★</strong> and then contact us on <a href="https://slack.vuestorefront.io">Vue Storefront Official Slack</a> or via [email protected]. <br /><br /> This demo site is connected to Magento2. <br />
+        Try out our open demo and if you like it <strong> first give us some star on Github ★</strong> and then contact us on <a href="https://discord.vuestorefront.io/">Vue Storefront Official Discord</a> or via [email protected]. <br /><br /> This demo site is connected to Magento2. <br />
       </td>
     </tr>
   </tbody>
@@ -36,7 +36,7 @@ We have prepared [short introduction](https://github.com/DivanteLtd/vsf-capybara
 
 Capybara theme provides out of the box ready to use elements, like Cart, Checkout, Modals or Product-related components - to name only a few of them, which all are based on awesome Storefront UI. It provides new look & feel for the Vue Storefront with simpler development experience. You can just grab it and use it, or you can play around to re-design existing components and build something new easily.
 
-If you're new and need some guidance feel free to visit out [forum](https://forum.vuestorefront.io/) or reach anyone from the core team on our slack:
+If you're new and need some guidance feel free to visit out [forum](https://forum.vuestorefront.io/) or reach anyone from the core team on our discord:
 - Tomasz Kikowski - [@qiqqq](https://github.com/qiqqq)
 - Tomasz Kostuch - [@gibkigonzo](https://github.com/gibkigonzo)
 - Paweł Smyrek - [@psmyrek](https://github.com/psmyrek)

components/atoms/a-back-to-top.vue

@@ -9,7 +9,7 @@
       <SfCircleIcon
         class="icon"
         icon="chevron_down"
-        icon-size="20px"
+        icon-size="xs"
         icon-color="white"
       />
     </div>

components/atoms/a-home-icon.vue

@@ -2,7 +2,7 @@
   <div class="a-home-icon">
     <SfCircleIcon
       icon="home"
-      icon-size="20px"
+      icon-size="xs"
       icon-color="black"
       class="sf-header__circle-icon"
       role="button"

components/atoms/a-loading-error.vue

@@ -50,7 +50,7 @@ export default {
     justify-content: center;
   }
   .sf-button {
-    margin: 0 1em;
+    margin: 0 var(--spacer-sm);
   }
 }
 </style>

components/atoms/a-product-quantity.vue

@@ -82,11 +82,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .a-product-quantity {
-  display: flex;
-  flex-shrink: 0;
-  height: auto;
-  width: 100%;
-  min-width: 4.625rem;
-  max-width: 5.625rem;
+justify-content: space-between;
 }
 </style>

components/atoms/a-promo-code.vue

@@ -78,7 +78,7 @@ export default {
   }
   &__button {
     --button-height: 2rem;
-    --button-font-size: 0.6875rem;
+    --button-font-size: var(--font-2xs);
   }
 }
 </style>

components/atoms/a-search-icon.vue

@@ -1,7 +1,7 @@
 <template>
   <SfCircleIcon
     icon="search"
-    icon-size="20px"
+    icon-size="xs"
     icon-color="black"
     class="sf-header__circle-icon a-search-icon"
     role="button"

components/atoms/a-sort-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <SfIcon size="15px" style="margin-left: 10px;">
+  <SfIcon size="xxs" style="margin-left: var(--spacer-xs);">
     <svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M8.32809 15.2897L12 11.7644V12.2892L8.13547 16L4.27094 12.2892V11.7644L7.94285 15.2897V6.83165H8.32809L8.32809 15.2897ZM3.67191 0.710288L0 4.23556V3.71082L3.86453 0L7.72906 3.71082V4.23556L4.05715 0.710288V9.16835H3.67191L3.67191 0.710288Z" fill="black" />
     </svg>

components/atoms/a-static.vue

@@ -45,9 +45,9 @@ export default {
 
 <style lang="scss" scoped>
 .a-static {
-  font-size: 16px;
+  font-size: var(--font-base);
   line-height: 1.6;
-  font-weight: 400;
+  font-weight: var(--font-normal);
   table {
     width: 100%;
     margin: var(--spacer-2xl) 0;

components/atoms/a-wishlist-icon.vue

@@ -2,7 +2,7 @@
   <div class="a-wishlist-icon">
     <SfCircleIcon
       icon="heart"
-      icon-size="20px"
+      icon-size="xs"
       class="sf-header__circle-icon"
       role="button"
       aria-label="wishlist"
@@ -32,8 +32,8 @@ export default {
   position: absolute;
   bottom: 2.2em;
   left: 4.2em;
-  font-size: 0.6em;
-  padding: 0.3em 0;
+  font-size: var(--font-2xs);
+  padding: var(--spacer-2xs) 0;
   border-radius: 100%;
   width: 2.2em;
   min-height: 2.2em;

components/molecules/m-cookie-notification.vue

@@ -86,9 +86,10 @@ export default {
   width: 100%;
   background-color: var(--c-dark-lighten);
   color: var(--c-light-darken);
+  padding-bottom: env(safe-area-inset-bottom);
   .cookie {
     box-sizing: border-box;
-    padding: 0 1.5rem;
+    padding: 0 var(--spacer-base);
     margin: auto;
     display: flex;
     justify-content: space-between;
@@ -97,7 +98,7 @@ export default {
     max-width: 100%;
     height: 3rem;
     &__message-link {
-      padding-left: 1rem;
+      padding-left: var(--spacer-sm);
       --c-link: var(--c-gray);
       --c-link-hover: var(--c-light);
     }

components/molecules/m-loader.vue

@@ -67,7 +67,7 @@ export default {
   &--message {
     color: #fff;
     text-align: center;
-    margin-top: 10px;
+    margin-top: var(--spacer-xs);
   }
 }
 </style>

components/molecules/m-menu.vue

@@ -61,6 +61,11 @@ export default {
       default: () => []
     }
   },
+  methods: {
+    positionSort (a, b) {
+      return a.position - b.position;
+    }
+  },
   computed: {
     ...mapState({
       isWebpSupported: state => state.ui.isWebpSupported
@@ -72,27 +77,24 @@ export default {
     }),
     categories () {
       return this.categoriesIds
-        .map(({ id, children_data: childrenData = [] }) => {
-          const subCategories = childrenData
-            .map(subCategory => prepareCategoryMenuItem(
-              this.getCategories.find(category => category.id === subCategory.id)
-            ))
-            .filter(Boolean)
-            .sort((a, b) => a.position - b.position)
+        .map(category => {
+          const subCategories = category.children_data
+            .map(subCategory => prepareCategoryMenuItem(subCategory))
+            .sort(this.positionSort)
 
-          const category = this.getCategories.find(category => category.id === id)
-          const viewAllMenuItem = prepareCategoryMenuItem({
-            ...category,
+          const subheader = prepareCategoryMenuItem(category);
+          const viewAllMenuItem = {
+            ...subheader,
             name: this.$t('View all'),
             position: 0
-          });
+          };
 
           return {
-            ...prepareCategoryMenuItem(category),
+            ...subheader,
             items: [viewAllMenuItem, ...subCategories]
           };
         })
-        .sort((a, b) => a.position - b.position);
+        .sort(this.positionSort);
     },
     currentCategoryTitle () {
       return this.getCurrentCategory.name || ''
@@ -116,7 +118,7 @@ export default {
   visibility: hidden;
   transition: 0.2s;
   .router-link-exact-active {
-    --menu-item-font-weight: bold;
+    --menu-item-font-weight: var(--font-bold);
   }
 }
 .aside-menu {

components/molecules/m-offline-badge.vue

@@ -37,5 +37,6 @@ export default {
   border-radius: 0;
   max-width: none;
   justify-content: center;
+  padding-bottom: env(safe-area-inset-bottom);
 }
 </style>