feat(theme): adjustment to new SFUI version with CSS variables (#442)

Co-authored-by: Anna Musial <ania.musial13@gmail.com>

packages/default-theme/components/SwAddressList.vue

@@ -70,20 +70,19 @@ export default {
 
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles.scss';
-@import '~@storefront-ui/shared/styles/helpers/visibility';
 .shipping-list {
-  margin-bottom: $spacer-extra-big;
+  margin-bottom: var(--spacer-extra-big);
   width: 100%;
   &__address {
     display: flex;
-    padding: $spacer-big 0;
-    border-top: 1px solid $c-light;
+    padding: var(--spacer-big) 0;
+    border-top: 1px solid var(--c-light);
   }
 }
 .shipping {
   display: flex;
-  padding: $spacer-big 0;
-  border-top: 1px solid $c-light;
+  padding: var(--spacer-big) 0;
+  border-top: 1px solid var(--c-light);
   
 }
 </style>

packages/default-theme/components/SwBottomNavigation.vue

@@ -2,46 +2,70 @@
   <div class="sw-bottom-navigation">
     <SfBottomNavigation>
       <nuxt-link to="/">
-        <SfBottomNavigationItem>
-          <SfIcon icon="home" size="20px" />
-        </SfBottomNavigationItem>
+        <SfBottomNavigationItem icon="home" icon-size="20px" />
       </nuxt-link>
       <SfBottomNavigationItem class="menu-button">
-        <SfIcon icon="menu" size="20px" style="width: 25px" />
-        <SfSelect v-model="currentRoute" class="menu-button__select">
-          <SfSelectOption v-for="route in routes" :key="route.routeLabel" :value="route">
-              <SfProductOption :value="route" :label="route.routeLabel"></SfProductOption>
-          </SfSelectOption>
-        </SfSelect>
+        <template #icon>
+          <SfIcon icon="menu" size="20px" style="width: 25px" />
+          <SfSelect v-model="currentRoute" class="menu-button__select">
+            <SfSelectOption
+              v-for="route in routes"
+              :key="route.routeLabel"
+              :value="route"
+            >
+              <SfProductOption
+                :value="route"
+                :label="route.routeLabel"
+              ></SfProductOption>
+            </SfSelectOption>
+          </SfSelect>
+        </template>
       </SfBottomNavigationItem>
-      <SfBottomNavigationItem>
-        <SfIcon icon="profile" @click="userIconClick" size="20px" />
-      </SfBottomNavigationItem>
-      <SfBottomNavigationItem>
-        <SfCircleIcon
-          class="sf-bottom-navigation__floating-icon"
-          @click="toggleSidebar"
-        >
-          <SfIcon icon="add_to_cart" size="20px" color="white" />
-        </SfCircleIcon>
+      <SfBottomNavigationItem
+        icon="profile"
+        size="20px"
+        @click="userIconClick"
+      />
+      <SfBottomNavigationItem :is-floating="true">
+        <template #icon>
+          <SfCircleIcon @click="toggleSidebar">
+            <SfIcon icon="add_to_cart" size="20px" color="white" />
+          </SfCircleIcon>
+        </template>
       </SfBottomNavigationItem>
     </SfBottomNavigation>
   </div>
 </template>
 
 <script>
-import { SfButton, SfBottomNavigation, SfCircleIcon, SfIcon, SfSelect, SfProductOption } from '@storefront-ui/vue'
-import { useCartSidebar, useNavigation, useUser, useUserLoginModal } from '@shopware-pwa/composables'
+import {
+  SfBottomNavigation,
+  SfCircleIcon,
+  SfIcon,
+  SfSelect,
+  SfProductOption
+} from '@storefront-ui/vue'
+import {
+  useCartSidebar,
+  useNavigation,
+  useUser,
+  useUserLoginModal
+} from '@shopware-pwa/composables'
 import { PAGE_ACCOUNT } from '../helpers/pages'
 
-
 export default {
   name: 'SwBottomNavigation',
-  components: { SfButton, SfBottomNavigation, SfIcon, SfCircleIcon, SfSelect, SfProductOption },
+  components: {
+    SfBottomNavigation,
+    SfIcon,
+    SfCircleIcon,
+    SfSelect,
+    SfProductOption
+  },
   data() {
     return {
       navigationElements: [],
-      currentRoute: { routeLabel: '', routePath: '/' },
+      currentRoute: { routeLabel: '', routePath: '/' }
     }
   },
   setup() {
@@ -57,19 +81,19 @@ export default {
       toggleModal
     }
   },
+  watch: {
+    currentRoute(nextRoute) {
+      this.$router.push(nextRoute.routeLabel)
+    }
+  },
   methods: {
     userIconClick() {
       if (this.isLoggedIn) {
         this.$router.push(PAGE_ACCOUNT)
-        return;
+        return
       }
       this.toggleModal()
     }
-  },
-  watch: {
-    currentRoute(nextRoute) {
-      this.$router.push(nextRoute.routeLabel)
-    }
   }
 }
 </script>
@@ -84,11 +108,8 @@ export default {
     height: 100%;
   }
 }
- .sf-bottom-navigation {
-   z-index: 3;
- }
 
 ::v-deep .sf-select__selected > div:nth-child(1) > div:nth-child(1) {
   display: none;
 }
-</style>
+</style>

packages/default-theme/components/SwCart.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="cart">
     <SfSidebar
+      title="My cart"
       :visible="isSidebarOpen"
       heading-title="My Cart"
       class="sf-sidebar--right"
@@ -26,7 +27,12 @@
               <SfPrice :regular="totalPrice | price" class="sf-price--big" />
             </template>
           </SfProperty>
-          <SfButton class="sf-button--full-width" aria-label="go-to-checkout" @click="goToCheckout()">Go to checkout</SfButton>
+          <SfButton
+            class="sf-button--full-width"
+            aria-label="go-to-checkout"
+            @click="goToCheckout()"
+            >Go to checkout</SfButton
+          >
         </div>
         <div v-else key="empty-cart" class="empty-cart">
           <div class="empty-cart__banner">
@@ -48,8 +54,8 @@
 <script>
 import { SfSidebar, SfButton, SfProperty, SfPrice } from '@storefront-ui/vue'
 import { useCart, useCartSidebar } from '@shopware-pwa/composables'
-import SwCartProduct from './SwCartProduct'
 import { PAGE_CHECKOUT } from '../helpers/pages'
+import SwCartProduct from './SwCartProduct'
 
 export default {
   name: 'Cart',
@@ -80,20 +86,17 @@ export default {
   },
   methods: {
     goToCheckout() {
-      this.toggleSidebar();
-      return this.$router.push(PAGE_CHECKOUT);
+      this.toggleSidebar()
+      return this.$router.push(PAGE_CHECKOUT)
     }
-  },
+  }
 }
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 #cart {
+  --overlay-z-index: 4;
   box-sizing: border-box;
   @include for-desktop {
     max-width: 1240px;
@@ -105,20 +108,20 @@ export default {
   display: flex;
   flex-direction: column;
   &__total-items {
-    font-family: $body-font-family-secondary;
-    font-size: $font-size-big-mobile;
-    font-weight: $body-font-weight-secondary;
+    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-size-big-mobile);
+    font-weight: var(--body-font-weight-secondary);
     @include for-desktop {
-      font-size: $font-size-big-desktop;
+      font-size: var(--font-size-big-desktop);
     }
   }
   &__total-price {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 .collected-product-list {
   flex: 1;
-  margin: $spacer-big -#{$spacer-big};
+  margin: var(--spacer-big) calc(var(--spacer-big) * -1);
 }
 .empty-cart {
   flex: 1;
@@ -145,17 +148,15 @@ export default {
     text-align: center;
   }
   &__label {
-    margin-top: $spacer-extra-big;
-    font-size: $font-size-big-desktop;
+    margin-top: var(--spacer-extra-big);
+    font-size: var(--font-size-big-desktop);
   }
   &__description {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
-::v-deep .sf-overlay {
-  z-index: 4;
-}
+
 ::v-deep .sf-sidebar__aside {
   z-index: 4;
 }
-</style>
+</style>

packages/default-theme/components/SwCartProduct.vue

@@ -112,15 +112,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import '~@storefront-ui/vue/styles';
-@mixin for-desktop {
-  @media screen and (min-width: $desktop-min) {
-    @content;
-  }
-}
+
 .collected-product {
-  margin: $spacer-big 0;
+  margin: var(--spacer-big)0;
   &__properties {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
   &__actions {
     opacity: 0;

packages/default-theme/components/SwLogin.vue

@@ -94,22 +94,22 @@ export default {
 
 .sw-login {
   &__alert {
-    margin-bottom: $spacer-small;
+    margin-bottom: var(--spacer-small);
   }
   &__header {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
 }
 
 .form {
   &__input {
-    margin-bottom: $spacer-extra-big;
+    margin-bottom: var(--spacer-extra-big);
   }
   &__checkbox {
-    margin-bottom: $spacer-big;
+    margin-bottom: var(--spacer-big);
   }
   &__button {
-    margin-top: $spacer-big;
+    margin-top: var(--spacer-big);
   }
 }
 </style>

packages/default-theme/components/SwProductCard.vue

@@ -8,12 +8,12 @@
     :score-rating="getProductRating"
     :image-width="700"
     :image-height="1000"
-    :isOnWishlist="false"
+    :is-on-wishlist="false"
     :link="getRouterLink"
-    @click:wishlist="toggleWishlist"
     class="products__product-card"
-    :showAddToCartButton="true"
-    :isAddedToCart="isInCart"
+    :show-add-to-cart-button="true"
+    :is-added-to-cart="isInCart"
+    @click:wishlist="toggleWishlist"
     @click:add-to-cart="addToCart"
   >
     <template #title="{title}">
@@ -51,15 +51,15 @@ export default {
       isInCart
     }
   },
-  data() {
-    return {}
-  },
   props: {
     product: {
       type: Object,
       default: () => ({})
     }
   },
+  data() {
+    return {}
+  },
   computed: {
     getName() {
       return getProductName({ product: this.product })
@@ -85,8 +85,7 @@ export default {
     },
     getImageUrl() {
       return (
-        getProductMainImageUrl(this.product) ||
-        require('~/assets/productB.jpg')
+        getProductMainImageUrl(this.product) || require('~/assets/productB.jpg')
       )
     }
   },
@@ -108,18 +107,18 @@ export default {
   text-overflow: ellipsis;
 
   &__title {
-    font-family: $body-font-family-secondary;
-    font-size: $font-size-regular-mobile;
+    font-family: var(--body-font-family-secondary);
+    font-size: var(--font-size-regular-mobile);
     font-weight: 300;
     line-height: 1.6;
-    margin: $spacer-small 0;
-    @media (min-width: $desktop-min) {
-      margin: $spacer 0 $spacer-small;
-      font-size: $font-size-regular-desktop;
+    margin: var(--spacer-small) 0;
+    @include for-desktop {
+      margin: var(--spacer) 0 var(--spacer-small);
+      font-size: var(--font-size-regular-desktop);
     }
     &:hover {
       cursor: pointer;
-      color: $c_gray;
+      color: var(--c-gray);
     }
   }
 }