@total_onion/onion-library 2.0.127 → 2.0.129

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-component.vue

@@ -9,38 +9,13 @@ import PostHeadline from "./post-headline-widget.vue";
 import PostLink from "./post-link-widget.vue";
 import PostPublishDate from "./post-publish-widget.vue";
 import PostTitle from "./post-title-widget.vue";
-import SpacerV2 from "./spacer-widget.vue";
+import Spacer from "./spacer-widget.vue";
 import PostInfoDescription from "./post-info-description.vue";
 import PostInfoSubtitle from "./post-info-subtitle.vue";
 import PostTextAlternativeStyle from "./post-text-alternative-style.vue";
 import MediaImage from "./media-widget.vue";
 import BetterReviews from "./better-reviews-widget.vue";
-import ProductDetailsDescription from "./product-description.vue";
-import ProductDetailsName from "./product-details-name.vue";
-import ProductDetailsBrand from "./product-brand.vue";
-import ProductAbv from "./product-abv.vue";
-import ProductAgeStatement from "./product-age-statement.vue";
-import ProductBazaarvoice from "./product-bazaarvoice.vue";
-import ProductCaskType from "./product-cask-type.vue";
-import ProductCountry from "./product-country.vue";
-import ProductFinish from "./product-finish.vue";
-import ProductHistory from "./product-history.vue";
-import ProductLink from "./product-link.vue";
-import ProductDetailsPrice from "./product-details-price.vue";
-import ProductPrice from "./product-price.vue";
-import ProductNose from "./product-nose.vue";
-import ProductName from "./product-name.vue";
-import ProductSlug from "./product-slug.vue";
-import ProductTaste from "./product-taste.vue";
-import ProductWhiskyType from "./product-whisky-type.vue";
-import PersonName from "./person-name-widget.vue";
-import PersonEmail from "./person-email-widget.vue";
-import PersonRating from "./person-rating-widget.vue";
-import SocialMediaItem from "./social-media-item.vue";
 import BuyNow from "./buy-now-widget.vue";
