feat(default-theme)!: upgrade storefront-ui to v0.10 (#1421)

vuestorefront · May 7, 2021 · 23e4e9f · 23e4e9f · vercel · May 7, 2021
1 parent e405e96
commit 23e4e9f
Show file tree

Hide file tree

Showing 77 changed files with 1,456 additions and 1,619 deletions.
diff --git a/docs/landing/operations/migrations/0.8.x_to_0.9.x.md b/docs/landing/operations/migrations/0.8.x_to_0.9.x.md
@@ -35,3 +35,7 @@ Basic migration has 3 steps:
 1. changing imports
 2. removing mixin from component
 3. adding `$v: useVuelidate(),` in setup's `return`
+
+## [default-theme] Upgrading to Storefront-ui v0.10 (potential Breaking Change)
+
+With this release, we upgraded storefront-ui to the newest version. This required style improvements and changes in multiple components. Potentially it may break some styling in your overwritten components, shouldn't be anything too hard to fix though.
diff --git a/packages/cli/src/templates/project-template/package.json b/packages/cli/src/templates/project-template/package.json
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@shopware-pwa/nuxt-module": "latest",
+    "@storefront-ui/vue": "0.10.5",
     "@vue/test-utils": "^1.1.4",
     "@vuelidate/core": "^2.0.0-alpha.16",
     "@vuelidate/validators": "^2.0.0-alpha.13",

diff --git a/packages/default-theme/package.json b/packages/default-theme/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@shopware-pwa/theme-base": "0.8.1",
-    "@storefront-ui/vue": "0.7.18",
+    "@storefront-ui/vue": "0.10.5",
     "@vuelidate/core": "^2.0.0-alpha.16",
     "@vuelidate/validators": "^2.0.0-alpha.13",
     "core-js": "^3.9.1",

diff --git a/packages/default-theme/src/assets/scss/main.scss b/packages/default-theme/src/assets/scss/main.scss
@@ -20,41 +20,41 @@ a {
 
 /*Header styles*/
 h1 {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family--secondary);
   font-size: var(--h1-font-size);
-  font-weight: var(--h1-font-weight);
+  font-weight: var(--font-weight--bold);
   line-height: 1.6;
   margin: 0;
 }
 
 h2 {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family--secondary);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight--normal);
   line-height: 1.6;
   margin: 0;
 }
 
 h3 {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family--secondary);
   font-size: var(--h3-font-size);
-  font-weight: var(--h3-font-weight);
+  font-weight: var(--font-weight--semibold);
   line-height: 1.6;
   margin: 0;
 }
 
 h4 {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family--secondary);
   font-size: var(--h4-font-size);
-  font-weight: var(--h4-font-weight);
+  font-weight: var(--font-weight--medium);
   line-height: 1.6;
   margin: 0;
 }
 
 h5 {
-  font-family: var(--font-family-secondary);
+  font-family: var(--font-family--secondary);
   font-size: var(--h5-font-size);
-  font-weight: var(--h5-font-weight);
+  font-weight: var(--font-weight--normal);
   line-height: 1.6;
   margin: 0;
 }
@@ -63,9 +63,9 @@ body {
   padding: 0;
   margin: 0;
   min-height: 100vh;
-  font-family: var(--font-family-primary);
-  font-weight: var(--font-light);
-  font-size: var(--font-size-base);
+  font-family: var(--font-family--primary);
+  font-weight: var(--font-weight--normal);
+  font-size: var(--font-size--base);
   line-height: 1.6;
 }
 

