Release 2023-10-13 (#952)

* #278156 Improve icmaa-blog headlines (#950)
* #287061 Add new Components for Festival Landingpage (#951) 
* #288858 Add newsletter-subscription CMS block (#953)

src/modules/icmaa-blog/components/List.vue

@@ -2,8 +2,8 @@
   <div>
     <slot>
       <CategoryHeadline
-        v-if="category || headline"
-        :category="category || { name: headline }"
+        v-if="aggrHeadline"
+        :category="aggrHeadline"
         :level="headlineLevel"
       />
     </slot>
@@ -124,6 +124,11 @@ export default {
     }
   },
   computed: {
+    aggrHeadline () {
+      if (this.headline && this.headline !== '') return { ...this.category, name: this.headline }
+      if (this.category) return this.category
+      return null
+    },
     showPrevPagination (): boolean {
       if (!this.pagination) return false
       const { start } = this.pagination

src/modules/icmaa-blog/components/ListCategoryHeadline.vue

@@ -4,7 +4,7 @@
     class="t-mb-4 t-flex t-flex-wrap t-items-baseline t-pr-2 t-text-xl t-text-base-dark"
   >
     <router-link
-      v-if="!isBlogPage"
+      v-if="!isBlogPage && category.url"
       :to="localizedRoute(category.url === 'root' ? { name: 'icmaa-blog-home' } : { name: 'icmaa-blog', params: { identifier: category.url } })"
       :title="$t('Show all articles')"
       class="hover:t-underline"

src/modules/icmaa-category/components/ProductListingWidget.vue

@@ -1,8 +1,16 @@
 <template>
+  <component
+    :is="AsyncProductListingTicket"
+    v-if="showAsTicketList"
+    data-test-id="TicketListingWidget"
+    :products="products"
+    class="t-px-4"
+  />
   <div
+    v-else
     data-test-id="ProductListingWidget"
     class="product-listing t-flex t-flex-wrap t-justify-start lg:t--mx-2"
-    :class="[ appearance ] "
+    :class="[ appearance ]"
   >
     <template v-for="(product) in products">
       <ProductTile
@@ -19,6 +27,8 @@
 import ProductTile from 'theme/components/core/ProductTile'
 import { mapGetters } from 'vuex'
 
+const AsyncProductListingTicket = () => import(/* webpackChunkName: "vsf-product-listing-ticket" */ 'theme/components/core/ProductListingTicket')
+
 export default {
   name: 'ProductListingWidget',
   components: {
@@ -49,6 +59,15 @@ export default {
     appearance: {
       type: String,
       default: 't-px-3 lg:t-px-4'
+    },
+    showAsTicketList: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      AsyncProductListingTicket
     }
   },
   computed: {

src/modules/icmaa-cms/components/Storyblok/ImageTabs.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div
+      class="t-flex t-w-full t-flex-col t-overflow-scroll t-hide-scrollbar t-scrolling-touch md:t-items-center"
+      :class="[ tabBackgroundStyle ]"
+    >
+      <div
+        class="t-flex t-items-center t-p-4 t-px-2"
+      >
+        <div
+          v-for="(image, i) in images"
+          :key="'tab-' + i"
+          class="t-cursor-pointer t-px-2 t-text-sm t-font-light t-uppercase lg:t-px-4"
+          :class="[ tabTextStyle, { 't-font-normal t-underline t-underline-offset-8': current === i } ]"
+          @click="current = i"
+        >
+          {{ image.title }}
+        </div>
+      </div>
+    </div>
+    <div class="images t-overflow-hidden">
+      <div
+        class="scroller t-flex"
+        :style="{'--index': current }"
+      >
+        <div
+          v-for="(img, i) in images"
+          :key="'image-' + i"
+          class="t-flex-full"
+        >
+          <router-link
+            :to="localizedRoute(img.link)"
+          >
+            <PictureComponent
+              :key="img.src"
+              :src="img.src"
+              :width="size.width"
+              :height="size.height"
+              :sizes="getSizes(img.srcMobile)"
+              :placeholder="true"
+              :preload-in-header="true"
+              :preload-in-header-prefix="'image-tab-' + i + '-'"
+              :ratio="`${size.width}:${size.height}`"
+              :alt="img.title | htmlDecode"
+            />
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PictureComponent from 'theme/components/core/blocks/Picture'
+
+export default {
+  name: 'ImageTabsComponent',
+  components: {
+    PictureComponent
+  },
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    tabTextStyle: {
+      type: String,
+      default: 't-text-white'
+    },
+    tabBackgroundStyle: {
+      type: String,
+      default: 't-bg-primary'
+    }
+  },
+  data () {
+    return {
+      current: 0
+    }
+  },
+  computed: {
+    ...mapGetters({ viewport: 'ui/getViewport' }),
+    size () {
+      if (['xs', 'sm', 'md'].includes(this.viewport)) {
+        return { width: 768, height: 768 }
+      }
+      return { width: 1248, height: 755 }
+    },
+    sizes () {
+      return [
+        { media: 'xl', width: 1248 },
+        { media: 'lg', width: 1024 },
+        { media: 'md', width: 768 },
+        { width: 425 }
+      ]
+    }
+  },
+  methods: {
+    getSizes (mobileImage) {
+      return this.sizes.map(s => {
+        if ((!s?.media || s?.media === 'md') && mobileImage) {
+          s.src = mobileImage
+        }
+        return s
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.scroller {
+  transform: translateX(calc(var(--index) * -100%));
+  transition: transform 300ms ease-in-out;
+}
+</style>

src/modules/icmaa-cms/components/Storyblok/NewsletterSubscription.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="t-mx-auto t-max-w-screen-md t-bg-white t-p-8">
+    <Newsletter
+      :headline="headline"
+      :description="description"
+    />
+  </div>
+</template>
+
+<script>
+import Newsletter from 'theme/components/core/blocks/Footer/Newsletter'
+
+export default {
+  name: 'NewsletterSubscription',
+  components: {
+    Newsletter
+  },
+  props: {
+    headline: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

src/modules/icmaa-cms/components/Storyblok/YouTube.vue

@@ -5,10 +5,12 @@
       ratio="16:9"
       icon="youtube"
       icon-set="icmaa"
-      class="t-mx-auto t-max-w-lg"
+      class="t-mx-auto"
+      :class="{'t-max-w-lg': !size }"
     >
       <iframe
-        class="youtube-video t-mx-auto t-max-w-lg"
+        class="youtube-video t-mx-auto"
+        :class="{ 't-max-w-lg': !size }"
         :src="src"
         title="YouTube video player"
         frameborder="0"
@@ -29,6 +31,10 @@ export default {
     id: {
       type: String,
       required: true
+    },
+    size: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

src/modules/icmaa-cms/components/Wrapper.vue

@@ -59,7 +59,9 @@ const AsyncTwitter = () => import(/* webpackChunkName: "vsf-content-block-twitte
 const AsyncYouTube = () => import(/* webpackChunkName: "vsf-content-block-youtube" */ 'icmaa-cms/components/Storyblok/YouTube')
 const AsyncSpotify = () => import(/* webpackChunkName: "vsf-content-block-spotify" */ 'icmaa-cms/components/Storyblok/Spotify')
 const AsyncBlogList = () => import(/* webpackChunkName: "vsf-content-block-blog-list" */ 'icmaa-blog/components/ListWrapper')
+const AsyncNewsletter = () => import(/* webpackChunkName: "vsf-content-block-newsletter" */ 'icmaa-cms/components/Storyblok/NewsletterSubscription')
 const AsyncStoryblokAsset = () => import(/* webpackChunkName: "vsf-content-block-storyblog-asset" */ 'icmaa-cms/components/Storyblok/Asset')
+const AsyncStoryblokImageTabs = () => import(/* webpackChunkName: "vsf-content-block-storyblog-image-tabs" */ 'icmaa-cms/components/Storyblok/ImageTabs')
 
 const rteComponentOptions = {
   component: AsyncText,
@@ -111,7 +113,7 @@ export default {
             placeholder: true,
             columnClass: 't-w-1/3 md:t-w-1/6 lg:t-w-1/4 t-pb-2'
           },
-          cssClass: 't-mb-4 lg:t-mb-6',
+          cssClass: 't-mb-4',
           padding: true
         },
         'component_headline': {
@@ -141,7 +143,9 @@ export default {
           propsTypes: {
             limit: 'number',
             categoryId: 'number',
-            filter: 'json'
+            filter: 'json',
+            lazyload: 'boolean',
+            showAsTicketList: 'boolean'
           },
           propsDefaults: {
             filter: {}
@@ -221,6 +225,13 @@ export default {
           cssClass: 't-mb-4',
           padding: true
         },
+        'component_newsletter': {
+          component: AsyncNewsletter,
+          propsTypes: {},
+          propsDefaults: {},
+          cssClass: 't-mb-4',
+          padding: true
+        },
         'component_asset': {
           component: AsyncStoryblokAsset,
           propsTypes: {
@@ -232,6 +243,15 @@ export default {
           propsDefaults: {},
           cssClass: 't-mb-4',
           padding: true
+        },
+        'component_image_tabs': {
+          component: AsyncStoryblokImageTabs,
+          propsTypes: {
+            images: 'json'
+          },
+          propsDefaults: {},
+          cssClass: 't-mb-4',
+          padding: true
         }
       }
     },

src/modules/icmaa-newsletter/pages/Newsletter.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     id="newsletter-page"
-    :headline="content.headline"
   >
     <div class="t-container">
       <div class="t--mx-4 t-mb-8 t-flex t-flex-wrap t-px-4 md:t-mx-0 md:t-mt-4 lg:t-w-full">
@@ -54,21 +53,24 @@
           <span class="t-sr-only">{{ $t('Submit') }}</span>
         </button>
       </div>
-      <p
-        class="t-mt-4 t-text-xs t-text-base-light lg:t-mt-2"
-        v-html="content.hint"
-      />
       <i18n
         path="Data is not given to third parties and unsubscription is possible at any time. {policy}"
         tag="p"
-        class="t-mb-4 t-text-xs t-leading-none t-text-base-light"
+        class="t-mb-2 t-mt-4 t-text-xs t-leading-none t-text-base-light"
       >
         <template #policy>
-          <router-link :to="localizedRoute('/service-privacy')">
+          <router-link
+            :to="localizedRoute('/service-privacy')"
+            class="t-underline"
+          >
             {{ $t('Privacy Policy') }}
           </router-link>
         </template>
       </i18n>
+      <p
+        class="t-text-xs t-leading-none t-text-base-light"
+        v-html="content.hint"
+      />
       <NewsletterPopup v-if="loadNewsletterPopup" />
     </div>
   </div>
@@ -77,7 +79,6 @@
 <script>
 import Page from 'icmaa-cms/mixins/Page'
 import NewsletterMixin from 'theme/mixins/newsletterMixin'
-import SubscriptionStatus from '@vue-storefront/core/modules/newsletter/mixins/SubscriptionStatus'
 import MaterialIcon from 'theme/components/core/blocks/MaterialIcon'
 import PictureComponent from 'theme/components/core/blocks/Picture'
 
@@ -90,7 +91,7 @@ export default {
     NewsletterPopup,
     PictureComponent
   },
-  mixins: [ Page, NewsletterMixin, SubscriptionStatus ],
+  mixins: [ Page, NewsletterMixin ],
   data () {
     return {
       loadNewsletterPopup: false,

src/themes/icmaa-imp/components/core/ProductListingTicket.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="product-listing t-mb-8 t-px-4">
+  <div class="product-listing">
     <ul>
       <template v-for="(product, i) in products">
         <ProductTileTicket

src/themes/icmaa-imp/components/core/blocks/Footer/Footer.vue

@@ -80,7 +80,7 @@
               </template>
             </div>
           </div>
-          <Newsletter class="t-px-4 md:t-mb-0 md:t-w-1/3" />
+          <Newsletter class="t-mb-4 t-px-4 md:t-mb-0 md:t-w-1/3" />
         </div>
       </div>
     </div>