-import DrinkTastes from "./drink-tastes.vue";
-import CocktailTastingNotes from "./cocktail-tasting-notes.vue";
-import CocktailCategories from "./cocktail-category.vue";
 import ShopifyAddToCart from "./shopify-add-to-cart.vue";
 const widgetComponents = {
 	PostAuthor,
@@ -52,38 +27,13 @@ const widgetComponents = {
 	PostLink,
 	PostPublishDate,
 	PostTitle,
-	SpacerV2,
+	Spacer,
 	PostInfoDescription,
 	PostTextAlternativeStyle,
 	MediaImage,
 	GlobalImage,
 	BetterReviews,
-	ProductDetailsDescription,
-	ProductDetailsBrand,
-	ProductDetailsName,
-	ProductDetailsPrice,
-	ProductPrice,
-	ProductAbv,
-	ProductAgeStatement,
-	ProductBazaarvoice,
-	ProductCaskType,
-	ProductCountry,
-	ProductFinish,
-	ProductHistory,
-	ProductLink,
-	ProductNose,
-	ProductName,
-	ProductSlug,
-	ProductTaste,
-	ProductWhiskyType,
-	PersonEmail,
-	PersonName,
-	PersonRating,
-	SocialMediaItem,
 	BuyNow,
-	CocktailTastingNotes,
-	CocktailCategories,
-	DrinkTastes,
 	PostInfoSubtitle,
 	ShopifyAddToCart,
 };
@@ -114,13 +64,6 @@ const blockClassname = "post-type-filter-grid-v3";
 </script>
 
 <template>
-	<div :class="`${blockClassname}__overlay ${blockClassname}__overlay--gradient-overlay-top`"
-		v-if="fields.enable_gradient_overlay"
-		:style="`--gradient-colour: ${props.gradientOverlayColour}; --gradient-origin: 180deg; --gradient-amount: ${fields.gradient_overlay_amount}%; --gradient-zindex: 5; --gradient-spread: ${fields.gradient_overlay_spread}%; --gradient-opacity: ${fields.gradient_overlay_opacity};--gradient-overlay-row-end: ${fields.gradient_overlay_row_end}; --gradient-overlay-row-start: ${fields.gradient_overlay_row_start};`">
-	</div>
-	<a v-if="fields.enable_post_cover_link" :href="post.link" target="_self"
-		:class="`${blockClassname}__post-cover-link`, fields.enable_post_cover_link_hover_effect ? 'post-cover-link-hover-effect' : ''"
-		:aria-label="post.title"></a>
 	<template v-for="(widget, index) in widgetNames" :key="index">
 		<component :is="widgetComponents[widget]" :post="props.post" :fields="fields" :options="options"
 			:element="props.postDataConfig[index]" :blockClassname="blockClassname" :ctaIcons="ctaIcons"

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-headline-widget.vue

@@ -9,7 +9,7 @@ const textEditorStylesString = textEditorStyles(props);
 
 </script>
 <template>
-    <h3 :class="`${blockClassname}__post-headline ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+    <h3 :class="`${blockClassname}__post-headline ${blockClassname}__info-item ${element.text_style?.typography_style.replace('__', '')}`"
         :style="`${gridLayoutString} ${textEditorStylesString}`">
         {{ element.headline_text }}
     </h3>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-image-widget.vue

@@ -3,7 +3,7 @@ import { gridLayoutElement } from "./ptfg-utils.vue";
 
 const props = defineProps(["post", "element", "fields", "imageSizesAttribute"]);
 const blockClassname = "post-type-filter-grid-v3";
-const imageType = props.element?.image_select?.slice(2);
+const imageType = props.element?.image_select?.replace('__', '');
 const imageTypeSecondary = 'image_alt';
 const setAsBackgroundImage = props.element?.set_as_background_image;
 let positioningString = '';
@@ -18,10 +18,10 @@ if (imageType === 'image_accent') {
 --element-vertical-offset-mobile: ${elementPositioning.mobile_positioning.vertical_offset}%;
 --element-horizontal-offset-desktop: ${elementPositioning.desktop_positioning.horizontal_offset}%;
 --element-vertical-offset-desktop: ${elementPositioning.desktop_positioning.vertical_offset}%;
---mobile-horizontal-placement: ${elementPositioning.mobile_positioning.horizontal_snap?.slice(2)};
---mobile-vertical-placement: ${elementPositioning.mobile_positioning.vertical_snap?.slice(2)};
---desktop-horizontal-placement: ${elementPositioning.desktop_positioning.horizontal_snap?.slice(2)};
---desktop-vertical-placement: ${elementPositioning.desktop_positioning.vertical_snap?.slice(2)};
+--mobile-horizontal-placement: ${elementPositioning.mobile_positioning.horizontal_snap?.replace('__', '')};
+--mobile-vertical-placement: ${elementPositioning.mobile_positioning.vertical_snap?.replace('__', '')};
+--desktop-horizontal-placement: ${elementPositioning.desktop_positioning.horizontal_snap?.replace('__', '')};
+--desktop-vertical-placement: ${elementPositioning.desktop_positioning.vertical_snap?.replace('__', '')};
 --element-position: ${elementPositioning.element_position};
 
 `;

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-info-description.vue

@@ -9,6 +9,7 @@ const textEditorStylesString = textEditorStyles(props);
 <template>
     <div :class="`${blockClassname}__post-info-description ${blockClassname}__info-item`"
         :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <p :class="`${element.text_style?.typography_style.slice(2)}`">{{ post.post_data.post_info_description }}</p>
+        <p :class="`${element.text_style?.typography_style.replace('__', '')}`">{{ post.post_data.post_info_description
+            }}</p>
     </div>
 </template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-info-subtitle.vue

@@ -9,6 +9,7 @@ const textEditorStylesString = textEditorStyles(props);
 <template>
     <div :class="`${blockClassname}__post-info-subtitle ${blockClassname}__info-item`"
         :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <p :class="`${element.text_style?.typography_style.slice(2)}`">{{ post.post_data.post_info_subtitle }}</p>
+        <p :class="`${element.text_style?.typography_style.replace('__', '')}`">{{ post.post_data.post_info_subtitle }}
+        </p>
     </div>
 </template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue

@@ -3,7 +3,7 @@ import { gridLayoutElement } from "./ptfg-utils.vue";
 const blockClassname = "post-type-filter-grid-v3";
 const props = defineProps(["post", "element", "mappedIcons", "ctaStyles", "blockClassname", "options"]);
 const postColour = props.post.post_data.post_colour;
-const postTextColourStyle = props.post.post_data?.post_text_colour_style?.slice(2);
+const postTextColourStyle = props.post.post_data?.post_text_colour_style?.replace('__', '');
 let ctaStyle = '';
 if (typeof props.element.cta_style == 'string') {
     ctaStyle = props.element?.cta_style?.replace("__", '');
@@ -14,11 +14,11 @@ let postCtaStyle = ctaStyle;
 let postCtaStyleValue = '';
 let ctaAnimationStyle = '';
 if (props.element?.cta_style_select) {
-    if (props.element?.cta_style_select?.slice(2) == 'post-colour') {
+    if (props.element?.cta_style_select?.replace('__', '') == 'post-colour') {
         postCtaStyle = 'post-colour';
         postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
     }
-    if (props.element?.cta_style_select?.slice(2) == 'post-text-colour-style') {
+    if (props.element?.cta_style_select?.replace('__', '') == 'post-text-colour-style') {
         postCtaStyle = 'post-text-colour-style';
         postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
     }

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-publish-widget.vue

@@ -37,7 +37,7 @@ const dateWithoutTime = computed(() => {
 });
 </script>
 <template>
-    <p :class="`${blockClassname}__post-publish-date ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
+    <p :class="`${blockClassname}__post-publish-date ${blockClassname}__info-item ${element.text_style?.typography_style.replace('__', '')}`"
         :style="`${gridLayoutString} ${textEditorStylesString}`">
         {{ dateWithoutTime }}
     </p>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-title-widget.vue

@@ -11,7 +11,7 @@ const textEditorStylesString = textEditorStyles(props);
 <template>
 	<a :href="props.post.link" :class="`${blockClassname}__post-title ${blockClassname}__info-item`"
 		:style="`${gridLayoutString}`">
-		<h3 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`"
+		<h3 :class="`${element.text_style?.typography_style.replace('__', '')}`" :style="`${textEditorStylesString}`"
 			v-html="post.post_title">
 		</h3>
 		<img :class="`${blockClassname}__post-title-icon`" v-if="element.enable_icon" :src="ctaIcons.cta_load_more_icon"

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/ptfg-utils.vue

@@ -9,33 +9,33 @@ export function gridLayoutElement(props) {
 	--grid-column-span-mobile: ${element.grid_layout_element?.grid_column_span_mobile};
 	--grid-row-start-mobile: ${element.grid_layout_element?.grid_row_start_mobile};
 	--grid-row-span-mobile: ${element.grid_layout_element?.grid_row_span_mobile};
-	--grid-horizontal-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.slice(2) : element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
-	--grid-vertical-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.slice(2) : element.grid_layout_element?.grid_vertical_placement?.slice(2)};
+	--grid-horizontal-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.replace('__', '') != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_horizontal_placement_mobile?.replace('__', '') : element.grid_layout_element?.grid_horizontal_placement?.replace('__', '')};
+	--grid-vertical-placement-mobile: ${element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.replace('__', '') != 'default' ? element.grid_layout_element?.grid_layout_mobile?.grid_vertical_placement_mobile?.replace('__', '') : element.grid_layout_element?.grid_vertical_placement?.replace('__', '')};
 	--grid-column-start-portrait: ${element.grid_layout_element?.grid_column_start_portrait};
 	--grid-column-span-portrait: ${element.grid_layout_element?.grid_column_span_portrait};
 	--grid-row-start-portrait: ${element.grid_layout_element?.grid_row_start_portrait};
 	--grid-row-span-portrait: ${element.grid_layout_element?.grid_row_span_mobile};
-	--grid-horizontal-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.slice(2) : element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
-	--grid-vertical-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.slice(2) != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.slice(2) : element.grid_layout_element?.grid_vertical_placement?.slice(2)};
+	--grid-horizontal-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.replace('__', '') != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_horizontal_placement_portrait?.replace('__', '') : element.grid_layout_element?.grid_horizontal_placement?.replace('__', '')};
+	--grid-vertical-placement-portrait: ${element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.replace('__', '') != 'default' ? element.grid_layout_element?.grid_layout_portrait?.grid_vertical_placement_portrait?.replace('__', '') : element.grid_layout_element?.grid_vertical_placement?.replace('__', '')};
 	--grid-column-start: ${element.grid_layout_element?.grid_column_start};
 	--grid-column-span: ${element.grid_layout_element?.grid_column_span};
 	--grid-row-start: ${element.grid_layout_element?.grid_row_start};
 	--grid-row-span: ${element.grid_layout_element?.grid_row_span};
-	--grid-horizontal-placement-desktop: ${element.grid_layout_element?.grid_horizontal_placement?.slice(2)};
-	--grid-vertical-placement-desktop: ${element.grid_layout_element?.grid_vertical_placement?.slice(2)};`;
+	--grid-horizontal-placement-desktop: ${element.grid_layout_element?.grid_horizontal_placement?.replace('__', '')};
+	--grid-vertical-placement-desktop: ${element.grid_layout_element?.grid_vertical_placement?.replace('__', '')};`;
 }
 
 export function textEditorStyles(props) {
 	const element = props.element;
-	const textColourType = props.element?.text_style?.text_colour?.slice(2);
+	const textColourType = props.element?.text_style?.text_colour?.replace('__', '');
 	let textColour = textColourType;
 	if (textColourType == 'post_text_colour_style') {
-		textColour = props.post.post_data?.post_text_colour_style?.slice(2);
+		textColour = props.post.post_data?.post_text_colour_style?.replace('__', '');
 	}
 	if (textColourType == 'post_colour') {
 		textColour = props.post.post_data?.post_colour;
 	}
-	return `--text-align: ${element.text_style?.text_align?.slice(2)}; 
-    --text-transform: ${element.text_style?.text_transform?.slice(2)}; --font-weight: ${element.text_style?.text_font_weight?.slice(2)}; --text-colour: ${textColour}`;
+	return `--text-align: ${element.text_style?.text_align?.replace('__', '')}; 
+    --text-transform: ${element.text_style?.text_transform?.replace('__', '')}; --font-weight: ${element.text_style?.text_font_weight?.replace('__', '')}; --text-colour: ${textColour}`;
 }
 </script>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/shopify-add-to-cart.vue

@@ -12,20 +12,14 @@ const ctaStyle = element.cta_style.replace("__", "");
 const post = props.post;
 </script>
 <template>
-	<div
-		:class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify`"
-		:data-label="`${element.shopify_text}`"
-		:data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
+	<div :class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify`"
+		:data-label="`${element.shopify_text}`" :data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
 		:data-pim="post.post_data.shopify_pim_id"
 		:style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`"
-		v-if="element.product_type.slice(2) == 'standard'"
-	></div>
-	<div
-		:class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify engraved`"
-		:data-label="`${element.shopify_text}`"
-		:data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
+		v-if="element.product_type.replace('__', '') == 'standard'"></div>
+	<div :class="`${blockClassname}__shopify shopify-add-to-cart ${blockClassname}__info-item shopify-wrapper shopify-integration has-shop shop-shopify engraved`"
+		:data-label="`${element.shopify_text}`" :data-shopifya2cbtnstyle="`cmpl-cta-style-${element.cta_style}`"
 		:data-pim="post.post_data.shopify_engraved_pim_id"
 		:style="`--post-colour: ${postColour}; --post-text-colour-style: ${postTextColourStyle}; ${gridLayoutString}`"
-		v-if="element.product_type.slice(2) == 'engraved'"
-	></div>
+		v-if="element.product_type.replace('__', '') == 'engraved'"></div>
 </template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/spacer-widget.vue

@@ -8,6 +8,6 @@ const blockClassname = "post-type-filter-grid-v3";
 </script>
 <template>
     <div :class="`${blockClassname}__spacer ${blockClassname}__info-item`"
-        :style="`${gridLayoutString}; --spacer-size-mult:${element.spacer_size}; --spacer-size-mult-portrait:${element.size_portrait}; --spacer-size-mult-mobile:${element.size_mobile}; --spacer-bg-colour:${element.spacer_background}`">
+        :style="`${gridLayoutString}; --spacer-size-mult:${element.size_desktop}; --spacer-size-mult-portrait:${element.size_portrait}; --spacer-size-mult-mobile:${element.size_mobile}; --spacer-bg-colour:${element.spacer_background}`">
     </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.127",
+	"version": "2.0.129",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {

package/public/jsAssets.mjs

@@ -27,6 +27,7 @@ const dynamicAssets = [
 	{ assetKey: "betterreviews-display-v3" },
 	{ assetKey: "accordion-v3" },
 	{ assetKey: "accent-image-v3" },
+	{ assetKey: "scrolling-banner-v3" },
 	{ assetKey: "site-copyright-notice-v3" },
 	{ assetKey: "post-type-filter-grid-v3" },
 ];

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/cocktail-category.vue

@@ -1,40 +0,0 @@
-<script setup>
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const textColourType = props.element?.text_style?.text_colour.slice(2);
-let textColour = textColourType;
-
-if (textColourType == "post_text_colour_style") {
-	textColour = props.post.post_data?.post_text_colour_style?.slice(2);
-}
-if (textColourType == "post_colour") {
-	textColour = props.post.post_data?.post_colour;
-}
-</script>
-<template>
-	<div :class="`${blockClassname}__cocktail-category ${blockClassname}__info-item`" :style="`--grid-column-start-mobile: ${element.grid_layout_element?.grid_column_start_mobile
-		}; --grid-column-span-mobile: ${element.grid_layout_element?.grid_column_span_mobile
-		}; --grid-row-start-mobile: ${element.grid_layout_element?.grid_row_start_mobile
-		}; --grid-row-span-mobile: ${element.grid_layout_element?.grid_row_span_mobile
-		}; --grid-column-start: ${element.grid_layout_element?.grid_column_start
-		}; --grid-column-span: ${element.grid_layout_element?.grid_column_span
-		}; --grid-row-start: ${element.grid_layout_element?.grid_row_start
-		}; --grid-row-span: ${element.grid_layout_element?.grid_row_span
-		}; --grid-horizontal-placement: ${element.grid_layout_element?.grid_horizontal_placement.slice(
-			2
-		)}; --grid-vertical-placement: ${element.grid_layout_element?.grid_vertical_placement.slice(
-			2
-		)}; --text-align: ${element.text_style?.text_align.slice(
-			2
-		)}; --text-transform: ${element.text_style?.text_transform.slice(
-			2
-		)}; --font-weight: ${element.text_style.text_font_weight.slice(
-			2
-		)}; --font-style: ${element.text_style.font_style.slice(
-			2
-		)}; --text-colour: ${textColour}`">
-		<p v-html="post.cocktail_category" :class="`${blockClassname}__cocktail-category--item ${element.text_style?.typography_style.slice(
-			2
-		)}`"></p>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/cocktail-tasting-notes.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-const props = defineProps(["post", "element"]);
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-const blockClassname = "post-type-filter-grid-v3";
-const element = props.element;
-</script>
-<template>
-	<div :class="`${blockClassname}__cocktail-tasting-notes ${blockClassname}__info-item`"
-		:style="`${gridLayoutString} ${textEditorStylesString}`">
-		<div v-html="props.post.post_data?.cocktail_tasting_notes"></div>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/drink-tastes.vue

@@ -1,26 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-const props = defineProps(["post", "element"]);
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-const blockClassname = "post-type-filter-grid-v3";
-const textColourType = props.element?.text_style?.text_colour.slice(2);
-let textColour = textColourType;
-
-if (textColourType == "post_text_colour_style") {
-	textColour = props.post.post_data?.post_text_colour_style?.slice(2);
-}
-if (textColourType == "post_colour") {
-	textColour = props.post.post_data?.post_colour;
-}
-</script>
-<template>
-	<div :class="`${blockClassname}__drink-tastes ${blockClassname}__info-item`"
-		:style="`${gridLayoutString} ${textEditorStylesString}`">
-		<template v-for="(category, index) in props.post.categories" :key="index">
-			<div v-if="category.taxonomy === 'taste'" v-html="category.name" :class="`${blockClassname}__drink-taste--item ${element.text_style?.typography_style.slice(
-				2
-			)}`"></div>
-		</template>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/featured-post-component.vue

@@ -1,62 +0,0 @@
-<script setup>
-const props = defineProps(["featuredpost", "fields", "mappedIcons", "ctaStyles"]);
-
-const blockClassname = "post-type-filter-grid-v3";
-let sizes = "(min-width: 1440px) 50vw, (min-width: 1024px) 50vw, (min-width: 768px) 768px') 100vw";
-const post = props.featuredpost.post;
-
-const iconImage = props.mappedIcons['cta_link_icon']['type'] == 'image/svg+xml' ? props.mappedIcons['cta_link_icon']['image'] : '<img src="' + props.mappedIcons['cta_link_icon']['image'] + '">';
-// const enableCtaIcon = props.ctaStyles[ctaStyle - 1]?.cta_settings?.include_cta_icon;
-let ctaAnimationStyle = '1';
-if (props.element?.cta_style_select) {
-	if (props.element?.cta_style_select?.slice(2) == 'post-colour') {
-		postCtaStyle = 'post-colour';
-		postCtaStyleValue = `color: ${postColour};--post-text-colour-style: ${postColour};`;
-	}
-	if (props.element?.cta_style_select?.slice(2) == 'post-text-colour-style') {
-		postCtaStyle = 'post-text-colour-style';
-		postCtaStyleValue = `color: ${postTextColourStyle};--post-text-colour-style: ${postTextColourStyle};`;
-	}
-	if (props.ctaStyles) {
-		ctaAnimationStyle = props.ctaStyles[ctaStyle - 1]?.cta_settings?.cta_animation_style;
-	}
-}
-
-</script>
-<template>
-	<a :class="`${blockClassname}__featured-post-container-link`" :href="featuredpost.post_link"
-		:aria-label="post.post_title">
-		<div :class="`${blockClassname}__featured-post-image-container`">
-			<picture>
-				<source media="(min-width: 1024px)" :srcset="props.featuredpost.post_image_src" width="1" height="1" />
-				<source :srcset="props.featuredpost.post_image_src_mobile" width="16" height="9" />
-				<img v-if="props.featuredpost.post_image_src" :class="`${blockClassname}__featured-post-image`"
-					loading="lazy" :src="props.featuredpost.post_image_src" :width="props.featuredpost.post_image_width"
-					:height="props.featuredpost.post_image_height" :srcset="props.post_image_srcset" :sizes="sizes"
-					:alt="props.post_image_alt" />
-			</picture>
-			<div v-if="featuredpost.post_category" :class="`${blockClassname}__featured-post-category`">
-				<template v-for="(category, index) in featuredpost.post_category" :key="index">
-					<p v-if="featuredpost.post_category != 'translation_priority'" v-html="category.name"
-						:class="`${blockClassname}__featured-post-category--item`">
-					</p>
-				</template>
-			</div>
-		</div>
-		<div :class="`${blockClassname}__featured-post-content-container`">
-			<h2 v-if="post.post_title" :class="`${blockClassname}__featured-post-title`" v-html="post.post_title"></h2>
-			<p v-if="featuredpost.post_info_subtitle" :class="`${blockClassname}__featured-post-subtitle`">{{
-				featuredpost.post_info_subtitle }}</p>
-			<p v-if="featuredpost.post_info_description" :class="`${blockClassname}__featured-post-description`">{{
-				featuredpost.post_info_description }}</p>
-			<a v-if="featuredpost.post_link"
-				:class="`${blockClassname}__featured-post-link ${blockClassname}__cta cmpl-cta-style-${fields.featured_post_button_style} cmpl-cta-animation-style-${ctaAnimationStyle}`"
-				:href="featuredpost.post_link">
-				<span :class="`${blockClassname}__cta-span`">Read more</span>
-				<span :class="`${blockClassname}__cta-icon cmpl-cta-icon ${blockClassname}__icon-image`"
-					v-html="iconImage">
-				</span>
-			</a>
-		</div>
-	</a>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/person-email-widget.vue

@@ -1,20 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaIcons"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-    <a :href="`mailto:${post.post_data.person_email}`"
-        :class="`${blockClassname}__person-email ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <img v-if="element.enable_icon" :class="`${blockClassname}__person-email-icon style-svg`"
-            :src="props.ctaIcons.cta_email_icon">
-        {{ element.display_email_as_person_name ? post.post_data.person_name : post.post_data.person_email.toLowerCase()
-        }}
-    </a>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/person-name-widget.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-    <p :class="`${blockClassname}__person-name ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        {{ post.post_data.person_name }}
-    </p>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/person-questionaire-widget.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element", "ctaIcons"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-
-</script>
-<template>
-    <div v-for="questions in props.post_data.person_questionaire"
-        :class="`${blockClassname}__person-email ${blockClassname}__info-item ${element.text_style?.typography_style.slice(2)}`"
-        :style="`${gridLayoutString} ${textEditorStylesString}`">
-        <img :class="`${blockClassname}__person-email-icon`" :src="props.ctaIcons.cta_email_icon">
-        {{ post.post_data.person_email }}
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/person-rating-widget.vue

@@ -1,25 +0,0 @@
-<script setup>
-import { gridLayoutElement } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-
-</script>
-<template>
-    <div :class="`${blockClassname}__person-rating ${blockClassname}__info-item`" :style="`${gridLayoutString}`">
-        <div :class="`${blockClassname}__person-rating-star-container`" :key="index">
-            <svg :class="`${blockClassname}__person-rating-star`" v-for="index in Number(post.post_data.star_rating)"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.02">
-                <defs></defs>
-                <g id="a" />
-                <g id="b">
-                    <g id="c">
-                        <polygon class="d"
-                            points="10 15.77 3.82 19.02 5 12.14 0 7.27 6.91 6.26 10 0 13.09 6.26 20 7.27 15 12.14 16.18 19.02 10 15.77" />
-                    </g>
-                </g>
-            </svg>
-        </div>
-    </div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-abv.vue

@@ -1,18 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-abv ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		<!-- TODO -->
-		<!-- --text-align: ${element.text_align.slice(2)}; -->
-		{{ post.post_data.product_abv }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-age-statement.vue

@@ -1,17 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-age-statement ${blockClassname}__info-item`" :style="`${gridLayoutString}`"
-		v-if="post.post_data.product_age_statement">
-		<h4 :class="`${element.text_style?.typography_style.slice(2)}`" :style="`${textEditorStylesString}`">
-			{{ post.post_data.product_age_statement }}
-		</h4>
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-bazaarvoice.vue

@@ -1,15 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-bazaarvoice ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		{{ post.post_data.product_bazaarvoice }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-brand.vue

@@ -1,16 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__brand ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		{{ post.post_data.product_details?.brand }}
-	</div>
-</template>

package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/product-cask-type.vue

@@ -1,16 +0,0 @@
-<script setup>
-import { gridLayoutElement, textEditorStyles } from "./ptfg-utils.vue";
-
-const props = defineProps(["post", "element"]);
-const blockClassname = "post-type-filter-grid-v3";
-const gridLayoutString = gridLayoutElement(props);
-const textEditorStylesString = textEditorStyles(props);
-</script>
-<template>
-	<div :class="`${blockClassname}__product-cask-type ${blockClassname}__info-item ${element.text_style?.typography_style.slice(
-		2
-	)}`" :style="`${gridLayoutString} ${textEditorStylesString}`">
-		<h4 v-if="element.headline_text">{{ element.headline_text }}</h4>
-		{{ post.post_data.product_cask_type }}
-	</div>
-</template>