refactor: Theme update to SFUI 0.7.0

packages/commercetools/theme/package.json

@@ -13,7 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@storefront-ui/vue": "^0.6.4",
+    "@storefront-ui/vue": "^0.7.4",
     "@vue-storefront/commercetools": "^0.0.3",
     "@vue-storefront/commercetools-api": "^0.0.3",
     "@vue-storefront/nuxt": "^0.0.3",

packages/core/theme-module/theme/assets/css/reset.scss

@@ -1,9 +1,13 @@
 // Reset CSS
+html {
+  width: auto;
+  overflow-x: hidden;
+}
 body {
+  overflow-x: hidden;
   color: var(--c-text);
-  font-size: var(--font-size-regular);
-  font-family: var(--body-font-family-primary);
-  font-weight: var(--body-font-weight-primary);
+  font-size: var(--font-base);
+  font-family: var(--font-family-primary);
   margin: 0;
   padding: 0;
 }
@@ -15,30 +19,26 @@ a {
   }
 }
 h1 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h1-font-size);
-  font-weight: var(--h1-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h2 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h3 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h3-font-size);
-  font-weight: var(--h3-font-weight);
   line-height: 1.6;
   margin: 0;
 }
 h4 {
-  font-family: var(--body-font-family-secondary);
+  font-family: var(--font-family-secondary);
   font-size: var(--h4-font-size);
-  font-weight: var(--h4-font-weight);
   line-height: 1.6;
   margin: 0;
 }

packages/core/theme-module/theme/components/AppFooter.vue

@@ -7,7 +7,6 @@
           :key="item"
           >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -20,7 +19,6 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -33,7 +31,6 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
@@ -46,15 +43,14 @@
           :key="item"
         >
           <SfMenuItem
-            class="sf-footer__menu-item"
             :label="item"
           />
         </SfListItem>
       </SfList>
     </SfFooterColumn>
-    <SfFooterColumn title="Social" style="margin-left: auto">
-      <div :style="style">
-        <img v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" style="height: 0.75rem; margin-right: 1.25rem" />
+    <SfFooterColumn title="Social">
+      <div class="footer__socials">
+        <SfImage class="footer__social-image" v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" width="12" height="12" />
       </div>
     </SfFooterColumn>
   </SfFooter>
@@ -80,29 +76,6 @@ export default {
       isMobile: false,
       desktopMin: 1024
     };
-  },
-  computed: {
-    style() {
-      return this.isMobile ? { padding: '20px 40px' } : { padding: '6px 0' };
-    }
-  },
-  methods: {
-    isMobileHandler(e) {
-      this.isMobile = e.matches;
-    }
-  },
-  mounted() {
-    this.isMobile =
-      Math.max(document.documentElement.clientWidth, window.innerWidth) <
-      this.desktopMin;
-    window
-      .matchMedia('(max-width: 1024px)')
-      .addListener(this.isMobileHandler);
-  },
-  beforeDestroy() {
-    window
-      .matchMedia('(max-width: 1024px)')
-      .removeListener(this.isMobileHandler);
   }
 };
 </script>
@@ -115,10 +88,17 @@ export default {
     @content;
   }
 }
-#footer {
-  /* temporary */
-  @include for-desktop {
-    padding: 0 2.5rem;
+
+.footer {
+  &__socials {
+    padding: var(--spacer-base) var(--spacer-xl);
+
+    @media screen and (min-width: $desktop-min) {
+      padding: var(--spacer-sm) 0;
+    }
+  }
+  &__social-image {
+    margin: 0 var(--spacer-base) 0 0;
   }
 }
 </style>

packages/core/theme-module/theme/components/AppHeader.vue

@@ -5,6 +5,7 @@
     @click:account="onAccountClicked"
     :cartItemsQty="cartTotalItems"
     >
+    <!-- TODO: add mobile view buttons after SFUI team PR -->
     <template #logo>
       <nuxt-link to="/" class="sf-header__logo">
         <SfImage src="/icons/logo.svg" alt="Vue Storefront Next" class="sf-header__logo-image"/>
@@ -50,7 +51,7 @@ export default {
     const { cart } = useCart();
     const cartTotalItems = computed(() => {
       const count = cartGetters.getTotalItems(cart.value);
-      // TODO: remove once resolved by UI team: https://github.com/DivanteLtd/storefront-ui/issues/922
+      // TODO: remove once resolved by UI team: https://github.com/DivanteLtd/storefront-ui/issues/1061
       return count ? count.toString() : null;
     });
     return {

packages/core/theme-module/theme/components/BottomNavigation.vue

@@ -1,24 +1,28 @@
 <template>
+<!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="mobile-only">
     <nuxt-link to="/">
-      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''">
-        <SfIcon icon="home" size="20px" />
-      </SfBottomNavigationItem>
+      <SfBottomNavigationItem :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''" icon="home" size="20px" label="Home"/>
     </nuxt-link>
-    <SfBottomNavigationItem>
-      <SfIcon icon="menu" size="20px" style="width: 25px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem>
-      <SfIcon icon="heart" size="20px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem>
-      <SfIcon icon="profile" size="20px" />
-    </SfBottomNavigationItem>
-    <SfBottomNavigationItem class="bottom-navigation-circle">
-      <SfCircleIcon class="sf-bottom-navigation__floating-icon sf-circle-icon--big">
-        <SfIcon icon="add_to_cart" size="20px" color="white" style="margin-right: 4px;" />
-      </SfCircleIcon>
-    </SfBottomNavigationItem>
+    <SfBottomNavigationItem icon="menu" size="20px" label="Menu"/>
+    <SfBottomNavigationItem  icon="heart" size="20px" label="Wishlist"/>
+    <SfBottomNavigationItem icon="profile" size="20px" label="Account"/>
+    <!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
+  <SfBottomNavigationItem
+        label="Basket"
+        icon="add_to_cart"
+        >
+        <template #icon>
+          <SfCircleIcon aria-label="Add to cart">
+            <SfIcon
+              icon="add_to_cart"
+              color="white"
+              size="25px"
+              :style="{margin: '0 0 0 -2px'}"
+            />
+          </SfCircleIcon>
+        </template>
+      </SfBottomNavigationItem>
   </SfBottomNavigation>
 </template>