diff --git a/packages/default-theme/src/cms/blocks/CmsBlockCenterText.vue b/packages/default-theme/src/cms/blocks/CmsBlockCenterText.vue
@@ -57,11 +57,8 @@ export default {
   &__text {
     margin: var(--spacer-sm);
     flex: 1;
-    & img {
-      height: 340px;
-      object-fit: cover;
-      width: 100%;
-    }
+    --image-height: 340px;
+    --image-width: 100%;
   }
 
   @include for-desktop {

diff --git a/packages/default-theme/src/cms/blocks/CmsBlockImageText.vue b/packages/default-theme/src/cms/blocks/CmsBlockImageText.vue
@@ -56,11 +56,8 @@ export default {
   &__text {
     margin: var(--spacer-sm);
     flex: 1;
-    & img {
-      height: 340px;
-      object-fit: cover;
-      width: 100%;
-    }
+    --image-height: 340px;
+    --image-width: 100%;
   }
 
   @include for-desktop {

diff --git a/packages/default-theme/src/cms/blocks/CmsBlockImageTextGallery.vue b/packages/default-theme/src/cms/blocks/CmsBlockImageTextGallery.vue
@@ -129,12 +129,8 @@ export default {
       }
 
       .cms-element-image {
-        img {
-          @include for-desktop {
-            height: 320px;
-            object-fit: cover;
-          }
-        }
+        --image-height: 320px;
+        --image-width: 100%;
       }
 
       &--text {

diff --git a/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue b/packages/default-theme/src/cms/elements/CmsElementCategoryNavigation.vue
@@ -4,7 +4,10 @@
       <SfHeading :level="3" :title="navTitle" />
     </div>
     <div class="cms-element-category-navigation__menu">
-      <SfHeading :subtitle="$t('No subcategories')" v-if="!navigation.length" />
+      <SfHeading
+        :description="$t('No subcategories')"
+        v-if="!navigation.length"
+      />
       <SfAccordion :show-chevron="true">
         <SfAccordionItem
           v-for="accordion in navigation"
@@ -126,8 +129,8 @@ export default {
 
 .cms-element-category-navigation {
   &__header {
-    --heading-title-font-weight: var(--font-light);
-    --heading-title-font-size: var(--font-xl);
+    --heading-title-font-weight: var(--font-weight--light);
+    --heading-title-font-size: var(--font-size--xl);
     flex: 0 0 15%;
     align-items: center;
     display: flex;

diff --git a/packages/default-theme/src/cms/elements/CmsElementContactForm.vue b/packages/default-theme/src/cms/elements/CmsElementContactForm.vue
@@ -8,6 +8,7 @@
     >
       <SfSelect
         v-if="getMappedSalutations && getMappedSalutations.length > 0"
+        class="select sf-select--underlined"
         v-model="salutation"
         :label="$t('Salutation')"
         :valid="!$v.salutation.$error"
@@ -17,7 +18,7 @@
         <SfSelectOption
           v-for="salutationOption in getMappedSalutations"
           :key="salutationOption.id"
-          :value="salutationOption"
+          :value="salutationOption.id"
           data-cy="salutation-option"
         >
           {{ salutationOption.name }}
@@ -121,7 +122,7 @@
       <SfIcon size="21px" icon="heart_fill" />
       <SfHeading
         :title="$t('Thanks!')"
-        :subtitle="$t('We\'ll contact you as soon as possible!')"
+        :description="$t('We\'ll contact you as soon as possible!')"
       />
     </div>
   </div>
@@ -302,7 +303,7 @@ export default {
 
   .button {
     &.send {
-      float: right;
+      margin-left: auto;
     }
   }
 }
@@ -317,4 +318,13 @@ export default {
   flex-direction: column;
   justify-content: center;
 }
+
+.select {
+  margin-right: var(--spacer-sm);
+  ::v-deep .sf-select__dropdown {
+    font-size: var(--font-size--lg);
+    font-family: var(--font-family--secondary);
+    color: var(--c-text);
+  }
+}
 </style>
diff --git a/packages/default-theme/src/cms/elements/CmsElementImage.vue b/packages/default-theme/src/cms/elements/CmsElementImage.vue
@@ -9,7 +9,7 @@
       :src="imgUrl"
       :title="title"
       :alt="alt"
-      :lazy="lazyLoad"
+      :loading="lazyLoad"
       class="cms-element-image"
     />
   </SwLink>
@@ -18,7 +18,7 @@
     :src="imgUrl"
     :title="title"
     :alt="alt"
-    :lazy="lazyLoad"
+    :loading="lazyLoad"
     class="cms-element-image"
   />
 </template>
@@ -45,19 +45,20 @@ export default {
 
   computed: {
     alt() {
-      return this.getMedia && this.getMedia.alt
+      return (this.getMedia && this.getMedia.alt) || " "
     },
 
     getMedia() {
       return this.content && this.content.data && this.content.data.media
     },
 
     imgUrl() {
-      return this.getMedia && this.getMedia.url
+      const url = this.getMedia && this.getMedia.url
+      return url || ""
     },
 
     lazyLoad() {
-      return true
+      return "lazy"
     },
 
     link() {
@@ -79,6 +80,6 @@ export default {
 @import "@/cms/settings.scss";
 
 .cms-element-image {
-  height: 100%;
+  --image-width: 100%;
 }
 </style>
diff --git a/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue b/packages/default-theme/src/cms/elements/CmsElementNesletterForm.vue
@@ -11,7 +11,7 @@
             ? $t('Subscribe to Newsletter')
             : $t('Subscribed to Newsletter!')
         "
-        :subtitle="
+        :description="
           !formSent
             ? $t(
                 'Be aware of upcoming sales and events. Receive gifts and special offers!'
@@ -154,7 +154,7 @@ export default {
 
 .cms-element-sign-to-newsletter {
   --heading-title-color: var(--c-white);
-  --heading-subtitle-color: var(--c-white);
+  --heading-description-color: var(--c-white);
 
   align-items: center;
   background-color: rgba($color: #000000, $alpha: 0.7);

diff --git a/packages/default-theme/src/cms/elements/CmsElementProductSlider.vue b/packages/default-theme/src/cms/elements/CmsElementProductSlider.vue
@@ -2,7 +2,11 @@
   <div class="cms-element-product-slider">
     <SfSection :title-heading="title" class="section">
       <SfCarousel class="product-carousel" :settings="options">
-        <SfCarouselItem v-for="product in products" :key="product.id">
+        <SfCarouselItem
+          v-for="product in products"
+          :key="product.id"
+          class="product-carousel__item"
+        >
           <SwProductCard :product="product" class="product-carousel__product" />
         </SfCarouselItem>
       </SfCarousel>
@@ -42,15 +46,17 @@ export default {
   data() {
     return {
       options: {
+        peek: 16,
         breakpoints: {
           480: {
             perView: 2,
             peek: {
               before: 0,
-              after: 50,
+              after: 4,
             },
           },
           1023: {
+            peek: 0,
             perView: 4,
           },
         },
@@ -63,19 +69,13 @@ export default {
 <style lang="scss" scoped>
 @import "@/cms/settings.scss";
 
-.cms-element-product-slider {
-  width: 100%;
-}
 .product-carousel {
+  margin: 0 calc(var(--spacer-sm) * -1) 0 0;
   @include for-desktop {
-    text-align: center;
-    text-align: -moz-center;
-    text-align: -webkit-center;
+    margin: 0;
   }
-  &__product {
-    @include for-mobile {
-      max-width: unset;
-    }
+  &__item {
+    margin: 1.9375rem 0 2.4375rem 0;
   }
 }
 </style>
diff --git a/packages/default-theme/src/components/SwAddress.vue b/packages/default-theme/src/components/SwAddress.vue
@@ -58,13 +58,13 @@ export default {
   margin: var(--spacer-sm);
 
   &__title {
-    font-size: var(--font-sm);
+    font-size: var(--font-size--sm);
     margin-bottom: var(--spacer-sm);
     color: var(--c-text);
   }
 
   &__content {
-    font-size: var(--font-xs);
+    font-size: var(--font-size--xs);
   }
 }
 

diff --git a/packages/default-theme/src/components/SwBottomMenu.vue b/packages/default-theme/src/components/SwBottomMenu.vue
@@ -42,7 +42,7 @@
               size="21px"
               view-box="0 0 24 12"
             />
-            ({{ category.count }})
+            ({{ category.children.length }})
           </div>
         </SfListItem>
       </SfList>
@@ -192,11 +192,11 @@ export default {
       width: 100%;
 
       .name {
-        font-weight: bolder;
+        font-weight: var(--font-weight--semibold);
       }
 
       .icon {
-        font-weight: bolder;
+        font-weight: var(--font-weight--semibold);
         left: 0;
         position: absolute;
         top: 50%;