@total_onion/onion-library 2.0.58 → 2.0.60

package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.twig

@@ -1,29 +1,21 @@
 {% set blockId = block.id %}
 {% set images = fields.images %}
-{% set blockClassName = 'feature-image-gallery-v3' %}
+{% set blockClassName = 'featured-image-gallery-v3' %}
 <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} lazy" data-assetkey="{{blockClassName}}">
 
+	{% set image = get_image(images[0].image) %}
+	{% set srcset = gt_image_srcset(image) %}
+	{% set mainImageSrc = gt_image_mainsrc(image) %}
+	<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
 
-	{% if not cloudflare_config.use_cloudflare_images %}
-		<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{get_image(images[0].image).srcset}}" width="500" height="500" src="{{get_image(images[0]).src}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{get_image(images[0]).alt}}">
-	{% else %}
-		{% set image = get_image(images[0].image) %}
-		{% set srcset = gt_cf_srcset(image) %}
-		{% set mainImageSrc = gt_cf_mainsrc(image) %}
-		<img loading="lazy" class="{{blockClassName}}__featured-image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 50vw, (min-width: 1024px) 400px, 90vw" alt="{{image.alt}}">
-	{% endif %}
 
 	<div class="{{blockClassName}}__other-images">
 		{% for image in images %}
 			<div class="{{blockClassName}}__image-wrapper">
-				{% if not cloudflare_config.use_cloudflare_images %}
-					<img loading="lazy" class="{{blockClassName}}__image" srcset="{{get_image(image.image).srcset}}" width="500" height="500" src="{{get_image(image.image).src}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{get_image(image.image).alt}}">
-				{% else %}
-					{% set image = get_image(image.image) %}
-					{% set srcset = gt_cf_srcset(image) %}
-					{% set mainImageSrc = gt_cf_mainsrc(image) %}
-					<img loading="lazy" class="{{blockClassName}}__image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{image.alt}}">
-				{% endif %}
+				{% set image = get_image(image.image) %}
+				{% set srcset = gt_image_srcset(image) %}
+				{% set mainImageSrc = gt_image_mainsrc(image) %}
+				<img loading="lazy" class="{{blockClassName}}__image" srcset="{{srcset}}" width="500" height="500" src="{{mainImageSrc}}" sizes="(min-width: 1366px) 20vw, (min-width: 1024px) 20vw, 50vw " alt="{{image.alt}}">
 			</div>
 		{% endfor %}
 	</div>

package/components/block-post-info-v3/post-info-v3/post-image.twig

@@ -1,7 +1,7 @@
 {% set gridLayoutElement = include('components/grid-layout-element-v3.twig', { fields: field, block: block }, with_context = false) %}
 {% set imageSelect = field.image_select|ru %}
 {% if imageSelect == 'image_accent' %}
-	{% set positionVars = include('components/element-positioning.twig', {fields : field.post_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
+	{% set positionVars = include('components/element-positioning-v3.twig', {fields : field.post_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
 {% endif %}
 {% set imageWidthPercentMobile = '--post-image-width-mobile: ' ~ field.post_image_width ~ '%;' %}
 {% set imageWidthPercentDesktop = '--post-image-width-desktop: ' ~ field.post_image_width ~ '%;' %}

package/components/block-product-info-v3/product-info-v3/product-abv.twig

@@ -10,5 +10,5 @@
 	}
 </style>
 <div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
-	<{{elementType|default('p')}} data-pattern-post-info="abv" class="{{blockClassName}}__product-abv {{textEditorElementClasses}} {{block.id}}">{{post.product_abv}}</{{elementType|default('p')}}>
+	<{{elementType|default('p')}} data-pattern-post-info="abv" class="{{blockClassName}}__product-abv {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-abv--label">{{post.product_abv_label}}</span> {{post.product_abv}}</{{elementType|default('p')}}>
 </div>

package/components/block-product-info-v3/product-info-v3/product-volume.twig

@@ -10,5 +10,5 @@
 	}
 </style>
 <div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{blockClassName}}__info-item {{block.id}}">
-	<{{elementType|default('p')}} data-pattern-post-info="volume" class="{{blockClassName}}__product-volume {{textEditorElementClasses}} {{block.id}}">{{post.product_volume}}</{{elementType|default('p')}}>
+	<{{elementType|default('p')}} data-pattern-post-info="volume" class="{{blockClassName}}__product-volume {{textEditorElementClasses}} {{block.id}}"><span class="{{blockClassName}}__product-volume--label">{{post.product_volume_label}}</span> {{post.product_volume}}</{{elementType|default('p')}}>
 </div>

package/package.json

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

package/public/assetList.mjs

@@ -27,5 +27,8 @@ const dynamicAssets = [
 	"./components/block-betterreviews-display-v3/betterreviews-display-v3.scss",
 	"./components/block-accordion-v3/accordion-v3.scss",
 	"./components/block-accent-image-v3/accent-image-v3.scss",
+	"./components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss",
+	"./components/block-responsive-table-v3/responsive-table-v3.scss",
+	"./components/block-product-info-v3/product-info-v3.scss",
 ];
 export default dynamicAssets;

package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css

@@ -0,0 +1,62 @@
+.featured-image-gallery-v3 {
+  display: grid;
+  grid-template: "featured" "other"/1fr;
+  grid-gap: calc(var(--column-gap) / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .featured-image-gallery-v3 {
+    grid-template: "featured other"/1fr 1fr;
+    grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
+  }
+}
+.featured-image-gallery-v3__featured-image {
+  grid-area: featured;
+  -o-object-fit: cover;
+  object-fit: cover;
+  aspect-ratio: 1;
+}
+@media screen and (min-width: 768px) {
+  .featured-image-gallery-v3__featured-image {
+    width: 100%;
+    height: auto;
+  }
+}
+.featured-image-gallery-v3__other-images {
+  grid-area: other;
+  align-self: stretch;
+  justify-self: stretch;
+  place-self: stretch;
+  display: grid;
+  grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-auto-rows: 1fr;
+}
+@media screen and (min-width: 768px) {
+  .featured-image-gallery-v3__other-images {
+    grid-auto-rows: initial;
+    grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
+    grid-template-rows: 1fr 1fr 1fr;
+  }
+}
+.featured-image-gallery-v3__image-wrapper {
+  display: flex;
+  overflow: hidden;
+  box-shadow: 0px 0px 8px transparent;
+  transition: box-shadow 0.2s;
+}
+.featured-image-gallery-v3__image-wrapper:hover {
+  box-shadow: 0px 0px 8px white;
+  cursor: pointer;
+}
+.featured-image-gallery-v3__image {
+  -o-object-fit: cover;
+  object-fit: cover;
+  aspect-ratio: 1;
+  width: 100%;
+  height: auto;
+  transition: transform 0.5s ease-out, filter 0.5s;
+}
+.featured-image-gallery-v3__image:hover {
+  filter: contrast(105%);
+}

package/public/block-responsive-table-v3/responsive-table-v3.css

@@ -0,0 +1,48 @@
+.responsive-table-v3__wrapper {
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
+  gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
+  overflow: auto;
+}
+.responsive-table-v3__headings {
+  display: grid;
+  grid-auto-flow: column;
+  grid-column: 1/var(--headings);
+  grid-template-columns: subgrid;
+}
+.responsive-table-v3__heading {
+  grid-row: 1;
+  background-color: var(--background-column-headers);
+  padding: calc(5 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .responsive-table-v3__heading {
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .responsive-table-v3__heading {
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+}
+.responsive-table-v3__item {
+  display: grid;
+  grid-auto-flow: column;
+  grid-column: 1/var(--headings);
+  grid-template-columns: subgrid;
+}
+.responsive-table-v3__item-value {
+  background-color: var(--background-colour-items);
+  padding: calc(5 / var(--design-reference) * var(--screen-width));
+}
+@media screen and (min-width: 768px) {
+  .responsive-table-v3__item-value {
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .responsive-table-v3__item-value {
+    padding: calc(5 / var(--design-reference) * var(--screen-width));
+  }
+}